/*
  SigmaX Labs — production stylesheet.
  Ported from the SigmaX Labs Design System (see /project/_ds/.../readme.md):
  dark-mode-first, one electric-teal accent, three-family type system
  (Space Grotesk / IBM Plex Sans / JetBrains Mono), hairline borders over
  shadows, near-flat surfaces, one CTA glow.
*/

/* Fonts are loaded via <link> in index.html (parallel fetch; a CSS @import
   here would serialize behind this stylesheet and delay text rendering). */

:root {
  /* ---- Ink (neutrals) ---- */
  --ink-1000: #05070a;
  --ink-950: #0a0e14;
  --ink-900: #10151d;
  --ink-850: #141a23;
  --ink-800: #1a212c;
  --ink-700: #232b38;
  --ink-600: #2c3543;
  --ink-500: #3a4451;
  --ink-400: #5c6773;
  --ink-300: #7d8894;
  --ink-50:  #f4f6f8;

  /* ---- Teal (primary accent) ---- */
  --teal-600: #14a68d;
  --teal-500: #2de0c2;
  --teal-400: #5aebd4;

  /* ---- Blue (secondary accent, from the logo mark — unused as UI accent) ---- */

  /* ---- Semantic aliases ---- */
  --surface-page: var(--ink-950);
  --surface-page-alt: var(--ink-1000);
  --surface-raised: var(--ink-900);
  --surface-card: var(--ink-850);
  --surface-card-hover: var(--ink-800);

  --border-subtle: var(--ink-700);
  --border-default: var(--ink-600);
  --border-strong: var(--ink-500);

  --text-primary: var(--ink-50);
  --text-secondary: var(--ink-300);
  /* Not ink-400: that scale step is 3.35:1 on --surface-page (and worse
     on --surface-card, where this token is also used), below WCAG AA's
     4.5:1 for normal text. Lightened just enough to clear 4.5:1 against
     both surfaces, kept off the shared scale so ink-400's other use (a
     hover border, no contrast requirement) is unaffected. */
  --text-tertiary: #78838f;
  --text-disabled: var(--ink-500);
  --text-accent: var(--teal-500);

  --accent-default: var(--teal-500);
  --accent-hover: var(--teal-400);
  --accent-active: var(--teal-600);
  --accent-subtle: rgba(45, 224, 194, 0.12);
  --accent-subtle-border: rgba(45, 224, 194, 0.32);
  --accent-on-accent: var(--ink-1000);

  --focus-ring: var(--teal-400);

  /* ---- Type ---- */
  --font-display: "Red Hat Display", "Arial Narrow", Helvetica, sans-serif;
  --font-body: "Red Hat Text", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.02em;
  --tracking-eyebrow: 0.14em;

  --text-display-1-size: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);
  --text-display-2-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --text-heading-1-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --text-heading-2-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-body-lg-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-mono-lg-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);

  /* ---- Spacing / radius ---- */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --content-max-width: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-pad-y: clamp(48px, 8vw, 110px);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* ---- Effects / motion ---- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
  --glow-accent-sm: 0 0 0 1px rgba(45, 224, 194, 0.4), 0 0 20px rgba(45, 224, 194, 0.20);
  --glow-accent-md: 0 0 0 1px rgba(45, 224, 194, 0.45), 0 0 40px rgba(45, 224, 194, 0.28);
  --shadow-focus-ring: 0 0 0 3px rgba(90, 235, 212, 0.35);

  --backdrop-nav: rgba(10, 14, 20, 0.78);
  --blur-nav: 12px;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-instant: 100ms;
  --duration-fast: 150ms;
}

/* ============ Reset ============ */

* { box-sizing: border-box; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, figure { margin: 0; }

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

a { color: inherit; }

::selection {
  background: var(--accent-subtle-border);
  color: var(--text-primary);
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
  border-radius: var(--radius-sm);
}

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -48px;
  z-index: 100;
  background: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  text-decoration: none;
  font-weight: 600;
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus { top: var(--space-4); }

/* Brand signature: numeric/data figures always set in mono */
.sx-figure {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-variant-numeric: tabular-nums;
}

/* ============ Layout ============ */

.sx-container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.sx-section {
  position: relative;
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  scroll-margin-top: 84px; /* fixed nav clearance for anchor jumps */
}

.sx-section-alt {
  background: var(--surface-page-alt);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  scroll-margin-top: 84px;
}

.sx-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* ============ Ambient background ============
   Fixed layer behind the content column so wide-screen margins carry the
   brand instead of flat ink: faint dot grid, two slow-drifting teal glows,
   two outlined Σ watermarks. Tokens only — no imagery (per design system). */

main, .sx-sitefooter {
  position: relative;
  z-index: 1;
}

.sx-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.sx-ambient-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--ink-600) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.22;
  mask-image: radial-gradient(ellipse 100% 90% at 50% 42%, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 100% 90% at 50% 42%, black 30%, transparent 85%);
}

