/* forge-site.css — the marketing site, on the app's design system.
 *
 * WHY: forgeathleticsystems.com and the logged-in app were two different brands.
 * A coach met one in an ad and a different one after logging in. This file puts
 * the site on the same tokens, the same two typefaces and the same components as
 * deploy/app/forge-ui.css, without rewriting 70+ pages of markup.
 *
 * It loads AFTER each page's inline <style>, so at equal specificity it wins.
 * It replaces the old <style id="forge-modern"> block (Inter, pill buttons,
 * rounded-everything), which was the previous modernization pass.
 *
 * Rules, same as the app:
 *   - Two typefaces. Big Shoulders Display for display, Hanken Grotesk for the rest.
 *   - Orange is the ONE primary action per screen.
 *   - Three surfaces: ground, panel, raised. A thing is not a card unless it
 *     needs to be picked up.
 */

:root {
  --fui-ground:  #0c0c0d;
  --fui-panel:   #141416;
  --fui-raised:  #1b1b1e;
  --fui-hover:   #222226;
  --fui-line:    rgba(255,255,255,.08);
  --fui-line2:   rgba(255,255,255,.14);
  --fui-ink:     #f4f1ec;
  --fui-ink2:    #c9c4bb;
  --fui-mut:     #9a958c;
  --fui-faint:   #6b675f;
  --fui-accent:  #ff6d10;
  --fui-accent2: #e05c00;
  --fui-display: "Big Shoulders Display","Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --fui-ui:      "Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fui-r: 8px; --fui-r2: 14px;

  /* the site's own legacy names, repointed at the system so every existing
     rule that references them lands on the app palette */
  --black:  var(--fui-ground);
  --dark:   var(--fui-panel);
  --card:   var(--fui-raised);
  --border: var(--fui-line);
  --orange:  #ff6d10;
  --orange2: #e05c00;
  --white: var(--fui-ink);
  --gray:  var(--fui-mut);
  --light: var(--fui-ink2);
  color-scheme: dark;
}

