/* ════════════════════════════════════════════════════════════════════
   JSTFitness.com — one stylesheet for the whole marketing site
   ════════════════════════════════════════════════════════════════════
   The colours below are NOT new. They are the app's Classic palette,
   copied from src/theme/palettes.js (CLASSIC_DARK_NEUTRAL, LIGHT_NEUTRAL
   and accentVars). Those values have already been through the WCAG
   contrast maths in src/theme/palettes.test.js — retyping approximations
   here would throw that away. If the app's Classic palette ever changes,
   change these with it.

   Dark is the default because the app opens on Classic dark; the light
   block honours a visitor whose OS asks for light, using the app's own
   measured light bag rather than a naive inversion.
   ════════════════════════════════════════════════════════════════════ */

/* ── Inter, self-hosted ──────────────────────────────────────────────
   The same five WOFF2 files the app ships in public/fonts (from the
   @fontsource/inter npm package, SIL OFL 1.1). NOT Google Fonts — see
   the comment in tools/build-site.mjs for why that matters here more
   than it does on most sites. font-display: swap so the headline paints
   immediately in the fallback face. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/inter-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/inter-latin-900-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark light;

  --bg:        #000000;
  --card:      #0A0A0A;
  --surface:   #111111;
  --border:    #1A1A1A;
  --text:      #FFFFFF;
  --text-mid:  #CCCCCC;
  --text-dim:  #888888;
  --text-faint:#555555;

  --accent:          #00D4D4;
  --accent-hover:    #5CE8E8;
  --accent-contrast: #0A0A0A;
  --accent-grad-top: #00D4D4;
  --accent-grad-bot: #00A8A8;
  --accent-glow:     rgba(0, 212, 212, 0.30);
  --accent-soft:     rgba(0, 212, 212, 0.15);

  --green: #00C853;
  --amber: #FFB300;
  --red:   #FF6B6B;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:        #F5F5F5;
    --card:      #FFFFFF;
    --surface:   #EFEFEF;
    --border:    #E0E0E0;
    --text:      #111111;
    --text-mid:  #444444;
    --text-dim:  #6A6A6A;
    --text-faint:#8A8A8A;

    /* The app's Classic LIGHT accent. Darker than the dark-mode cyan
       because #00D4D4 as text on a white card measures ~1.7:1 — the
       light bag exists precisely so accent text stays readable. */
    --accent:          #007D7D;
    --accent-hover:    #005C5C;
    --accent-contrast: #FFFFFF;
    --accent-grad-top: #007D7D;
    --accent-grad-bot: #005E5E;
    --accent-glow:     rgba(0, 125, 125, 0.25);
    --accent-soft:     rgba(0, 125, 125, 0.12);

    --green: #007B33;
    --amber: #8A6100;
    --red:   #C62828;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* Focus must stay visible. The app's accessibility statement promises
   "focus is always visible", and a marketing site that breaks that
   promise on the way to the policy page is a poor advertisement. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }

.num { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── The holding page ────────────────────────────────────────────── */

.holding {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: 100svh;
  padding: 48px 24px 32px;
  gap: 48px;
}

.holding__spacer { flex: 0 0 1px; }

.holding__middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 620px;
  text-align: center;
}

.mark {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  display: block;
}

.wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.wordmark__type {
  font-size: clamp(30px, 8vw, 46px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
}

.wordmark__jst { color: var(--accent); }

.wordmark__rule {
  width: 40px;
  height: 2px;
  background: var(--accent);
}

.lede {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.lede__line { font-size: 17px; color: var(--text-mid); }

.lede__status {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

/* ── Footer, shared ──────────────────────────────────────────────── */

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 1000px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  font-size: 14px;
}

/* Footer links are dim until hovered — they are wayfinding, not the
   point of the page. 14px, not smaller: these are the legal links and
   somebody looking for the deletion route should not have to squint. */
.footer__links a { color: var(--text-dim); }
.footer__links a:hover { color: var(--accent); }

.footer__copy { font-size: 13px; color: var(--text-faint); }

/* ── 404 ─────────────────────────────────────────────────────────── */

.notfound {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  min-height: 100svh;
  padding: 48px 24px;
  text-align: center;
}

.notfound__code {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.notfound__title {
  font-size: clamp(26px, 6vw, 38px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.notfound__body { font-size: 16px; color: var(--text-mid); max-width: 460px; }

/* ════════════════════════════════════════════════════════════════════
   MOTION
   ════════════════════════════════════════════════════════════════════
   The holding page gets ONE entrance and nothing else. It is a holding
   page: a visitor is here for eight seconds on their way to a policy
   document, and anything looping would be a page fidgeting at someone
   who is trying to leave.

   The full marketing site spends its motion budget differently — on the
   phone screens behaving like the running app — but that is a different
   page with a different job.

   prefers-reduced-motion does not slow this down, it turns it OFF at the
   final frame. Reduced motion must never mean less information, and it
   must never mean an element that stays invisible because its animation
   was the thing making it visible.
   ════════════════════════════════════════════════════════════════════ */

@keyframes jst-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes jst-sweep {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.rise {
  animation: jst-rise 0.8s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  animation-delay: var(--d, 0s);
}

.wordmark__rule {
  transform-origin: center;
  animation: jst-sweep 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) 0.55s both;
}

/* The CTA-less holding page has one interactive surface: the footer
   links. Give them a real transition rather than a hard colour swap. */
.footer__links a { transition: color 0.18s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* ...and land the entrance on its finished frame, so nothing that
     animates its way into view stays invisible. */
  .rise { opacity: 1 !important; transform: none !important; }
  .wordmark__rule { transform: none !important; }
}