/* Blueprint rulers: tick marks in the wide-screen margins, on-brand with
   the "precision engineer" positioning. Fixed to viewport (doesn't need
   to track scroll position to read as a technical instrument). */
.sx-ambient-rule {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  opacity: 0.9;
  background-image:
    repeating-linear-gradient(to bottom,
      var(--text-tertiary) 0, var(--text-tertiary) 2px,
      transparent 2px, transparent 96px),
    repeating-linear-gradient(to bottom,
      var(--border-strong) 0, var(--border-strong) 1px,
      transparent 1px, transparent 24px);
  display: none;
}
@media (min-width: 1180px) {
  .sx-ambient-rule { display: block; }
  .sx-ambient-rule-left { left: clamp(28px, 4vw, 56px); }
  .sx-ambient-rule-right { right: clamp(28px, 4vw, 56px); }
}

.sx-ambient-glow {
  position: absolute;
  width: clamp(380px, 48vw, 740px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}
.sx-ambient-glow-a {
  left: min(-8vw, -100px);
  top: 6vh;
  background: radial-gradient(circle, rgba(45, 224, 194, 0.20), transparent 70%);
  animation: sx-orbit-a 26s ease-in-out infinite alternate;
}
.sx-ambient-glow-b {
  right: min(-10vw, -120px);
  bottom: -12vh;
  background: radial-gradient(circle, rgba(45, 224, 194, 0.15), transparent 70%);
  animation: sx-orbit-b 34s ease-in-out infinite alternate;
}
.sx-ambient-glow-c {
  width: clamp(320px, 38vw, 560px);
  left: 50%;
  top: 130vh;
  background: radial-gradient(circle, rgba(45, 224, 194, 0.10), transparent 70%);
  animation: sx-orbit-c 30s ease-in-out infinite alternate;
}
@keyframes sx-orbit-a {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(6vw, 9vh, 0); }
}
@keyframes sx-orbit-b {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-5vw, -8vh, 0); }
}
@keyframes sx-orbit-c {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(-50%, 6vh, 0); }
}

.sx-ambient-sigma {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-800);
  opacity: 0.55;
}
@supports not (-webkit-text-stroke: 1px black) {
  .sx-ambient-sigma { color: var(--ink-900); opacity: 0.5; }
}
.sx-ambient-sigma-left {
  font-size: clamp(220px, 24vw, 430px);
  left: -0.16em;
  bottom: 5vh;
  transform: rotate(-8deg);
}
.sx-ambient-sigma-right {
  font-size: clamp(170px, 18vw, 330px);
  right: -0.14em;
  top: 32vh;
  transform: rotate(6deg);
}

/* On phones the content column is full-bleed; watermarks would sit under
   the text and read as clutter. Keep just the grid + softer glows. */
@media (max-width: 900px) {
  .sx-ambient-sigma { display: none; }
  .sx-ambient-glow { filter: blur(64px); opacity: 0.8; }
}

/* ============ Reveal system ============
   Scroll-reveal fade-up, driven by GSAP when available, otherwise by an
   IntersectionObserver + these CSS transitions (see index.html). Hidden
   state is gated on .sx-js (set by an inline head script): if JS never
   runs, content is simply visible. */
@keyframes sx-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.sx-js .sx-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.sx-js .sx-reveal.is-inview {
  opacity: 1;
  transform: none;
}

/* Children of a revealed section cascade in a beat behind it. Keyframes
   (not transitions) so the stagger delay never leaks into hover effects. */