/* ---------- type ---------- */
body, button, input, select, textarea, .lead, p, li, td, th, a {
  font-family: var(--fui-ui);
}
body {
  background: var(--fui-ground);
  color: var(--fui-ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, .hero h1, .stat-num, .proof-num, .price-num {
  font-family: var(--fui-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: .95;
  text-wrap: balance;
  font-style: normal;
}
.hero h1 { font-size: clamp(44px, 6.6vw, 88px); font-weight: 900; margin-bottom: 22px; max-width: 17ch; }
.hero h1 em { color: var(--fui-accent); font-weight: 900; font-style: normal; }
h2 { font-size: clamp(30px, 3.9vw, 52px); margin-bottom: 20px; max-width: 26ch; }
h3 { font-family: var(--fui-ui); font-weight: 700; letter-spacing: 0; }

/* the eyebrow above every section heading */
.section-label, .sec-label, .eyebrow, .hero-eyebrow, .prod-intro .section-label {
  font-family: var(--fui-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fui-accent);
  margin-bottom: 14px;
}
.lead, .hero-sub { color: var(--fui-mut); font-size: 17px; line-height: 1.65; }
a { color: var(--fui-accent); }

/* ---------- nav ---------- */
nav {
  background: rgba(12,12,13,.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--fui-line);
  height: 64px;
}
.nav-logo {
  font-family: var(--fui-display);
  font-size: 23px;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--fui-ink);
}
.nav-logo span { color: var(--fui-accent); }
nav ul { gap: 26px; align-items: center; }
nav ul a {
  font-family: var(--fui-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--fui-mut);
}
nav ul a:hover { color: var(--fui-ink); }
nav ul a.nav-build, nav ul a.nav-login {
  border-radius: var(--fui-r);
  padding: 8px 15px;
  font-weight: 700;
}
nav ul a.nav-login { border: 1px solid var(--fui-line2); color: var(--fui-ink2); }
nav ul a.nav-login:hover { background: var(--fui-raised); color: var(--fui-ink); }
nav ul a.nav-build { background: var(--fui-accent); color: #150900; }
nav ul a.nav-build:hover { background: #ff8235; text-decoration: none; }

/* ---------- buttons: the app's .fui-btn ---------- */
.btn, button.btn, a.btn {
  font-family: var(--fui-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  border-radius: var(--fui-r);
  padding: 13px 26px;
  background: var(--fui-accent);
  color: #150900;
  border: 1px solid transparent;
  transition: background .16s, transform .16s;
}
.btn:hover { background: #ff8235; text-decoration: none; transform: translateY(-1px); }
.btn.btn-ghost, a.btn.btn-ghost, .btn.secondary, .btn.btn-secondary {
  background: transparent;
  color: var(--fui-ink);
  border: 1px solid var(--fui-line2);
}
.btn.btn-ghost:hover, a.btn.btn-ghost:hover, .btn.secondary:hover, .btn.btn-secondary:hover {
  background: var(--fui-raised);
  border-color: var(--fui-mut);
}

/* ---------- surfaces ---------- */
section { border-color: var(--fui-line); }
.card, .service-card, .faq-item, .process-step, .pricing-card, .price-card,
.proof-block, .endorsement-card, .rdrill, .ev, .reg, .hp-row, .tool-card {
  background: var(--fui-panel);
  border: 1px solid var(--fui-line);
  border-radius: var(--fui-r2);
  box-shadow: none;
}
.card:hover, .service-card:hover, .tool-card:hover, .endorsement-card:hover {
  border-color: var(--fui-line2);
  background: var(--fui-raised);
}
.hero-stats {
  border-radius: var(--fui-r2);
  border: 1px solid var(--fui-line);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.feature-img img { border-radius: var(--fui-r2); box-shadow: 0 18px 50px rgba(0,0,0,.5); }

/* numbers read as numbers */
.stat-num, .proof-num, .price-num, .process-number, .proe-number {
  font-family: var(--fui-display);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--fui-ink);
  font-variant-numeric: tabular-nums;
}
.stat-num { font-size: 48px; }
.stat-label { color: var(--fui-mut); font-size: 13px; line-height: 1.45; margin-top: 8px; }
.proof-label { color: var(--fui-mut); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- endorsements: named, real, and worth showing ---------- */
.endorsement-quote { color: var(--fui-ink2); font-size: 15.5px; line-height: 1.65; }
.endorsement-name  { font-family: var(--fui-display); font-size: 24px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--fui-ink); }
.endorsement-cred  { color: var(--fui-mut); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.endorsement-mark  { color: var(--fui-accent); opacity: .5; }
/* these photos were lazy and never loaded in a full-page capture; they are
   real endorsements, so make sure they hold their space either way */
.endorsement-photo { border-radius: var(--fui-r); background: var(--fui-raised); }

/* ---------- forms ---------- */
input, select, textarea {
  background: var(--fui-raised);
  border: 1px solid var(--fui-line2);
  border-radius: var(--fui-r);
  color: var(--fui-ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--fui-accent); }

/* ---------- focus, motion ---------- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--fui-accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(255,109,16,.35); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- footer ---------- */
footer { background: var(--fui-ground); border-top: 1px solid var(--fui-line); color: var(--fui-mut); }
footer a { color: var(--fui-ink2); }
footer a:hover { color: var(--fui-accent); }

/* ---------- blog and article pages ----------
 * These were built before the main pages and carry their own nav ( .brand,
 * .top .cta ) and their own pill buttons. Same system, their selectors. */
.brand, .top .brand {
  font-family: var(--fui-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fui-ink);
}
.brand span, .top .brand span { color: var(--fui-accent); }
.top .cta, .cta-band .btn, .related a.btn {
  border-radius: var(--fui-r);
  background: var(--fui-accent);
  color: #150900;
  font-weight: 700;
}
.top .cta:hover, .cta-band .btn:hover { background: #ff8235; text-decoration: none; }
.cta-band { border-radius: var(--fui-r2); border-color: var(--fui-line2); }
.pcard { border-radius: var(--fui-r2); }

/* A measured article column is already the right width; the display face fits
   far more characters per line than the body face, so the 26ch cap that keeps
   marketing headings tight strands article headings two words in. */
article h2, article h3, .wrap article h2, .post h2 { max-width: none; }
article h2 { font-size: 30px; margin-top: 38px; }

/* ==================================================================
   HOME HERO — the dashboard's treatment, on the marketing page.
   One photograph, a gradient that carries its bottom edge into the page
   ground, type on top. Mirrors .hero in deploy/app/index.html.
   ================================================================== */
.hero {
  display: block;
  position: relative;
  min-height: min(76vh, 760px);
  padding: 0 0 64px;
  border-bottom: 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background-image: url("/app/img/v2/hero.webp");
  background-position: 70% 28%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(.72) contrast(1.05);
  transform: scale(1.04);
  animation: forge-drift 28s ease-in-out infinite alternate;
}
@keyframes forge-drift {
  from { transform: scale(1.04) translate3d(0,0,0); }
  to   { transform: scale(1.10) translate3d(-1.5%,-1%,0); }
}
@media (prefers-reduced-motion: reduce) { .hero-bg { animation: none; } }
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,12,13,.35) 0%, rgba(12,12,13,.15) 35%,
                    rgba(12,12,13,.86) 78%, var(--fui-ground) 100%),
    linear-gradient(90deg, rgba(12,12,13,.62) 0%, rgba(12,12,13,.26) 42%,
                    rgba(12,12,13,0) 66%);
}
.hero-left {
  position: relative; z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 150px 6% 0;
  display: flex; flex-direction: column; align-items: flex-start;
}
.hero h1 { color: var(--fui-ink); text-shadow: 0 2px 30px rgba(0,0,0,.45); max-width: 15ch; }
.hero-sub { max-width: 54ch; color: var(--fui-ink2); }
.hero-left > .hero-cta {
  display: flex; flex-direction: row; align-items: center;
  gap: 12px; flex-wrap: wrap; align-self: auto; margin-top: 8px;
}
.hero-left > .hero-cta > .btn { display: inline-flex; align-items: center; width: auto; }
.hero-rate { font-size: 13.5px; color: var(--fui-mut); margin-top: 18px; line-height: 1.5; }
.hero-rate span { color: var(--fui-accent); font-weight: 700; }

@media (max-width: 900px) {
  .hero { min-height: 0; padding-bottom: 48px; }
  .hero-left { padding-top: 104px; }
  .hero-bg { background-position: 72% 20%; }
  .hero-shade {
    background: linear-gradient(180deg, rgba(12,12,13,.30) 0%, rgba(12,12,13,.58) 42%,
                                rgba(12,12,13,.93) 76%, var(--fui-ground) 100%);
  }
}

/* the NFHS strip, read as the dashboard's stat row */
.stat-num { font-size: 48px; }

/* ==================================================================
   PHOTO TILES — the dashboard's "Your tools" grid, on the home page.
   Mirrors .tile in deploy/app/index.html. Photos are shared from
   /app/img/v2/ rather than copied, so a real shoot drops in once.
   ================================================================== */
.tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 38px; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }

.tile {
  position: relative; display: block;
  aspect-ratio: 16/12;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--fui-line);
  background: var(--fui-panel);
  isolation: isolate;
  color: inherit; text-decoration: none;
  transition: transform .22s ease, border-color .22s;
}
.tile .ph {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  filter: saturate(.6) brightness(.78);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .3s;
}
.tile .sh {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12,12,13,.05) 30%, rgba(12,12,13,.92) 100%);
}
a.tile:hover { transform: translateY(-3px); border-color: var(--fui-line2); text-decoration: none; }
a.tile:hover .ph { transform: scale(1.06); filter: saturate(.75) brightness(.9); }
.tile .t { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; }
.tile h3 {
  font-family: var(--fui-display); font-weight: 800; text-transform: uppercase;
  font-size: 28px; letter-spacing: .02em; margin: 0 0 4px; line-height: 1;
  color: var(--fui-ink);
}
.tile p { margin: 0; font-size: 13.5px; color: var(--fui-ink2); max-width: 36ch; opacity: .95; }
.tile .k {
  position: absolute; top: 14px; left: 16px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fui-ink); background: rgba(12,12,13,.55);
  border: 1px solid var(--fui-line2); border-radius: 999px; padding: 4px 11px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.tile .arrow {
  position: absolute; right: 16px; bottom: 18px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--fui-line2);
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,12,13,.5); color: #fff;
  opacity: 0; transform: translateX(6px); transition: .22s;
}
a.tile:hover .arrow { opacity: 1; transform: none; }
a.tile:focus-visible .arrow { opacity: 1; transform: none; }
.tile.wide { grid-column: span 2; aspect-ratio: auto; min-height: 0; }
@media (max-width: 560px) { .tile.wide { grid-column: span 1; aspect-ratio: 16/12; } }
.toolmore { margin-top: 22px; color: var(--fui-mut); font-size: 14.5px; }

