/* ==========================================================================
   GymSaver — Marketing site
   Monochrome Forest palette, two-family typography (Inter Display + SF Pro).
   All assets self-hosted. CSP: default-src 'self'.

   Per the elevation-vs-gymdex canvas Move #1 (editorial typography),
   Inter Display is bundled at `/fonts/InterDisplay-*.woff2` and used
   for headlines / hero numerals / section titles. SF Pro stays as
   the body face. No serif anywhere — Inter Display is a sans family.

   Anti-patterns to keep out (per canvas):
     - No decorative gradients (the only gradient is the shimmer on
       .display-accent, masked to glyph outlines)
     - No glassmorphism
     - No second accent colour (single emerald)
     - Restraint reads as expensive
   ========================================================================== */

/* --------------------------------------------------------------------------
   Inter Display — editorial sans, self-hosted
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/InterDisplay-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/InterDisplay-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/InterDisplay-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/InterDisplay-Black.woff2") format("woff2");
}

:root {
  /* Brand */
  --ink: #0F2412;
  --brand: #39803F;
  --brand-soft: #6FB975;
  --brand-tint: rgba(57, 128, 63, 0.08);
  --brand-glow: rgba(57, 128, 63, 0.22);

  /* Surfaces */
  --page: #FFFFFF;
  --surface: #FFFFFF;
  --surface-elev: #FAFCFA;
  --surface-sunken: #F4F8F4;

  /* Strokes + text */
  --hairline: rgba(15, 36, 18, 0.10);
  --hairline-strong: rgba(15, 36, 18, 0.18);
  --tertiary: rgba(15, 36, 18, 0.55);
  --secondary: rgba(15, 36, 18, 0.74);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 220ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F3FAF3;
    --brand: #6FB975;
    --brand-soft: #8FCF95;
    --brand-tint: rgba(111, 185, 117, 0.10);
    --brand-glow: rgba(111, 185, 117, 0.26);

    --page: #060807;
    --surface: #0E1311;
    --surface-elev: #131A16;
    --surface-sunken: #0A0F0C;

    --hairline: rgba(243, 250, 243, 0.10);
    --hairline-strong: rgba(243, 250, 243, 0.18);
    --tertiary: rgba(243, 250, 243, 0.58);
    --secondary: rgba(243, 250, 243, 0.78);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-feature-settings: "kern", "liga", "calt", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

/* Sticky-footer layout. With a one-section landing page the hero would
   otherwise leave the footer floating in the middle of the viewport. We
   make the body a flex column, force `main` to grow into all leftover
   space, then the hero (the only thing inside `main`) flexes to fill that
   space and centers its content. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

::selection {
  background: var(--brand);
  color: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  ::selection { background: var(--brand); color: var(--page); }
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg { display: block; max-width: 100%; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --------------------------------------------------------------------------
   Top navigation
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--page) 86%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out);
}

/* Fallback when color-mix isn't supported */
@supports not (background: color-mix(in srgb, red, blue)) {
  .nav { background: var(--page); }
}

/* Subtle hairline once the user scrolls — pure CSS via :has not necessary;
   we just keep the hairline always-on at low contrast. */
.nav { border-bottom-color: var(--hairline); }

.nav-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Wordmark + trailing emerald dot. This is the brand mark — do not add
   an icon glyph alongside it. The dot sits flush against the final
   letter "r" (no gap), at letter-baseline, scaled relative to the
   wordmark size so it reads as part of the lockup, not a separate ornament. */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  /* Inter Display Black for the wordmark — the brand line is one
     of the three editorial surfaces (canvas Move #1). Matches the
     iOS app's `BrandMark` 'G' letterform direction. */
  font-family: "Inter Display", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -0.7px;
  color: var(--ink);
  line-height: 1;
}

.brand-word {
  font-weight: 900;
  font-family: "Inter Display", -apple-system, BlinkMacSystemFont, sans-serif;
}

.brand-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  margin-left: 2px;
  /* Lift slightly so the dot reads at the letter mid-line rather than
     sitting on the baseline like a period. */
  align-self: center;
  transform: translateY(2px);
}

.nav-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--ink);
  color: var(--page);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.nav-cta:hover {
  transform: translateY(-1px);
  background: var(--brand);
  color: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  .nav-cta:hover { color: var(--page); }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--brand);
  color: #FFFFFF;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 8px 24px -10px var(--brand-glow);
}
@media (prefers-color-scheme: dark) {
  .btn-primary { color: var(--page); }
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 14px 36px -12px var(--brand-glow);
}

.btn-arrow {
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover .btn-arrow { transform: translateX(2px); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* The hero takes all remaining vertical space between nav and footer
   so the headline reads at the optical center of the viewport. The
   inner container is centered both axes via flex + auto margins. */
.hero {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 0 72px;
  overflow: hidden;
}

.hero .container {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--secondary);
  margin-bottom: 28px;
  box-shadow: 0 1px 0 var(--hairline) inset;
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-tint);
  animation: pulse 2.6s var(--ease-out) infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--brand-glow); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