.sx-js .sx-reveal .sx-leak,
.sx-js .sx-reveal .sx-week,
.sx-js .sx-reveal .sx-bento-cell,
.sx-js .sx-reveal .sx-proof-card,
.sx-js .sx-reveal .sx-founder-row {
  opacity: 0;
}
.sx-js .sx-reveal.is-inview .sx-leak,
.sx-js .sx-reveal.is-inview .sx-week,
.sx-js .sx-reveal.is-inview .sx-bento-cell,
.sx-js .sx-reveal.is-inview .sx-proof-card,
.sx-js .sx-reveal.is-inview .sx-founder-row {
  opacity: 1;
  /* backwards fill: keyframes hold the hidden state through the delay,
     then release control after finishing so hover transforms still work */
  animation: sx-rise 0.6s var(--ease-out) backwards;
}
.sx-js .sx-reveal.is-inview .sx-leak:nth-child(2),
.sx-js .sx-reveal.is-inview .sx-week:nth-child(2),
.sx-js .sx-reveal.is-inview .sx-bento-cell:nth-child(2) { animation-delay: 0.12s; }
.sx-js .sx-reveal.is-inview .sx-leak:nth-child(3),
.sx-js .sx-reveal.is-inview .sx-week:nth-child(3),
.sx-js .sx-reveal.is-inview .sx-bento-cell:nth-child(3) { animation-delay: 0.24s; }
.sx-js .sx-reveal.is-inview .sx-leak:nth-child(4),
.sx-js .sx-reveal.is-inview .sx-bento-cell:nth-child(4) { animation-delay: 0.36s; }

/* Hero entrance for the no-GSAP path: content stacks in on page load. */
.sx-js:not(.sx-gsap) .sx-hero-copy > * {
  animation: sx-rise 0.7s var(--ease-out) both;
}
.sx-js:not(.sx-gsap) .sx-hero-copy > :nth-child(1) { animation-delay: 0.05s; }
.sx-js:not(.sx-gsap) .sx-hero-copy > :nth-child(2) { animation-delay: 0.14s; }
.sx-js:not(.sx-gsap) .sx-hero-copy > :nth-child(3) { animation-delay: 0.23s; }
.sx-js:not(.sx-gsap) .sx-hero-copy > :nth-child(4) { animation-delay: 0.32s; }
.sx-js:not(.sx-gsap) .sx-hero-trust {
  animation: sx-rise 0.7s var(--ease-out) both;
  animation-delay: 0.4s;
}

/* When GSAP drives the motion (html.sx-gsap), neutralize the CSS reveal
   transitions/animations so the two systems never fight over the same
   properties — GSAP sets inline styles from a clean, visible baseline. */
.sx-gsap .sx-reveal,
.sx-gsap .sx-reveal .sx-leak,
.sx-gsap .sx-reveal .sx-week,
.sx-gsap .sx-reveal .sx-bento-cell,
.sx-gsap .sx-reveal .sx-proof-card,
.sx-gsap .sx-reveal .sx-founder-row {
  opacity: 1;
  transform: none;
  transition: none;
  animation: none;
}
.sx-gsap .sx-hero-copy > *, .sx-gsap .sx-hero-trust { animation: none; }

/* SplitText line wrappers: clip so headline words rise in from a mask */
.sx-gsap .sx-line { overflow: clip; }

@keyframes sx-breathe {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.95; }
}

/* Print/PDF and any other non-interactive render path: force everything
   visible and drop the ambient chrome. */
