/* FitTrack website
   Palette pulled from src/constants/theme.ts. Colour semantics are load-bearing:
   green = strength, amber = HIIT. See marketing/Brand.md. */

:root {
  --bg: #0b0d10;
  --surface: #14181f;
  --surface-alt: #1c222b;
  --border: #2a3240;
  --text: #f5f7fa;
  --muted: #a8b3c2;
  --green: #45d483;
  --green-dark: #00bc3f;
  --amber: #ffb84d;
  --danger: #ff6b6b;
  --on-green: #08110c;

  --max: 1120px;
  --gutter: 24px;
  --radius: 20px;
  --radius-sm: 14px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--green);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 700;
}

h1 {
  font-size: clamp(2.25rem, 6vw, 3.75rem);
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

h3 {
  font-size: 1.125rem;
}

p {
  margin: 0 0 1em;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.narrow {
  max-width: 760px;
}

section {
  padding: 88px 0;
}

@media (max-width: 720px) {
  section {
    padding: 64px 0;
  }
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 14px;
}

.eyebrow--amber {
  color: var(--amber);
}

.lede {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: var(--muted);
  max-width: 62ch;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 100;
  background: var(--green);
  color: var(--on-green);
  padding: 10px 16px;
  border-radius: 8px;
}

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

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 13, 16, 0.82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--text);
  letter-spacing: -0.01em;
}

.brand:hover {
  text-decoration: none;
}

.brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

/* Sub-pages use the brand itself as the way back, so the affordance is pinned
   in the sticky header rather than sitting in the page and scrolling away. */
.brand--back {
  gap: 6px;
  margin-left: -6px;
}

.brand-chevron {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--muted);
  transition: transform 0.15s ease, color 0.15s ease;
}

.brand--back:hover .brand-chevron {
  transform: translateX(-3px);
  color: var(--green);
}

.site-nav a[aria-current="page"] {
  color: var(--text);
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* The Download button is deliberately a sibling of `.site-nav`, not a child of
   it. `.site-nav a` outranks `.btn` on specificity, so while it lived inside
   the nav every colour rule here repainted its label muted grey on green. */
.site-nav a {
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 500;
}

.site-nav a:hover {
  color: var(--text);
  text-decoration: none;
}

/* ---------- Mobile nav ---------- */

.nav-toggle {
  display: none;
  padding: 12px 4px 12px 14px;
  margin-right: -4px;
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform 0.18s ease, top 0.18s ease;
}

.nav-toggle__bars::before {
  top: -7px;
}

.nav-toggle__bars::after {
  top: 7px;
}

.is-nav-open .nav-toggle__bars {
  background: transparent;
}

.is-nav-open .nav-toggle__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.is-nav-open .nav-toggle__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* The collapsed menu is opt-in, the same way the scroll reveal is: nav.js adds
   `has-nav-toggle` only once it can open the panel again. Until then the header
   just wraps onto a second row with every link still tappable, rather than the
   nav disappearing with no way to reach it. */
@media (max-width: 820px) {
  .site-header .wrap {
    flex-wrap: wrap;
    height: auto;
    row-gap: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .site-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 26px;
  }

  .header-cta {
    margin-left: auto;
  }

  .has-nav-toggle .site-header .wrap {
    flex-wrap: nowrap;
    height: 64px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .has-nav-toggle .nav-toggle {
    display: block;
  }

  /* Positioned against `.site-header`, which is already sticky, so the panel
     spans the full width instead of the centred `.wrap`. */
  .has-nav-toggle .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--gutter) 10px;
    background: rgba(11, 13, 16, 0.97);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--border);
  }

  .has-nav-toggle .site-header.is-nav-open .site-nav {
    display: flex;
  }

  .has-nav-toggle .site-nav a {
    padding: 15px 0;
    font-size: 1.0625rem;
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 420px) {
  .site-header .wrap {
    gap: 10px;
  }

  .has-nav-toggle .header-cta {
    padding: 9px 15px;
  }
}

