/* SeasonSolve public site. Builds on style.css tokens (Teach the Game palette):
   espresso grounds, parchment breathing space, amber as the accent and the structural rule. */

.site { font-size: 16px; min-height: 100vh; display: flex; flex-direction: column; }
.site main { flex: 1; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 780px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--amber); color: var(--espresso); padding: .5rem 1rem; z-index: 50; }
.skip:focus { left: 1rem; }

/* Headings on the site are not the app's tracked-caps section headers. */
.site h1, .site h2, .site h3 { text-transform: none; letter-spacing: -.01em; border: 0; padding: 0; }
.site h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .4rem; color: var(--heading); }
.display { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.15; font-weight: 700; margin: 0 0 1.5rem; max-width: 22ch; }
.kicker {
  font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem;
}
.kicker::before { content: ""; width: 28px; height: 2.5px; background: var(--amber); }
.text-link { font-weight: 700; color: var(--heading); text-decoration-color: var(--amber); text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* ---- buttons ---- */
.btn-amber { background: var(--amber); border-color: var(--amber); color: var(--espresso); font-weight: 700; }
.btn-amber:hover { background: #F4C04A; border-color: #F4C04A; }
.btn-outline-light { background: transparent; border-color: rgba(240, 231, 214, .55); color: var(--parchment); }
.btn-outline-light:hover { border-color: var(--parchment); background: rgba(240, 231, 214, .08); }
.btn-lg { padding: .8rem 1.35rem; font-size: 1rem; }

/* ---- header: the tagline lockup on parchment (brand guide: website header) ---- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg) var(--grain); border-bottom: 2.5px solid var(--amber);
}
.header-row { display: flex; align-items: center; gap: 1.75rem; min-height: 76px; }
.lockup { display: block; line-height: 0; padding: 6px 0; }  /* clear space: about the height of the S */
.lockup img { height: 46px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 1.5rem; flex: 1; }
.nav-links { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--muted); text-decoration: none; font-weight: 500; padding: .3rem 0; border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--heading); border-bottom-color: var(--amber); }
.nav-account { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.nav-signin { color: var(--heading); text-decoration: none; font-weight: 700; }
.nav-signin:hover { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 4px; }
.signed-in { color: var(--muted); font-size: .85rem; }
.menu-toggle { display: none; margin-left: auto; background: none; color: var(--heading); border: 1px solid var(--border); border-radius: var(--radius); padding: .4rem .8rem; font: inherit; font-weight: 700; }

/* ---- hero ---- */
.hero, .page-hero, .cta-band {
  color: var(--parchment);
  background:
    radial-gradient(ellipse 70% 60% at 30% 85%, rgba(234, 168, 18, .16), transparent 70%),
    var(--grain), var(--espresso);
}
.hero { padding: 72px 0 84px; margin: 0; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 3rem; align-items: center; }
.eyebrow-dark { color: var(--amber); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; }
.hero h1, .page-hero h1 { color: var(--parchment); font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.04; letter-spacing: -.025em; margin: 0 0 1.25rem; }
.hero-lead { font-family: var(--font-read); font-size: 1.18rem; line-height: 1.6; color: rgba(240, 231, 214, .9); max-width: 38rem; }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.75rem 0 1rem; }
.hero-note { color: var(--muted-on-dark); font-size: .9rem; }
.hero-note a { color: var(--parchment); }
.page-hero { padding: 64px 0 56px; }
.page-hero h1 { max-width: 20ch; }  /* wide title bands line up with wide pages; keep lines short */
.page-hero .hero-lead b { color: var(--amber); }

