/* ─── Ironi — static marketing subpages (Ironclad) ─────────────────
   About / Privacy / Terms / Contact. Consumes tokens from style.css and the
   nav/footer/reveal system from landing.css (pages wrap content in #landing
   so the scoped .lp-* and .reveal rules apply unchanged). */

/* landing.css sets overflow-x: hidden on #landing, which turns it into a
   scroll container and kills position: sticky (the TOC and About pull-quote).
   overflow: clip prevents horizontal overflow WITHOUT creating a scroll
   container, so sticky descendants keep working on these subpages. */
#landing { overflow-x: clip; }
/* style.css also puts overflow-x: hidden on html/body, which makes <body> a
   scroll container and breaks sticky from anywhere inside it. These pages have
   no app shell, so clip is safe here too. */
html, body { overflow-x: clip; }

/* ── Shared page hero ── */
.pg-hero {
  position: relative; max-width: 1280px; margin: 0 auto;
  padding: 70px 56px 34px; overflow: visible;
}
.pg-hero h1 { font: 700 44px/1.08 var(--font-ui); letter-spacing: -1.6px; margin: 16px 0 0; }
.pg-hero .pg-sub {
  font: 400 15.5px/1.65 var(--font-ui); color: var(--dim);
  max-width: 580px; margin: 18px 0 0;
}
.pg-updated {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 100px;
  padding: 7px 14px; font: 400 11px var(--font-mono); letter-spacing: 1px;
  text-transform: uppercase; color: var(--dim);
}
.pg-updated .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ── Legal pages (privacy / terms) ── */
.lg-glance {
  max-width: 1280px; margin: 26px auto 0; padding: 0 56px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.lg-glance-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 20px; transition: transform 0.3s ease, border-color 0.3s ease;
}
@media (hover: hover) {
  .lg-glance-card:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb),.25); }
}
.lg-glance-head { display: flex; align-items: center; gap: 12px; }
.lg-glance-card .ic {
  flex: none;
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(var(--accent-rgb),.1); color: var(--accent-ink-text);
  display: flex; align-items: center; justify-content: center;
}
.lg-glance-card .ic svg { width: 18px; height: 18px; }
.lg-glance-card h3 { font: 700 15px var(--font-ui); letter-spacing: -0.2px; margin: 0; min-width: 0; }
.lg-glance-card p { font: 400 13px/1.55 var(--font-ui); color: var(--dim); margin: 14px 0 0; }

.lg-wrap {
  max-width: 1100px; margin: 0 auto; padding: 44px 56px 90px;
  display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 60px;
  align-items: start;
}
.lg-toc {
  position: sticky; top: calc(84px + var(--safe-top));
  display: flex; flex-direction: column;
}
.lg-toc .lg-toc-label {
  font: 600 11px var(--font-mono); letter-spacing: 2px; color: var(--dim2);
  text-transform: uppercase; padding: 0 12px 10px;
}
.lg-toc a {
  font: 500 13px/1.4 var(--font-ui); color: var(--dim);
  padding: 8px 12px; border-left: 2px solid var(--line);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.lg-toc a:hover { color: var(--text); }
.lg-toc a.on {
  color: var(--accent-ink-text); border-left-color: var(--accent);
  background: rgba(var(--accent-rgb),.05);
}
.lg-body { max-width: 720px; }
.lg-body section { scroll-margin-top: calc(90px + var(--safe-top)); }
.lg-body section + section { margin-top: 54px; }
.lg-num { font: 600 12px var(--font-mono); letter-spacing: 2px; color: var(--accent-ink-text); }
.lg-body h2 { font: 700 26px/1.2 var(--font-ui); letter-spacing: -0.6px; margin: 8px 0 0; }
.lg-body p { font: 400 15.5px/1.7 var(--font-ui); color: var(--dim); margin: 13px 0 0; }
.lg-body ul { margin: 13px 0 0; padding-left: 22px; }
.lg-body li { font: 400 15.5px/1.7 var(--font-ui); color: var(--dim); margin-top: 7px; }
.lg-body strong { color: var(--text); font-weight: 600; }
.lg-body a { color: var(--accent-ink-text); position: relative; }
/* Underline grows from the left on enter and keeps travelling right on exit
   (rest origin = right, hover origin = left). Matches the footer links in
   landing.css. Touch keeps the plain hover underline. */
.lg-body a:hover { text-decoration: underline; }
@media (hover: hover) and (pointer: fine) {
  .lg-body a:hover { text-decoration: none; }
  .lg-body a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 1.5px; border-radius: 2px; background: currentColor;
    transform: scaleX(0); transform-origin: right center;
    transition: transform 0.22s ease;
  }
  .lg-body a:hover::after,
  .lg-body a:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-body a::after { transition: none; }
}

