/* ═══════════════════════════════════════════════════════════════
   Flex frame: Bold
   Strong and energetic — Big Shoulders (a tall condensed display face)
   in capitals for the big headings, Archivo for reading, square corners,
   heavy rules. The one loud move: the hero's second line is set in outline.
   Type, shape and rhythm only; colours come from the palette.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --fx-font-display: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  --fx-font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fx-display-weight: 800;
  --fx-display-tracking: 0;
  --fx-display-case: uppercase;
  --fx-body-size: 17px;
  --fx-h1-size: clamp(60px, 9.6vw, 148px);
  --fx-h2-size: clamp(44px, 6vw, 84px);
  --fx-h1-tracking: 0;
  --fx-h1-line: .86;
  --fx-h2-line: .92;
  --fx-em-style: normal;
  --fx-em-weight: 800;
  --fx-rule-strong: 3px;
  --fx-wrap: 1280px;
  --fx-gut: clamp(20px, 4vw, 48px);
  --fx-pad: clamp(56px, 8vw, 112px);
  --fx-radius-btn: 0;
  --fx-radius-img: 0;
  --fx-radius-card: 0;
  --fx-hero-mask: 0;
  --fx-status-radius: 0;
}

/* The outlined second headline line. Falls back to solid text where
   text-stroke is unsupported. */
@supports (-webkit-text-stroke: 1px black) {
  .fx-hero h1 em { display: block; -webkit-text-fill-color: transparent; -webkit-text-stroke: max(1.5px, .022em) currentColor; }
}

/* Buttons and menu: condensed capitals, like a gym's wall signage. */
.fx-btn { font-family: var(--fx-font-display); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .04em; padding: 14px 28px; }
.fx-top-cta { font-size: 17px; }
.fx-nav a { font-family: var(--fx-font-display); font-weight: 700; font-size: 19px; text-transform: uppercase; letter-spacing: .04em; color: var(--fx-ink); }
.fx-nav a:hover { color: var(--fx-accent); }
.fx-wordmark strong { font-weight: 800; font-size: 30px; text-transform: uppercase; letter-spacing: .01em; }
.fx-drawer-link { text-transform: uppercase; font-weight: 800; }
.fx-top { border-bottom-width: 3px; border-bottom-color: var(--fx-ink); }

/* Long quotes and questions read better in the body face at this weight. */
.fx-pullquote, .fx-review--big p, .fx-review--small p, .fx-review--card p { font-family: var(--fx-font-body); font-weight: 500; letter-spacing: -0.01em; }
.fx-review--big p { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; }
.fx-faq-list summary { font-family: var(--fx-font-body); font-weight: 600; font-size: 19px; }
.fx-signoff { font-style: normal; text-transform: uppercase; font-weight: 800; }
.fx-direct a, .fx-direct p { font-weight: 600; letter-spacing: .01em; }

/* Numbers, prices and section headings stay in the display face. */
.fx-body h3 { font-weight: 700; letter-spacing: 0; }
.fx-hero-facts dt, .fx-facts dt, .fx-plan-price strong, .fx-listing-price, .fx-home-price, .fx-offer-rows .fx-offer-price { font-weight: 800; }
.fx-track li::before { font-weight: 800; }
.fx-day h3, .fx-skill-group h3 { font-family: var(--fx-font-display); font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.fx-class { border-left: 4px solid var(--fx-accent); }
.fx-sched--by-day-list .fx-class { border-left: 0; }
.fx-plan--featured { box-shadow: 0 0 0 2px var(--fx-accent); }
.fx-hero-facts { border-top-width: 3px; border-top-color: currentColor; }
.fx-facts--strip { border-top: 3px solid var(--fx-ink); border-bottom: 3px solid var(--fx-ink); }

@media (max-width: 600px) {
  .fx-btn { font-size: 18px; }
  .fx-wordmark strong { font-size: 24px; }
}