/* ---- sample week grid ---- */
.week-card {
  margin: 0; background: var(--light-bg); color: var(--near-black); border-radius: 10px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(234, 168, 18, .35);
  padding: 1rem 1rem .85rem; transform: rotate(-.6deg);
}
.week-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; }
.week-title { font-weight: 700; color: var(--espresso); font-size: .9rem; }
.week-days { font-size: .78rem; color: var(--mid-brown); word-spacing: .5rem; }
.week-days b { color: var(--espresso); border-bottom: 2px solid var(--amber); }
.wk { display: grid; gap: 4px; }
.wk-axis, .wk-row { display: grid; grid-template-columns: 6.2rem 1fr; gap: 6px; align-items: center; }
.wk-axis { grid-template-columns: 6.2rem repeat(14, 1fr); font-size: .62rem; color: var(--mid-brown); }
.wk-axis span:first-child { grid-column: 1; }
.wk-gym { font-size: .74rem; font-weight: 700; color: var(--espresso); line-height: 1.15; }
.wk-gym small { display: block; font-weight: 400; color: var(--mid-brown); font-size: .66rem; }
.wk-lane {
  display: grid; grid-template-columns: repeat(14, 1fr); height: 44px; align-items: stretch; gap: 0;
  background: repeating-linear-gradient(90deg, rgba(122, 80, 48, .12) 0 1px, transparent 1px calc(100% / 7));
  border-radius: 5px;
}
.wk-lane.two { grid-template-rows: 1fr 1fr; height: 78px; row-gap: 3px; }
.wk-block {
  border-radius: 5px; padding: .25rem .45rem; font-size: .7rem; line-height: 1.15; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; margin: 0 1px; min-width: 0;
}
.wk-block b { white-space: nowrap; }
.wk-block span { font-size: .6rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-block.solo { background: var(--espresso); color: var(--parchment); }
.wk-block.parallel { background: var(--warm-brown); color: var(--parchment); box-shadow: inset 3px 0 0 var(--amber); }
.wk-block.shared { background: var(--amber); color: var(--espresso); }
.wk-block.stagger { background: #F4DC9A; color: var(--espresso); border: 1px solid var(--amber); }
.wk-block.top { grid-row: 1; }
.wk-block.bottom { grid-row: 2; }
.week-card figcaption { font-family: var(--font-read); font-size: .78rem; color: var(--mid-brown); margin-top: .7rem; line-height: 1.45; }

/* ---- proof strip ---- */
.proof { background: var(--bg); padding: 40px 0; border-bottom: 1px solid var(--border); }
.proof-intro { font-weight: 700; color: var(--muted); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1rem; }
.proof-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin: 0; }
.proof-stats div { border-top: 2.5px solid var(--amber); padding-top: .7rem; display: flex; flex-direction: column-reverse; }
.proof-stats dd { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 700; color: var(--heading); line-height: 1.05; letter-spacing: -.02em; }
.proof-stats dt { color: var(--muted); font-size: .85rem; margin-top: .3rem; }

/* ---- content bands ---- */
.band { padding: 84px 0; background: var(--bg); }
.band-light { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.25rem; }
.three article { border-top: 1px solid var(--border); padding-top: 1.1rem; }
.three p, .feature p { margin: 0; color: var(--text); opacity: .9; }
.habits { row-gap: 2.5rem; }

.stages-list { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.stages-list li { display: flex; flex-direction: column; gap: .75rem; }
.stages-list p { margin: 0; font-family: var(--font-read); opacity: .9; }
.num {
  display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--espresso); color: var(--amber); font-weight: 700; font-size: 1.05rem;
}
@media (prefers-color-scheme: dark) { .num { background: var(--amber); color: var(--espresso); } }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 1.75rem; }
.feature-grid.two-up { grid-template-columns: repeat(2, 1fr); }
.feature {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.4rem 1.4rem 1.5rem;
}
.band-light .feature { background: var(--bg); }
.status { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; margin-bottom: .8rem; }
.status.now { background: var(--espresso); color: var(--parchment); }
.status.soon { border: 1px solid var(--mid-brown); color: var(--mid-brown); }
@media (prefers-color-scheme: dark) {
  .status.now { background: var(--amber); color: var(--espresso); }
  .status.soon { border-color: var(--muted-on-dark); color: var(--muted-on-dark); }
}
.group-head { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; align-items: end; margin-bottom: 1.5rem; }
.group-head .display { margin: 0; }
.group-head p { margin: 0; font-size: 1.08rem; }

.pull { margin: 0; border-left: 3px solid var(--amber); padding: .25rem 0 .25rem 1.5rem; }
.pull p { font-family: var(--font-read); font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.5; color: var(--heading); margin: 0; }