/* ── About page ── */
.ab-story {
  max-width: 1100px; margin: 0 auto; padding: 60px 56px 20px;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start;
}
.ab-quote {
  font: 700 28px/1.25 var(--font-ui); letter-spacing: -0.9px;
  position: sticky; top: calc(100px + var(--safe-top));
}
.ab-quote .volt { color: var(--accent-ink-text); }
.ab-story-text p { font: 400 16px/1.75 var(--font-ui); color: var(--dim); margin: 0 0 18px; }
.ab-story-text strong { color: var(--text); font-weight: 600; }

.ab-stats {
  max-width: 1280px; margin: 40px auto 0; padding: 0 56px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.ab-stat {
  background: linear-gradient(155deg, #1b1d23, #111216);
  border: 1px solid var(--line2); border-radius: 20px; padding: 26px 24px;
  position: relative; overflow: hidden;
}
.ab-stat::before {
  content: ''; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px;
  border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb),.08), transparent 70%);
  pointer-events: none;
}
.ab-stat .n { font: 700 40px var(--font-mono); letter-spacing: -1px; color: var(--accent-ink-text); }
.ab-stat .n sub { font: 700 20px var(--font-mono); vertical-align: baseline; }
.ab-stat .k {
  font: 400 11px var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dim); margin-top: 8px;
}

.ab-timeline { max-width: 720px; margin: 50px auto 0; padding: 0 56px; }
.ab-tl-item {
  position: relative; padding: 0 0 40px 34px;
  border-left: 2px solid var(--line);
}
.ab-tl-item:last-child { border-left-color: transparent; padding-bottom: 8px; }
.ab-tl-item::before {
  content: ''; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--bg); border: 2.5px solid var(--accent);
}
.ab-tl-item .tag { font: 600 11px var(--font-mono); letter-spacing: 2px; color: var(--accent-ink-text); text-transform: uppercase; }
.ab-tl-item h3 { font: 700 20px var(--font-ui); letter-spacing: -0.3px; margin: 8px 0 0; }
.ab-tl-item p { font: 400 15px/1.65 var(--font-ui); color: var(--dim); margin: 8px 0 0; max-width: 560px; }

/* ── Contact page ── */
.ct-wrap {
  max-width: 1100px; margin: 0 auto; padding: 40px 56px 90px;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: start;
}
.ct-info { display: flex; flex-direction: column; gap: 14px; }
.ct-info-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px; display: flex; gap: 16px; align-items: flex-start;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
@media (hover: hover) {
  a.ct-info-card:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb),.25); }
}
.ct-info-card .ic {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: rgba(var(--accent-rgb),.1); color: var(--accent-ink-text);
  display: flex; align-items: center; justify-content: center;
}
.ct-info-card .ic svg { width: 20px; height: 20px; }
.ct-info-card .k {
  font: 600 11px var(--font-mono); letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--dim);
}
.ct-info-card .v { font: 600 16px var(--font-ui); letter-spacing: -0.2px; margin-top: 5px; }
.ct-info-card .s { font: 400 13px/1.5 var(--font-ui); color: var(--dim); margin-top: 5px; }

.ct-card {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, #1b1d23, #111216);
  border: 1px solid var(--line2); border-radius: 24px; padding: 34px;
}
.ct-card::before {
  content: ''; position: absolute; top: -80px; right: -80px; width: 260px; height: 260px;
  border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb),.09), transparent 70%);
  pointer-events: none;
}
.ct-form { position: relative; display: flex; flex-direction: column; gap: 12px; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-field {
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 16px 13px; transition: border-color 0.2s ease;
}
.ct-field:focus-within { border-color: rgba(var(--accent-rgb),.4); }
.ct-field label {
  display: block; font: 600 10px var(--font-mono); letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--dim);
}
.ct-input {
  width: 100%; background: transparent; border: 0; outline: 0;
  font: 500 15px var(--font-ui); color: var(--text);
  padding: 6px 0 0; -webkit-appearance: none; appearance: none;
}
.ct-input::placeholder { color: var(--dim2); }
textarea.ct-input { resize: vertical; min-height: 120px; line-height: 1.55; }
.ct-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.ct-send {
  margin-top: 6px; background: var(--accent); color: var(--ink);
  border: 0; border-radius: 14px; padding: 16px; cursor: pointer;
  font: 700 15px var(--font-ui); box-shadow: var(--shadow-cta);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.ct-send:hover { background: var(--accent-pressed); }
.ct-send:active { transform: scale(0.985); }
.ct-send[disabled] { opacity: 0.7; pointer-events: none; }
.ct-send .spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid rgba(12,13,16,.3); border-top-color: var(--ink);
  animation: ct-spin 0.7s linear infinite;
}
@keyframes ct-spin { to { transform: rotate(360deg); } }
.ct-err { font: 500 13px var(--font-ui); color: var(--bad); display: none; }
.ct-err.show { display: block; }

