/* ═══════════════════════════════════════════════════════════════
   Flex frame: Clean
   Quiet and precise — one typeface (Instrument Sans) with a true italic,
   tighter headings, small corners, a narrower page. Made for reading, so
   the content is the design. Type, shape and rhythm only.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --fx-font-display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fx-font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fx-display-weight: 500;
  --fx-display-tracking: -0.022em;
  --fx-body-size: 17px;
  --fx-h1-size: clamp(42px, 5.6vw, 76px);
  --fx-h2-size: clamp(30px, 3.4vw, 44px);
  --fx-h1-tracking: -0.035em;
  --fx-h1-line: 1;
  --fx-h2-line: 1.08;
  --fx-em-style: italic;
  --fx-em-weight: 400;
  --fx-rule-strong: 1px;
  --fx-wrap: 1120px;
  --fx-gut: clamp(20px, 4vw, 44px);
  --fx-pad: clamp(52px, 7vw, 100px);
  --fx-radius-btn: 6px;
  --fx-radius-img: 4px;
  --fx-radius-card: 8px;
  --fx-hero-mask: 4px;
  --fx-status-radius: 4px;
}

/* The italic does the work a second typeface would. */
.fx-hero h1 em { color: var(--fx-ink-dim); }
.fx-wordmark strong { font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
.fx-body h3 { font-weight: 600; letter-spacing: -0.015em; }
.fx-pullquote, .fx-review--big p, .fx-signoff { font-style: italic; font-weight: 400; }
.fx-review--small p, .fx-review--card p { font-style: italic; }
.fx-faq-list summary { font-weight: 500; font-size: 20px; }
.fx-hero-facts dt, .fx-facts dt { font-weight: 500; letter-spacing: -0.03em; }
.fx-track li::before { font-weight: 500; }
.fx-event h3 { font-size: 21px; }
.fx-work h3, .fx-offer-cards h3, .fx-offer-rows h3, .fx-team-list h3, .fx-plan h3 { font-size: 22px; }
.fx-drawer-link { font-weight: 500; letter-spacing: -0.02em; }
.fx-btn { font-weight: 600; padding: 13px 22px; }