/* ---------- Buttons and store badges ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  background: var(--green);
  color: var(--on-green);
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
  filter: brightness(1.08);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.btn--ghost:hover {
  background: var(--surface);
  filter: none;
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px 11px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.store-badge:hover {
  text-decoration: none;
  background: var(--surface-alt);
  border-color: #3a465a;
}

.store-badge svg {
  flex: none;
  width: 26px;
  height: 26px;
}

.store-badge span {
  display: block;
  font-size: 0.6875rem;
  color: var(--muted);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.store-badge strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 8vw, 112px);
}

.hero::before {
  content: "";
  position: absolute;
  inset: -280px 0 auto;
  height: 760px;
  background: radial-gradient(
      48% 58% at 22% 42%,
      rgba(69, 212, 131, 0.15),
      transparent 70%
    ),
    radial-gradient(44% 54% at 82% 34%, rgba(255, 184, 77, 0.1), transparent 70%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero h1 {
  max-width: 14ch;
}

.hero .lede {
  margin-top: 20px;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  max-width: 48ch;
}

.hero .stores {
  margin-top: 30px;
}

.free-line {
  margin-top: 18px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.free-line b {
  color: var(--text);
  font-weight: 600;
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .hero h1,
  .hero .lede {
    max-width: none;
  }
}

/* ---------- Phones ---------- */

/* A screen sits inside a thin bezel so it reads as a device rather than a
   floating rectangle. The image itself keeps the real 19.5:9 screen ratio. */
.phone-screen {
  padding: 6px;
  border-radius: 30px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  box-shadow: 0 26px 70px -34px rgba(0, 0, 0, 0.95);
}

.phone-screen img {
  width: 100%;
  height: auto;
  border-radius: 24px;
}

.hero-art {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2.5vw, 26px);
}

.phone {
  position: relative;
  flex: 1 1 0;
  max-width: 226px;
  margin: 0;
}

.phone--hiit {
  margin-top: clamp(20px, 4vw, 44px);
}

.phone--strength .phone-screen {
  box-shadow: 0 0 0 1px rgba(69, 212, 131, 0.22),
    0 26px 70px -34px rgba(69, 212, 131, 0.5), 0 24px 60px -34px rgba(0, 0, 0, 0.95);
}

.phone--hiit .phone-screen {
  box-shadow: 0 0 0 1px rgba(255, 184, 77, 0.22),
    0 26px 70px -34px rgba(255, 184, 77, 0.45), 0 24px 60px -34px rgba(0, 0, 0, 0.95);
}

.phone-label {
  display: block;
  margin-bottom: 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}

.phone--hiit .phone-label {
  color: var(--amber);
}

/* ---------- Founder note ---------- */

.founder {
  padding-top: 0;
  padding-bottom: clamp(64px, 8vw, 88px);
}

.founder-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
  max-width: 800px;
}

.founder-card p:last-of-type {
  margin-bottom: 0;
}

.founder-sig {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--muted);
}

.founder-sig strong {
  color: var(--text);
  font-weight: 600;
}

.founder-sig .dot {
  color: var(--border);
}

/* ---------- Problem ---------- */

.problem {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(20, 24, 31, 0.6), transparent);
}

.problem-stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}

.problem-stack li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 22px;
  color: var(--muted);
  font-size: 0.9688rem;
}

.problem-stack b {
  display: block;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 4px;
}

@media (max-width: 720px) {
  .problem-stack {
    grid-template-columns: 1fr;
  }
}

.problem h2 span {
  color: var(--green);
}