.display {
  font-family: "Inter Display", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(46px, 8.5vw, 92px);
  /* Line-height was 0.98 which collided the two display lines (the
     ascenders on "Lift them later." sat on top of the descender of
     "reels."). 1.06 gives the headline air without breaking the
     monolithic feel of a tight display setting. */
  line-height: 1.06;
  letter-spacing: -0.055em;
  font-weight: 700;
  margin: 0 auto 22px;
  color: var(--ink);
  max-width: 14ch;
}

/* The accent line gets a metallic-emerald shimmer that sweeps every
   ~3.5s. We layer a multi-stop horizontal gradient (brand → brighter
   brand → brand) at 200% width and animate `background-position`,
   then mask the gradient to the glyph outlines with background-clip.
   This is the cheapest CSS-only path to a "premium" sheen — no JS,
   no extra DOM, and it falls back gracefully (paragraph-color is
   var(--brand) on browsers that ignore background-clip:text). */
.display-accent {
  /* Inherits the headline's 700 weight on purpose — pushing the accent
     to 900 (was the previous setting) over-thickened the glyphs at the
     headline's tight tracking, and the second display line read as
     visually heavier than the first. Matching the parent weight keeps
     the two lines in optical balance; the brand-emerald paint and the
     shimmer carry all the emphasis we need. */
  color: var(--brand);
  background: linear-gradient(
    100deg,
    var(--brand) 0%,
    var(--brand) 35%,
    color-mix(in srgb, var(--brand), white 55%) 50%,
    var(--brand) 65%,
    var(--brand) 100%
  );
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes shimmer {
  0%   { background-position: 130% 0; }
  60%  { background-position: -30% 0; }
  100% { background-position: -30% 0; }
}

@media (prefers-color-scheme: dark) {
  /* In dark mode the brand is the lighter palette-400 already; sweep
     to a near-white peak for the metallic highlight rather than mixing
     with white-which-is-already-the-base. */
  .display-accent {
    background: linear-gradient(
      100deg,
      var(--brand) 0%,
      var(--brand) 35%,
      #FFFFFF 50%,
      var(--brand) 65%,
      var(--brand) 100%
    );
    background-size: 220% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.lede {
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.55;
  color: var(--secondary);
  max-width: 560px;
  margin: 0 auto 36px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Entrance animation — staggered fade + lift for the hero elements.

   Each piece starts hidden and rises a few pixels into place on load.
   The stagger order (badge → headline → lede → CTA) walks the reader's
   eye down the page in the same cadence the content is meant to be read.
   Reduced-motion users get the final state immediately.
   -------------------------------------------------------------------------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero .badge,
.hero .display,
.hero .lede,
.hero .cta-row {
  opacity: 0;
  animation: rise 760ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hero .badge    { animation-delay: 120ms; }
.hero .display  { animation-delay: 260ms; }
.hero .lede     { animation-delay: 440ms; }
.hero .cta-row  { animation-delay: 600ms; }

@media (prefers-reduced-motion: reduce) {
  .hero .badge,
  .hero .display,
  .hero .lede,
  .hero .cta-row {
    opacity: 1;
    animation: none;
  }
  .display-accent { animation: none; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--hairline);
  padding: 36px 0;
  background: var(--surface-sunken);
}

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

@media (min-width: 720px) {
  .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

.footer-brand {
  /* Slightly smaller than the nav lockup; same letter-spacing rule. */
  font-size: 17px;
}

.footer-meta {
  font-size: 13px;
  color: var(--tertiary);
}

.footer-links {
  display: inline-flex;
  gap: 22px;
  font-size: 14px;
  color: var(--tertiary);
}

.footer-links a {
  transition: color var(--dur) var(--ease-out);
}

.footer-links a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  font-size: 14px;
  color: var(--tertiary);
  transition: color var(--dur) var(--ease-out);
}

.legal-back:hover { color: var(--brand); }

.legal h1 {
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--ink);
}

.legal .effective {
  color: var(--tertiary);
  font-size: 14px;
  margin: 0 0 36px;
}

.legal h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 40px 0 14px;
  color: var(--ink);
}

.legal h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 24px 0 10px;
  color: var(--ink);
}

.legal p,
.legal li {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--secondary);
  margin: 0 0 14px;
}

.legal ul {
  padding-left: 22px;
  margin: 0 0 14px;
}

.legal strong { color: var(--ink); font-weight: 600; }

.legal a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--brand) 50%, transparent);
}

.legal a:hover { text-decoration-color: var(--brand); }

/* --------------------------------------------------------------------------
   Tighten on small screens
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .hero { padding: 72px 0 64px; }
  .section { padding: 80px 0; }
  .cta-card { padding: 48px 22px; }
  .quote-card { padding: 40px 24px; }
  .hero-meta { gap: 14px; padding: 14px 16px; }
  .hero-meta-num { font-size: 16px; }
  .hero-meta-label { font-size: 11px; }
}