@media print {
  .sx-reveal,
  .sx-reveal .sx-leak,
  .sx-reveal .sx-week,
  .sx-reveal .sx-bento-cell,
  .sx-reveal .sx-proof-card,
  .sx-reveal .sx-founder-row,
  .sx-hero-copy > *,
  .sx-hero-trust {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .sx-ambient, .sx-nav, .sx-mobile-cta { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ Brand signature: eyebrow + divider ============ */

.sx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: 600 0.75rem/1.3 var(--font-body);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}
.sx-eyebrow::before {
  content: "\03A3";
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05em;
  line-height: 1;
}

/* ============ Sticky nav ============
   The design system reserves backdrop blur for exactly one use: a sticky
   nav scrim. Transparent over the hero; scrim + hairline after scroll. */

.sx-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.sx-nav.is-scrolled {
  background: var(--backdrop-nav);
  -webkit-backdrop-filter: blur(var(--blur-nav));
  backdrop-filter: blur(var(--blur-nav));
  border-bottom-color: var(--border-subtle);
}
.sx-nav-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.sx-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.sx-nav-glyph {
  width: 28px;
  height: 28px;
  display: block;
}
.sx-nav-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.sx-nav-links {
  display: none;
  align-items: center;
  gap: 26px;
}
.sx-nav-links a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.sx-nav-links a:hover { color: var(--text-accent); }
@media (min-width: 900px) {
  .sx-nav-links { display: inline-flex; }
}
@media (max-width: 640px) {
  /* Two-class selector beats the later, unconditional .sx-btn display
     rule regardless of source order. Sticky bottom CTA covers mobile. */
  .sx-nav-cta.sx-btn { display: none; }
}

.sx-btn-sm {
  height: 40px;
  padding: 0 18px;
  font-size: 14px;
}

/* ============ Hero ============ */

.sx-hero {
  position: relative;
  overflow: hidden;
}

/* Empty by default — see the comment on .sx-hero-media in index.html for
   how to drop a generated background clip into this slot later. */
.sx-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Skip the autoplay loop on small screens — mobile data/battery, and the
   hero already sheds the terminal panel below this width. The ambient CSS
   layer alone still carries the background there. */
@media (max-width: 900px) {
  .sx-hero-media { display: none; }
}
.sx-hero-media-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.sx-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: clamp(96px, 14vh, 150px) var(--gutter) clamp(40px, 7vw, 84px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  min-height: 92dvh;
}
@media (min-width: 980px) {
  .sx-hero-inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr); }
}

.sx-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 2.2vw, 18px);
  max-width: 760px;
}

/* Signature visual panel: square card in the hero's right column (the
   space the removed fake-terminal panel used to occupy), holding the
   HyperFrames dot-formation loop. Hidden below 980px, same breakpoint
   the grid itself collapses at -- mobile keeps the tight single-column
   hero fold, consistent with .sx-hero-media's own mobile behavior. */
.sx-hero-visual {
  display: none;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs), 0 24px 60px rgba(0, 0, 0, 0.35);
}
@media (min-width: 980px) {
  .sx-hero-visual { display: block; }
}
.sx-hero-visual-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slim trust strip directly below the hero: the guarantee line + capacity
   badge used to live inside the hero stack, but that pushed it to 6 text
   elements (eyebrow/headline/subtext/CTA/guarantee/badge) — kept here
   instead so they're still the first thing visible after the hero, just
   no longer counted as part of it. */
.sx-hero-trust {
  position: relative;
  z-index: 1;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(32px, 6vw, 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.sx-hero-ghost {
  position: absolute;
  top: -0.06em;
  right: -0.14em;
  font-family: var(--font-mono), Georgia, serif;
  font-weight: 700;
  font-size: clamp(300px, 42vw, 620px);
  line-height: 0.9;
  color: var(--ink-800);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  animation: sx-ghost-drift 18s ease-in-out infinite alternate;
}
@keyframes sx-ghost-drift {
  from { transform: translate3d(0, -8px, 0); }
  to { transform: translate3d(0, 14px, 0); }
}

.sx-hero-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--ink-600) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.28;
  mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
  pointer-events: none;
  z-index: 0;
}

/* One-time "audit scan" sweep on load — ties to the terminal's own
   `sigmax audit --scan` line and, being scroll-independent, gives an
   immediate sense of motion before the visitor scrolls at all. */
.sx-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(to right,
    transparent, rgba(45, 224, 194, 0.9) 45%, rgba(45, 224, 194, 0.9) 55%, transparent);
  box-shadow: 0 0 24px 4px rgba(45, 224, 194, 0.55);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.sx-eyebrow-hero { font-size: 0.8125rem; }

.sx-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-1-size);
  line-height: 1.04;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  max-width: 16ch;
  margin: 0;
}

.sx-subline {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 46ch;
  margin: 0;
}

.sx-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.sx-cta-row-center { justify-content: center; }

.sx-cta-glow-wrap {
  position: relative;
  display: inline-block;
}
.sx-cta-glow {
  position: absolute;
  inset: -14px -22px;
  background: radial-gradient(closest-side, rgba(45, 224, 194, 0.26), transparent 74%);
  opacity: 0.7;
  animation: sx-breathe 5s ease-in-out infinite;
  pointer-events: none;
}

.sx-guarantee {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-accent);
  max-width: 44ch;
  margin: 0;
}


/* ============ Buttons ============ */