/* success state swaps in over the form */
.ct-ok { display: none; position: relative; text-align: center; padding: 30px 10px; }
.ct-ok.show { display: block; }
.ct-ok .badge {
  width: 64px; height: 64px; border-radius: 20px; margin: 0 auto;
  background: var(--accent); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ct-ok .badge svg { width: 30px; height: 30px; }
.ct-ok h3 { font: 700 24px var(--font-ui); letter-spacing: -0.5px; margin: 20px 0 0; }
.ct-ok p { font: 400 15px/1.6 var(--font-ui); color: var(--dim); margin: 10px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .ct-ok.show .badge { animation: ct-pop 0.5s cubic-bezier(0.22, 1.4, 0.36, 1); }
  .ct-ok .badge::after {
    content: ''; position: absolute; inset: -4px; border-radius: 22px;
    border: 2px solid var(--accent); opacity: 0;
  }
  .ct-ok.show .badge::after { animation: ct-ring 0.9s ease 0.15s; }
}
@keyframes ct-pop { from { transform: scale(0.4); opacity: 0; } }
@keyframes ct-ring {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ── Shared CTA band spacing on subpages ── */
.pg-band { max-width: 1280px; margin: 0 auto; padding: 60px 56px 40px; }

/* ── Free AI workout generator acquisition page ── */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px;
  border-radius: 10px; background: var(--accent); color: var(--ink); font-weight: 700;
  transform: translateY(-150%); transition: transform 150ms ease;
}
.skip-link:focus { transform: translateY(0); }
/* The hero holds about 490px of content, which is shorter than a desktop
   viewport. Sizing it to that content left the leftover height as one dead band
   under the stats, so the fold landed on empty background and the copy read as
   pinned to the top of the window. It reserves the first screen again, but the
   slack is now split evenly above and below the content (align-content) instead
   of pooling at the bottom, and the accent wash gives that space depth rather
   than leaving it flat. #landing already pads past the fixed nav, so the same
   amount comes back off the height and the hero ends on the fold.
   The reservation is capped at 860px because that is where the balance stops
   improving: on a full-height 1080p window an uncapped hero puts 260px of
   nothing above the kicker, which is the loading-state look this had before.
   Past the cap the next section shows just above the fold instead, which reads
   as more to come rather than as a void.
   min-height, not height: a short window just grows, and the stacked layout
   below 900px drops the reservation entirely.
   The wash is a pseudo-element so the markup stays untouched; .fp-hero-copy and
   .fp-plan-builder already carry z-index: 1, so both sit above it. */
.fp-hero {
  position: relative; max-width: 1280px; margin: 0 auto;
  min-height: min(calc(100vh - 60px - var(--safe-top)), 860px);
  min-height: min(calc(100svh - 60px - var(--safe-top)), 860px);
  padding: 56px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, .82fr);
  gap: 64px; align-items: center; align-content: center;
}
/* Full-bleed, not container-width: clipped to the 1280px hero the wash ended
   in a hard vertical edge down the left of the page. #landing already clips
   overflow-x, so 100vw costs no horizontal scroll. */