/* the price is a display number like every other figure on the site; the
   page's own rule still had it on Georgia */
#services .join-price, .deal .pricecard .num {
  font-family: var(--fui-display);
  font-weight: 900;
  letter-spacing: .01em;
  font-size: 58px;
  line-height: 1;
  color: var(--fui-ink);
  font-variant-numeric: tabular-nums;
}
#services .join-price span, .deal .pricecard .num small {
  font-family: var(--fui-ui); font-size: 15px; font-weight: 500; color: var(--fui-mut);
}


/* ------------------------------------------------------------------
   The two standalone landing pages (coaches/, clubs/) carry their own
   .hero with an ember-glow ::before. Once a photograph is behind the
   type the glow is just haze over a face, so it is retired there only.
   ------------------------------------------------------------------ */
.hero.has-photo { padding-top: 132px; padding-bottom: 96px; isolation: isolate; }
.hero.has-photo::before { display: none; }
.hero.has-photo .wrap { position: relative; z-index: 1; }
.hero.has-photo .sub { color: var(--fui-ink2); }
.hero.has-photo h1 { text-shadow: 0 2px 30px rgba(0,0,0,.5); }
/* These two frames are brighter and busier than the home photo, and the
   headline runs six lines across them, so they need a heavier grade and a
   deeper left wash than the home hero to stay legible. */