.sx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  height: 52px;
  padding: 0 28px;
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-instant) var(--ease-standard);
}
.sx-btn:hover { transform: translateY(-1px); }

.sx-btn-primary {
  background: var(--accent-default);
  color: var(--accent-on-accent);
  border: 1px solid transparent;
  box-shadow: var(--glow-accent-sm);
}
.sx-btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--glow-accent-md);
}

.sx-btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.sx-btn-secondary:hover {
  background: var(--surface-card-hover);
  border-color: var(--ink-400);
}

/* ============ Badge ============ */

.sx-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: var(--accent-subtle);
  color: var(--text-accent);
  border: 1px solid var(--accent-subtle-border);
}
.sx-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ============ Card ============ */

.sx-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.sx-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  background: var(--surface-card-hover);
}
.sx-card-accent {
  border-color: var(--accent-subtle-border);
  box-shadow: var(--glow-accent-sm);
}
.sx-card-accent:hover {
  border-color: var(--accent-subtle-border);
  box-shadow: var(--glow-accent-md);
}
.sx-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.sx-card-body {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

/* ============ Stat figure ============ */

.sx-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sx-stat-value {
  font-weight: 500;
  color: var(--text-primary);
}
.sx-stat-value-lg { font-size: var(--text-mono-lg-size); line-height: 1.1; }
.sx-stat-value-md { font-size: 1.125rem; line-height: 1.4; }
.sx-stat-accent { color: var(--text-accent); }
.sx-stat-label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-tertiary);
}

/* ============ Icon ============ */

.sx-icon-tile {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-subtle);
  border: 1px solid var(--accent-subtle-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ============ Section headings ============ */

.sx-h2-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-2-size);
  line-height: 1.05;
  color: var(--text-primary);
  margin: 14px 0 0;
}

/* ============ Problem: leak ledger ============ */

.sx-leaks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-6);
  margin-top: clamp(28px, 4vw, 44px);
}
.sx-leak {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.sx-leak:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  background: var(--surface-card-hover);
}
.sx-leak-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--text-primary);
  margin: 14px 0 6px;
}
.sx-leak-desc {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.sx-leak-total {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 26px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
}
.sx-leak-total .sx-stat-label { max-width: 40ch; }

/* ============ SigmaX Leak Index ============ */

.sx-leak-index {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 26px;
  border-top: 1px solid var(--border-subtle);
}
.sx-leak-index-head { margin-bottom: var(--space-4); }
.sx-leak-index-intro {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin: 8px 0 0;
}

.sx-leak-calc {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}
@media (min-width: 900px) {
  .sx-leak-calc { grid-template-columns: 1fr 1.1fr; align-items: start; }
}

/* ---- Inputs: business-type tabs + sliders ---- */
/* Same card treatment as .sx-leak-result (border/bg/radius/padding) so the
   two columns read as matching panels. Columns are NOT height-matched —
   stretching the shorter result card left it looking hollow, so instead
   the slider column is kept as compact as possible (merged example text,
   tight gaps below) to narrow the natural gap instead. */
.sx-leak-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: clamp(20px, 3vw, 28px);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.sx-leak-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sx-leak-field-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.sx-leak-biztabs { flex-wrap: wrap; }

.sx-icon-tile-sm {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  border: 1px solid var(--accent-subtle-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sx-leak-sliders {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sx-leak-slider-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.sx-leak-slider-label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-primary);
  flex: 0 1 auto;
}
.sx-leak-slider-example {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-tertiary);
  flex: 1 1 0;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sx-leak-slider-value {
  font-size: 0.8125rem;
  color: var(--text-accent);
  flex-shrink: 0;
}
.sx-leak-range-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  color: var(--text-disabled);
  margin-top: 2px;
}

/* Compact the calculator on phones: four full-height slider rows ate most
   of the screen before any result was visible. Tighten spacing and drop
   the min/max scale row — the live "X hrs/wk" value next to each label
   already communicates position, so the scale line is the lowest-value
   element to cut. */
@media (max-width: 640px) {
  .sx-leak-inputs { gap: var(--space-4); }
  .sx-leak-sliders { gap: 12px; }
  .sx-leak-slider-head { margin-bottom: 4px; }
  .sx-leak-slider-example { font-size: 0.6875rem; }
  .sx-leak-range-scale { display: none; }
}

.sx-leak-live-total {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.sx-leak-live-total .sx-figure { color: var(--text-accent); font-weight: 600; }

.sx-leak-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  cursor: pointer;
  touch-action: manipulation;
  border-radius: 999px;
}
.sx-leak-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--accent-default) var(--fill, 0%), var(--border-default) var(--fill, 0%));
}
.sx-leak-range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--border-default);
}
.sx-leak-range::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--accent-default);
}
.sx-leak-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-default);
  border: 3px solid var(--surface-page);
  box-shadow: var(--glow-accent-sm);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.sx-leak-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-default);
  border: 3px solid var(--surface-page);
  box-shadow: var(--glow-accent-sm);
}
.sx-leak-range:hover::-webkit-slider-thumb,
.sx-leak-range:focus-visible::-webkit-slider-thumb { transform: scale(1.15); }

