/*
  Landing page (marketing site). Same tokens/laws as site.css (--bg, --text,
  --accent, --divider, --neutral-200, --font-heading), scoped to classes only
  used on Home/Index so the in-game app CSS stays untouched.
*/
:root {
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;
  --space-3: 12px;
  --space-4: 16px;
  --font-heading-weight: 800;
  --accent-700: color-mix(in srgb, var(--accent) 65%, black);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }

/* ---- nav ---- */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  position: sticky; top: 0; z-index: 50; background: var(--bg);
  padding-top: 20px; padding-bottom: 20px;
  padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge)));
  border-bottom: 2px solid var(--divider);
  transition: padding 300ms ease, box-shadow 300ms ease;
}
.nav.scrolled { padding-top: 10px; padding-bottom: 10px; box-shadow: 0 2px 0 var(--divider); }
.nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; }
.nav a { text-decoration: none; font-size: 14px; white-space: nowrap; }
.nav a:hover, .nav a[aria-current='location'] { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
@media (max-width: 480px) { .nav a { display: none; } }

/* ---- scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.rule2 { height: 2px; border: 0; margin: 0; background: var(--divider); }
.kicker {
  display: block; font-size: 13px; line-height: var(--half); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-700); font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}

/* ---- hero ---- */
.hero { padding: calc(4 * var(--leading)) 0 calc(3 * var(--leading)); }
.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(42px, 6.2vw, 84px); line-height: clamp(44.5px, 6.57vw, 89px);
  letter-spacing: -0.02em; margin: 0; margin-left: -0.058em;
}
.display .line { display: block; }
.hero .sub { font-size: 17px; line-height: var(--leading); max-width: var(--measure); margin: calc(1.5 * var(--leading) - 1cap) 0 0; }
.hero .row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }

/* ---- stats strip ---- */
.stats { padding: calc(2.5 * var(--leading)) 0; }
.stats .grid { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: calc(1.5 * var(--leading)) var(--leading); }
.stat-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 3.4vw, 48px); line-height: calc(2 * var(--leading));
  color: var(--accent); margin: 0; margin-left: -0.045em;
}
.stat-label {
  font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 70%, transparent); margin: var(--half) 0 0;
}

/* ---- core loop features ---- */
.features { padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.feature {
  display: grid; grid-template-columns: minmax(64px, 160px) minmax(0, 420px) minmax(0, 1fr);
  gap: var(--leading) clamp(24px, 4vw, 72px); align-items: baseline; padding: calc(1.5 * var(--leading)) 0;
}
.feature + .feature { border-top: 2px solid var(--divider); }
.f-num {
  position: relative; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; line-height: var(--leading); font-feature-settings: "tnum" 1; margin: 0;
}
.f-num::before { content: ""; position: absolute; left: -24px; top: calc(0.5cap - 5px); width: 10px; height: 10px; background: var(--accent); }
@media (max-width: 1280px) { .f-num::before { display: none; } }
.f-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; line-height: var(--leading); letter-spacing: -0.01em; margin: 0; }
.f-copy { font-size: 15.5px; line-height: var(--leading); margin: 0; color: color-mix(in srgb, var(--text) 78%, transparent); max-width: 52ch; }

/* — the stakes: the page's one red field — */
.stakes { background: var(--accent); color: var(--bg); }
.stakes .wrap { padding-top: calc(3 * var(--leading)); padding-bottom: calc(3 * var(--leading)); }
.stakes h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 3.8vw, 52px); line-height: clamp(32px, 4.03vw, 55.1px);
  letter-spacing: -0.015em; margin: 0; margin-left: -0.058em;
}
.stakes h3 .line { display: block; }
.stakes p { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; line-height: var(--leading); max-width: 48ch; margin: calc(1.5 * var(--leading) - 1cap) 0 0; }

/* — difficulty trio — */
.modes { padding: calc(3 * var(--leading)) 0; }
.modes .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 4vw, 72px); }
.mode { border-top: 2px solid var(--divider); padding-top: var(--leading); }
.mode h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; line-height: var(--leading); margin: 0; }
.mode p { font-size: 15.5px; line-height: var(--leading); margin: var(--half) 0 0; color: color-mix(in srgb, var(--text) 78%, transparent); }
.mode.expert h4 { color: var(--accent); }
@media (max-width: 720px) { .modes .grid { grid-template-columns: 1fr; gap: var(--leading); } }

/* — gyms split section — */
.split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading));
}
.split-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 32px; line-height: calc(1.5 * var(--leading)); letter-spacing: -0.015em; margin: 0; }
.split-copy .note { font-size: 15.5px; line-height: var(--leading); color: color-mix(in srgb, var(--text) 78%, transparent); margin: calc(var(--leading) - 1cap) 0 0; max-width: 48ch; }
.split-figure { margin: 0; }
.split-figure .art-placeholder { width: 100%; height: auto; aspect-ratio: 951 / 665; }

/* — closing CTA — */
.close2 { padding: calc(3 * var(--leading)) 0; border-top: 2px solid var(--divider); }
.close2 h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 4.2vw, 56px); line-height: clamp(36px, 4.45vw, 59.4px);
  letter-spacing: -0.015em; margin: 0; margin-left: -0.058em;
}
.close2 h3 .line { display: block; }
.close2 .row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: calc(1.5 * var(--leading)); }

/* ---- app store link ---- */
.store-link {
  display: inline-flex; align-items: center; gap: 12px;
  border: 2px solid var(--text); padding: 10px 16px; text-decoration: none;
  color: var(--text); font-family: var(--font-heading); font-weight: var(--font-heading-weight);
}
.store-link:hover { background: var(--neutral-200); }
.store-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.store-link .mark { width: 22px; height: 22px; flex: none; }
.store-link .lines { display: flex; flex-direction: column; text-align: left; }
.store-link .l1 { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-body); font-weight: 400; color: color-mix(in srgb, var(--text) 70%, transparent); }
.store-link .l2 { font-size: 16px; line-height: 1.2; }

/* ---- footer ---- */
footer { padding: calc(2 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: var(--leading) clamp(24px, 4vw, 72px); }
.foot-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; line-height: var(--leading); margin: 0; }
.foot-brand .sq { display: inline-block; width: 10px; height: 10px; background: var(--accent); margin-right: 10px; }
.foot-tag { font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--text) 70%, transparent); margin: var(--half) 0 0; max-width: 34ch; }
.foot-col h4 { font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-body); font-weight: 400; color: var(--accent-700); margin: 0 0 var(--half); }
.foot-col a { display: block; font-size: 15.5px; line-height: var(--leading); color: var(--text); text-decoration: none; }
.foot-col a:hover { color: var(--accent); }
.foot-col a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.foot-base {
  display: flex; flex-wrap: wrap; gap: var(--half) var(--leading); justify-content: space-between;
  align-items: baseline; margin-top: calc(1.5 * var(--leading)); padding-top: var(--leading); border-top: 2px solid var(--divider);
  font-size: 13px; line-height: var(--leading); color: color-mix(in srgb, var(--text) 70%, transparent);
}
.foot-base a { color: inherit; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } }

@media (max-width: 880px) { .feature { grid-template-columns: 1fr; gap: var(--half); } .f-copy { max-width: var(--measure); } }
@media (max-width: 720px) {
  .hero { padding-top: calc(2.5 * var(--leading)); }
  .stats .grid { grid-template-columns: repeat(2, 1fr); justify-content: start; }
  .split { grid-template-columns: 1fr; } .split-figure { order: -1; }
}