/* ==========================================================
   MAIN STREET FITNESS — HOMEPAGE
   S9A: the page SCROLLS. The first viewport holds the orbit and nothing
   else; six sections sit below it. The old single-screen lock —
   overflow:hidden, the four-row grid, the svh stage budget and the
   max-height:620px accessibility escape — is retired, because a page that
   scrolls needs none of them.
   S4: the photographic wallpaper is gone. The ground is generated:
   base colour, four mesh layers, a vignette and a grain field.
   Loaded only by index.html.
   ========================================================== */

.msf-home {
  min-height: 100svh;
  width: 100%;
  min-width: 0;
  /* S9A: no overflow lock. Vertical scrolling is now the design. A
     HORIZONTAL scrollbar remains a defect and is still gated. */
  overflow-x: hidden;
}
.msf-home > * { min-width: 0; }

/* ---------- fixed chrome ----------
   Banner and header are wrapped in ONE fixed element so the first screen can
   be exactly 100svh without the build having to know how tall the banner
   wraps to at any given width. */
.msf-home__chrome {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: rgba(9, 9, 10, .92);
  border-bottom: 1px solid var(--msf-border);
}
@supports (backdrop-filter: blur(6px)) {
  .msf-home__chrome { background: rgba(9, 9, 10, .74); backdrop-filter: blur(12px); }
}
.msf-home .msf-demo-banner { position: static; background: transparent; }
.msf-home .msf-demo-banner__inner {
  padding-block: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.35;
}
.msf-home .msf-header {
  position: static;
  background: transparent;
  border-top: 1px solid var(--msf-border);
}
.msf-home .msf-header__inner { min-height: 58px; }
.msf-home .msf-brand__name { font-size: var(--text-md); }
.msf-home .msf-nav a { min-height: 44px; padding-inline: var(--space-2); font-size: var(--text-xs); }

/* ---------- the first screen: the orbit, alone ---------- */
.msf-home__stage {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--msf-gutter);
  background-color: var(--msf-black);
}

/* S4 — GENERATED GROUND, layer 1: four mesh fields plus the vignette.
   Background layers paint first-on-top, so the vignette is declared first and
   the four mesh fields sit beneath it. No photograph, no external request. */
.msf-home__stage::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(125% 105% at 50% 44%,
      rgba(9, 9, 10, 0) 34%, rgba(9, 9, 10, .42) 74%, rgba(9, 9, 10, .88) 100%),
    radial-gradient(62rem 46rem at 16% 10%, rgba(122, 30, 37, .32), transparent 62%),
    radial-gradient(54rem 42rem at 86% 20%, rgba(46, 58, 76, .42), transparent 66%),
    radial-gradient(48rem 44rem at 76% 90%, rgba(200, 16, 46, .13), transparent 64%),
    radial-gradient(60rem 52rem at 22% 94%, rgba(22, 26, 34, .88), transparent 70%);
}

/* S4 — GENERATED GROUND, layer 2: the grain. An feTurbulence field carried as
   a data: URI, which the deployed CSP permits (img-src 'self' data:) and which
   costs no network request. Opacity is held below 0.07 so the grain is felt in
   the flat areas and never seen as texture. */
.msf-home__stage::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-repeat: repeat;
}

/* Forced colours: the generated ground drops out; the interface must still read. */
@media (forced-colors: active) {
  .msf-home__stage::before, .msf-home__stage::after { display: none; }
}

/* ---------- orbit scale on the first screen ----------
   The stage is a full 100svh and the chrome is fixed above it, so the budget
   has to cover the caption, the action and the counter beneath the ring, plus
   the chrome, so the composition still centres clear of it. */
.msf-home .msf-orb {
  padding-block: 0;
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
  --stage-size: min(calc(100svh - 24rem), 88vw, 40rem);
}

/* ---------- caption, action, counter ---------- */
.msf-cap-caption {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--text-lg);
  color: var(--msf-white);
  padding-inline: var(--space-4);
}
.msf-cap-actions {
  margin-top: var(--space-4);
  display: flex; justify-content: center;
}
.msf-home__controls {
  margin-top: var(--space-5);
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3); flex-wrap: wrap;
}
.msf-home__count {
  font-family: var(--msf-font-display); font-weight: 800;
  font-size: var(--text-xs); letter-spacing: var(--track-eyebrow); color: var(--msf-white);
  min-width: 3.6rem; text-align: center;
  font-variant-numeric: tabular-nums;
}
.msf-count__total { color: var(--msf-steel); }