/* ---- Result: radial gauge + readout ---- */
.sx-leak-result {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  padding: clamp(20px, 3vw, 28px);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.sx-leak-gauge {
  position: relative;
  flex-shrink: 0;
  width: 140px;
  height: 140px;
}
.sx-leak-gauge svg { transform: rotate(-90deg); }
.sx-leak-gauge-track {
  fill: none;
  stroke: var(--border-subtle);
  stroke-width: 10;
}
.sx-leak-gauge-fill {
  fill: none;
  stroke: var(--accent-default);
  stroke-width: 10;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(45, 224, 194, 0.5));
  transition: stroke-dashoffset 0.5s var(--ease-out), stroke 0.4s var(--ease-out);
}
.sx-leak-gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sx-leak-band {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  color: var(--text-primary);
  max-width: 100px;
  transition: color 0.4s var(--ease-out);
}

.sx-leak-result-body {
  flex: 1 1 260px;
  min-width: 0;
}
.sx-leak-score-tag {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-heading-2-size);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.sx-leak-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  margin-bottom: 14px;
}
.sx-leak-tab {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.sx-leak-tab:hover { color: var(--text-primary); }
.sx-leak-tab.is-active {
  background: var(--accent-subtle);
  color: var(--text-accent);
}
.sx-leak-result-line {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0;
  max-width: 48ch;
}
.sx-leak-result-note {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-tertiary);
  margin: 8px 0 0;
  max-width: 48ch;
}

/* ============ Sprint: week cards ============ */

.sx-weeks {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  margin-top: clamp(28px, 4vw, 44px);
}
.sx-weeks-rail {
  display: none;
  position: absolute;
  top: 20px; /* through the icon tiles */
  left: 40px;
  right: 40px;
  height: 1px;
  background: var(--border-subtle);
  z-index: 0;
}
.sx-weeks-rail-line {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, var(--accent-default), rgba(45, 224, 194, 0.25));
}
@media (min-width: 900px) {
  .sx-weeks-rail { display: block; }
}
.sx-week {
  position: relative;
  z-index: 1;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.sx-week:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  background: var(--surface-card-hover);
}
.sx-week-kicker {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-accent);
  margin: 16px 0 2px;
}
.sx-week-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.sx-week-desc {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.sx-price-row {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

/* ============ Transparency: bento ============ */

.sx-bento {
  display: grid;
  gap: var(--space-6);
  margin-top: clamp(28px, 4vw, 44px);
}
@media (min-width: 900px) {
  .sx-bento {
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
      "fee fee fee fee fee fee fee costs costs costs costs costs"
      "own own own own own guarantee guarantee guarantee guarantee guarantee guarantee guarantee";
  }
  .sx-bento-fee { grid-area: fee; }
  .sx-bento-costs { grid-area: costs; }
  .sx-bento-own { grid-area: own; }
  .sx-bento-guarantee { grid-area: guarantee; }
}
.sx-transparency-line {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-heading-2-size);
  line-height: 1.2;
  color: var(--text-accent);
  margin: clamp(28px, 4vw, 44px) 0 0;
}

/* ============ FAQ ============ */
/* Native <details>/<summary> accordion: no JS required, so it works
   identically with or without the no-GSAP fallback, and is keyboard-
   operable by default. */
.sx-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 720px;
}
.sx-faq-item {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
}
.sx-faq-item[open] { border-color: var(--border-default); }
.sx-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
}
.sx-faq-question::-webkit-details-marker { display: none; }
.sx-faq-question::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--text-accent);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.sx-faq-item[open] .sx-faq-question::after { transform: rotate(45deg); }
.sx-faq-answer {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 14px 0 0;
}

