/* ─────────────────────────────────────────────────────────────────────────────
   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-lens-head h2,
body.fx-page .fx-lens-so,
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-kitimg-k,
body.fx-page .fx-cap-foot,
body.fx-page .fx-sci-band,
body.fx-page .fx-uring-cap,
body.fx-page .fx-kit-h,
body.fx-page .fx-lens-k,
body.fx-page .fx-hwin-t,
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-lens-k { font-size: 13px; letter-spacing: .12em; }
body.fx-page .fx-hwin-t { font-size: 11px; letter-spacing: .06em; }
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-kitimg-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;
}

/* ─── Brand
   The real marks, inlined so they take their colour from CSS rather than a
   mask over a PNG. Full wordmark on wide screens, the V alone when the header
   gets tight. Scoped to this design's pages; the rest of the site keeps the
   header it has. ─── */
body.fx-page .brand.fx-brand {
  display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none;
}
body.fx-page .fx-brand-full, body.fx-page .fx-brand-mark { display: block; fill: currentColor; }
body.fx-page .fx-brand-full { height: 24px; width: auto; }
body.fx-page .fx-brand-mark { height: 30px; width: auto; display: none; }
body.fx-page .fx-brand-tag {
  padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .22);
  font-size: 11px; font-weight: 500; letter-spacing: .01em; color: rgba(255, 255, 255, .55);
  white-space: nowrap;
}
@media (max-width: 760px) {
  body.fx-page .fx-brand-full { display: none; }
  body.fx-page .fx-brand-mark { display: block; }
  body.fx-page .fx-brand-tag { display: none; }
}

/* ─── 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; }
/* The gradient is painted on the line box, and at line-height .96 the box
   stops above the descender of the g. Pad the box down and pull the margin
   back so the layout does not move. */
.fx-h1-stack > em { padding-bottom: .14em; margin-bottom: -.14em; }
/* ARRIVAL. The hero builds top to bottom: label, three lines, lede, chips, then
   the ring and the action. Nothing moves far; it settles. */
.fx-js .fx-hero .fx-eyebrow, .fx-js .fx-h1-stack > span, .fx-js .fx-h1-stack > em,
.fx-js .fx-hero .fx-lede, .fx-js .fx-hero .fx-chips, .fx-js .fx-hero-art,
.fx-js .fx-hero-cta, .fx-js .fx-readouts, .fx-js .fx-kit {
  animation: fxRise .8s cubic-bezier(.2, .8, .2, 1) both;
}
.fx-js .fx-hero .fx-eyebrow { animation-delay: .05s }
.fx-js .fx-h1-stack > span:nth-child(1) { animation-delay: .12s }
.fx-js .fx-h1-stack > span:nth-child(2) { animation-delay: .22s }
.fx-js .fx-h1-stack > em { animation-delay: .32s }
.fx-js .fx-hero .fx-lede { animation-delay: .44s }
.fx-js .fx-hero .fx-chips { animation-delay: .54s }
.fx-js .fx-hero-art { animation-delay: .30s }
.fx-js .fx-hero-cta { animation-delay: .62s }
.fx-js .fx-readouts { animation-delay: .72s }
.fx-js .fx-kit { animation-delay: .84s }
@keyframes fxRise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@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 calc(clamp(28px, 4vw, 44px) + 36px);
  /* Pinned. The sections carry a higher layer and slide up over it. */
  position: sticky; top: 0; z-index: 0; --fx-p: 0; overflow: hidden;
}

/* As the sections cover it, the hero's content eases back and dims. The
   load animations own these transforms until they settle. */
.fx-hero.is-settled .fx-eyebrow, .fx-hero.is-settled .fx-h1-stack > span, .fx-hero.is-settled .fx-h1-stack > em,
.fx-hero.is-settled .fx-lede, .fx-hero.is-settled .fx-chips, .fx-hero.is-settled .fx-hero-art,
.fx-hero.is-settled .fx-hero-cta, .fx-hero.is-settled .fx-readouts, .fx-hero.is-settled .fx-kit { animation: none; }
.fx-hero.is-settled > * {
  transform: translateY(calc(var(--fx-p) * -40px)) scale(calc(1 - var(--fx-p) * .06));
  opacity: calc(1 - var(--fx-p) * .7);
  transform-origin: 50% 100%; will-change: transform, opacity;
}
.fx-hero-inner {
  max-width: var(--fx-wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1.08fr .92fr; grid-template-rows: auto auto;
  gap: 0 clamp(28px, 5vw, 72px); align-items: center;
}
/* The action belongs with the words that earned it: same column, directly
   under the copy, tight to it, left aligned. The ring holds the other column
   and spans both rows. */
.fx-hero-copy { grid-column: 1; grid-row: 1; align-self: end; }
.fx-hero-cta  { grid-column: 1; grid-row: 2; align-self: start; margin-top: 28px; }
.fx-hero-cta .fx-actions { margin-top: 0; }
.fx-hero-art  { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.fx-hero-copy { min-width: 0; }
.fx-hero h1 { color: #fff; }
.fx-hero .fx-lede { color: var(--fx-onDark); }
/* THE KIT LIST. A grid, not a flex row: Required sits in the first cell of a
   three column grid with two empty cells beside it, and Optional runs beneath.
   A cell cannot drift, which is what kept happening while this was a flex row
   sizing itself to its own contents. */
.fx-kit {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px;
  width: 100%; max-width: var(--fx-wrap);
  margin: 26px auto 0; padding: 20px 24px 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
  text-align: left;
}
.fx-kit-group { grid-column: 1 / -1; text-align: left; min-width: 0; }
.fx-kit-group.is-req { grid-column: 1; grid-row: 1; }
.fx-kit-group.is-opt { grid-column: 1 / -1; grid-row: 2; }
.fx-kit-h {
  margin: 0 0 10px; text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fx-dim);
}
.fx-kit-group.is-req .fx-kit-h { color: var(--fx-mint); }
.fx-kit-row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px 20px; align-items: center; }
.fx-kit-group.is-opt .fx-kit-row { flex-wrap: nowrap; gap: 18px; }
.fx-kitline { display: inline-flex; align-items: center; gap: 9px; }
.fx-kitline-ic {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  flex: 0 0 auto;
}
.fx-kitline-ic svg { width: 19px; height: 19px; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fx-kitline-l { font-size: 13.5px; font-weight: 650; }
.fx-kitline.is-no .fx-kitline-ic svg { stroke: #8f88aa; }
.fx-kitline.is-no .fx-kitline-l { color: var(--fx-dim); }
.fx-kitline.is-yes .fx-kitline-ic { background: rgba(34, 211, 174, .14); box-shadow: inset 0 0 0 1px rgba(34, 211, 174, .5); }
.fx-kitline.is-yes .fx-kitline-ic svg { stroke: var(--fx-mint); }
.fx-kitline.is-yes .fx-kitline-l { color: #fff; font-weight: 800; }
@media (max-width: 420px) {
  .fx-kit-group.is-opt .fx-kit-row { gap: 12px; }
  .fx-kit-group.is-opt .fx-kitline-l { font-size: 12px; }
}
.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. */
/* One behaviour at every width: wrap. A row that slides can clip at the tight
   end, and a clipped row reads as broken rather than scrollable. */
.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; }
/* With script, the arcs start hidden and draw themselves on arrival. */
.fx-js .fx-darc { opacity: 0; }
.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; }
/* The time window under each ring, in the ring's own colour: the claim in the
   heading, stated as a number. */
.fx-hwin-t { margin-top: -2px; opacity: .85; white-space: nowrap; }

/* 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 {
  position: relative; z-index: 1;
  margin: -36px 0 0; padding: clamp(56px, 9vw, 120px) 24px 0;
  display: flex; flex-direction: column; gap: clamp(36px, 8vw, 104px);
  background: #fff; border-radius: 36px 36px 0 0;
  box-shadow: 0 -24px 60px rgba(13, 11, 22, .28);
}
/* The sections keep their measure inside the full-width sheet. */
.fx-sections > * { width: 100%; max-width: var(--fx-wrap); margin-left: auto; margin-right: auto; }
.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;
}
/* ARRIVAL. The panel slides in from its own side and the copy rises to meet
   it, so the two halves read as one object closing rather than a block
   fading. Without script the sections are simply there. */
.fx-js .fx-tile .fx-tile-art { opacity: 0; transform: translateX(-32px); }
.fx-js .fx-tile.is-flip .fx-tile-art { transform: translateX(32px); }
.fx-js .fx-tile .fx-tile-copy { opacity: 0; transform: translateY(22px); }
.fx-tile .fx-tile-art { transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease; }
.fx-tile .fx-tile-copy { transition: opacity .8s cubic-bezier(.2, .8, .2, 1) .12s, transform .8s cubic-bezier(.2, .8, .2, 1) .12s; }
.fx-js .fx-tile.is-in .fx-tile-art, .fx-js .fx-tile.is-in .fx-tile-copy { 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); }