/* ---------- sections below the fold (S9A) ----------
   Density rule: everything below the first screen is ordinary, quiet,
   readable page. No orbit vocabulary, no glow, no second constellation. */
.msf-home__section {
  border-top: 1px solid var(--msf-border);
  background: var(--msf-black);
  padding-block: var(--space-9);
  scroll-margin-top: var(--space-9);
}
.msf-home__section:nth-of-type(even) { background: var(--msf-surface); }
.msf-home__eyebrow {
  font-size: var(--text-xs); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--msf-steel);
  margin-bottom: var(--space-2);
}
.msf-home__section h2 {
  font-family: var(--msf-font-display); font-weight: 800; text-transform: uppercase;
  font-size: var(--text-2xl); line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  margin-bottom: var(--space-4);
}
.msf-home__section p { max-width: 60ch; }
.msf-home__section p + p { margin-top: var(--space-3); }
.msf-home__acts { margin-top: var(--space-5); display: flex; gap: var(--space-3); flex-wrap: wrap; }

.msf-home__grid {
  margin-top: var(--space-6);
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.msf-home__card {
  border: 1px solid var(--msf-border);
  border-radius: var(--msf-radius);
  padding: var(--space-5);
  background: var(--msf-surface-raised);
}
.msf-home__card h3 {
  font-family: var(--msf-font-display); font-weight: 800; text-transform: uppercase;
  font-size: var(--text-md); margin-bottom: var(--space-2);
}
.msf-home__card p { font-size: var(--text-sm); color: var(--msf-muted); }
.msf-home__card .msf-price {
  font-family: var(--msf-font-display); font-weight: 800;
  font-size: var(--text-xl); color: var(--msf-white); display: block;
  margin-bottom: var(--space-1);
}

.msf-home__shots {
  margin-top: var(--space-6);
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.msf-home__shots figure { margin: 0; }
.msf-home__section img, .msf-home__section picture { max-width: 100%; height: auto; }
.msf-home__shots img {
  /* One aspect ratio across the row so the captions align. This CROPS (the
     three sources are 1024x580 and 380x300); it never enlarges, so no
     photographic detail is invented — the C7 honesty rule is intact. */
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  border-radius: var(--msf-radius);
  border: 1px solid var(--msf-border);
}
.msf-home__shots figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-xs); color: var(--msf-muted);
}

/* ---------- scroll affordance (X3) ----------
   A quiet, static cue at the foot of the first screen. No bounce, no timer —
   the page state never changes on its own. */
.msf-home__scroll {
  position: absolute;
  left: 50%; bottom: var(--space-5);
  translate: -50% 0;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--msf-steel);
  text-decoration: none;
  min-height: 44px;
  padding-inline: var(--space-3);
}
.msf-home__scroll:hover { color: var(--msf-white); }
.msf-home__scroll:focus-visible { outline: 3px solid var(--msf-white); outline-offset: 3px; }
.msf-home__scroll svg { width: 14px; height: 14px; }

