/* ─────────────────────────────────────────────────────────────────────────────
   Type
   Manrope carries the page: variable weights, tight geometry, and numerals that
   suit readouts. Barlow Condensed Bold Italic is reserved for uppercase labels
   (eyebrows, units, spec captions, tags), which is where a condensed italic
   reads as sport rather than as costume. Both are already on the server.
   Scoped to .fx-page so no other page on the site changes typeface.
   ───────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Manrope FX";
  src: url("/assets/fonts/Manrope-VariableFont_wght.ttf") format("truetype-variations"),
       url("/assets/fonts/Manrope-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed FX";
  src: url("/assets/fonts/BarlowCondensed-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

body.fx-page {
  font-family: "Manrope FX", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Headlines take the top of the variable range and tighten up: Manrope sets
   wider than Inter at the same size. */
body.fx-page .fx-hero h1,
body.fx-page .fx-tile-copy h2,
body.fx-page .fx-close-inner h2,
body.fx-page .fx-prose h2 { font-weight: 800; letter-spacing: -0.045em; }

/* THE LABEL FACE. Uppercase, condensed, italic: the register on a scoreboard. */
body.fx-page .fx-eyebrow,
body.fx-page .fx-read-l,
body.fx-page .fx-specs dt,
body.fx-page .fx-tag,
body.fx-page .fx-hwin-l,
body.fx-page .fx-kit-k,
body.fx-page .fx-cap-foot,
body.fx-page .fx-sci-band,
body.fx-page .fx-uring-cap,
body.fx-page .fx-gear-k {
  font-family: "Barlow Condensed FX", "Arial Narrow", sans-serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: .12em;
  /* Condensed sets small, so it needs a size and a little more tracking to hold
     the same weight on the page. */
  font-size: 1.12em;
}
body.fx-page .fx-eyebrow { font-size: 14px; letter-spacing: .14em; }
body.fx-page .fx-read-l { font-size: 12.5px; }
body.fx-page .fx-specs dt { font-size: 12.5px; }
body.fx-page .fx-tag { font-size: 11.5px; }
body.fx-page .fx-hwin-l { font-size: 11.5px; }
body.fx-page .fx-uring-cap { font-size: 12px; }
body.fx-page .fx-kit-k { font-size: 10.5px; }

/* Numbers: tabular, so a readout does not shift width as it counts. */
body.fx-page .fx-read-v,
body.fx-page .fx-year-n,
body.fx-page .fx-year-gain,
body.fx-page .fx-dnum,
body.fx-page .fx-dfocus,
body.fx-page .fx-specs dd { font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────────────────────────────────────
   FITNDEX splash
   White page, dark tiles. The tiles are the app's own surface and palette, so
   the visuals inside them are the product rather than pictures of it. Nothing
   here restyles a class from style.css: every name is fx- prefixed, and the
   page brings its own hero and buttons rather than borrowing the marketing
   ones, which is what made the first pass read as a template.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --fx-ink: #0d0b16;
  --fx-ink-soft: #55506b;
  --fx-hair: rgba(13, 11, 22, .10);
  --fx-d1: #1b1830;
  --fx-d2: #2b2445;
  --fx-d3: #171427;
  --fx-violet: #7c3aed;
  --fx-violet-lt: #a78bfa;
  --fx-violet-pale: #c4b5fd;
  --fx-cyan: #22d3ee;
  --fx-amber: #fb923c;
  --fx-mint: #22d3ae;
  --fx-dim: #8f88aa;
  --fx-onDark: #cfc9e6;
  --fx-wrap: 1180px;
}

/* ─── Type ─── */
.fx-eyebrow {
  margin: 0 0 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fx-violet);
}
.fx-eyebrow.is-light { color: var(--fx-violet-pale); }

.fx-hero h1, .fx-tile-copy h2, .fx-close-inner h2 {
  letter-spacing: -0.045em; font-weight: 700; color: var(--fx-ink); margin: 0;
}
.fx-hero h1 { font-size: clamp(46px, 7.6vw, 92px); line-height: .96; }
/* THREE STATEMENTS, THREE LINES. Each line is its own block and never wraps, so
   "Every exercise." cannot break across two lines at any width; the size steps
   down instead. */