.fp-hero::before {
  content: ''; position: absolute; top: -60px; bottom: -60px; left: 50%;
  width: 100vw; transform: translateX(-50%); z-index: 0; pointer-events: none;
  background:
    radial-gradient(620px 520px at 16% 30%, rgba(var(--accent-rgb), .11), transparent 64%),
    radial-gradient(560px 460px at 84% 74%, rgba(127, 212, 255, .05), transparent 66%);
}
:root[data-theme="light"] .fp-hero::before {
  background:
    radial-gradient(620px 520px at 16% 30%, rgba(var(--accent-rgb), .08), transparent 64%),
    radial-gradient(560px 460px at 84% 74%, rgba(43, 143, 201, .05), transparent 66%);
}
.fp-hero-copy { position: relative; z-index: 1; }
#landing .fp-hero h1 {
  max-width: 680px; margin: 18px 0 0;
  font: 750 clamp(48px, 5.6vw, 76px)/.94 var(--font-ui); letter-spacing: -3.4px;
  text-wrap: balance;
}
.fp-lede { max-width: 600px; margin: 25px 0 0; color: var(--lp-muted); font: 400 18px/1.6 var(--font-ui); }
.fp-hero-proof {
  display: flex; flex-wrap: wrap; gap: 11px 20px; margin: 28px 0 0; padding: 0;
  list-style: none; color: var(--lp-muted); font: 600 13px var(--font-ui);
}
.fp-hero-proof li { display: inline-flex; align-items: center; gap: 7px; }
.fp-hero-proof svg { width: 15px; height: 15px; color: var(--accent-ink-text); }
.fp-plan-preview {
  position: relative; z-index: 1; padding: 24px; border: 1px solid var(--line2);
  border-radius: 26px; background: rgba(22, 24, 29, .92); box-shadow: 0 30px 80px rgba(0, 0, 0, .36);
}
.fp-plan-meta { display: flex; justify-content: space-between; color: var(--lp-faint); font: 700 10px var(--font-mono); letter-spacing: 1.3px; }
.fp-plan-ready { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink-text); }
.fp-plan-ready i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#landing .fp-plan-preview h2 { margin: 18px 0 0; font: 700 27px/1.08 var(--font-ui); letter-spacing: -.7px; text-wrap: balance; }
.fp-plan-subtitle { margin: 7px 0 0; color: var(--lp-muted); font: 400 14px/1.5 var(--font-ui); }
.fp-plan-goals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 19px; padding: 5px; border-radius: 14px; background: rgba(255, 255, 255, .045); }
.fp-plan-goal { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: var(--lp-muted); cursor: pointer; font: 650 12px var(--font-ui); }
.fp-plan-goal[aria-pressed="true"] { background: #30343c; color: #f2f3f5; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.fp-plan-goal[aria-pressed="true"]::before { content: ''; width: 5px; height: 9px; margin-right: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fp-plan-goal:focus-visible, .fp-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fp-plan-day { margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: rgba(255, 255, 255, .02); }
.fp-plan-day-head { padding: 14px 17px; border-bottom: 1px solid var(--line); }
.fp-plan-day-head small, .fp-plan-day-head strong { display: block; }
.fp-plan-day-head small { color: var(--accent-ink-text); font: 700 9px var(--font-mono); letter-spacing: 1.2px; }
.fp-plan-day-head strong { margin-top: 3px; font: 700 19px var(--font-ui); }
.fp-preview-exercises { margin: 0; padding: 0 17px; list-style: none; }
.fp-preview-exercises li { min-height: 57px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); }
.fp-preview-exercises strong, .fp-preview-exercises small { display: block; }
.fp-preview-exercises strong { font: 650 13px var(--font-ui); }
.fp-preview-exercises small { margin-top: 2px; color: var(--lp-faint); font: 400 11px var(--font-ui); }
.fp-preview-exercises b { color: var(--accent-ink-text); font: 700 12px var(--font-mono); white-space: nowrap; }
.fp-plan-more { padding: 12px 17px; color: var(--lp-faint); font: 600 11px var(--font-ui); }
.fp-plan-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--lp-faint); font: 500 12px var(--font-ui); }
.fp-plan-foot svg { width: 16px; height: 16px; color: var(--accent-ink-text); }
/* The primary CTA carries a north-east arrow that steps 3px up and to the
   right on hover. Only the glyph moves: the button plate holds still, so the
   arrow reads as the thing answering the pointer rather than the whole
   control wobbling. 260ms on the house ease, and transform only, so it stays
   on the compositor and can be reversed mid-flight. */
.fp-primary {
  min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 14px; padding: 0 22px 0 26px; background: var(--accent); color: var(--ink);
  box-shadow: var(--shadow-cta); font: 700 15px var(--font-ui);
  touch-action: manipulation;
  transition: background 150ms ease, transform 120ms cubic-bezier(.2, .8, .2, 1);
}
.fp-primary:hover { background: var(--accent-pressed); }
.fp-primary:active { transform: scale(.985); }
.fp-primary .fp-arrow {
  width: 17px; height: 17px; flex: none;
  transition: transform 260ms cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .fp-primary:hover .fp-arrow { transform: translate(3px, -3px); }
}
.fp-hero-cta { margin-top: 28px; }
.fp-plan-builder { position: relative; z-index: 1; width: min(390px, 100%); justify-self: center; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.fp-builder-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--lp-faint); font: 700 9px/1 var(--font-mono); letter-spacing: 1.3px; }
.fp-builder-status { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-ink-text); }
.fp-builder-status i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.fp-builder-divider { height: 1px; margin-top: 16px; background: var(--line2); }
.fp-builder-days { display: grid; gap: 8px; margin-top: 18px; }
.fp-builder-day { min-height: 66px; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .025); }
.fp-builder-day > span:first-child { color: var(--accent-ink-text); font: 700 9px/1 var(--font-mono); letter-spacing: .8px; }
.fp-builder-day strong, .fp-builder-day small { display: block; }
.fp-builder-day strong { font: 700 16px/1.2 var(--font-ui); }
.fp-builder-day small { margin-top: 4px; color: var(--lp-muted); font: 400 11px/1.3 var(--font-ui); }
/* The rolling highlight used to animate border-color and background straight
   on the row, which is paint work every frame and, worse, the keyframes were
   written in hard-coded white so the pulse was invisible in light theme. It
   is now an overlay whose opacity animates: compositor-only, and the accent
   comes from --accent-rgb, which flips with the theme. */
