/* ============================================================
   SoccerTraining.io — COMPONENTS
   ============================================================ */

/* Any image sized by CSS height keeps its aspect ratio. The HTML width
   attribute must never win — it stretched the footer mark 3.2x. */
:where(img[width][height]) { height: auto; }
.c-nav__brand img, .c-drawer__top img, .c-footer__mark img { width: auto; }

body {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Type ---------- */
.t-display, .t-h1, .t-h2, .t-h3 {
  font-family: var(--font-display);
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-weight: 700;
}
.t-display { font-size: var(--fs-display); letter-spacing: -0.045em; line-height: .96; }
.t-h1 { font-size: var(--fs-h1); }
.t-h2 { font-size: var(--fs-h2); line-height: 1.05; }
.t-h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.2; }
.t-h4 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; letter-spacing: -0.015em; }
.t-lead { font-size: var(--fs-lead); color: var(--text-secondary); max-width: 60ch; }
.t-body { color: var(--text-secondary); max-width: 68ch; }
.t-sm { font-size: var(--fs-sm); color: var(--text-secondary); }
.t-label {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); line-height: 1;
}
.t-data { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.t-accent { color: var(--accent); }

.c-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.c-eyebrow::before { content:""; width: 22px; height: 2px; background: currentColor; flex: none; }

/* ---------- Layout ---------- */
.u-container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.u-container--wide { width:100%; max-width:var(--container-wide); margin-inline:auto; padding-inline:var(--gutter); }
.u-container--narrow { width:100%; max-width:820px; margin-inline:auto; padding-inline:var(--gutter); }
.l-section { padding-block: var(--section-y); position: relative; }
.l-section--tight { padding-block: calc(var(--section-y) * .62); }
.u-invert { background: var(--surface-invert); color: var(--text-on-invert); }
.u-invert .t-lead, .u-invert .t-body, .u-invert .t-sm { color: rgba(234,240,251,.76); }
.u-invert .t-label { color: rgba(234,240,251,.55); }
.u-deep { background: var(--surface-deep); color: var(--text-on-invert); }
.u-sunken { background: var(--surface-sunken); }
.u-hairline { border-top: 1px solid var(--border); }
.u-sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
.u-skip { position:absolute;left:16px;top:-100px;z-index:999;background:var(--accent);color:#fff;padding:12px 20px;font-weight:700; }
.u-skip:focus { top:16px; }

.c-sechead { display:grid; gap:var(--sp-4); max-width:64ch; margin-block-end:var(--sp-9); }
.c-sechead--split { display:flex; flex-wrap:wrap; gap:var(--sp-6); align-items:flex-end; justify-content:space-between; max-width:none; }

/* ---------- Buttons ---------- */
.c-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:14px 24px; border-radius:var(--radius-btn);
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm);
  letter-spacing:-.01em; text-decoration:none; border:1px solid transparent; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.c-btn--primary { background:var(--accent); color:var(--text-on-accent); }
.c-btn--primary:hover { background:var(--accent-hover); transform:translateY(calc(-1px * var(--motion-scale))); }
.c-btn--dark { background:var(--brand); color:#fff; }
.c-btn--dark:hover { background:var(--p-navy-700); }
.c-btn--ghost { border-color:var(--border-strong); color:var(--text-primary); }
.c-btn--ghost:hover { border-color:var(--brand); color:var(--brand); }
.u-invert .c-btn--ghost, .u-deep .c-btn--ghost { border-color:var(--border-invert); color:var(--text-on-invert); }
.u-invert .c-btn--ghost:hover, .u-deep .c-btn--ghost:hover { border-color:#fff; color:#fff; }
.c-btn--white { background:#fff; color:var(--brand); }
.c-btn--white:hover { background:var(--p-navy-50); }
.c-btn--lg { padding:18px 32px; font-size:var(--fs-body); }
.c-btn--sm { padding:9px 16px; font-size:var(--fs-sm); }
.c-btn--block { width:100%; }
.c-btnrow { display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; }

/* ---------- Nav ---------- */
.c-nav { position:fixed; inset-inline:0; top:0; z-index:100; border-bottom:1px solid transparent; transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.c-nav.is-stuck { background:rgba(250,250,247,.9); backdrop-filter:blur(14px); border-bottom-color:var(--border); }
.c-nav__in { display:flex; align-items:center; gap:var(--sp-8); height:88px; }
.c-nav__brand { flex:none; display:inline-flex; }
.c-nav__brand img { height:40px; width:auto; max-width:none; }
.c-nav__links { display:flex; gap:var(--sp-6); margin-inline-start:var(--sp-2); }
.c-nav__links a { font-size:var(--fs-sm); font-weight:600; text-decoration:none; color:var(--text-secondary); }
.c-nav__links a:hover { color:var(--text-primary); }
.c-nav__act { margin-inline-start:auto; display:flex; align-items:center; gap:var(--sp-4); }
.c-nav__act a[data-signin] { font-size:var(--fs-sm); font-weight:600; text-decoration:none; color:var(--text-secondary); }
.c-burger { display:none; width:44px; height:44px; align-items:center; justify-content:center; }
.c-burger span,.c-burger span::before,.c-burger span::after { display:block; content:""; width:22px; height:2px; background:var(--text-primary); }
.c-burger span { position:relative; }
.c-burger span::before { position:absolute; top:-7px; }
.c-burger span::after { position:absolute; top:7px; }

.c-drawer { position:fixed; inset:0; z-index:200; background:var(--surface-page); display:flex; flex-direction:column; padding:var(--sp-5) var(--gutter) var(--sp-8); transform:translateX(100%); visibility:hidden; transition:transform var(--dur-base) var(--ease-out); }
.c-drawer.is-open { transform:none; visibility:visible; }
.c-drawer__top { display:flex; align-items:center; justify-content:space-between; height:88px; }
.c-drawer__top img { height:40px; width:auto; max-width:none; flex:none; }
.c-drawer__close { width:44px; height:44px; font-size:1.75rem; line-height:1; }
.c-drawer__links { display:grid; gap:var(--sp-2); margin-block:var(--sp-7) auto; }
.c-drawer__links a { font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem,7vw,2.2rem); letter-spacing:-.035em; text-decoration:none; padding-block:var(--sp-3); border-bottom:1px solid var(--border); }
.c-drawer__foot { display:grid; gap:var(--sp-3); }

/* ---------- Hero ---------- */
.c-hero { padding-block: calc(88px + var(--sp-11)) var(--sp-11); overflow:hidden; }
.c-hero__grid { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:var(--sp-10); align-items:center; }
.c-hero__title { margin-block:var(--sp-5) var(--sp-5); max-width:17ch; }
.c-hero__title em { font-style:normal; color:var(--accent); }
.c-hero__sub { margin-block-end:var(--sp-7); max-width:52ch; }
.c-hero__note { margin-block-start:var(--sp-6); font-size:var(--fs-sm); color:var(--text-muted); display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.c-hero__note a { color:var(--brand); text-underline-offset:3px; }

/* Product shot: browser chrome + phone overlap */
.c-shot { position:relative; }
.c-shot__browser { border:1px solid var(--border-strong); border-radius:8px; overflow:hidden; box-shadow:var(--shadow-lift); background:#fff; }
.c-shot__bar { display:flex; align-items:center; gap:6px; padding:10px 12px; background:#eceeed; border-bottom:1px solid var(--border); }
.c-shot__dot { width:9px; height:9px; border-radius:50%; background:#c9cdcb; }
.c-shot__url { margin-inline:auto; font-family:var(--font-mono); font-size:11px; color:#7b837f; background:#fff; padding:3px 14px; border-radius:99px; }
.c-shot__browser img { width:100%; height:auto; display:block; }
.c-shot__phone { position:absolute; width:23%; right:-3%; bottom:-9%; border:5px solid #16181c; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-lift); background:#000; }
.c-shot__phone img { width:100%; height:auto; }

/* ---------- Stat strip ---------- */
.c-facts { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--border); }
.c-facts__i { padding:var(--sp-7) var(--sp-5) var(--sp-7) 0; border-inline-start:1px solid var(--border); padding-inline-start:var(--sp-6); }
.c-facts__i:first-child { border-inline-start:0; padding-inline-start:0; }
.c-facts__v { font-family:var(--font-display); font-weight:700; font-size:clamp(1.75rem,3vw,2.6rem); letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.c-facts__v span { color:var(--accent); }
.c-facts__l { margin-block-start:var(--sp-3); }

/* ---------- Comparison ---------- */
.c-vs { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
.c-vs__col { border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface-raised); padding:var(--sp-7); }
.c-vs__col--ours { border-color:var(--brand); border-width:2px; position:relative; }
.c-vs__tag { display:inline-block; font-family:var(--font-mono); font-size:var(--fs-label); font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:5px 10px; border-radius:var(--radius-btn); background:var(--surface-sunken); color:var(--text-muted); margin-block-end:var(--sp-5); }
.c-vs__col--ours .c-vs__tag { background:var(--brand); color:#fff; }
.c-vs__list { display:grid; gap:var(--sp-4); margin-block-start:var(--sp-5); }
.c-vs__list li { display:flex; gap:var(--sp-4); align-items:flex-start; font-size:var(--fs-sm); }
.c-vs__list svg { flex:none; width:19px; height:19px; margin-block-start:3px; }
.c-vs__col--theirs svg { color:var(--text-muted); }
.c-vs__col--ours svg { color:var(--accent); }
.c-vs__col--ours .c-vs__list li { color:var(--text-primary); }

/* ---------- Feature rows ---------- */
.c-feat { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-10); align-items:center; }
.c-feat + .c-feat { margin-block-start:var(--sp-12); }
.c-feat--flip .c-feat__media { order:-1; }
.c-feat__body { display:grid; gap:var(--sp-4); }
.c-feat__media img { width:100%; border-radius:var(--radius-card); border:1px solid var(--border); box-shadow:var(--shadow-card); }
.c-checks { display:grid; gap:var(--sp-3); margin-block-start:var(--sp-2); }
.c-checks li { display:flex; gap:var(--sp-3); align-items:flex-start; font-size:var(--fs-sm); color:var(--text-secondary); }
.c-checks svg { flex:none; width:17px; height:17px; margin-block-start:4px; color:var(--accent); }

/* ---------- Cards ---------- */
.c-grid { display:grid; gap:var(--sp-5); }
.c-grid--3 { grid-template-columns:repeat(3,1fr); }
.c-grid--2 { grid-template-columns:repeat(2,1fr); }
.c-card { border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface-raised); padding:var(--sp-6); display:grid; gap:var(--sp-3); align-content:start; }
.u-invert .c-card, .u-deep .c-card { background:rgba(255,255,255,.05); border-color:var(--border-invert); }
.c-card__n { font-family:var(--font-mono); font-size:var(--fs-label); font-weight:700; letter-spacing:.14em; color:var(--accent); }

/* ---------- Pricing ---------- */
.c-price { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--sp-9); align-items:center; }
.c-price__card { background:var(--surface-raised); border:2px solid var(--brand); border-radius:var(--radius-card); padding:var(--sp-8); box-shadow:var(--shadow-card); }
.c-price__big { font-family:var(--font-display); font-weight:700; letter-spacing:-.045em; line-height:1; font-size:clamp(2.75rem,5vw,4rem); font-variant-numeric:tabular-nums; }
.c-price__big small { font-size:.36em; letter-spacing:-.01em; color:var(--text-muted); font-weight:700; }
.c-price__rows { display:grid; gap:var(--sp-3); margin-block:var(--sp-6); padding-block:var(--sp-6); border-block:1px solid var(--border); }
.c-price__rows li { display:flex; gap:var(--sp-3); align-items:center; font-size:var(--fs-sm); }
.c-price__rows svg { width:17px; height:17px; flex:none; color:var(--accent); }

/* ---------- Directory ---------- */
.c-states { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:var(--sp-3); }
.c-state {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  border:1px solid var(--border-invert); border-radius:var(--radius-card);
  padding:var(--sp-4) var(--sp-5); text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.c-state:hover { border-color:#fff; background:rgba(255,255,255,.06); }
.c-state__n { font-family:var(--font-display); font-weight:700; }
.c-state__c { font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.1em; color:rgba(234,240,251,.5); }
.c-state--live .c-state__c { color:var(--accent); }
.c-state--soon { opacity:.5; pointer-events:none; }
.c-counties { display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); margin-block-start:var(--sp-6); }
.c-counties a { font-size:var(--fs-sm); text-decoration:none; color:rgba(234,240,251,.72); border:1px solid var(--border-invert); border-radius:var(--radius-pill); padding:6px 14px; }
.c-counties a:hover { color:#fff; border-color:#fff; }

/* ---------- Steps ---------- */
.c-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); counter-reset:s; }
.c-step { border-top:2px solid var(--brand); padding-block-start:var(--sp-5); display:grid; gap:var(--sp-3); align-content:start; }
.c-step__n { font-family:var(--font-mono); font-size:var(--fs-label); font-weight:700; letter-spacing:.14em; color:var(--accent); }

/* ---------- FAQ ---------- */
.c-faq { display:grid; gap:var(--sp-2); }
.c-faq details { border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface-raised); }
.c-faq summary { list-style:none; cursor:pointer; padding:var(--sp-5) var(--sp-6); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); font-family:var(--font-display); font-weight:700; font-size:var(--fs-h4); letter-spacing:-.015em; }
.c-faq summary::-webkit-details-marker { display:none; }
.c-faq summary::after { content:"+"; font-family:var(--font-mono); color:var(--accent); font-size:1.35rem; line-height:1; flex:none; }
.c-faq details[open] summary::after { content:"\2013"; }
.c-faq__a { padding:0 var(--sp-6) var(--sp-6); font-size:var(--fs-sm); color:var(--text-secondary); max-width:80ch; }

/* ---------- CTA ---------- */
.c-cta__in { display:flex; flex-wrap:wrap; gap:var(--sp-8); align-items:center; justify-content:space-between; }
.c-cta__copy { max-width:36ch; }

/* ---------- Footer ---------- */
.c-footer { background:var(--surface-deep); color:var(--text-on-invert); }
.c-footer__grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:var(--sp-7); padding-block:var(--sp-10); }
.c-footer__mark img { height:48px; width:auto; max-width:none; margin-block-end:var(--sp-5); }
.c-footer h4 { margin-block-end:var(--sp-4); }
.c-footer ul { display:grid; gap:var(--sp-3); }
.c-footer a { color:rgba(234,240,251,.68); text-decoration:none; font-size:var(--fs-sm); }
.c-footer a:hover { color:#fff; }
.c-footer__seo { border-top:1px solid var(--border-invert); padding-block:var(--sp-7); display:grid; gap:var(--sp-3); }
.c-footer__seo p { display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); font-size:var(--fs-sm); }
.c-footer__bar { border-top:1px solid var(--border-invert); padding-block:var(--sp-5); display:flex; flex-wrap:wrap; gap:var(--sp-5); justify-content:space-between; font-size:var(--fs-sm); color:rgba(234,240,251,.5); }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .c-hero__grid { grid-template-columns:1fr; gap:var(--sp-9); }
  .c-hero__title { max-width:none; }
  .c-shot__phone { width:20%; right:0; bottom:-6%; }
  .c-feat, .c-price { grid-template-columns:1fr; gap:var(--sp-7); }
  .c-feat--flip .c-feat__media { order:0; }
  .c-grid--3 { grid-template-columns:repeat(2,1fr); }
  .c-footer__grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:860px){
  .c-nav__links, .c-nav__act a[data-signin] { display:none; }
  .c-burger { display:flex; }
  .c-facts { grid-template-columns:repeat(2,1fr); }
  .c-facts__i:nth-child(3) { border-inline-start:0; padding-inline-start:0; }
  .c-facts__i:nth-child(n+3) { border-top:1px solid var(--border); }
  .c-vs, .c-steps { grid-template-columns:1fr; }
  .c-cta__copy { max-width:none; }
}
@media (max-width:860px){
  /* Touch targets measured at 390px: county chips and footer links both
     fell under 44px. Fixed, not estimated. */
  .c-counties a { padding:11px 16px; }
  .c-footer a, .c-footer__seo a { display:inline-block; padding-block:10px; }
  .c-faq summary { padding-block:var(--sp-5); }
}
@media (max-width:640px){
  /* Measured: at 390px the hero headline ran to five lines at the 2.6rem
     clamp floor. Desktop scale is deliberately large and stays untouched;
     this only lowers the floor on small phones. */
  .c-hero__title { font-size:clamp(2.05rem, 8.8vw, 2.6rem); }
  .c-grid--3, .c-grid--2 { grid-template-columns:1fr; }
  .c-footer__grid { grid-template-columns:1fr 1fr; }
  .c-shot__phone { display:none; }
  .c-btnrow .c-btn { flex:1 1 100%; }
  .c-hero { padding-block:calc(88px + var(--sp-8)) var(--sp-9); }
  .c-vs__col, .c-price__card { padding:var(--sp-6); }
}

/* ---------- Campaign mock (marketing feature illustration) ---------- */
.c-mock { background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); overflow:hidden; }
.c-mock__bar { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border); background:var(--surface-sunken); }
.c-mock__bar .t-label { color:var(--text-secondary); }
.c-mock__pill { margin-inline-start:auto; font-family:var(--font-mono); font-size:var(--fs-label); font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--accent-subtle); color:var(--accent); padding:4px 10px; border-radius:var(--radius-pill); }
.c-mock__body { padding:var(--sp-6); display:grid; gap:var(--sp-4); }
.c-mock__to { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.c-mock__chip { font-size:var(--fs-label); font-family:var(--font-mono); font-weight:700; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--border-strong); border-radius:var(--radius-pill); padding:5px 11px; color:var(--text-primary); }
.c-mock__chip--on { background:var(--brand); border-color:var(--brand); color:#fff; }
.c-mock__draft { border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--radius-btn); padding:var(--sp-5); background:var(--surface-page); }
.c-mock__draft p { font-size:var(--fs-sm); color:var(--text-secondary); margin-block-start:var(--sp-2); }
.c-mock__foot { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding:var(--sp-5) var(--sp-6); border-top:1px solid var(--border); background:var(--surface-sunken); }
.c-mock__stat { margin-inline-start:auto; font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }

/* ---------- Systems strip (replaces the old price facts) ---------- */
.c-sys { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--border); }
.c-sys__i { padding:var(--sp-7) var(--sp-6) var(--sp-7) var(--sp-6); border-inline-start:1px solid var(--border); display:grid; gap:var(--sp-3); align-content:start; }
.c-sys__i:first-child { border-inline-start:0; padding-inline-start:0; }
.c-sys__n { font-family:var(--font-mono); font-size:var(--fs-label); font-weight:700; letter-spacing:.16em; color:var(--accent); }
.c-sys__t { font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); letter-spacing:-.025em; }
.c-sys__d { font-size:var(--fs-sm); color:var(--text-secondary); }
@media (max-width:860px){
  .c-sys { grid-template-columns:repeat(2,1fr); }
  .c-sys__i:nth-child(3) { border-inline-start:0; padding-inline-start:0; }
  .c-sys__i:nth-child(n+3) { border-top:1px solid var(--border); }
}
@media (max-width:640px){ .c-sys { grid-template-columns:1fr; }
  .c-sys__i { border-inline-start:0; padding-inline:0; }
  .c-sys__i + .c-sys__i { border-top:1px solid var(--border); } }