/* ---------- Feature grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}

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

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

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.card h3 {
  margin-bottom: 10px;
}

.card p {
  color: var(--muted);
  font-size: 0.9688rem;
  margin: 0;
}

.card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: rgba(69, 212, 131, 0.12);
  color: var(--green);
}

.card--hiit .card-icon {
  background: rgba(255, 184, 77, 0.12);
  color: var(--amber);
}

.card-icon svg {
  width: 22px;
  height: 22px;
}

/* ---------- Feature demos ----------
   One component, reused for every feature, so each one is presented identically.
   `data-tone="hiit"` on a .demo swaps the accent from strength green to HIIT
   amber; nothing else about the block changes. */

.demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
  padding: clamp(40px, 6vw, 64px) 0;
  border-top: 1px solid var(--border);
}

.demo:first-of-type {
  margin-top: 40px;
}

/* Section break on the features page, between groups of demos. */
.demo-group {
  padding: clamp(48px, 7vw, 80px) 0 8px;
  border-top: 1px solid var(--border);
}

.demo-group:first-child {
  border-top: 0;
  padding-top: 24px;
}

.demo-group h2 {
  margin-bottom: 12px;
}

.demo-group + .demo {
  border-top: 0;
  padding-top: 24px;
  margin-top: 0;
}

/* Alternate the side the phone sits on, so the page does not read as a column
   of identical rows. */
.demo:nth-of-type(even) .demo__copy {
  order: 2;
}

.demo__eyebrow {
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}

.demo[data-tone="hiit"] .demo__eyebrow {
  color: var(--amber);
}

.demo__copy h3 {
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  max-width: 20ch;
}

/* Scoped away from the eyebrow, which is also a <p>: an unscoped `.demo__copy p`
   outranks `.demo__eyebrow` and would repaint the accent grey. */
.demo__copy p:not(.demo__eyebrow) {
  margin: 0;
  color: var(--muted);
  max-width: 52ch;
}

.demo__media {
  justify-self: center;
  width: 100%;
  max-width: 292px;
}

.demo__media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  background: var(--bg);
}

.demo[data-tone="hiit"] .phone-screen {
  box-shadow: 0 0 0 1px rgba(255, 184, 77, 0.22),
    0 26px 70px -34px rgba(255, 184, 77, 0.45), 0 24px 60px -34px rgba(0, 0, 0, 0.95);
}

.demo:not([data-tone="hiit"]) .phone-screen {
  box-shadow: 0 0 0 1px rgba(69, 212, 131, 0.22),
    0 26px 70px -34px rgba(69, 212, 131, 0.5), 0 24px 60px -34px rgba(0, 0, 0, 0.95);
}

@media (max-width: 860px) {
  .demo {
    grid-template-columns: 1fr;
    gap: 32px;
    justify-items: start;
  }

  /* Copy always leads on a narrow screen, whatever the desktop order was. */
  .demo:nth-of-type(even) .demo__copy {
    order: 0;
  }

  .demo__media {
    justify-self: center;
    max-width: 260px;
  }
}

/* ---------- Screens gallery ---------- */