/* 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; }
/* The callouts arrive last, once the skeleton is up. */
.fx-body-call { opacity: 0; }
.fx-tile.is-in .fx-body .fx-body-call { animation: fxBodyFade 350ms ease forwards; }
.fx-body-ct {
  font-family: "Barlow Condensed FX", "Arial Narrow", sans-serif; font-style: italic; font-weight: 700;
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
}
@keyframes fxBodyDraw { to { stroke-dashoffset: 0 } }

/* THE SCAN PANEL: the six positions down the left, the measured figure beside
   them, and what the coloured segments mean underneath. */
.fx-scan { max-width: 470px; }
.fx-scan-body { display: flex; justify-content: center; }
.fx-scan .fx-body { max-width: 350px; margin: 0 auto; overflow: visible; }
.fx-scan-calls { display: flex; flex-direction: column; gap: 7px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .10); }
.fx-scan-call { position: relative; margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.45; color: var(--fx-onDark); }
.fx-scan-call i { position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 999px; }
.fx-scan-call b { color: #fff; font-weight: 800; }
.fx-js .fx-tile .fx-scan-call { opacity: 0; transition: opacity .5s ease; }
.fx-js .fx-tile.is-in .fx-scan-call { opacity: 1; }
.fx-tile.is-in .fx-scan-call:nth-child(1) { transition-delay: 2.2s }
.fx-tile.is-in .fx-scan-call:nth-child(2) { transition-delay: 2.4s }
@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-kitimg { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; }
.fx-kitimg 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-kitimg-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-p-note.is-steady { fill: var(--fx-mint); }
.fx-p-steady { stroke: var(--fx-mint); stroke-width: 1.8; stroke-dasharray: 6 5; }
.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); }
.fx-plot-foot { display: block; margin-top: 6px; font-size: 10px; font-weight: 700; color: var(--fx-dim); text-align: center; }

/* 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); }

/* ─── PROGRAMMING. The one warm thing on a cool page: a white card with an
   ember accent, so it reads as different content from the measurement story
   above it. Three ways in on the left, lines across, a phone with today's
   workout on the right. ─── */
:root { --fx-ember: #f97316; --fx-ember-2: #fb7185; --fx-ember-soft: rgba(249, 115, 22, .12); }
.fx-program { scroll-margin-top: calc(var(--header-h, 64px) + 28px); display: flex; flex-direction: column; align-items: center; }
.fx-program-head { text-align: center; max-width: 30em; }
.fx-program-head h2 { margin: 0; font-size: clamp(26px, 3.1vw, 40px); line-height: 1.04; letter-spacing: -0.045em; font-weight: 800; color: var(--fx-ink); }
.fx-eyebrow.is-ember { color: var(--fx-ember); }
.fx-js .fx-program .fx-program-head { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.fx-js .fx-program.is-in .fx-program-head { opacity: 1; transform: none; }

.fx-kpanel {
  max-width: 640px; margin-top: 26px; padding: 24px 26px 20px; overflow: hidden; color: #fff;
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(150deg, #ff7a1a 0%, #f75a3a 55%, #f43f5e 100%);
  box-shadow: 0 30px 60px rgba(249, 115, 22, .38);
}
.fx-kpanel .fx-panel-k { color: #fff; white-space: nowrap; }
.fx-kpanel .fx-panel-foot { color: rgba(255, 255, 255, .85); }
.fx-tag.is-ember { white-space: nowrap; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .14); }
.fx-js .fx-program .fx-kpanel { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1) .15s, transform .8s cubic-bezier(.2, .8, .2, 1) .15s; }
.fx-js .fx-program.is-in .fx-kpanel { opacity: 1; transform: none; }

.fx-pflow { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 2px 0; padding: 8px 0 4px; }
.fx-opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 520px; }
.fx-opts li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; min-width: 0; }
.fx-opt-ic {
  position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}
.fx-opt-ic svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fx-opt-ic svg .is-fill { fill: #fff; }
.fx-opt-ic.is-k { background: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 0 18px rgba(255, 255, 255, .55); overflow: visible; }
.fx-opt-ic img { width: 34px; height: 34px; border-radius: 999px; object-fit: cover; }
.fx-opt-sparks { position: absolute; inset: -6px; width: auto; height: auto; overflow: visible; pointer-events: none; }
.fx-opt-sparks .fx-spark { stroke: none; fill: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9)); }
.fx-opt-sparks .fx-spark.is-dot { fill: #ffe4d6; }
.fx-opt-l { display: flex; flex-direction: column; align-items: center; min-width: 0; line-height: 1.15; }
.fx-opt-l b { font-size: 15px; font-weight: 800; color: #fff; }
.fx-opt-l small { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .82); }
.fx-spark { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; animation: fxTwinkle 2.8s ease-in-out infinite; animation-delay: calc(var(--s) * .37s); }
@keyframes fxTwinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg) } 45%, 55% { opacity: 1; transform: scale(1) rotate(20deg) } }

.fx-pflow-lines { display: block; width: 100%; max-width: 520px; height: 56px; overflow: visible; }
.fx-pflow-lines path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .85; }
.fx-js .fx-program .fx-pflow-lines path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fx-js .fx-program.is-in .fx-pflow-lines path { animation: fxBodyDraw .8s cubic-bezier(.2, .8, .2, 1) forwards .8s; }