/* ============ Proof ============ */

.sx-proof-grid {
  display: grid;
  gap: var(--space-6);
  margin-top: clamp(28px, 4vw, 44px);
  align-items: stretch;
}
@media (min-width: 900px) {
  .sx-proof-grid { grid-template-columns: 1.5fr 1fr; }
  .sx-proof-grid-single { grid-template-columns: 1fr; }
  .sx-proof-grid-single .sx-proof-card { max-width: 760px; }
}
.sx-proof-card-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sx-proof-copy {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
  color: var(--text-primary);
  max-width: 58ch;
  margin: 0;
}
.sx-proof-note {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-tertiary);
  margin: 0;
}
/* ============ Founder ============ */

.sx-founder-row {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  margin-top: clamp(24px, 3vw, 36px);
  flex-wrap: wrap;
}
.sx-founder-photo {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  object-fit: cover;
  object-position: 50% 26%;
  filter: grayscale(1) brightness(0.95);
  flex-shrink: 0;
  background: var(--surface-raised);
}
.sx-founder-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sx-founder-line {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 56ch;
  margin: 0;
}
.sx-founder-line strong { color: var(--text-primary); font-weight: 600; }
.sx-founder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sx-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
  border: 1px solid var(--border-default);
  background: var(--surface-raised);
}

/* ============ Final CTA band ============ */

.sx-cta-band {
  position: relative;
  overflow: hidden;
  background: var(--surface-page-alt);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
  scroll-margin-top: 84px;
}
.sx-cta-band-glow {
  position: absolute;
  left: 50%;
  top: -30%;
  width: min(900px, 90vw);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(45, 224, 194, 0.12), transparent 75%);
  animation: sx-breathe 7s ease-in-out infinite;
  pointer-events: none;
}
.sx-cta-band-inner {
  position: relative;
  padding-top: clamp(56px, 9vw, 120px);
  padding-bottom: clamp(56px, 9vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
/* Eyebrow row stays left-aligned like every other section's; only the
   headline/subtext/CTAs below it are centered for the closing full-bleed
   band. */
.sx-cta-band-inner .sx-section-head { align-self: flex-start; margin-bottom: 0; }
.sx-cta-band-sub {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-accent);
  max-width: 52ch;
  margin: 0;
}
.sx-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.sx-iconlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  color: var(--text-primary);
  touch-action: manipulation;
  transition: color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.sx-iconlink:hover { background: var(--surface-card-hover); }
.sx-iconlink.is-copied {
  background: var(--accent-subtle);
  border-color: var(--accent-subtle-border);
  color: var(--text-accent);
}
.sx-iconlink-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sx-footer-meta {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text-tertiary);
  margin: 16px 0 0;
}

/* ============ Site footer ============ */

.sx-sitefooter {
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-page-alt);
}
.sx-sitefooter-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) var(--gutter) clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.sx-sitefooter-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 24px;
  row-gap: 10px;
}
.sx-sitefooter-nav a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.sx-sitefooter-nav a:hover { color: var(--text-accent); }
.sx-sitefooter-nav a.js-mailto.is-copied { color: var(--text-accent); font-weight: 600; }
.sx-sitefooter-legal {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-tertiary); /* --text-disabled fails 4.5:1 contrast */
  margin: 0;
}

/* ============ Sticky mobile CTA ============
   Design system explicitly allows exactly one piece of fixed chrome on
   mobile: "an optional slim sticky CTA" (not a full nav bar). Hidden on
   desktop/tablet where the hero CTA is already on-screen most of the time. */

.sx-mobile-cta {
  display: none;
}

@media (max-width: 640px) {
  .sx-mobile-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--surface-page) 60%, transparent);
    /* Hidden until the hero's own CTA scrolls out of view (see the small
       IntersectionObserver in index.html) — keeps the hero fold exactly
       the frozen hero content, with no added chrome competing for space. */
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity var(--duration-standard, 240ms) var(--ease-standard),
                transform var(--duration-standard, 240ms) var(--ease-standard);
  }
  .sx-mobile-cta.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .sx-mobile-cta-btn {
    display: flex;
    width: 100%;
  }
}