/* ---------- footer ---------- */
.msf-home__footer {
  border-top: 1px solid var(--msf-border);
  background: rgba(9, 9, 10, .9);
  padding: var(--space-4) var(--msf-gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--msf-muted);
  min-height: 44px;
}
.msf-home__footer a { color: var(--msf-white); text-decoration: none; }
.msf-home__footer a:hover { color: var(--msf-red); }
.msf-home__footeracts { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* ---------- narrow screens ---------- */
@media (max-width: 520px) {
  .msf-home .msf-demo-banner__inner { font-size: var(--text-xs); padding-block: var(--space-1); }
  .msf-home .msf-header__inner { min-height: 0; padding-block: var(--space-1); gap: var(--space-1); }
  .msf-home .msf-brand { padding: var(--space-1) 0; }
  .msf-home .msf-brand__name { font-size: var(--text-xs); }
  .msf-home .msf-brand__sub { font-size: var(--text-xs); letter-spacing: .1em; }
  .msf-home .msf-nav { width: 100%; justify-content: space-between; }
  .msf-home .msf-nav a { padding-inline: var(--space-1); font-size: var(--text-xs); letter-spacing: .06em; }
  .msf-home__footer { font-size: var(--text-xs); padding-block: var(--space-2); gap: var(--space-2); }
}

/* S7 — below 480px the ring becomes a stack of cards, so the first screen is
   a list rather than a constellation and needs its natural height. */
@media (max-width: 480px) {
  .msf-home__chrome { position: static; }

  /* S7 nav collapse. Five links at the 14px floor wrap to two rows at 375px,
     which cost 220px of chrome before the orbit even started. One row that
     scrolls horizontally inside itself keeps every link reachable, keeps the
     44px targets, and cannot introduce document-level horizontal scroll —
     which is still gated at zero. */
  .msf-home .msf-nav {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 0;
  }
  .msf-home .msf-nav::-webkit-scrollbar { display: none; }
  .msf-home .msf-nav a {
    white-space: nowrap;
    letter-spacing: .02em;
    padding-inline: var(--space-2);
  }
  .msf-home__stage { min-height: 0; padding-block: var(--space-6); }
  .msf-home .msf-orb { --stage-size: 100%; }
  .msf-cap-caption { font-size: var(--text-sm); margin-top: var(--space-4); }
  .msf-home__scroll { position: static; translate: none; margin-top: var(--space-5); }
  .msf-home__section { padding-block: var(--space-7); }
}

/* C2/D2: below 390px the caption duplicates the action beneath it; drop it
   rather than shrinking anything that carries function. The whole spacing
   scale steps down one notch — spacing is the compressible dimension. */
@media (max-width: 389px) {
  :root {
    --space-2:  .25rem;
    --space-3:  .5rem;
    --space-4:  .75rem;
    --space-5:  1rem;
    --space-6:  1.5rem;
    --space-7:  2rem;
    --space-8:  2.5rem;
    --space-9:  3rem;
  }
  .msf-cap-caption { display: none; }
}

/* ---------- guide overlay ---------- */
.msf-cap-dialog {
  border: 1px solid var(--msf-border);
  background: rgba(20, 20, 22, .96);
  color: var(--msf-white);
  border-radius: var(--msf-radius);
  padding: clamp(1.1rem, 3vw, 1.7rem);
  width: min(30rem, calc(100% - 2rem));
  max-height: min(80svh, 40rem);
  overflow-y: auto;
  box-shadow: 0 30px 80px -30px #000, 0 0 0 1px rgba(0, 0, 0, .6);
}
@supports (backdrop-filter: blur(6px)) {
  .msf-cap-dialog { background: rgba(20, 20, 22, .82); backdrop-filter: blur(10px); }
}
.msf-cap-dialog::backdrop { background: rgba(9, 9, 10, .74); }
.msf-cap-dialog__head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; }
.msf-cap-dialog__close {
  min-width: 44px; min-height: 44px; flex: none;
  background: transparent; color: var(--msf-white);
  border: 1px solid var(--msf-border); border-radius: var(--msf-radius);
  cursor: pointer; font-size: var(--text-md);
}
.msf-cap-dialog__close:hover { border-color: var(--msf-red); color: var(--msf-red); }
.msf-cap-dialog h2 { font-size: var(--text-lg); text-transform: uppercase; line-height: 1.1; }
.msf-cap-dialog p { margin-top: var(--space-2); }
.msf-cap-dialog .msf-orb__act { margin-top: var(--space-4); }

@media (min-width: 900px) {
  .msf-cap-dialog {
    margin: 0 0 0 auto;
    height: 100%;
    max-height: none;
    width: min(28rem, 40vw);
    border-radius: 0;
    border-block: 0; border-right: 0;
  }
}
@media (max-width: 899px) {
  .msf-cap-dialog {
    margin: auto auto 0;
    width: 100%;
    max-width: none;
    border-radius: var(--msf-radius) var(--msf-radius) 0 0;
    padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .msf-home__stage::after { opacity: .04; }
  html { scroll-behavior: auto; }
}