/* ---------- Fee calculator ---------- */
.c-calc { border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface-raised); overflow:hidden; box-shadow:var(--shadow-card); }
.c-calc__top { display:flex; flex-wrap:wrap; gap:var(--sp-6); align-items:flex-end; justify-content:space-between; padding:var(--sp-7); border-bottom:1px solid var(--border); background:var(--surface-sunken); }
.c-calc__field { display:grid; gap:var(--sp-3); }
.c-calc__input { display:flex; align-items:center; gap:var(--sp-2); border:1px solid var(--border-strong); border-radius:var(--radius-btn); background:#fff; padding:0 var(--sp-4); max-width:230px; }
.c-calc__input span { font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--text-muted); }
.c-calc__input input { border:0; outline:0; width:100%; padding:12px 0; font-family:var(--font-display); font-weight:700; font-size:1.5rem; letter-spacing:-.03em; background:transparent; font-variant-numeric:tabular-nums; }
.c-calc__modes { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.c-calc__mode { font-family:var(--font-mono); font-size:var(--fs-label); font-weight:700; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--border-strong); border-radius:var(--radius-pill); padding:10px 16px; color:var(--text-primary); transition:all var(--dur-fast) var(--ease-out); }
.c-calc__mode:hover { border-color:var(--brand); }
.c-calc__mode[aria-pressed="true"] { background:var(--brand); border-color:var(--brand); color:#fff; }
.c-calc__mode:focus-visible { outline-color:var(--accent); outline-offset:2px; }

.c-calc__panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.c-calc__copy { padding:var(--sp-8) var(--sp-7); display:grid; gap:var(--sp-4); align-content:start; }
.c-calc__math { padding:var(--sp-8) var(--sp-7); border-inline-start:1px solid var(--border); background:var(--p-navy-50); }
.c-calc__rows { display:grid; gap:var(--sp-3); margin-block:var(--sp-5) var(--sp-6); }
.c-calc__row { display:flex; justify-content:space-between; gap:var(--sp-4); font-size:var(--fs-sm); align-items:baseline; }
.c-calc__row span { color:var(--text-secondary); }
.c-calc__row b { font-family:var(--font-mono); font-weight:700; font-variant-numeric:tabular-nums; }
.c-calc__row--fee b { color:var(--accent); }
.c-calc__pair { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); border-top:1px solid var(--border-strong); padding-block-start:var(--sp-5); }
.c-calc__pair > div { display:grid; gap:var(--sp-2); }
.c-calc__big { font-family:var(--font-display); font-weight:700; font-size:clamp(1.75rem,3vw,2.5rem); letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums; }
.c-calc__big--keep { color:var(--brand); }
.c-calc__note { font-size:var(--fs-sm); color:var(--text-secondary); margin-block-start:var(--sp-5); }
.c-calc__foot { border-top:1px solid var(--border); padding:var(--sp-6) var(--sp-7); display:grid; gap:var(--sp-2); background:var(--surface-sunken); }
.c-calc__foot p { font-size:var(--fs-sm); color:var(--text-secondary); }
.c-calc__foot strong { color:var(--text-primary); }
@media (max-width:900px){
  .c-calc__mode { padding:13px 18px; }
  .c-calc__modes { width:100%; }
  .c-calc__panel { grid-template-columns:1fr; }
  .c-calc__math { border-inline-start:0; border-top:1px solid var(--border); }
  .c-calc__top, .c-calc__copy, .c-calc__math, .c-calc__foot { padding:var(--sp-6); }
}