.fp-builder-day { position: relative; }
.fp-builder-day::before {
  content: ''; position: absolute; inset: -1px; z-index: 0; pointer-events: none;
  border: 1px solid rgba(var(--accent-rgb), .34); border-radius: 15px;
  background: rgba(var(--accent-rgb), .055);
  opacity: 0; animation: fp-builder-highlight 6s ease-in-out infinite;
}
.fp-builder-day > * { position: relative; z-index: 1; }
.fp-builder-day-two::before { animation-delay: 2s; }
.fp-builder-day-three::before { animation-delay: 4s; }
.fp-builder-ready { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--text); font: 650 13px/1 var(--font-ui); }
.fp-builder-ready svg { width: 18px; height: 18px; padding: 4px; border-radius: 50%; background: var(--accent); color: var(--ink); }
@keyframes fp-builder-highlight {
  0%, 6%, 34%, 100% { opacity: 0; }
  14%, 26% { opacity: 1; }
}
/* This block used to hard-code #fff on the numbers, their captions and the
   divider, and the laurel artwork is a white-filled SVG. In light theme all
   four rendered white on a #f5f6f8 page, so the whole proof block vanished.
   Everything now reads from theme tokens and the artwork is inverted for
   light. The caption was also 8.5px, well under a legible floor; it is 11px
   with a little positive tracking, which is what small type wants. */