.fx-h1-stack { display: flex; flex-direction: column; }
.fx-h1-stack > span, .fx-h1-stack > em { display: block; white-space: nowrap; }
@media (max-width: 560px) { .fx-hero h1 { font-size: clamp(34px, 11vw, 56px); } }
.fx-hero h1 em {
  font-style: normal;
  background: linear-gradient(92deg, var(--fx-violet) 0%, var(--fx-cyan) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fx-lede {
  margin: 22px 0 0; max-width: 30em;
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; letter-spacing: -0.01em;
  color: var(--fx-ink-soft);
}

/* ─── Buttons: this page's own, so the accent matches the tiles ─── */
.fx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 30px; border: none; border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 650; cursor: pointer; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.fx-btn-primary {
  color: #fff;
  background: linear-gradient(92deg, var(--fx-violet) 0%, #9333ea 100%);
  box-shadow: 0 10px 30px rgba(124, 58, 237, .35);
}
.fx-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 38px rgba(124, 58, 237, .45); }
.fx-btn-ghost { color: var(--fx-ink); background: transparent; box-shadow: inset 0 0 0 1px var(--fx-hair); }
.fx-btn-ghost:hover { box-shadow: inset 0 0 0 1px rgba(13, 11, 22, .3); background: rgba(13, 11, 22, .035); }
.fx-btn-onDark { color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.fx-btn-onDark:hover { background: rgba(255, 255, 255, .14); }
.fx-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.fx-actions.is-center { justify-content: center; }
.fx-more-chev { transition: transform .16s ease; }
/* The scroll cue under the hero CTA: a link, deliberately not a button, with a
   chevron that drifts to say which way the page goes. */
.fx-scroll {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
  font-size: 15px; font-weight: 650; color: var(--fx-onDark); text-decoration: none;
  transition: color .16s ease;
}
.fx-scroll:hover { color: #fff; }
.fx-scroll .fx-more-chev { animation: fxNudge 2.4s ease-in-out infinite; }
.fx-scroll:hover .fx-more-chev { animation: none; transform: translateY(2px); }
@keyframes fxNudge { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(3px) } }
@media (prefers-reduced-motion: reduce) { .fx-scroll .fx-more-chev { animation: none } }
.fx-more[aria-expanded="true"] .fx-more-chev { transform: rotate(180deg); }

.fx-hero-note { margin: 26px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--fx-dim); }
.fx-hero-note strong { color: var(--fx-ink); font-weight: 650; }

/* FULL BLEED. style.css gives main a max width and padding, which drew a white
   frame around the hero. Scoped to this page's body class so no other page
   changes. */
body.fx-page main { max-width: none; margin: 0; padding: 0; }

/* ─── HERO. Dark, full width, because an instrument is dark and a white page
   reads as software. The ring is the hero object: three arcs on one
   circumference, which is the whole claim in one shape. ─── */
.fx-hero {
  background:
    radial-gradient(90% 60% at 18% -10%, rgba(124, 58, 237, .40) 0%, rgba(124, 58, 237, 0) 62%),
    radial-gradient(70% 55% at 88% 8%, rgba(34, 211, 238, .18) 0%, rgba(34, 211, 238, 0) 60%),
    linear-gradient(168deg, #1b1830 0%, #241f3c 46%, #120f20 100%);
  color: #fff;
  padding: clamp(44px, 7vw, 96px) 24px clamp(28px, 4vw, 44px);
}
.fx-hero-inner {
  max-width: var(--fx-wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 5vw, 72px); align-items: center;
}
.fx-hero-copy { min-width: 0; }
.fx-hero h1 { color: #fff; }
.fx-hero .fx-lede { color: var(--fx-onDark); }
.fx-hero-note { margin: 22px 0 0; font-size: 14px; color: var(--fx-dim); }
.fx-hero-note strong { color: #fff; font-weight: 650; }
.fx-hero-art { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }

/* Discipline chips: the sports named out loud, so the page cannot be mistaken
   for anything but training. */
.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.fx-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; letter-spacing: .01em; color: #e9e4f7;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.fx-chip svg { width: 16px; height: 16px; fill: none; stroke: var(--fx-violet-lt); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* THE UNIFICATION RING */
/* THE RATING DONUT, ported from FitndexDonutV2: same 200 viewBox, same
   r = 84 - strokeWidth/2, the same three window slices in the same order, and
   the same strokeWidth * 1.25 round-cap gap. The three small rings are the
   component's focus mode, so each window's arc sits exactly where it sits in
   the big ring. */
.fx-donut { width: 100%; max-width: 300px; height: auto; }
.fx-dtrack { fill: none; stroke: rgba(255, 255, 255, .10); }
.fx-darc {
  fill: none;
  animation: fxSweep .9s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes fxSweep { from { opacity: 0 } to { opacity: 1 } }
.fx-dnum {
  fill: #f1f5f9; font-size: 46px; font-weight: 900; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.fx-dnum.is-sm { font-size: 52px; }
.fx-donut-cap {
  margin: 2px 0 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 15px; font-weight: 800; color: #fff;
}
.fx-donut-cap span { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--fx-dim); }

.fx-hwins { display: flex; gap: 14px; margin-top: 6px; }
.fx-hwin { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fx-hwin svg { width: 92px; height: 92px; }
.fx-dfocus { fill: #22d3ee; font-size: 44px; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fx-dslash { fill: rgba(226, 232, 240, .45); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fx-hwin-l { font-size: 10px; font-weight: 800; letter-spacing: .14em; }
/* The same rings, larger, inside the rating section. */
.fx-wins { display: flex; justify-content: center; gap: 14px; width: 100%; max-width: 330px; }
.fx-hwin.is-lg svg { width: 100%; height: auto; }
.fx-hwin.is-lg { width: 33%; }
.fx-hwin.is-lg .fx-hwin-l { font-size: 10.5px; }

/* READOUTS. Units are what make a page read as sport rather than software. */
.fx-readouts {
  max-width: var(--fx-wrap); margin: clamp(30px, 5vw, 56px) auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255, 255, 255, .10); border-radius: 18px; overflow: hidden;
}
.fx-read {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 18px 10px; background: rgba(13, 11, 22, .5);
}
.fx-read-v { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.fx-read-v i { font-style: normal; font-size: .45em; font-weight: 700; letter-spacing: .06em; color: var(--fx-cyan); margin-left: 4px; }
.fx-read-l { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--fx-dim); }

/* ─── The dark surface: panels and tiles ─── */
.fx-panel, .fx-tile-art, .fx-close-inner, .fx-year {
  background:
    radial-gradient(120% 72% at 50% 0%, rgba(124, 58, 237, .34) 0%, rgba(124, 58, 237, 0) 62%),
    linear-gradient(162deg, var(--fx-d1) 0%, var(--fx-d2) 56%, var(--fx-d3) 100%);
  color: #fff;
}
.fx-panel {
  width: 100%; max-width: 440px;
  border-radius: 26px; padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 30px 60px rgba(13, 11, 22, .28);
}
.fx-panel-top { display: flex; align-items: center; justify-content: space-between; }
.fx-panel-k { font-size: 13px; font-weight: 700; color: var(--fx-onDark); }
.fx-panel-foot { font-size: 12px; font-weight: 600; color: var(--fx-dim); }
.fx-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fx-dim); padding: 3px 9px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(143, 136, 170, .45);
}

/* Per-rep bars: the hero's proof, and the thing no log can show you */
.fx-reps { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; height: 190px; }
.fx-rep { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 0; height: 100%; justify-content: flex-end; }
.fx-rep-v { font-size: 11px; font-weight: 800; color: var(--fx-cyan); font-variant-numeric: tabular-nums; }
.fx-rep-bar {
  width: 100%; max-width: 30px; border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, var(--fx-cyan) 0%, rgba(34, 211, 238, .22) 100%);
  box-shadow: 0 0 14px rgba(34, 211, 238, .28);
  transform-origin: bottom center; animation: fxGrow .7s cubic-bezier(.2,.8,.2,1) both;
}
.fx-rep:nth-child(1) .fx-rep-bar { animation-delay: .05s }
.fx-rep:nth-child(2) .fx-rep-bar { animation-delay: .13s }
.fx-rep:nth-child(3) .fx-rep-bar { animation-delay: .21s }
.fx-rep:nth-child(4) .fx-rep-bar { animation-delay: .29s }
.fx-rep:nth-child(5) .fx-rep-bar { animation-delay: .37s }
.fx-rep:nth-child(6) .fx-rep-bar { animation-delay: .45s }
.fx-rep:nth-child(7) .fx-rep-bar { animation-delay: .53s }
.fx-rep-n { font-size: 10.5px; font-weight: 700; color: var(--fx-dim); }
@keyframes fxGrow { from { transform: scaleY(0); opacity: 0 } to { transform: scaleY(1); opacity: 1 } }

/* ─── Sections: dark art panel, copy beside it, alternating.
   Each one is an anchor the header links to, revealed on arrival rather than
   hidden behind a toggle: the page is the story, in order. ─── */
.fx-sections {
  max-width: var(--fx-wrap); margin: 0 auto; padding: clamp(56px, 9vw, 120px) 24px 0;
  display: flex; flex-direction: column; gap: clamp(36px, 8vw, 104px);
}
.fx-tile {
  scroll-margin-top: calc(var(--header-h, 64px) + 28px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 52px); align-items: center;
  opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease;
}
.fx-tile.is-in { opacity: 1; transform: none; }
.fx-tile.is-flip .fx-tile-art { order: 2; }
.fx-tile.is-wide { grid-template-columns: 1.25fr .75fr; }
.fx-tile-art {
  border-radius: 28px; padding: clamp(22px, 3vw, 34px);
  min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 24px 50px rgba(13, 11, 22, .22);
}
.fx-tile-copy h2 { font-size: clamp(27px, 3.1vw, 42px); line-height: 1.04; }
.fx-tile-copy p { margin: 16px 0 0; font-size: clamp(15.5px, 1.25vw, 17.5px); line-height: 1.55; color: var(--fx-ink-soft); }

/* The flash that follows an anchor, so a jump reads as an arrival. */
.fx-tile.is-focus .fx-tile-art { box-shadow: 0 24px 50px rgba(13, 11, 22, .22), 0 0 0 3px rgba(124, 58, 237, .55); }
.fx-tile .fx-tile-art { transition: box-shadow .5s ease; }

/* Spec strip: the instrument register, two facts per tile */
.fx-specs { display: flex; gap: 32px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--fx-hair); }
.fx-specs dt { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fx-dim); }
.fx-specs dd { margin: 4px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--fx-ink); }

/* ─── Visuals inside the tiles ─── */
/* THE BODY, ported from BodyMeasureArt: the same figure, the same dimension
   with its masked label gap, the same force through the centre of mass, and the
   same skeleton. It builds itself when the section arrives. */
.fx-body { width: 100%; max-width: 250px; height: auto; }
.fx-tile.is-in .fx-body .fx-body-fig { opacity: 0; animation: fxBodyFadeFig 500ms ease forwards; }
.fx-tile.is-in .fx-body .fx-body-ext { opacity: 0; animation: fxBodyFade 300ms ease forwards 450ms; }
.fx-tile.is-in .fx-body .fx-body-dim { stroke-dasharray: 260; stroke-dashoffset: 260; animation: fxBodyDraw 800ms ease forwards 500ms; }
.fx-tile.is-in .fx-body .fx-body-hl { opacity: 0; animation: fxBodyFade 300ms ease forwards 1200ms; }
.fx-tile.is-in .fx-body .fx-body-wl { opacity: 0; animation: fxBodyFade 300ms ease forwards 1350ms; }
.fx-tile.is-in .fx-body .fx-body-force { stroke-dasharray: 30; stroke-dashoffset: 30; animation: fxBodyDraw 400ms ease-in forwards 1500ms; }
.fx-tile.is-in .fx-body .fx-body-tip { opacity: 0; animation: fxBodyFade 250ms ease forwards 1850ms; }
.fx-tile.is-in .fx-body .fx-body-bone { stroke-dasharray: 80; stroke-dashoffset: 80; animation: fxBodyDraw 350ms ease forwards; }
.fx-tile.is-in .fx-body .fx-body-node { opacity: 0; transform-box: fill-box; transform-origin: center; animation: fxBodyPop 260ms cubic-bezier(.3, 1.6, .6, 1) forwards; }
.fx-body .fx-body-fig { opacity: .32; }
.fx-body-label { font-variant-numeric: tabular-nums; }
@keyframes fxBodyDraw { to { stroke-dashoffset: 0 } }
@keyframes fxBodyFade { to { opacity: 1 } }
@keyframes fxBodyFadeFig { to { opacity: .32 } }
@keyframes fxBodyPop { from { opacity: 0; transform: scale(0) } to { opacity: 1; transform: scale(1) } }

/* THE PHONE, AND THE LIST OF WHAT ELSE IS NEEDED. The kit list is the pitch:
   one line with a tick, four with a dash. */
.fx-phone { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.fx-phone svg { width: 118px; height: auto; }
.fx-ph-body { fill: rgba(255,255,255,.05); stroke: var(--fx-violet-lt); stroke-width: 2.4; }
.fx-ph-screen { fill: rgba(13,11,22,.55); stroke: rgba(167,139,250,.35); stroke-width: 1.2; }
.fx-ph-frame path { fill: none; stroke: var(--fx-cyan); stroke-width: 2.2; stroke-linecap: round; }
.fx-ph-fig { fill: none; stroke: var(--fx-violet-lt); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.fx-ph-fig circle { fill: rgba(167,139,250,.25); }
.fx-ph-rec { fill: none; stroke: var(--fx-cyan); stroke-width: 3; animation: fxRec 2s ease-in-out infinite; }
@keyframes fxRec { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
.fx-needs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.fx-needs li {
  position: relative; padding-left: 26px;
  font-size: 13.5px; font-weight: 650; color: var(--fx-dim);
}
.fx-needs li::before {
  content: "\2013"; position: absolute; left: 6px; top: -1px;
  font-weight: 800; color: rgba(143,136,170,.8);
}
.fx-needs li.is-yes { color: #fff; font-weight: 800; }
.fx-needs li.is-yes::before { content: "\2713"; left: 4px; color: var(--fx-mint); }

/* Carried kit: the app's own silhouettes, repainted from black to the accent. */
.fx-kits { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.fx-kit { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; }
.fx-kit img {
  width: 54px; height: 54px; object-fit: contain;
  /* black PNG -> accent violet, the same chain the app's cards use */
  filter: brightness(0) invert(72%) sepia(35%) saturate(2200%) hue-rotate(216deg) brightness(102%) contrast(96%);
}
.fx-kit-k {
  /* One word each, one line each: the condensed label face sets small, so the
     size is trimmed rather than the word wrapped. */
  font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fx-onDark); text-align: center; line-height: 1.2; white-space: nowrap;
}

.fx-stack { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 300px; }
.fx-stack-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04);
  font-size: 12.5px; font-weight: 600; color: var(--fx-onDark);
}
.fx-stack-row b { font-size: 14px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.fx-stack-row.is-out { background: rgba(34, 211, 238, .12); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .34); color: #fff; }
.fx-stack-row.is-out b { color: var(--fx-cyan); }
/* Four ways in, one rating out */
.fx-flow { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 340px; }
.fx-flow-ins { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
.fx-in { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0 3px; }
.fx-in-ic {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
  background: rgba(167, 139, 250, .15); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .38);
}
.fx-in-ic svg { width: 22px; height: 22px; fill: none; stroke: #e9ddff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fx-in-l { font-size: 10.5px; font-weight: 700; line-height: 1.3; color: var(--fx-onDark); text-align: center; }
.fx-flow-arrows { width: 100%; height: auto; margin-top: 8px; }
.fx-flow-arrows path { fill: none; stroke: var(--fx-violet-lt); stroke-width: 1.6; stroke-linecap: round; }
.fx-flow-arrows .fx-flow-head { fill: var(--fx-violet-lt); stroke: none; }
.fx-flow-ring { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fx-ring { width: 138px; height: 138px; }


/* Radar */
.fx-radar { width: 100%; max-width: 260px; }
.fx-r-grid circle, .fx-r-grid line { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: .7; }
.fx-r-poly { fill: rgba(124, 58, 237, .34); stroke: var(--fx-violet-lt); stroke-width: 1.9; stroke-linejoin: round; }
.fx-r-dots circle { fill: var(--fx-violet-lt); }

/* Events, profile, model */
.fx-plot { width: 100%; }
.fx-p-axis { stroke: rgba(255, 255, 255, .25); stroke-width: 1; }
.fx-p-tick { fill: var(--fx-dim); font-size: 9px; font-weight: 700; }
.fx-p-area { fill: rgba(167, 139, 250, .2); }
.fx-p-steps { fill: none; stroke: rgba(167, 139, 250, .62); stroke-width: 1.7; stroke-linejoin: round; }
.fx-p-curve, .fx-p-clamp { fill: none; stroke: var(--fx-cyan); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(34, 211, 238, .5)); }
.fx-p-note { font-size: 9px; font-weight: 800; }
.fx-p-note.is-max { fill: #fff; }
.fx-p-note.is-model { fill: var(--fx-cyan); }
.fx-ev.is-sq { fill: var(--fx-violet-pale); }
.fx-ev.is-rdl { fill: var(--fx-amber); }
.fx-plot-key { display: flex; justify-content: center; gap: 16px; font-size: 10.5px; font-weight: 700; color: var(--fx-onDark); }
.fx-plot-key i { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 6px; }
.fx-plot-key i.is-sq { background: var(--fx-violet-pale); }
.fx-plot-key i.is-rdl { background: var(--fx-amber); }

/* Work per driver against its ceiling */
.fx-cap { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 320px; }
.fx-cap-row { display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 9px; }
.fx-cap-l { font-size: 12px; font-weight: 800; color: #e9e4f7; text-align: right; }
.fx-cap-track { position: relative; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.fx-cap-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--fx-violet), var(--fx-violet-lt)); }
.fx-cap-fill.is-over { background: linear-gradient(90deg, #ea580c, var(--fx-amber)); }
.fx-cap-line { position: absolute; top: -4px; bottom: -4px; left: 87%; width: 0; border-left: 1.5px dashed var(--fx-onDark); }
.fx-cap-v { font-size: 12px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.fx-cap-l.is-over, .fx-cap-v.is-over { color: var(--fx-amber); }
.fx-cap-foot { align-self: flex-end; margin-right: 40px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fx-dim); }

/* ─── Close ─── */
.fx-close {
  max-width: var(--fx-wrap); margin: 0 auto; padding: 0;
  scroll-margin-top: calc(var(--header-h, 64px) + 28px);
  opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease;
}
.fx-close.is-in { opacity: 1; transform: none; }
.fx-close-inner {
  border-radius: 34px; padding: clamp(40px, 7vw, 88px) 28px; text-align: center;
  box-shadow: 0 30px 70px rgba(13, 11, 22, .3);
}
.fx-close-inner h2 { color: #fff; font-size: clamp(30px, 5vw, 56px); line-height: 1.02; }
.fx-close-inner > p { margin: 18px auto 0; max-width: 34em; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; color: var(--fx-onDark); }

.fx-year {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; max-width: 440px;
  padding: 22px 22px 18px; border-radius: 26px; text-align: left;
  box-shadow: 0 30px 60px rgba(13, 11, 22, .28), inset 0 0 0 1px rgba(34, 211, 238, .24);
}
.fx-year-row { display: flex; align-items: flex-end; gap: 13px; }
.fx-year-n { font-size: clamp(52px, 7vw, 68px); line-height: .88; font-weight: 700; letter-spacing: -0.035em; color: #fff; font-variant-numeric: tabular-nums; }
.fx-year-d { display: flex; align-items: center; gap: 7px; padding-bottom: 6px; }
.fx-year-up { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 999px; background: var(--fx-mint); color: #06231d; font-size: 10px; }
.fx-year-gain { font-size: 20px; font-weight: 800; color: var(--fx-mint); font-variant-numeric: tabular-nums; }
.fx-year-in { font-size: 13px; font-weight: 600; color: var(--fx-onDark); }
.fx-year svg { display: block; width: 100%; height: auto; }
.fx-year-area { fill: url(#fxYearFill); }
.fx-year-line { fill: none; stroke: var(--fx-cyan); stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(34, 211, 238, .6)); }
.fx-year-dot { fill: #fff; }
.fx-year-halo { fill: rgba(34, 211, 238, .35); animation: fxPulse 1800ms ease-in-out infinite; }
@keyframes fxPulse { 0%, 100% { opacity: .25 } 50% { opacity: .85 } }

.fx-close-note {
  margin: 18px auto 0; max-width: 34em;
  font-size: 13.5px; line-height: 1.55; color: var(--fx-dim);
}

.fx-fine {
  max-width: 760px; margin: 8px auto 0; padding: 0 24px 12px;
  text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--fx-dim);
}

/* ─── Narrow ─── */
@media (max-width: 900px) {
  /* MOBILE ORDER: claim, proof, action.
     The ring led on narrow screens, which pushed the headline, the sentence
     that explains it and the button all below the fold. A visitor met a large
     number with no context. Copy first now; the ring follows as evidence, at a
     size that fits beside the text rather than replacing the screen. */
  .fx-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .fx-hero-art { order: 0; }
  .fx-hero { padding-top: clamp(28px, 6vw, 48px); }
  .fx-hero .fx-eyebrow { margin-bottom: 10px; }
  .fx-hero .fx-lede { font-size: 16.5px; }
  .fx-donut { max-width: 220px; }
  .fx-hwin svg { width: 74px; height: 74px; }
  .fx-hwins { gap: 10px; }
  .fx-chips { margin-top: 18px; }
  .fx-actions { margin-top: 22px; }
  .fx-readouts { grid-template-columns: repeat(2, 1fr); }
  /* ONE READING ORDER ON A PHONE.
     The alternating layout is a wide-screen device. Stacked, a flipped section
     put its panel above its own heading, so the panel sat under the PREVIOUS
     section's text and read as belonging to it. Narrow screens get heading,
     copy, then the panel, every time, with a rule between sections so the
     boundary is unmistakable. */
  .fx-tile, .fx-tile.is-wide {
    display: flex; flex-direction: column; gap: 20px;
    padding-top: clamp(28px, 7vw, 44px);
    border-top: 1px solid var(--fx-hair);
  }
  .fx-sections > .fx-tile:first-child { border-top: none; padding-top: 0; }
  .fx-tile .fx-tile-copy { order: 1; }
  .fx-tile .fx-tile-art, .fx-tile.is-flip .fx-tile-art { order: 2; }
  .fx-tile-art { min-height: 0; padding: 22px 16px; align-items: center; }
  /* Centred, never skewed: every panel's content sits on the middle axis. */
  .fx-tile-art > * { margin-left: auto; margin-right: auto; }
  .fx-specs { margin-bottom: 4px; }
}
@media (max-width: 480px) {
  /* The chips are context, not navigation: two rows of five wrap badly, so they
     scroll sideways instead and keep the CTA high on the screen. */
  .fx-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-left: -24px; margin-right: -24px; padding: 0 24px 2px;
  }
  .fx-chips::-webkit-scrollbar { display: none; }
  .fx-chip { flex: 0 0 auto; }
  .fx-donut { max-width: 190px; }
  .fx-hwin svg { width: 62px; height: 62px; }
  .fx-hero-note { font-size: 13px; }
  .fx-reps { height: 150px; gap: 6px; }
  .fx-cap-row { grid-template-columns: 80px 1fr 42px; }
  .fx-specs { gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-tile, .fx-close { transition: none; opacity: 1; transform: none; }
  .fx-darc { animation: none; opacity: 1; }
  .fx-rep-bar { animation: none; }
  .fx-year-halo { animation: none; opacity: .5; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Inner pages: science, story, team
   Same dark hero, same tiles, with a prose column for pages that are mostly
   argument rather than product surface.
   ───────────────────────────────────────────────────────────────────────────── */
/* The hero's primary: deliberately larger than a normal button, and heavier,
   so the one action on the page reads as the one action on the page. */
.fx-btn.is-xl {
  min-height: 68px; padding: 0 44px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 14px 40px rgba(124, 58, 237, .45);
}
.fx-btn.is-xl:hover { box-shadow: 0 18px 50px rgba(124, 58, 237, .55); }
@media (max-width: 480px) { .fx-btn.is-xl { min-height: 60px; padding: 0 30px; font-size: 17px; } }

.fx-hero.is-page { padding-bottom: clamp(40px, 6vw, 72px); }
.fx-hero-inner.is-single { grid-template-columns: 1fr; max-width: 900px; }
.fx-hero.is-page h1 { font-size: clamp(40px, 6vw, 76px); }

.fx-prose {
  max-width: 760px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) 24px clamp(32px, 5vw, 64px);
}
.fx-prose h2 {
  margin: 0 0 16px; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.06;
  letter-spacing: -0.04em; font-weight: 700; color: var(--fx-ink);
}
.fx-prose .fx-eyebrow { margin-top: 56px; }
.fx-prose .fx-eyebrow:first-child { margin-top: 0; }
.fx-prose p { margin: 0 0 18px; font-size: 17px; line-height: 1.65; color: var(--fx-ink-soft); }
.fx-prose sup a { color: var(--fx-violet); text-decoration: none; font-weight: 700; }
.fx-prose sup a:hover { text-decoration: underline; }

/* Figures: the dark surface again, so a chart on this page is the same object
   as a chart in the app. */
.fx-fig { margin: 28px 0 32px; }
.fx-fig-art {
  border-radius: 22px; padding: 20px 16px;
  background:
    radial-gradient(120% 72% at 50% 0%, rgba(124, 58, 237, .30) 0%, rgba(124, 58, 237, 0) 62%),
    linear-gradient(162deg, var(--fx-d1) 0%, var(--fx-d2) 56%, var(--fx-d3) 100%);
  box-shadow: 0 20px 44px rgba(13, 11, 22, .2);
}
.fx-fig figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--fx-dim); }
.fx-sci { display: block; width: 100%; height: auto; overflow: visible; }
.fx-sci-axis { stroke: rgba(255, 255, 255, .25); stroke-width: 1; }
.fx-sci-line { fill: none; stroke: var(--fx-cyan); stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(34, 211, 238, .45)); }
.fx-sci-cont { fill: none; stroke: var(--fx-amber); stroke-width: 2.4; stroke-linecap: round; }
.fx-sci-area { fill: rgba(34, 211, 238, .16); }
.fx-sci-cp { stroke: var(--fx-violet-lt); stroke-width: 1.8; stroke-dasharray: 6 5; }
.fx-sci-dot { fill: #fff; }
.fx-sci-l { fill: var(--fx-violet-lt); font-size: 12px; font-weight: 800; }
.fx-sci-t { fill: var(--fx-dim); font-size: 11px; font-weight: 700; }
.fx-sci-n { fill: #fff; font-size: 12px; font-weight: 800; }
.fx-sci-n.is-wp { fill: var(--fx-cyan); font-size: 15px; }
.fx-sci-n.is-cont { fill: var(--fx-amber); }
.fx-sci-band { fill: var(--fx-dim); font-size: 10px; font-weight: 800; letter-spacing: .12em; }

/* Three-across notes */
.fx-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 8px 0 32px; }
.fx-col { padding: 18px; border-radius: 16px; background: var(--fx-tile, #f5f5f7); }
.fx-col h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--fx-ink); }
.fx-col p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fx-ink-soft); }

/* The proposition, stated once and set apart. */
.fx-pull {
  margin: 36px 0; padding: clamp(24px, 4vw, 40px); border-radius: 24px; color: #fff;
  background:
    radial-gradient(120% 72% at 50% 0%, rgba(124, 58, 237, .38) 0%, rgba(124, 58, 237, 0) 62%),
    linear-gradient(162deg, var(--fx-d1) 0%, var(--fx-d2) 56%, var(--fx-d3) 100%);
}
.fx-pull h3 { margin: 0 0 12px; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 700; }
.fx-pull p { margin: 0; color: var(--fx-onDark); font-size: 15.5px; line-height: 1.6; }

/* Worked example */
.fx-table { width: 100%; border-collapse: collapse; margin: 8px 0 28px; font-size: 15px; }
.fx-table th {
  text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--fx-d2);
}
.fx-table th:last-child, .fx-table td:last-child { text-align: right; }
.fx-table td { padding: 11px 12px; border-bottom: 1px solid var(--fx-hair); color: var(--fx-ink); font-variant-numeric: tabular-nums; }
.fx-table tr.is-total td { font-weight: 800; background: rgba(124, 58, 237, .06); border-bottom: none; }
.fx-eq {
  margin: 8px 0 24px; padding: 16px; border-radius: 14px; text-align: center;
  background: var(--fx-tile, #f5f5f7); font-size: 20px; font-weight: 700; color: var(--fx-ink);
}
.fx-eq sub { font-size: .62em; font-weight: 600; }

.fx-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 28px; }
.fx-track { padding: 20px; border-radius: 18px; background: var(--fx-tile, #f5f5f7); }
.fx-track h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--fx-ink); }
.fx-track p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; }
.fx-track ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.7; color: var(--fx-ink-soft); }

.fx-limits { margin: 8px 0 28px; display: flex; flex-direction: column; gap: 2px; }
.fx-limits > div { display: grid; grid-template-columns: 240px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--fx-hair); }
.fx-limits dt { font-size: 15px; font-weight: 700; color: var(--fx-ink); }
.fx-limits dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fx-ink-soft); }

.fx-refs-h { margin-top: 56px !important; font-size: 20px !important; }
.fx-refs { margin: 0 0 24px; padding-left: 20px; font-size: 13.5px; line-height: 1.7; color: var(--fx-ink-soft); }
.fx-refs li { margin-bottom: 6px; }
.fx-fine.is-left { text-align: left; margin-left: 0; padding-left: 0; }

/* Team */
.fx-person { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; margin-bottom: 20px; }
.fx-person-card {
  padding: 24px; border-radius: 24px; color: #fff; text-align: center;
  background:
    radial-gradient(120% 72% at 50% 0%, rgba(124, 58, 237, .34) 0%, rgba(124, 58, 237, 0) 62%),
    linear-gradient(162deg, var(--fx-d1) 0%, var(--fx-d2) 56%, var(--fx-d3) 100%);
}
.fx-person-mark svg { width: 150px; height: 150px; }
.fx-person-name { margin: 12px 0 2px; font-size: 20px; font-weight: 800; }
.fx-person-role { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--fx-violet-lt); }
.fx-person-facts { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; color: var(--fx-onDark); }
.fx-person-body h2 { margin-top: 0; }

@media (max-width: 820px) {
  .fx-cols, .fx-tracks { grid-template-columns: 1fr; }
  .fx-limits > div { grid-template-columns: 1fr; gap: 4px; }
  .fx-person { grid-template-columns: 1fr; }
}