/* ---------- Live trainers strip ---------- */
.c-live { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-8); }
.c-live__lead { font-size:var(--fs-sm); color:var(--text-secondary); max-width:26ch; }
.c-live__row { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-8); }
.c-live__item { display:flex; align-items:center; gap:var(--sp-4); text-decoration:none; }
.c-live__item img { height:52px; width:auto; }
.c-live__meta { display:grid; gap:2px; }
.c-live__meta strong { font-family:var(--font-display); font-weight:700; font-size:var(--fs-h4); letter-spacing:-.02em; }
.c-live__meta span { font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.c-live__item:hover .c-live__meta strong { color:var(--brand); }

/* ---------- Directory listing (state page) ---------- */
.c-listing { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--sp-6); align-items:start;
  border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface-raised); padding:var(--sp-7); }
.c-listing + .c-listing { margin-block-start:var(--sp-4); }
.c-listing__crest img { width:88px; height:auto; }
.c-listing__body { display:grid; gap:var(--sp-3); }
.c-listing__meta { display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); font-size:var(--fs-sm); color:var(--text-secondary); }
.c-listing__tags { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.c-listing__tag { font-family:var(--font-mono); font-size:var(--fs-label); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--border-strong); border-radius:var(--radius-pill); padding:5px 11px; color:var(--text-primary); }
.c-listing__act { display:grid; gap:var(--sp-3); justify-items:end; text-align:end; min-width:190px; }
.c-listing__from { font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.c-listing__price { font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,2.2vw,2rem); letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }

.c-pricetable { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.c-pricetable th, .c-pricetable td { text-align:start; padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border); }
.c-pricetable th { font-family:var(--font-mono); font-size:var(--fs-label); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); }
.c-pricetable td:last-child, .c-pricetable th:last-child { text-align:end; font-family:var(--font-mono); font-weight:700; font-variant-numeric:tabular-nums; }
.c-pricetable tbody tr:last-child td { border-bottom:0; }
.c-tablewrap { border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface-raised); overflow:hidden; }

/* ---------- Legal / prose pages ---------- */
.c-prose { max-width:74ch; }
.c-prose h2 { font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); letter-spacing:-.025em; margin-block:var(--sp-8) var(--sp-4); }
.c-prose h2:first-child { margin-block-start:0; }
.c-prose p, .c-prose li { color:var(--text-secondary); margin-block-end:var(--sp-4); }
.c-prose ul { list-style:disc; padding-inline-start:var(--sp-5); margin-block-end:var(--sp-5); }
.c-prose li { margin-block-end:var(--sp-2); }
.c-prose strong { color:var(--text-primary); }
.c-prose a { color:var(--brand); text-underline-offset:3px; }
.c-notice { border:1px solid var(--border-strong); border-left:3px solid var(--accent); border-radius:var(--radius-btn);
  background:var(--surface-sunken); padding:var(--sp-5) var(--sp-6); margin-block-end:var(--sp-7); }
.c-notice p { margin:0; font-size:var(--fs-sm); }

@media (max-width:900px){
  .c-listing { grid-template-columns:auto minmax(0,1fr); }
  .c-listing__act { grid-column:1 / -1; justify-items:start; text-align:start; min-width:0; }
  .c-live { flex-direction:column; align-items:flex-start; gap:var(--sp-6); }
  .c-live__lead { max-width:none; }
}
@media (max-width:640px){
  .c-serves a { display:inline-block; padding-block:9px; }
  .c-listing { grid-template-columns:1fr; }
  .c-listing__crest img { width:64px; }
  .c-live__row { gap:var(--sp-6); }
}