.fp-proof-stats {
  max-width: 430px; min-height: 68px; margin: 36px 0 0; padding: 0;
  display: grid; grid-template-columns: 44px minmax(0, 316px) 44px; gap: 8px;
  align-items: center; justify-content: start;
}
.fp-proof-stat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-proof-stat { min-width: 0; padding: 6px 10px; text-align: center; }
.fp-proof-stat + .fp-proof-stat { border-left: 1px solid var(--line2); }
.fp-proof-stat strong, .fp-proof-stat span { display: block; }
.fp-proof-stat strong {
  color: var(--text); font: 720 clamp(22px, 2vw, 25px)/1 var(--font-ui); letter-spacing: -.8px;
  font-variant-numeric: tabular-nums;
}
.fp-proof-stat span { margin-top: 5px; color: var(--lp-muted); font: 600 11px/1.35 var(--font-ui); letter-spacing: .15px; }
.fp-proof-branch { display: block; width: 44px; height: 68px; pointer-events: none; opacity: .9; }
:root[data-theme="light"] .fp-proof-branch { filter: invert(1); opacity: .55; }
#landing .fp-compare h2 { margin: 14px 0 0; font: 700 42px/1.04 var(--font-ui); letter-spacing: -1.5px; text-wrap: balance; }
.fp-steps { max-width: 1120px; margin: 0 auto; padding: 96px 56px 48px; }
.fp-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
.fp-step {
  padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel);
  transition: border-color 220ms cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .fp-step:hover { border-color: var(--line2); }
}
.fp-step-visual { min-height: 152px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fp-step-visual img { width: 100%; height: 152px; object-fit: contain; }
.fp-step-num { color: var(--accent-ink-text); font: 700 10px var(--font-mono); letter-spacing: 1.2px; }
.fp-step-num { display: block; margin-top: 17px; }
.fp-step h3 { margin: 8px 0 0; font: 700 21px/1.2 var(--font-ui); letter-spacing: -.35px; }
.fp-step p { margin: 8px 0 0; color: var(--lp-muted); font: 400 15px/1.6 var(--font-ui); text-wrap: pretty; }
.fp-compare { max-width: 1120px; margin: 0 auto; padding: 94px 56px 38px; }
.fp-table-wrap { max-width: 820px; margin: 36px auto 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.fp-table-wrap caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.fp-table-wrap table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
/* Wrapping matters once this page is localized: table-layout is fixed, so a long
   compound word (German "Trainingsplan", Russian "подробный") cannot fit its
   column and spills past a wrapper that clips instead of scrolling. English
   filled the narrowest column to the pixel, so it had no room to give.
   hyphens breaks at syllables using the page's lang; overflow-wrap is only the
   last resort for a word no dictionary can split. */
.fp-table-wrap th, .fp-table-wrap td { min-height: 58px; padding: 18px 20px; border-bottom: 1px solid var(--line); font: 500 14.5px/1.45 var(--font-ui); vertical-align: middle; hyphens: auto; overflow-wrap: break-word; }
.fp-table-wrap th:first-child, .fp-table-wrap td:first-child { width: 42%; }
.fp-table-wrap thead th { color: var(--lp-faint); font-weight: 700; }
.fp-table-wrap tbody th { color: var(--text); font-weight: 650; }
.fp-table-wrap tr:last-child th, .fp-table-wrap tr:last-child td { border-bottom: 0; }
.fp-table-wrap .is-ironi { background: rgba(var(--accent-rgb), .075); }
.fp-table-wrap thead .is-ironi { color: var(--accent-ink-text); }
/* hyphens is inherited from the cell, and a hyphen inside a pill reads as a
   broken component rather than as wrapped prose. The pill opts out; its labels
   are kept short in every dictionary instead. */
.fp-yes { display: inline-flex; padding: 4px 9px; border-radius: 999px; background: rgba(var(--accent-rgb), .12); color: var(--accent-ink-text); font-weight: 700; hyphens: none; }
.fp-bridge {
  max-width: 760px; margin: 86px auto 12px; padding: 44px; text-align: center; border: 1px solid var(--line);
  border-radius: 20px; background: var(--panel);
}
#landing .fp-bridge h2 { margin: 13px 0 0; font: 700 36px/1.08 var(--font-ui); letter-spacing: -1.2px; text-wrap: balance; }
.fp-bridge-copy > p { max-width: 560px; margin: 16px auto 0; color: var(--lp-muted); font: 400 16px/1.6 var(--font-ui); }
.fp-equipment { max-width: 1120px; margin: 0 auto; padding: 94px 56px 28px; }
.fp-equipment .lp-head-center p { max-width: 480px; margin: 14px auto 0; color: var(--lp-muted); font: 400 16px/1.55 var(--font-ui); }
.fp-equipment-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.fp-equipment-card {
  min-width: 0; overflow: hidden; position: relative; padding: 12px 12px 16px; text-align: center;
  border: 1px solid var(--line); border-radius: 20px; background: var(--panel);
  transition: border-color 180ms ease, transform 180ms ease;
}
.fp-equipment-art { height: 150px; display: flex; align-items: center; justify-content: center; }
.fp-equipment-art img { width: 100%; height: 100%; object-fit: contain; transition: transform 240ms ease; }
/* The card clips its overflow, and two of these labels are one long compound
   word once translated ("Widerstandsbänder", "Weerstandsbanden"), which is
   wider than a card in the two-column phone grid. Break it rather than cut it. */
.fp-equipment-card h3 { margin: 8px 0 0; font: 700 16px/1.2 var(--font-ui); text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
.fp-equipment-card.reveal.in { animation: fp-equipment-card-in 520ms cubic-bezier(.2, .8, .2, 1) backwards; }
.fp-equipment-card.reveal.in:nth-child(2) { animation-delay: 60ms; }
.fp-equipment-card.reveal.in:nth-child(3) { animation-delay: 120ms; }
.fp-equipment-card.reveal.in:nth-child(4) { animation-delay: 180ms; }
.fp-equipment-card.reveal.in:nth-child(5) { animation-delay: 240ms; }
@keyframes fp-equipment-card-in {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  .fp-equipment-card:hover { transform: translateY(-4px); border-color: var(--line2); }
  /* The lift plus a scale is enough; the extra -1deg tilt read as a wobble
     next to five cards that are otherwise perfectly square. */
  .fp-equipment-card:hover .fp-equipment-art img { transform: scale(1.05); }
}
.fp-simple-band { max-width: 760px; margin: 0 auto; }
#landing .fp-simple-band h2 { font-size: 40px; letter-spacing: -1.3px; }
.fp-simple-band .lp-band-actions { margin-top: 28px; }
.fp-simple-band .lp-band-actions > a { height: 52px; }
.fp-faq { max-width: 840px; margin: 0 auto; padding: 94px 56px 32px; }
.fp-faq-list { margin-top: 38px; border-top: 1px solid var(--line); }
.fp-faq details { border-bottom: 1px solid var(--line); }
.fp-faq summary { min-height: 68px; display: flex; align-items: center; padding: 18px 42px 18px 0; position: relative; cursor: pointer; list-style: none; touch-action: manipulation; font: 650 17px/1.4 var(--font-ui); }
.fp-faq summary::-webkit-details-marker { display: none; }
.fp-faq summary::after { content: '+'; position: absolute; right: 4px; color: var(--accent-ink-text); font: 400 25px var(--font-ui); transition: transform 220ms cubic-bezier(.2, .8, .2, 1); }
.fp-faq details[open] summary::after { transform: rotate(45deg); }
/* A summary is focusable but had no visible focus ring of its own, so keyboard
   users lost their place walking the list. */
.fp-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.fp-faq details p { margin: 0; padding: 0 42px 22px 0; color: var(--lp-muted); font: 400 15.5px/1.65 var(--font-ui); }
.fp-note { margin-top: 18px; color: var(--lp-faint); font: 400 12.5px/1.55 var(--font-ui); }

@media (max-width: 900px) {
  .fp-hero { min-height: 0; grid-template-columns: 1fr; gap: 46px; }
  .fp-plan-preview { width: min(560px, 100%); justify-self: center; }
  .fp-plan-builder { width: min(520px, 100%); justify-self: start; }
}

@media (max-width: 640px) {
  .fp-hero { padding: 42px 20px 34px; gap: 38px; }
  .fp-hero-copy { display: flex; flex-direction: column; }
  .fp-hero-copy > .lp-kicker { order: 1; }
  .fp-hero-copy > h1 { order: 2; }
  .fp-hero-copy > .fp-lede { order: 3; }
  .fp-hero-copy > .fp-hero-proof { order: 4; }
  .fp-hero-copy > .fp-proof-stats { order: 5; }
  .fp-hero-copy > .fp-hero-cta { order: 6; }
  #landing .fp-hero h1 { font-size: 44px; letter-spacing: -2px; }
  .fp-lede { margin-top: 18px; font-size: 16px; }
  .fp-hero-cta { width: 100%; }
  .fp-hero-proof { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fp-plan-preview { padding: 18px; border-radius: 22px; }
  .fp-plan-builder { width: 100%; padding: 18px; border-radius: 18px; }
  .fp-builder-day { min-height: 60px; grid-template-columns: 48px minmax(0, 1fr); padding: 10px 12px; }
  .fp-builder-day strong { font-size: 15px; }
  /* 8px captions were unreadable on a phone. The block gets the width it needs
     for 10.5px instead of squeezing the type to fit a fixed track. */
  .fp-proof-stats { min-height: 56px; margin: 30px auto 0; padding: 0; grid-template-columns: 34px minmax(0, 226px) 34px; gap: 6px; justify-content: center; }
  .fp-proof-branch { width: 34px; height: 56px; }
  .fp-proof-stat { padding: 5px 6px; }
  .fp-proof-stat strong { font-size: 20px; letter-spacing: -.6px; }
  .fp-proof-stat span { margin-top: 4px; font-size: 10.5px; line-height: 1.3; }
  #landing .fp-compare h2 { font-size: 34px; letter-spacing: -1px; }
  .fp-steps { padding: 64px 20px 28px; }
  .fp-step-grid { grid-template-columns: 1fr; margin-top: 28px; }
  .fp-step { padding: 16px; }
  .fp-step-visual, .fp-step-visual img { min-height: 132px; height: 132px; }
  .fp-compare { padding: 70px 20px 24px; }
  .fp-table-wrap { margin-top: 30px; border-radius: 17px; }
  .fp-table-wrap th, .fp-table-wrap td { padding: 14px 10px; font-size: 12.5px; line-height: 1.4; }
  /* The Ironi column holds one short badge, so on a phone it gives its width to
     the prose column beside it, which is the one long enough to need breaking. */
  .fp-table-wrap th:first-child, .fp-table-wrap td:first-child { width: 38%; }
  .fp-table-wrap .is-ironi { width: 25%; }
  .fp-bridge { margin: 58px 20px 0; padding: 30px 22px; border-radius: 20px; }
  #landing .fp-bridge h2 { font-size: 28px; }
  .fp-equipment { padding: 70px 20px 18px; }
  .fp-equipment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
  .fp-equipment-card { padding: 10px 10px 14px; border-radius: 17px; }
  .fp-equipment-card:last-child { width: calc(50% - 5px); grid-column: 1 / -1; justify-self: center; }
  .fp-equipment-art { height: 118px; }
  .fp-equipment-card h3 { margin-top: 5px; font-size: 15px; }
  #landing .fp-simple-band h2 { font-size: 31px; letter-spacing: -1px; }
  .fp-faq { padding: 70px 20px 20px; }
  .pg-band { padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .skip-link, .fp-primary, .fp-primary .fp-arrow, .fp-step,
  .fp-equipment-card, .fp-equipment-art img, .fp-faq summary::after { transition: none; }
  /* The arrow holds still: anyone who asked for less movement gets the colour
     shift on hover and nothing that travels. */
  .fp-primary:hover .fp-arrow { transform: none; }
  .fp-builder-day::before { animation: none; opacity: 0; }
  .fp-equipment-card.reveal.in { animation: none; }
}

/* .fp-plan-builder and .fp-step were missing from this list, so in light theme
   they sat as flat white rectangles with no separation from the white page
   behind them. .fp-builder-day carried a white-on-white tint for the same
   reason. The closing band is deliberately absent: .lp-band carries no
   background in either theme, and giving it a panel here drew a white box
   around copy that is meant to sit straight on the page. */
:root[data-theme="light"] .fp-plan-preview,
:root[data-theme="light"] .fp-plan-builder,
:root[data-theme="light"] .fp-step,
:root[data-theme="light"] .fp-table-wrap,
:root[data-theme="light"] .fp-bridge,
:root[data-theme="light"] .fp-equipment-card { background: rgba(255, 255, 255, .94); box-shadow: 0 28px 70px rgba(12, 13, 16, .1); }
:root[data-theme="light"] .fp-step { box-shadow: 0 16px 40px -26px rgba(12, 13, 16, .3); }
:root[data-theme="light"] .fp-plan-goals { background: rgba(12, 13, 16, .045); }
:root[data-theme="light"] .fp-plan-day,
:root[data-theme="light"] .fp-builder-day { background: rgba(12, 13, 16, .022); }

/* ── Tablet ── */
@media (max-width: 1000px) {
  .lg-wrap { grid-template-columns: 1fr; gap: 0; }
  .lg-toc {
    position: static; flex-direction: row; flex-wrap: wrap; gap: 8px;
    margin-bottom: 40px;
  }
  .lg-toc .lg-toc-label { display: none; }
  .lg-toc a {
    border: 1px solid var(--line); border-radius: 100px; padding: 8px 14px;
  }
  .lg-toc a.on { border-color: rgba(var(--accent-rgb),.4); background: rgba(var(--accent-rgb),.06); }
  .lg-glance { grid-template-columns: 1fr 1fr; }
  .ab-story { grid-template-columns: 1fr; gap: 26px; }
  .ab-quote { position: static; }
  .ab-stats { grid-template-columns: 1fr 1fr; }
  .ct-wrap { grid-template-columns: 1fr; }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .pg-hero { padding: 40px 20px 20px; }
  .pg-hero h1 { font-size: 32px; letter-spacing: -1px; }
  .lg-glance { grid-template-columns: 1fr; padding: 0 20px; }
  .lg-wrap { padding: 30px 20px 60px; }
  .ab-story { padding: 40px 20px 10px; }
  .ab-quote { font-size: 26px; }
  .ab-stats { grid-template-columns: 1fr 1fr; padding: 0 20px; gap: 10px; }
  .ab-stat { padding: 20px 18px; }
  .ab-stat .n { font-size: 30px; }
  .ab-timeline { padding: 0 20px; }
  .ct-wrap { padding: 26px 20px 60px; gap: 24px; }
  .ct-card { padding: 24px 20px; }
  .ct-row { grid-template-columns: 1fr; }
  .pg-band { padding: 40px 20px 24px; }
}

/* ─── IRONCLAD LIGHT (about/contact) — fork the baked-dark cards ─────────────
   .ab-stat and .ct-card use a hardcoded dark gradient that assumes a dark page.
   On the light theme they'd be dark-on-light with dark text inside → fork them
   to light panels. Dark theme is untouched (scoped under data-theme="light"). */
:root[data-theme="light"] .ab-stat,
:root[data-theme="light"] .ct-card {
  background: linear-gradient(155deg, #ffffff, #f2f4f7);
  border-color: var(--line2);
}
:root[data-theme="light"] .ab-stat { box-shadow: 0 12px 28px -20px rgba(12, 13, 16, 0.28); }
:root[data-theme="light"] .ct-card { box-shadow: 0 18px 44px -26px rgba(12, 13, 16, 0.30); }
/* Inputs sit on the now-light card: give them a hair more tint + a clear border. */
:root[data-theme="light"] .ct-field { background: #f6f7f9; border-color: var(--line2); }