.gallery {
  margin-top: 48px;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 4px var(--gutter) 28px;
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.gallery::-webkit-scrollbar {
  height: 8px;
}

.gallery::-webkit-scrollbar-track {
  background: var(--surface);
  border-radius: 999px;
}

.gallery::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

.shot {
  flex: 0 0 auto;
  width: 232px;
  margin: 0;
  scroll-snap-align: center;
}

.shot figcaption {
  margin-top: 16px;
  font-size: 0.875rem;
  color: var(--muted);
}

.shot figcaption b {
  display: block;
  color: var(--green);
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 3px;
}

.shot--hiit figcaption b {
  color: var(--amber);
}

.gallery-hint {
  margin-top: 4px;
  font-size: 0.875rem;
  color: #7d8899;
}

/* ---------- Pricing table ---------- */

.plans {
  margin-top: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

table.plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.plan-table th,
.plan-table td {
  text-align: left;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.plan-table thead th {
  background: var(--surface-alt);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.plan-table thead th:nth-child(3) {
  color: var(--green);
}

.plan-table tbody tr:last-child th,
.plan-table tbody tr:last-child td {
  border-bottom: 0;
}

.plan-table tbody th {
  font-weight: 500;
  color: var(--text);
  width: 44%;
}

.plan-table td {
  color: var(--muted);
  width: 28%;
}

.plan-table .yes {
  color: var(--green);
  font-weight: 600;
}

.plan-note {
  margin-top: 20px;
  font-size: 0.875rem;
  color: var(--muted);
  max-width: 62ch;
}

@media (max-width: 620px) {
  .plans {
    overflow-x: auto;
  }

  table.plan-table {
    min-width: 540px;
  }
}

/* ---------- Roadmap ---------- */

.roadmap-card {
  margin-top: 36px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 40px);
  background: linear-gradient(140deg, rgba(28, 34, 43, 0.7), transparent 70%);
  max-width: 800px;
}

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

.tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid rgba(255, 184, 77, 0.4);
  background: rgba(255, 184, 77, 0.1);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 16px;
}

/* ---------- Trust strip ---------- */

.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 44px;
  list-style: none;
  padding: 0;
}

.trust li {
  border-top: 2px solid var(--border);
  padding-top: 18px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.trust b {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 4px;
}

@media (max-width: 860px) {
  .trust {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .trust {
    grid-template-columns: 1fr;
  }
}

/* ---------- Final CTA ---------- */

.cta {
  text-align: center;
  border-top: 1px solid var(--border);
  background: radial-gradient(
    60% 100% at 50% 0%,
    rgba(69, 212, 131, 0.1),
    transparent 70%
  );
}

.cta .stores {
  justify-content: center;
  margin-top: 32px;
}

.cta .lede {
  margin: 18px auto 0;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 48px 0 56px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.footer-links a {
  color: var(--muted);
}

.footer-links a:hover {
  color: var(--text);
}

.footer-version {
  margin: 36px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Sits directly under .footer-version, so it must not draw a second rule. */
.footer-version + .footer-legal {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

.footer-legal {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: #7d8899;
}

/* ---------- Story page ---------- */

.story-hero {
  padding: 72px 0 44px;
  border-bottom: 1px solid var(--border);
}

.story-hero h1 {
  max-width: 18ch;
}

.story-hero .lede {
  margin-top: 20px;
}

.back-link {
  display: inline-block;
  margin-bottom: 22px;
  font-size: 0.875rem;
  color: var(--muted);
}

.back-link:hover {
  color: var(--text);
  text-decoration: none;
}

.story-body {
  padding: 56px 0 88px;
  font-size: 1.0625rem;
}

.story-body h2 {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  margin: 52px 0 16px;
}

.story-body > h2:first-child {
  margin-top: 0;
}

.story-body p {
  color: #dbe2ec;
  margin-bottom: 1.15em;
}

.story-body strong {
  color: var(--text);
}

.pull {
  margin: 40px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--green);
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.timeline {
  list-style: none;
  margin: 36px 0;
  padding: 0;
  border-left: 1px solid var(--border);
}

.timeline li {
  position: relative;
  padding: 0 0 26px 26px;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline .when {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 4px;
}

.timeline .what {
  color: var(--muted);
  font-size: 1rem;
}

.timeline .what b {
  color: var(--text);
  font-weight: 600;
}

.story-cta {
  margin-top: 56px;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.story-cta h2 {
  margin: 0 0 12px;
  font-size: 1.375rem;
}

.story-cta p {
  margin-bottom: 22px;
}

.story-cta .stores {
  margin: 0;
}

/* ---------- Reveal on scroll ----------
   Opt-in, and deliberately so: the hiding only happens once the script in the
   head has set `.has-reveal`, and that script only sets it when it is going to
   be able to unhide again. No JS, no IntersectionObserver, or reduced motion
   requested, and every element is simply visible from the start. Content on a
   landing page must never depend on a script running. */

.has-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.has-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.demos-more {
  margin: 40px 0 0;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}