/* ---- every sport ---- */
.sports { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.sport { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem; }
.band-light .sport { background: var(--bg); }
.sport img { width: 40px; height: 40px; display: block; margin-bottom: .7rem; }
.sport h3 { font-size: 1rem; margin: 0 0 .2rem; }
.sport p { margin: 0; font-size: .92rem; color: var(--muted); }

/* ---- how it works detail ---- */
.stage-detail { list-style: none; padding: 0; margin: 0; display: grid; gap: 3.5rem; }
.stage-detail > li { display: grid; grid-template-columns: 5rem 1fr; gap: 1.5rem; }
.stage-num {
  font-size: 3.2rem; font-weight: 700; color: var(--heading); line-height: 1; border-top: 2.5px solid var(--amber); padding-top: .5rem;
}
.stage-body { max-width: 46rem; }
.stage-body .display { margin-bottom: .5rem; }
.lead-in { font-size: 1.12rem; margin-bottom: 1rem; }
.outcome { font-weight: 700; color: var(--heading); border-left: 3px solid var(--amber); padding-left: .9rem; margin-top: 1rem; }
.ticks { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.ticks li { position: relative; padding-left: 1.5rem; line-height: 1.55; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .75em; width: .8rem; height: 2.5px; background: var(--amber); }

/* ---- about / prose ---- */
.prose .read { font-size: 1.1rem; line-height: 1.7; }
.prose .display { margin-top: 2.5rem; font-size: 1.6rem; }
.first-line { font-size: 1.35rem !important; color: var(--heading); }

/* ---- FAQ ---- */
.faq details { border-bottom: 1px solid var(--border); padding: 1.1rem 0; }
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 1.1rem; color: var(--heading); list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; margin: 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: .75rem 0 0; font-size: 1.05rem; line-height: 1.65; }
.faq-more { margin-top: 2rem; }

/* ---- request access ---- */
.request-form { padding: 2rem; display: grid; gap: 1rem; }
.request-form .grid { margin: 0; }
.grid.two-small { grid-template-columns: 1fr 1fr; gap: .9rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- closing call to action ---- */
.cta-band { padding: 64px 0; border-top: 2.5px solid var(--amber); }
.cta-row { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta-band h2 { color: var(--parchment); font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 .4rem; }
.cta-band p { color: rgba(240, 231, 214, .85); margin: 0; max-width: 34rem; }
.cta-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---- footer ---- */
.site-footer { background: var(--espresso); color: var(--muted-on-dark); padding: 48px 0 24px; border-top: 2.5px solid var(--amber); }
.footer-logo { display: inline-block; line-height: 0; }
.footer-logo img { width: 208px; height: auto; }
.footer-tagline { color: var(--parchment); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin: .9rem 0 .2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.footer-line { color: var(--muted-on-dark); margin-top: .5rem; }
.site-footer h2 { color: var(--parchment); font-size: .78rem !important; letter-spacing: .14em !important; text-transform: uppercase !important; margin: 0 0 .75rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.site-footer a { color: var(--muted-on-dark); text-decoration: none; }
.footer-base a { color: var(--muted-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--amber); }
.footer-base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(196, 168, 130, .2); }

/* ---- app: access requests ---- */
.badge { display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999px; background: var(--amber); color: var(--espresso); font-size: .7rem; font-weight: 700; }
.leads { list-style: none; margin: 0; padding: 0; }
.leads li { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.leads p { margin: .15rem 0; }
.leads select { width: auto; }

/* ---- smaller screens ---- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .week-card { transform: none; }
  .stages-list, .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-stats { grid-template-columns: repeat(3, 1fr); }
  .sports { grid-template-columns: repeat(3, 1fr); }
  .group-head { grid-template-columns: 1fr; gap: .75rem; }
}
@media (max-width: 760px) {
  .menu-toggle { display: inline-block; }
  .header-row { flex-wrap: wrap; }
  .site-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 1rem; padding: .5rem 0 1.25rem; }
  .site-nav[data-open] { display: flex; }
  .nav-links { flex-direction: column; gap: .25rem; }
  .nav-links a { display: block; padding: .5rem 0; }
  .nav-account { margin-left: 0; flex-wrap: wrap; }
  .three, .stages-list, .feature-grid, .feature-grid.two-up, .footer-grid { grid-template-columns: 1fr; }
  .proof-stats, .sports { grid-template-columns: repeat(2, 1fr); }
  .band { padding: 56px 0; }
  .lockup img { height: 38px; }
  .header-row { min-height: 64px; }
  .hero { padding: 48px 0 56px; }
  .stage-detail > li { grid-template-columns: 1fr; gap: .5rem; }
  .stage-num { font-size: 2.2rem; width: 4rem; }
  .wk-axis, .wk-row { grid-template-columns: 4.6rem 1fr; }
  .wk-axis { grid-template-columns: 4.6rem repeat(14, 1fr); }
  .wk-block span { display: none; }
  .wk-block { padding: .2rem .3rem; font-size: .62rem; }
  .request-form { padding: 1.25rem; }

  /* Tap targets: at least 44px tall without changing the text size */
  .menu-toggle, .nav-account .btn { min-height: 44px; }
  .nav-links a, .nav-signin { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .nav-signin { padding: 0 .25rem; }
  .site-footer ul { gap: 0; }
  .site-footer ul a, .footer-base a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-base { align-items: center; }
  .hero-note a, .text-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---- legal pages ---- */
.legal-status { font-size: .92rem; color: var(--muted); border-left: 3px solid var(--amber); padding-left: .9rem; }
.legal .display { font-size: 1.35rem; margin-top: 2.25rem; }