.hero.has-photo .hero-bg { filter: saturate(.55) contrast(1.02) brightness(.66); }
.hero.has-photo .hero-shade {
  background:
    linear-gradient(180deg, rgba(12,12,13,.5) 0%, rgba(12,12,13,.3) 30%,
                    rgba(12,12,13,.88) 80%, var(--fui-ground) 100%),
    linear-gradient(90deg, rgba(12,12,13,.86) 0%, rgba(12,12,13,.5) 45%,
                    rgba(12,12,13,.08) 72%);
}
@media (max-width: 900px) {
  .hero.has-photo { padding-top: 92px; padding-bottom: 66px; }
}

/* the reassurance row at the price */
.join-assure {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 820px; margin: 28px auto 0; text-align: left;
}
@media (max-width: 720px) { .join-assure { grid-template-columns: 1fr; } }
.join-assure > div {
  background: var(--fui-panel); border: 1px solid var(--fui-line);
  border-radius: var(--fui-r); padding: 14px 16px;
  font-size: 14px; line-height: 1.55; color: var(--fui-mut);
}
.join-assure b { display: block; color: var(--fui-ink); font-size: 14.5px; margin-bottom: 3px; }

/* FAQ — the page's own rules still set Georgia and a light-theme ink */
#faq .faq-question { font-family: var(--fui-ui); font-weight: 600; font-size: 16.5px; color: var(--fui-ink); }
#faq .faq-question:hover { color: var(--fui-accent); }
#faq .faq-answer { color: var(--fui-ink2); font-size: 15.5px; }
#faq .faq-list, #faq .faq-item { border-color: var(--fui-line); }
#faq .faq-icon { color: var(--fui-accent); }

/* the price comparison under the card — a claim, not a shout */
.join-compare {
  max-width: 680px; margin: 22px auto 0; text-align: center;
  font-size: 14.5px; line-height: 1.6; color: var(--fui-mut);
}
.join-compare b { color: var(--fui-ink2); font-weight: 600; }
.join-compare a { color: var(--fui-accent); font-weight: 600; }