/* The phone keeps the app's dark screen, so the workout looks like the app. */
.fx-ph2 {
  position: relative; width: 150px; padding: 8px 6px; border-radius: 20px; color: #fff;
  background: #1b1830; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75), 0 16px 34px rgba(120, 30, 0, .45);
}
.fx-ph2-notch { position: absolute; top: 4px; left: 50%; width: 34px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .25); transform: translateX(-50%); }
.fx-ph2-screen { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px 8px; border-radius: 13px; background: rgba(13, 11, 22, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.fx-ph2-k { font-size: 10px; font-weight: 800; color: #fff; letter-spacing: -0.01em; white-space: nowrap; }
.fx-ph2-w { font-size: 9.5px; font-weight: 700; color: var(--fx-onDark); }
.fx-ph2-btn {
  width: 100%; padding: 7px 0; border-radius: 999px; text-align: center;
  font-size: 10.5px; font-weight: 800; color: #ea580c;
  background: #fff;
  box-shadow: 0 6px 16px rgba(255, 255, 255, .25); animation: fxBtnPulse 2.6s ease-in-out infinite;
}
@keyframes fxBtnPulse { 0%, 100% { box-shadow: 0 6px 16px rgba(255, 255, 255, .2) } 50% { box-shadow: 0 6px 24px rgba(255, 255, 255, .6) } }
.fx-js .fx-program .fx-ph2 { opacity: 0; transform: translateY(10px); transition: opacity .7s ease 1.2s, transform .7s cubic-bezier(.2, .8, .2, 1) 1.2s; }
.fx-js .fx-program.is-in .fx-ph2 { opacity: 1; transform: none; }
.fx-js .fx-program .fx-opts li { opacity: 0; transform: translateX(-8px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.fx-js .fx-program.is-in .fx-opts li { opacity: 1; transform: none; }
.fx-program.is-in .fx-opts li:nth-child(1) { transition-delay: .35s }
.fx-program.is-in .fx-opts li:nth-child(2) { transition-delay: .5s }
.fx-program.is-in .fx-opts li:nth-child(3) { transition-delay: .65s }

/* The block: four week columns of four day blocks, the way the app draws a
   program. They light in order, and one is the workout in hand. */
.fx-week { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px 4px; width: 100%; max-width: 250px; }
.fx-week-l { font-family: "Barlow Condensed FX", "Arial Narrow", sans-serif; font-style: italic; font-weight: 700; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--fx-dim); text-align: center; }
.fx-week-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: column; grid-template-rows: repeat(4, 1fr); gap: 3px 4px; }
.fx-week-grid i { display: block; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.fx-week-grid i:nth-child(6) { background: rgba(255, 255, 255, .35); box-shadow: inset 0 0 0 1.5px #fff, 0 0 10px rgba(255, 255, 255, .6); }
.fx-js .fx-program .fx-week-grid i { opacity: 0; transform: scale(.6); transition: opacity .35s ease, transform .45s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(1.4s + var(--d) * .05s); }
.fx-js .fx-program.is-in .fx-week-grid i { opacity: 1; transform: none; }

/* ─── Close ─── */
.fx-close {
  max-width: var(--fx-wrap); margin: 0 auto; padding: 0;
  scroll-margin-top: calc(var(--header-h, 64px) + 28px);
  transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1);
}
.fx-js .fx-close { opacity: 0; transform: translateY(24px); }
.fx-js .fx-close.is-in { opacity: 1; transform: none; }
.fx-close-inner h2 { max-width: 12em; margin-left: auto; margin-right: auto; }
.fx-close-inner .fx-actions { margin-top: 30px; }

/* ─── EXPLORE THE FEATURES. Portrait cards: a real person, a tint that
   makes the photo read as one colour, a white fade at the top for dark type,
   our numbers laid over the shot, and a plus. ─── */
.fx-features { scroll-margin-top: calc(var(--header-h, 64px) + 28px); }
.fx-features-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.fx-features-head h2 { margin: 0; font-size: clamp(30px, 3.8vw, 50px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 800; color: var(--fx-ink); }
/* The slide buttons: the page's own ghost button, round. Hidden where the
   row is a swipe anyway. */
.fx-features-nav { display: flex; gap: 8px; padding-bottom: 6px; }
.fx-fnav {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer;
  background: #fff; color: var(--fx-ink); box-shadow: inset 0 0 0 1px rgba(13, 11, 22, .14);
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease, opacity .2s ease;
}
.fx-fnav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fx-fnav:hover:not(:disabled) { box-shadow: inset 0 0 0 1px rgba(13, 11, 22, .32); transform: translateY(-1px); }
.fx-fnav:disabled { opacity: .3; cursor: default; }
.fx-fnav:focus-visible { outline: 2px solid var(--fx-violet); outline-offset: 2px; }
/* THE PATH: one horizontal row at every width. Cards snap, the first to the
   start edge and the last to the end edge, so both always land fully in view. */
.fx-fcards {
  display: flex; gap: 16px; margin: clamp(22px, 3vw, 34px) -6px 0; padding: 6px 6px 18px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 6px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.fx-fcards::-webkit-scrollbar { display: none; }
.fx-fc {
  --tint: var(--fx-violet);
  flex: 0 0 clamp(240px, 26vw, 320px); scroll-snap-align: start;
  position: relative; aspect-ratio: 3 / 4; border-radius: 26px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #ffffff 0%, #f1ecfb 30%, var(--fx-d2) 70%, var(--fx-d3) 100%);
  box-shadow: 0 24px 50px rgba(13, 11, 22, .18);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
}
.fx-fc:last-child { scroll-snap-align: end; }
.fx-fc:hover { transform: translateY(-4px); box-shadow: 0 34px 60px rgba(13, 11, 22, .26); }
.fx-fc.is-fuchsia { --tint: #a21caf; }
.fx-fc.is-green { --tint: #15803d; }
.fx-fc.is-violet { --tint: #7c3aed; }
.fx-fc.is-cyan   { --tint: #0891b2; }
.fx-fc.is-mint   { --tint: #0d9488; }
.fx-fc.is-amber  { --tint: #c2410c; }
.fx-fc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.fx-fc:hover .fx-fc-img { transform: scale(1.04); }
/* The tint colours the photo; the fade makes the top white for the type. */
/* Natural colour, with a firmer white fade at the top so the dark type
   always sits on white whatever the photo. */
.fx-fc-fade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .96) 18%, rgba(255, 255, 255, .7) 30%, rgba(255, 255, 255, .25) 40%, rgba(255, 255, 255, 0) 50%); }
.fx-fc-copy { position: absolute; left: 22px; right: 22px; top: 22px; z-index: 3; }
.fx-fc-k { margin: 0 0 6px; font-family: "Barlow Condensed FX", "Arial Narrow", sans-serif; font-style: italic; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--tint); }
.fx-fc h3 { margin: 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 800; color: var(--fx-ink); }
/* The numbers: the app's own dark, frosted surface, over the shot. */
.fx-fc-data {
  position: absolute; left: 16px; right: 16px; bottom: 78px; z-index: 3;
  display: flex; flex-direction: column; gap: 7px; padding: 11px 13px; border-radius: 16px; color: #fff;
  background: rgba(13, 11, 22, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.fx-fc-dl, .fx-fc-du { font-family: "Barlow Condensed FX", "Arial Narrow", sans-serif; font-style: italic; font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fx-onDark); }
.fx-fc-du { align-self: flex-end; color: var(--fx-dim); }
.fx-fc-reps { display: flex; align-items: flex-end; gap: 6px; height: 54px; }
.fx-fc-reps span { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.fx-fc-reps span i { font-style: normal; font-size: 9.5px; font-weight: 800; color: var(--fx-cyan); font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.fx-fc-reps span::after {
  content: ""; display: block; width: 100%; height: calc(var(--h) * 34px); border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--fx-cyan) 0%, rgba(34, 211, 238, .25) 100%); box-shadow: 0 0 10px rgba(34, 211, 238, .3);
}
/* A low data box: slides under the plus, narrower, so the photo stays the
   subject. The plus sits on its right edge. */
.fx-fc-data.is-low { bottom: 18px; right: 78px; gap: 5px; padding: 9px 12px; }
.fx-fc-data.is-low .fx-fc-dl { white-space: nowrap; font-size: 10px; letter-spacing: .08em; }
.fx-fc-data.is-low .fx-fc-dl em { font-style: italic; color: var(--fx-dim); margin-left: 6px; }
.fx-fc-data.is-low .fx-fc-reps { height: 46px; gap: 5px; }
.fx-fc-data.is-low .fx-fc-reps span::after { height: calc(var(--h) * 28px); }
.fx-fc-route { display: block; width: 100%; height: 56px; }
.fx-fc-route path { fill: none; stroke-linecap: round; }
.fx-fc-route .is-track { stroke: rgba(255, 255, 255, .28); stroke-width: 2; stroke-dasharray: 1.5 4; }
.fx-fc-route .is-done { stroke: var(--fx-mint); stroke-width: 2.6; filter: drop-shadow(0 0 3px rgba(34, 211, 174, .6)); }
.fx-fc-route .is-pin { fill: #fff; }
.fx-fc-row { display: flex; justify-content: space-between; gap: 8px; }
.fx-fc-row span, .fx-fc-col span { display: flex; align-items: baseline; gap: 3px; }
.fx-fc-row b, .fx-fc-col b, .fx-fc-grid b { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff; }
.fx-fc-row i, .fx-fc-col i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--fx-mint); letter-spacing: .04em; }
.fx-fc-data.is-jump { flex-direction: row; align-items: center; gap: 14px; }
.fx-fc-arrow { position: relative; width: 2px; height: 56px; background: var(--fx-cyan); border-radius: 2px; flex: 0 0 auto; }
.fx-fc-arrow i { position: absolute; top: -1px; left: -4px; width: 8px; height: 8px; border-left: 2px solid var(--fx-cyan); border-top: 2px solid var(--fx-cyan); transform: rotate(45deg); }
.fx-fc-col { display: flex; flex-direction: column; gap: 6px; }
.fx-fc-col i { color: var(--fx-cyan); }
.fx-fc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.fx-fc-grid span { display: flex; flex-direction: column; }
.fx-fc-grid i { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fx-dim); }
.fx-fc-grid b { font-size: 14px; }
/* The scan card: the skeleton the scan builds, drawn on the athlete in the
   page's body-scan colours, with the measured segments called out. */
.fx-sk { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.fx-sk-bone { stroke: #f3d6ff; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(214, 123, 255, .55)); }
.fx-sk-bone.is-far { opacity: .45; }
.fx-sk-bone.is-hot { stroke: #fff; stroke-width: 10; filter: drop-shadow(0 0 10px rgba(214, 123, 255, .95)); }
.fx-sk-node { fill: #d67bff; stroke: #1b1830; stroke-width: 6; transform-box: fill-box; transform-origin: center; }
.fx-sk-node.is-far { opacity: .55; }
.fx-sk-leads path { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; }
.fx-sk-tag {
  position: absolute; z-index: 4; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end;
  padding: 5px 8px 5px 9px; border-radius: 10px; color: #fff; line-height: 1.1;
  background: rgba(13, 11, 22, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(214, 123, 255, .45);
}
.fx-sk-tag.is-left { align-items: flex-start; }
.fx-sk-tag.is-tick { flex-direction: row; align-items: baseline; gap: 6px; }
.fx-sk-tag.is-tick b::before { content: "\2713"; margin-right: 5px; color: var(--fx-mint); }
.fx-sk-tag.is-tick i { color: var(--fx-mint); text-transform: none; letter-spacing: .02em; font-size: 11px; }
.fx-sk-tag i { font-family: "Barlow Condensed FX", "Arial Narrow", sans-serif; font-style: italic; font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #f3d6ff; white-space: nowrap; }
.fx-sk-tag b { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* It builds itself when the row arrives: bones draw, joints pop, then the
   measurements come in. */
.fx-js .fx-features .fx-sk-bone { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fx-js .fx-features.is-in .fx-sk-bone { animation: fxBodyDraw .45s ease forwards; animation-delay: calc(.6s + var(--d) * .12s); }
.fx-js .fx-features .fx-sk-node { opacity: 0; }
.fx-js .fx-features.is-in .fx-sk-node { animation: fxBodyPop .3s cubic-bezier(.3, 1.6, .6, 1) forwards; animation-delay: calc(1.2s + var(--d) * .06s); }
.fx-js .fx-features.is-in .fx-sk-node.is-far { animation-name: fxSkPopFar; }
@keyframes fxSkPopFar { from { opacity: 0; transform: scale(0) } to { opacity: .55; transform: scale(1) } }
.fx-js .fx-features .fx-sk-leads path { stroke-dashoffset: 1; }
.fx-js .fx-features.is-in .fx-sk-leads path { animation: fxBodyDraw .4s ease forwards 1.9s; }
.fx-js .fx-features .fx-sk-tag { opacity: 0; transition: opacity .5s ease; }
.fx-js .fx-features.is-in .fx-sk-tag { opacity: 1; transition-delay: 2.1s; }

/* The import card: a sheet from the coach, an arrow, the app. */
.fx-fc-data.is-import { flex-direction: column; align-items: stretch; gap: 8px; }
.fx-sheet { position: relative; width: 100%; min-width: 0; padding: 8px 10px 7px; border-radius: 8px; background: #fff; color: var(--fx-ink); box-shadow: 0 6px 14px rgba(0, 0, 0, .3); }
.fx-sheet-tab { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 8px 0 0 8px; background: #22c55e; }
.fx-sheet-rows { display: flex; flex-direction: column; gap: 3px; padding-left: 4px; }
.fx-sheet-rows span { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: baseline; white-space: nowrap; overflow: hidden; font-size: 11px; font-weight: 700; line-height: 1.2; border-bottom: 1px solid rgba(13, 11, 22, .08); padding-bottom: 2px; }
.fx-sheet-rows span:last-child { border-bottom: 0; padding-bottom: 0; }
.fx-sheet-rows i { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: var(--fx-ink-soft); }
.fx-sheet-rows b { font-variant-numeric: tabular-nums; }
.fx-imp-from { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-family: "Barlow Condensed FX", "Arial Narrow", sans-serif; font-style: italic; font-weight: 700; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fx-mint); }
.fx-imp-from svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fx-imp-arrow { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; }
.fx-imp-arrow svg { width: 20px; height: 20px; fill: none; stroke: var(--fx-mint); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fx-imp-app { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 10px; background: rgba(124, 58, 237, .35); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .5); }
.fx-imp-app svg { width: 24px; height: 24px; fill: #fff; }
.fx-imp-app b { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.fx-js .fx-features .fx-imp-arrow svg { opacity: 0; transform: translateY(-6px); transition: opacity .4s ease 1.2s, transform .4s cubic-bezier(.2, .8, .2, 1) 1.2s; }
.fx-js .fx-features.is-in .fx-imp-arrow svg { opacity: 1; transform: none; }
.fx-js .fx-features .fx-imp-app { opacity: 0; transform: scale(.85); transition: opacity .4s ease 1.5s, transform .4s cubic-bezier(.3, 1.4, .5, 1) 1.5s; }
.fx-js .fx-features.is-in .fx-imp-app { opacity: 1; transform: none; }

/* The build card: the grid, and one block being written. */
.fx-fc-data.is-build .fx-week { max-width: none; }
.fx-fc-data.is-build .fx-week-l, .fx-fc-data.is-kaelis .fx-week-l { color: rgba(255, 255, 255, .55); }
.fx-fc-data .fx-week-grid i { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.fx-fc-data .fx-week-grid.is-edit i:nth-child(6) { background: rgba(167, 139, 250, .35); box-shadow: inset 0 0 0 1.5px var(--fx-violet-lt), 0 0 10px rgba(167, 139, 250, .6); }
.fx-fc-data .fx-week-grid.is-k i:nth-child(n+9) { background: rgba(34, 211, 238, .3); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .7); }
.fx-edit-row { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 8px; background: rgba(255, 255, 255, .08); font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; }
.fx-edit-row i { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .06em; color: var(--fx-violet-lt); }
.fx-edit-row em { display: inline-block; width: 1.5px; height: 12px; background: #fff; animation: fxCaret 1s step-end infinite; }
@keyframes fxCaret { 50% { opacity: 0 } }
.fx-js .fx-features .fx-fc-data .fx-week-grid i { opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .4s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(1s + var(--d) * .04s); }
.fx-js .fx-features.is-in .fx-fc-data .fx-week-grid i { opacity: 1; transform: none; }

/* The Kaelis card: one line from Kaelis, then the block it wrote. */
.fx-kchat { display: flex; align-items: flex-start; gap: 8px; }
.fx-kchat img { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 2px rgba(34, 211, 238, .6), 0 0 12px rgba(34, 211, 238, .5); }
.fx-kchat-b { padding: 7px 10px; border-radius: 12px 12px 12px 3px; background: #fff; color: var(--fx-ink); font-size: 11px; font-weight: 600; line-height: 1.35; }
.fx-kchat-b b { font-weight: 800; }
.fx-js .fx-features .fx-kchat { opacity: 0; transform: translateY(6px); transition: opacity .5s ease .9s, transform .5s cubic-bezier(.2, .8, .2, 1) .9s; }
.fx-js .fx-features.is-in .fx-kchat { opacity: 1; transform: none; }

/* MEET KAELIS. A honeycomb lit from beneath: the cells are a dark mesh, and
   two soft lights drift under it in the page's violet and cyan, so the grid
   glows where they pass. The icon sits on a lit disc; the name is spelled
   out down the card. */
.fx-honey { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0f0d1c; }
.fx-honey-glow {
  position: absolute; width: 90%; aspect-ratio: 1 / 1; border-radius: 999px; filter: blur(30px);
  will-change: transform;
}
.fx-honey-glow.is-a { left: -30%; top: 10%; background: radial-gradient(circle, rgba(139, 92, 246, 1) 0%, rgba(124, 58, 237, 0) 60%); animation: fxHoneyA 11s ease-in-out infinite alternate; }
.fx-honey-glow.is-b { right: -35%; bottom: -10%; background: radial-gradient(circle, rgba(34, 211, 238, .95) 0%, rgba(34, 211, 238, 0) 60%); animation: fxHoneyB 13s ease-in-out infinite alternate; }
@keyframes fxHoneyA { from { transform: translate(0, 0) } to { transform: translate(55%, 60%) } }
@keyframes fxHoneyB { from { transform: translate(0, 0) } to { transform: translate(-55%, -70%) } }
.fx-honey-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-honey-cells polygon { fill: rgba(15, 13, 28, .55); stroke: rgba(255, 255, 255, .22); stroke-width: 2.5; }
.fx-kintro-disc {
  display: grid; place-items: center; width: 92px; height: 92px; border-radius: 999px;
  background: radial-gradient(circle, #fff 0%, #fff 58%, rgba(255, 255, 255, .0) 60%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25), 0 0 40px rgba(34, 211, 238, .55), 0 0 90px rgba(124, 58, 237, .5);
  animation: fxDiscBreath 4s ease-in-out infinite;
}
.fx-kintro-disc img { width: 64px; height: 64px; border-radius: 999px; }
@keyframes fxDiscBreath { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .25), 0 0 30px rgba(34, 211, 238, .4), 0 0 70px rgba(124, 58, 237, .4) } 50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .4), 0 0 50px rgba(34, 211, 238, .75), 0 0 110px rgba(124, 58, 237, .65) } }
.fx-kword { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; align-self: flex-start; margin-left: 10px; }
.fx-kword li { font-size: 13px; font-weight: 700; line-height: 1.2; color: rgba(255, 255, 255, .82); letter-spacing: -0.01em; }
.fx-kword li b { display: inline-block; width: 1.05em; font-size: 17px; font-weight: 800; color: #fff; text-shadow: 0 0 12px rgba(34, 211, 238, .8); }
.fx-js .fx-features .fx-kword li { opacity: 0; transform: translateX(-8px); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.fx-js .fx-features.is-in .fx-kword li { opacity: 1; transform: none; }
.fx-features.is-in .fx-kword li:nth-child(1) { transition-delay: 1.0s } .fx-features.is-in .fx-kword li:nth-child(2) { transition-delay: 1.12s }
.fx-features.is-in .fx-kword li:nth-child(3) { transition-delay: 1.24s } .fx-features.is-in .fx-kword li:nth-child(4) { transition-delay: 1.36s }
.fx-features.is-in .fx-kword li:nth-child(5) { transition-delay: 1.48s } .fx-features.is-in .fx-kword li:nth-child(6) { transition-delay: 1.6s }

/* MEET KAELIS, full width: the honeycomb as a card, the name on the left,
   the pitch on the right, one button to the feature page. */
.fx-kaelis { scroll-margin-top: calc(var(--header-h, 64px) + 28px); }
.fx-kaelis-in {
  position: relative; overflow: hidden; border-radius: 34px; color: #fff; isolation: isolate;
  display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 56px);
  box-shadow: 0 30px 70px rgba(13, 11, 22, .3);
}
.fx-kaelis-in { background: #0f0d1c; }
.fx-kaelis-in > * { position: relative; z-index: 2; width: auto; max-width: none; margin: 0; }
.fx-kaelis-in > .fx-honey { position: absolute; z-index: 0; inset: 0; width: 100%; }
.fx-kaelis-in .fx-honey-grid { width: 100%; height: 100%; }
.fx-kaelis-in .fx-honey-cells polygon { stroke: rgba(255, 255, 255, .12); stroke-width: 2; fill: rgba(15, 13, 28, .5); }
/* A shade over the copy side so the text reads over the cells. */
.fx-kaelis-in::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(15, 13, 28, 0) 25%, rgba(15, 13, 28, .55) 55%, rgba(15, 13, 28, .55) 100%); pointer-events: none; }
.fx-kaelis-in .fx-honey-glow { width: 60%; }
.fx-kaelis-in .fx-honey-glow.is-a { left: -12%; top: -20%; }
.fx-kaelis-in .fx-honey-glow.is-b { right: -18%; bottom: -30%; }
@media (min-width: 901px) {
  @keyframes fxHoneyA { from { transform: translate(0, 0) } to { transform: translate(70%, 40%) } }
  @keyframes fxHoneyB { from { transform: translate(0, 0) } to { transform: translate(-80%, -30%) } }
}
.fx-kaelis-name { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 26px 20px; border-radius: 24px; background: rgba(13, 11, 22, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fx-kword.is-big { align-self: center; margin-left: 0; }
.fx-kword.is-big li { font-size: 17px; }
.fx-kword.is-big li b { font-size: 24px; }
.fx-kaelis-copy { min-width: 0; }
.fx-kaelis-copy h2 { margin: 0; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.04; letter-spacing: -0.045em; font-weight: 800; color: #fff; max-width: 14em; }
.fx-kaelis-lede { margin: 16px 0 0; max-width: 40em; font-size: clamp(15.5px, 1.3vw, 17.5px); line-height: 1.55; color: var(--fx-onDark); }
.fx-kaelis-pts { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 40em; }
.fx-kaelis-pts li { position: relative; padding-left: 24px; font-size: 15px; font-weight: 600; line-height: 1.45; color: #fff; }
.fx-kaelis-pts li::before { content: "\2713"; position: absolute; left: 2px; top: 0; font-weight: 800; color: var(--fx-cyan); }
.fx-kaelis-copy .fx-actions { margin-top: 26px; }
.fx-js .fx-kaelis .fx-kaelis-in { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); }
.fx-js .fx-kaelis.is-in .fx-kaelis-in { opacity: 1; transform: none; }
.fx-js .fx-kaelis .fx-kword li { opacity: 0; transform: translateX(-8px); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.fx-js .fx-kaelis.is-in .fx-kword li { opacity: 1; transform: none; }
.fx-kaelis.is-in .fx-kword li:nth-child(1) { transition-delay: .5s } .fx-kaelis.is-in .fx-kword li:nth-child(2) { transition-delay: .62s }
.fx-kaelis.is-in .fx-kword li:nth-child(3) { transition-delay: .74s } .fx-kaelis.is-in .fx-kword li:nth-child(4) { transition-delay: .86s }
.fx-kaelis.is-in .fx-kword li:nth-child(5) { transition-delay: .98s } .fx-kaelis.is-in .fx-kword li:nth-child(6) { transition-delay: 1.1s }

/* The console card: the panel photo itself, and what was read off it. */
.fx-fc-panel { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
.fx-fc-panel img { width: 44px; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.fx-fc-grid.is-row { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 4px 8px; }
.fx-fc-grid.is-row b { font-size: 13px; white-space: nowrap; }
.fx-fc-plus {
  position: absolute; right: 18px; bottom: 18px; z-index: 3; width: 46px; height: 46px; border-radius: 999px; border: 0; cursor: pointer;
  display: grid; place-items: center; text-decoration: none;
  font: inherit; font-size: 24px; font-weight: 600; line-height: 1; color: var(--fx-ink); background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}
.fx-fc-plus:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.fx-fc-plus:focus-visible { outline: 2px solid var(--fx-cyan); outline-offset: 3px; }
.fx-features-foot { margin: 16px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--fx-dim); text-align: right; }
/* Arrival: the cards rise in order. */
.fx-js .fx-features .fx-features-head { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.fx-js .fx-features .fx-fc { opacity: 0; transform: translateY(26px); }
.fx-js .fx-features.is-in .fx-features-head, .fx-js .fx-features.is-in .fx-fc { opacity: 1; transform: none; }
.fx-js .fx-features.is-in .fx-fc:hover { transform: translateY(-4px); }
.fx-features.is-in .fx-fc:nth-child(1) { transition-delay: .1s }
.fx-features.is-in .fx-fc:nth-child(2) { transition-delay: .22s }
.fx-features.is-in .fx-fc:nth-child(3) { transition-delay: .34s }
.fx-features.is-in .fx-fc:nth-child(4) { transition-delay: .46s }
.fx-features.is-in .fx-fc:nth-child(5) { transition-delay: .58s }
.fx-features.is-in .fx-fc:nth-child(n+6) { transition-delay: .7s }
.fx-features.is-in .fx-fc:hover { transition-delay: 0s; }

/* FOLDED COPY. On phones a long paragraph shows three lines and a
   Read more; the button is only shown when the copy actually overflows. */
.fx-fold-btn { display: none; }
@media (max-width: 900px) {
  .fx-fold.is-folded:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .fx-fold-btn {
    display: inline-flex; align-items: center; gap: 5px; margin: 6px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 13.5px; font-weight: 800; color: var(--fx-violet);
  }
  .fx-fold-btn[hidden] { display: none; }
  .fx-fold-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
  .fx-fold-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
  .fx-hero .fx-fold-btn, .fx-lens-card .fx-fold-btn, .fx-kaelis .fx-fold-btn { color: var(--fx-cyan); }
  .fx-lens-card .fx-fold-btn { font-size: 12.5px; }
}

/* ─── THE LENS. Three dark cards on the white page, one claim each, the same
   answer three times. The repetition is the point. ─── */
.fx-lens { scroll-margin-top: calc(var(--header-h, 64px) + 28px); }
.fx-lens-head { max-width: 40em; }
.fx-lens-head h2 { margin: 0; font-size: clamp(30px, 3.8vw, 50px); line-height: 1.02; letter-spacing: -0.045em; color: var(--fx-ink); }
.fx-lens-lede { margin: 18px 0 0; font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.55; color: var(--fx-ink-soft); }
.fx-lens-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(28px, 4vw, 44px); }
.fx-lens-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 26px 24px 24px; border-radius: 24px; color: #fff;
  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%);
  box-shadow: 0 24px 50px rgba(13, 11, 22, .18);
  transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}
.fx-lens-card:hover { box-shadow: 0 30px 60px rgba(13, 11, 22, .26); transform: translateY(-3px); }
.fx-js .fx-lens .fx-lens-card { opacity: 0; transform: translateY(26px); }
.fx-js .fx-lens.is-in .fx-lens-card { opacity: 1; transform: none; }
.fx-js .fx-lens.is-in .fx-lens-card:hover { transform: translateY(-3px); }
.fx-lens.is-in .fx-lens-card:nth-child(2) { transition-delay: .14s; }
.fx-lens.is-in .fx-lens-card:nth-child(3) { transition-delay: .28s; }
.fx-lens.is-in .fx-lens-card:hover { transition-delay: 0s; }
.fx-lens-ic { width: 76px; height: 76px; margin-bottom: 6px; overflow: visible; }
.fx-lens-ic path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fx-lens-ic .fx-li-soft { stroke: rgba(255, 255, 255, .22); }
.fx-lens-ic .fx-li-bar { stroke: var(--fx-violet-lt); stroke-width: 2.4; }
.fx-lens-ic .fx-li-hot { stroke: var(--fx-cyan); stroke-width: 2.6; filter: drop-shadow(0 0 5px rgba(34, 211, 238, .55)); }
.fx-lens-ic .fx-li-dash { stroke: var(--fx-mint); stroke-width: 1.6; stroke-dasharray: 5 4; }
.fx-lens-ic .fx-li-dot { fill: #fff; }
.fx-lens-ic .fx-li-t { fill: var(--fx-cyan); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
/* The three icons draw on arrival, one after the other. */
.fx-js .fx-lens .fx-li-hot { stroke-dasharray: 90; stroke-dashoffset: 90; }
.fx-js .fx-lens.is-in .fx-li-hot { animation: fxBodyDraw .9s cubic-bezier(.2, .8, .2, 1) forwards .45s; }
.fx-js .fx-lens.is-in .fx-lens-card:nth-child(2) .fx-li-hot { animation-delay: .6s; }
.fx-js .fx-lens.is-in .fx-lens-card:nth-child(3) .fx-li-hot { animation-delay: .75s; }
.fx-lens-so { margin: 0; font-size: clamp(30px, 2.8vw, 40px); line-height: 1; color: #fff; }
.fx-lens-so i { font-style: normal; color: var(--fx-cyan); }
.fx-lens-k { margin: -2px 0 0; color: var(--fx-violet-lt); }
.fx-lens-p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--fx-onDark); }

/* THE JOIN. Three lines leave the centres of the three cards and meet at one
   ring: the whole proposition drawn once. The lines draw on arrival, then the
   ring fills. */
.fx-lens-join { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: clamp(28px, 4vw, 44px); }
.fx-lens-lines { display: block; width: 100%; height: 96px; overflow: visible; }
.fx-lens-lines path {
  fill: none; stroke: var(--fx-violet-lt); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke;
  opacity: .75;
}
.fx-js .fx-lens .fx-lens-lines path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fx-js .fx-lens.is-in .fx-lens-lines path { animation: fxBodyDraw .9s cubic-bezier(.2, .8, .2, 1) forwards .55s; }
.fx-lens-stem { display: none; width: 1.6px; height: 44px; background: var(--fx-violet-lt); opacity: .75; }
/* THE SUM. The lines land on a statement rather than a picture: what the
   three signals become, and that all of it counts. Light surface, so it reads
   as the page speaking rather than another card. */
.fx-lens-sum {
  width: 100%; max-width: 820px; margin-top: 0; padding: clamp(24px, 3.5vw, 36px) clamp(20px, 3vw, 36px);
  border-radius: 26px; text-align: center;
  background: linear-gradient(180deg, rgba(124, 58, 237, .07) 0%, rgba(34, 211, 238, .05) 100%);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .16);
}
.fx-lens-sum .fx-eyebrow { margin-bottom: 10px; }
/* THE RATING, RISING. A small chart above the claim: the line climbs from one
   rating to a higher one and the arrow points where it is going. Draws on
   arrival, after the lines have landed. */
.fx-rise { display: block; width: 200px; max-width: 70%; height: auto; margin: 0 auto 8px; overflow: visible; }
.fx-rise-grid { fill: none; stroke: rgba(13, 11, 22, .14); stroke-width: 1.5; stroke-linecap: round; }
.fx-rise-line { fill: none; stroke: var(--fx-violet); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(124, 58, 237, .35)); }
.fx-rise-head { fill: none; stroke: var(--fx-violet); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.fx-rise-n { font-size: 13px; font-weight: 800; fill: var(--fx-ink-soft); font-variant-numeric: tabular-nums; }
.fx-rise-n.is-hi { fill: var(--fx-violet); font-size: 16px; }
.fx-js .fx-lens .fx-rise-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fx-js .fx-lens.is-in .fx-rise-line { animation: fxBodyDraw 1.1s cubic-bezier(.2, .8, .2, 1) forwards 1.3s; }
.fx-js .fx-lens .fx-rise-head, .fx-js .fx-lens .fx-rise-n.is-hi { opacity: 0; transition: opacity .4s ease 2.3s; }
.fx-js .fx-lens.is-in .fx-rise-head, .fx-js .fx-lens.is-in .fx-rise-n.is-hi { opacity: 1; }
.fx-lens-sum h3 {
  margin: 0 auto; max-width: 15em; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.08;
  letter-spacing: -0.04em; font-weight: 800; color: var(--fx-ink);
}
.fx-lens-sum p:not(.fx-eyebrow) { margin: 14px auto 0; max-width: 36em; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.55; color: var(--fx-ink-soft); }
/* Three tiles from the app's own surface: what the scan measured, how far
   the bar went, what was worn. Pictures, not a list. */
.fx-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 560px; margin: 22px auto 0; }
.fx-count { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.fx-count b { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; color: var(--fx-ink); }
.fx-count-art {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 168px; border-radius: 18px; overflow: hidden;
  display: grid; place-items: 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%);
  box-shadow: 0 14px 30px rgba(13, 11, 22, .18);
}
.fx-mini-body { width: 78%; height: 78%; }
/* The bar, top and bottom: two stills from the app's own squat sprite laid
   over each other, same centre, same floor, so the only difference on show
   is how far the bar went. */
.fx-travel .fx-still {
  position: absolute; left: 50%; bottom: 10%; width: 74%; aspect-ratio: 1 / 1; transform: translateX(-50%);
  background-repeat: no-repeat; background-size: 1200% 200%;
}
.fx-travel .fx-still.is-a { opacity: .42; }
.fx-travel .fx-still.is-b { filter: drop-shadow(0 0 8px rgba(167, 139, 250, .45)); }
/* The tactical silhouette is a flat black PNG, used as a mask and painted in
   the page's own violet, the same as the body beside it. */
.fx-wear-fig {
  display: block; width: 66%; height: 74%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
  background: linear-gradient(180deg, #d67bff 0%, #a78bfa 100%);
  filter: drop-shadow(0 0 10px rgba(167, 139, 250, .45));
}
.fx-wear-badge {
  position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 999px;
  font-family: "Barlow Condensed FX", "Arial Narrow", sans-serif; font-style: italic; font-weight: 700;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #06231d; background: var(--fx-mint);
}
.fx-js .fx-lens .fx-count { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.fx-js .fx-lens.is-in .fx-count { opacity: 1; transform: none; }
.fx-lens.is-in .fx-count:nth-child(1) { transition-delay: 1.5s }
.fx-lens.is-in .fx-count:nth-child(2) { transition-delay: 1.65s }
.fx-lens.is-in .fx-count:nth-child(3) { transition-delay: 1.8s }
.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 ─── */
/* ─── NARROW: one column, claim then proof then action ───────────────────────
   The wide layout is a two-column grid with centred alignment. Stacked, that
   alignment centres each child and shrinks the copy block, which is what broke
   the middle widths. The stack sets its own alignment explicitly instead of
   inheriting the grid's. */
@media (max-width: 900px) {
  .fx-hero-inner {
    display: flex; flex-direction: column; align-items: stretch;
    gap: clamp(20px, 3.5vw, 30px);
  }
  /* One width for the whole stack, CENTRED. Capped at 640 and pinned left, the
     copy and the button drifted away from the ring's centre as the window grew
     toward the breakpoint. Centring the block keeps one vertical axis through
     the hero at every narrow width; the text inside stays left aligned. */
  .fx-hero-copy, .fx-hero-cta { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
  .fx-hero-copy { order: 1; }
  .fx-hero-art  { order: 2; align-self: center; width: 100%; }
  .fx-hero-cta  { order: 3; }
  .fx-hero { padding-top: clamp(28px, 6vw, 48px); }
  .fx-hero .fx-lede { font-size: 17px; }

  .fx-chips { margin-top: 20px; }

  /* The ring cluster: one object, centred, sized to leave room for the button. */
  .fx-hero-art { gap: 10px; }
  .fx-donut { max-width: 210px; }
  .fx-donut-cap { margin-top: 0; }
  .fx-hwins { gap: 12px; margin-top: 2px; }
  .fx-hwin svg { width: 76px; height: 76px; }

  /* The action, full width, with the cue centred under it. */
  .fx-hero-cta .fx-actions { margin-top: 0; }
  .fx-hero-cta .fx-actions { display: flex; }
  .fx-hero-cta .fx-btn { width: 100%; max-width: 100%; }
  .fx-hero-cta .fx-scroll { display: flex; justify-content: center; margin-top: 14px; }

  .fx-readouts { grid-template-columns: repeat(2, 1fr); }
  /* Narrow: the row bleeds to the screen edges and you swipe it. */
  .fx-features-nav { display: none; }
  .fx-fcards { gap: 12px; margin-left: -24px; margin-right: -24px; padding: 6px 24px 14px; scroll-padding-inline: 24px; }
  .fx-fc { flex-basis: 78%; max-width: 320px; }
  .fx-sk-tag { padding: 4px 6px 4px 7px; }
  .fx-sk-tag i { font-size: 9px; letter-spacing: .06em; }
  .fx-sk-tag b { font-size: 12px; }
  .fx-features-foot { text-align: left; }
  /* Stacked, the required line gets the full row so "A phone" stays on one line. */
  .fx-kit-group.is-req { grid-column: 1 / -1; }
  .fx-lens-grid { grid-template-columns: 1fr; gap: 14px; }
  .fx-lens-card { padding: 22px 20px 20px; }
  .fx-lens.is-in .fx-lens-card:nth-child(2), .fx-lens.is-in .fx-lens-card:nth-child(3) { transition-delay: .06s; }
  .fx-kaelis-in { grid-template-columns: 1fr; border-radius: 26px; }
  .fx-kaelis-in::after { background: linear-gradient(180deg, rgba(15, 13, 28, 0) 20%, rgba(15, 13, 28, .6) 45%); }
  .fx-kaelis-name { flex-direction: row; justify-content: center; gap: 24px; }
  .fx-kword li { white-space: nowrap; }
  .fx-kword.is-big li { font-size: 15px; }
  .fx-kword.is-big li b { font-size: 21px; }
  .fx-kaelis-copy h2 { max-width: none; }
  .fx-lens-lines { display: none; }
  .fx-counts { gap: 8px; }
  .fx-count b { font-size: 12px; text-align: center; }
  .fx-count-art { border-radius: 14px; }
  .fx-lens-stem { display: block; }
  .fx-js .fx-lens .fx-lens-stem { transform: scaleY(0); transform-origin: top; transition: transform .6s cubic-bezier(.2, .8, .2, 1) .4s; }
  .fx-js .fx-lens.is-in .fx-lens-stem { transform: none; }
  /* Stacked, the panel comes up from below like the copy does. */
  .fx-js .fx-tile .fx-tile-art, .fx-js .fx-tile.is-flip .fx-tile-art { transform: translateY(22px); }

  /* ONE READING ORDER PER SECTION.
     The alternating layout is a wide-screen device. Stacked, a flipped section
     put its panel above its own heading, so the panel read as belonging to the
     section before it. Narrow screens get heading, copy, then panel, always,
     with a rule marking each boundary. */
  .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; }
  .fx-tile-art > * { margin-left: auto; margin-right: auto; }
  .fx-specs { margin-bottom: 4px; }
}

@media (max-width: 480px) {
  .fx-opts { gap: 8px; }
  .fx-opt-l small { font-size: 10.5px; }
  .fx-hero .fx-lede { font-size: 16px; }
  .fx-donut { max-width: 180px; }
  .fx-hwin svg { width: 64px; height: 64px; }
  .fx-hero-note { font-size: 13px; }
  .fx-reps { height: 150px; gap: 6px; }
  .fx-cap-row { grid-template-columns: 80px 1fr 42px; }
  .fx-specs { flex-wrap: wrap; gap: 14px 22px; }
  .fx-specs dd { font-size: 17px; white-space: nowrap; }
  .fx-kit-group.is-opt .fx-kit-row { flex-wrap: wrap; gap: 10px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-js .fx-tile .fx-tile-art, .fx-js .fx-tile .fx-tile-copy, .fx-js .fx-close, .fx-js .fx-lens .fx-lens-card,
  .fx-js .fx-hero .fx-eyebrow, .fx-js .fx-h1-stack > span, .fx-js .fx-h1-stack > em, .fx-js .fx-hero .fx-lede,
  .fx-js .fx-hero .fx-chips, .fx-js .fx-hero-art, .fx-js .fx-hero-cta, .fx-js .fx-readouts, .fx-js .fx-kit {
    animation: none; transition: none; opacity: 1; transform: none;
  }
  .fx-js .fx-darc { opacity: 1; }
  .fx-js .fx-lens .fx-li-hot, .fx-js .fx-lens .fx-lens-lines path, .fx-js .fx-lens .fx-rise-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .fx-js .fx-lens .fx-rise-head, .fx-js .fx-lens .fx-rise-n.is-hi { opacity: 1; transition: none; }
  .fx-js .fx-lens .fx-lens-sum, .fx-js .fx-lens .fx-count, .fx-js .fx-lens .fx-lens-stem { opacity: 1; transform: none; transition: none; }
  .fx-js .fx-tile .fx-scan-call, .fx-body-call { opacity: 1; transform: none; transition: none; animation: none; }
  .fx-rep-bar { animation: none; }
  .fx-year-halo { animation: none; opacity: .5; }
  .fx-spark { animation: none; opacity: .8; transform: none; }
  .fx-ph2-btn { animation: none; }
  .fx-js .fx-program .fx-pflow-lines path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .fx-js .fx-features .fx-features-head, .fx-js .fx-features .fx-fc { opacity: 1; transform: none; transition: none; }
  .fx-js .fx-features .fx-sk-bone, .fx-js .fx-features .fx-sk-leads path { stroke-dashoffset: 0; animation: none; }
  .fx-js .fx-features .fx-sk-node, .fx-js .fx-features .fx-sk-tag { opacity: 1; animation: none; transition: none; }
  .fx-js .fx-features .fx-sk-node.is-far { opacity: .55; }
  .fx-honey-glow, .fx-kintro-disc { animation: none; }
  .fx-js .fx-features .fx-kword li, .fx-js .fx-kaelis .fx-kword li, .fx-js .fx-kaelis .fx-kaelis-in { opacity: 1; transform: none; transition: none; }
  .fx-js .fx-features .fx-imp-arrow svg, .fx-js .fx-features .fx-imp-app, .fx-js .fx-features .fx-fc-data .fx-week-grid i, .fx-js .fx-features .fx-kchat { opacity: 1; transform: none; transition: none; }
  .fx-edit-row em { animation: none; }
  .fx-js .fx-program .fx-week-grid i, .fx-js .fx-program .fx-opts li, .fx-js .fx-program .fx-ph2, .fx-js .fx-program .fx-kpanel, .fx-js .fx-program .fx-program-head { opacity: 1; transform: none; transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   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; }
}