/* ==========================================================================
   GOLSZ — Global Stylesheet
   Palette: Helios — navy base, gold accent, cream highlights (matches the
   GOLSZ app's own theme tokens in golsz-app.html's :root block).
   --gold/--gold-bright/--gold-ink are kept as variable NAMES (used
   throughout this file and every page's markup) even though the values
   are now real gold rather than the old lime "volt" accent — renaming the
   tokens themselves would mean touching every call site for no functional
   benefit.
   Type: Archivo (display + body), Space Mono (data/numeric)
   ========================================================================== */

:root {
  --navy: #0D1210;
  --navy-deep: #090C0A;
  --charcoal: #1B263B;
  --surface: #1B263B;
  --surface-raised: #263349;
  --gold: #D4AF37;
  --gold-bright: #E6C76A;
  --gold-ink: #0D1210;
  --ink: #F7F4EA;
  /* --ink-muted was #415A77, which is ~2.5:1 against --navy — under the
     4.5:1 WCAG AA minimum for body text, and the reason so much of the
     small copy read as unreadable pale blue. These keep the same blue-grey
     family; both clear 4.5:1 on the navy page background AND on --surface
     cards (6.2/5.0 and 5.8/4.6 respectively), since muted text appears on
     both. Used by p, .lede, .field-hint
     and every muted label across all pages, so this lifts contrast site-
     wide, not just on the homepage. */
  --ink-muted: #8096B2;
  --ink-faint: #7A90AD;
  /* Re-audited against --surface-raised (#263349), which was added after the
     note above and is not covered by it: --ink-muted measures 4.19:1 there
     and --ink-faint 3.89:1, both under the 4.5:1 body-text minimum. NEITHER
     IS ACTUALLY RENDERED ON IT — all three --surface-raised call sites
     (.pp-avatar's gradient, and .sc-line.is-me's .sc-dot and .sc-bubble) set
     --ink (11.55:1) or --gold-bright (7.71:1), and the more specific
     `.sc-line.is-me .sc-bubble` rule overrides the base .sc-bubble's
     --ink-muted. So no value change was needed here. Recorded because the
     margin is thin and the next rule that pairs muted or faint text with a
     raised surface WILL fail — check this before adding one. */
  --border: #1B263B;
  /* --border-strong was #415A77: 2.66:1 against the --navy page background
     and 2.76:1 against the --navy-deep field fill, both under the 3:1 that
     WCAG 2.1 AA (1.4.11 Non-text Contrast) requires for the visual boundary
     of a user-interface component. That mattered more than the numbers
     suggest, because --navy-deep vs --navy is 1.04:1 — an input's fill is
     indistinguishable from the page it sits on, so this border is the ONLY
     thing marking where the field is. On the waitlist form, the site's only
     conversion surface, it meant a control a low-vision visitor could not
     locate at all. #496686 holds the same blue-grey hue and clears the bar
     against BOTH adjacent colours: 3.18:1 on --navy, 3.30:1 on --navy-deep.
     (Ornamental card rules drawn in this token against --surface land at
     2.54:1, which is fine: 1.4.11 governs component boundaries and
     meaningful graphics, not decoration.) */
  --border-strong: #496686;
  --gold-border: rgba(212, 175, 55, 0.4);
  --amber: #B58A1A;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --container: 1180px;
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", monospace;
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
  color: var(--ink);
}

h1 { font-size: clamp(2.4rem, 5vw + 1rem, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3vw + 1rem, 2.75rem); }
h3 { font-size: clamp(1.3rem, 1.2vw + 1rem, 1.6rem); }
h4 { font-size: 1.15rem; }

/* ---- Heading LEVEL vs heading SIZE --------------------------------------
   The rules directly above fuse the two: the only way to get a smaller
   heading was to pick a deeper level. That is how every page in this site
   ended up with a broken outline — contact.html ran <h1> straight to <h3>
   with no <h2> anywhere, terms.html and privacy.html did the same, and all
   four footers jumped to <h4>. A screen-reader user navigating by heading
   hears a level that does not exist and cannot tell what is nested inside
   what (WCAG 1.3.1 Info and Relationships).
   The levels are now correct. These utilities carry the visual size, so the
   rendering is unchanged — use one whenever the right level is not the size
   the design wants, rather than reaching for a deeper heading again. */
.size-h3 { font-size: clamp(1.3rem, 1.2vw + 1rem, 1.6rem); }
.legal-body h2 { font-size: clamp(1.3rem, 1.2vw + 1rem, 1.6rem); }

p { margin: 0 0 1em; color: var(--ink-muted); }

a {
  color: var(--gold-bright);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

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

ul { margin: 0; padding: 0; list-style: none; }

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

section { position: relative; }

.section-pad { padding: clamp(4rem, 8vw, 7rem) 0; }
.section-pad-sm { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1em;
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18);
}

.lede {
  font-size: clamp(1.05rem, 1vw + 0.9rem, 1.3rem);
  color: var(--ink-muted);
  max-width: 60ch;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--gold);
  color: var(--gold-ink);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  z-index: 200;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 12px;
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--gold-ink);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.25);
}
.btn-primary:hover {
  box-shadow: 0 14px 36px rgba(212, 175, 55, 0.38);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

.btn-block { width: 100%; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 22, 40, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
}
.logo:hover { text-decoration: none; }
.logo .mark { color: var(--gold); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-link {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-muted);
  padding: 6px 2px;
  position: relative;
}
.nav-link:hover { color: var(--ink); text-decoration: none; }
.nav-link.is-active { color: var(--gold-bright); }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px;
  background: var(--gold);
}

.nav-cta { display: none; }

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
}

.nav-toggle .bar {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.nav-toggle .bar::before,
.nav-toggle .bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease;
}
.nav-toggle .bar::before { top: -6px; }
.nav-toggle .bar::after { top: 6px; }

.mobile-panel {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0 20px;
  border-top: 1px solid var(--border);
}
.mobile-panel.is-open { display: flex; }
.mobile-panel .nav-link {
  padding: 12px 4px;
  font-size: 1.05rem;
}
.mobile-panel .btn { margin-top: 10px; }

/* .nav-signin is the quiet half of the pair; .nav-cta ("Start free") is the
   single primary action repeated down the page. Both collapse into the
   mobile panel below 1080px, which carries its own copies. */
.nav-signin { display: none; font-weight: 600; }
@media (min-width: 1080px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-signin { display: inline-flex; align-items: center; margin-left: auto; margin-right: 1.1rem; }
  .nav-toggle { display: none; }
  .mobile-panel { display: none !important; }
}
@media (max-width: 1079px) {
  .nav-links, .nav-cta, .nav-signin { display: none; }
}

/* ==========================================================================
   Hero (region-aware photo hero + AI Scout promo panel)
   ========================================================================== */

.hero-mega {
  position: relative;
  min-height: clamp(520px, 92vh, 900px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(100deg, rgba(9, 12, 10, 0.94) 0%, rgba(9, 12, 10, 0.72) 42%, rgba(9, 12, 10, 0.25) 68%, rgba(9, 12, 10, 0.55) 100%),
    linear-gradient(0deg, rgba(9, 12, 10, 0.9) 0%, transparent 22%),
    radial-gradient(65% 55% at 80% 15%, rgba(212, 175, 55, 0.14), transparent 60%),
    linear-gradient(160deg, var(--charcoal), var(--navy-deep));
  background-size: cover;
  background-position: 50% 12%;
  /* Biased toward the top of the frame rather than dead-center — the
     region photos are a tall crop of several athletes with most faces
     clustered in their upper third, and "cover" on a wide/short hero
     box only ever shows a thin horizontal slice of a tall source image,
     so centering vertically was cropping every face out of frame. */
  /* Region photo (assets/hero-ca.jpg etc.) is layered in via JS once
     /api/geo.js resolves the visitor's region — see js/main.js
     initHeroRegion(). The gradients above are the fallback look before
     that resolves (or if it fails), so the hero never looks broken. */
}

.hero-mega-inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 4vw, 2rem);
  margin-left: clamp(-1.25rem, -4vw, -2rem);
  /* A scrim scoped to just the text column, not the whole hero — the
     photo behind varies a lot in brightness (a bright lime jersey can
     sit right under the headline at some viewport widths), so text
     legibility can't depend on the hero's own broad left-to-right
     gradient alone. Fades out toward the right so it reads as depth,
     not a flat box. */
  background: linear-gradient(100deg, rgba(9, 12, 10, 0.72) 0%, rgba(9, 12, 10, 0.72) 75%, transparent 100%);
  border-radius: var(--radius-lg);
}

.hero-mega h1 {
  font-family: var(--font-display);
  font-weight: 900;
  /* Was clamp(3.2rem, 9vw, 5.4rem) for the single-word "JOIN" shout. The
     headline is now two full sentences, so the floor has to come down or
     "Know where you're going." breaks badly at 375px. */
  font-size: clamp(2.15rem, 6.2vw, 4.1rem);
  line-height: 1.03;
  letter-spacing: -0.01em;
  margin: 0 0 1.1rem;
}
.hero-mega h1 .line-accent { color: var(--gold); display: block; }
.hero-mega h1 .line-main { color: var(--ink); display: block; }

.hero-mega .lede {
  margin: 0 0 0.4rem;
  max-width: 480px;
}
.hero-mega .lede strong { color: var(--gold-bright); font-weight: 700; }

.hero-mega .hero-sub {
  color: var(--ink-muted);
  font-size: 1.02rem;
  margin: 0 0 1.8rem;
}

.hero-mega .field-hint { color: var(--ink-faint); margin-top: 1rem; }

/* ---- AI Scout promo panel ---- */

.scout-panel {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.scout-panel-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 2rem;
}
.scout-panel-head .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink);
}
.scout-panel-head .badge svg { color: var(--gold); }

.scout-pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 1.6rem 0;
}
.scout-pill {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--navy-deep);
  border: 1px solid var(--border-strong);
  padding: 9px 18px;
  border-radius: 999px;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.scout-pill:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  text-decoration: none;
}

.scout-search {
  max-width: 560px;
  margin: 0 auto;
}
.scout-search .search-bar { max-width: none; margin-bottom: 0; }
.scout-search input {
  height: 56px;
  font-size: 1rem;
  border-radius: 999px;
}
.scout-search svg { color: var(--gold); }

.value-strip {
  display: grid;
  gap: 1.6rem;
  margin-top: 2.8rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--border);
}
@media (min-width: 760px) {
  .value-strip { grid-template-columns: repeat(3, 1fr); }
}
.value-strip-item {
  text-align: center;
}
.value-strip-item .value-icon {
  color: var(--gold);
  margin-bottom: 8px;
}
.value-strip-item h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  margin: 0 0 4px;
}
.value-strip-item p {
  color: var(--ink-muted);
  font-size: 0.92rem;
  margin: 0;
}

.bg-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}

/* ==========================================================================
   Stats
   ========================================================================== */

.stats-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--navy-deep);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  padding: 2.6rem 0;
  text-align: center;
}

@media (min-width: 720px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

.stat-num {
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 2.4vw, 2.6rem);
  font-weight: 700;
  color: var(--gold-bright);
  margin-bottom: 0.25rem;
}
.stat-label {
  font-size: 0.85rem;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
}
/* cols-4 went straight from 1 column to 4 at 1000px, which left tablets
   (and large phones in landscape) scrolling through four full-height
   pricing cards in a single stack. 2-up from 720px is the missing rung. */
@media (min-width: 720px) {
  .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover {
  border-color: var(--gold-border);
  transform: translateY(-4px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid var(--gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  color: var(--gold);
}

/* h2 included: contact.html's direct-contact cards are top-level page
   sections and carry <h2 class="size-h3">, not <h3>. See the heading
   level/size note near the top of this file. */
.card h2, .card h3 { margin-bottom: 0.5em; }
.card p:last-child { margin-bottom: 0; }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9rem;
  margin-top: 1rem;
}

/* Numbered step cards */
.step-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2rem 1.8rem;
}
.step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gold-ink);
  background: var(--gold);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
}

/* Track tabs (How It Works) */
.track-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 2.5rem;
}
.track-tab {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.92rem;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--ink-muted);
}
.track-tab:hover { color: var(--ink); text-decoration: none; border-color: var(--gold-border); }

.track-section {
  border-top: 1px solid var(--border);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.track-section:first-of-type { border-top: none; }

.track-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.2rem;
}

/* ==========================================================================
   Feature deep-dive rows
   ========================================================================== */

.feature-row {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  border-top: 1px solid var(--border);
}
.feature-row:first-of-type { border-top: none; }

@media (min-width: 960px) {
  .feature-row { grid-template-columns: 1fr 1fr; }
  .feature-row.reverse .feature-visual { order: -1; }
}

.feature-visual {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid var(--gold-border);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.check-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 0.7rem;
  color: var(--ink-muted);
}
.check-list li svg { flex-shrink: 0; margin-top: 3px; color: var(--gold); }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band {
  background: linear-gradient(135deg, var(--charcoal), var(--navy-deep));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-band h2 { margin-bottom: 0.4em; }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-row {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (min-width: 640px) {
  .form-row.two-col { grid-template-columns: 1fr 1fr; }
}

label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  background: var(--navy-deep);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.98rem;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
/* Focus used to be a 1px border-colour swap and nothing else. A single
   hairline changing hue is the weakest indicator WCAG allows you to claim,
   and it is invisible to anyone who cannot resolve a 1px line or tell gold
   from blue-grey — which is the same person the border fix above is for.
   This adds a real ring: an outline OUTSIDE the box (so no reflow, no
   1px jump) plus a soft halo, on top of the border change that already
   existed. --gold measures 8.99:1 on --navy and 9.35:1 on --navy-deep, far
   past the 3:1 that 1.4.11 asks of a focus indicator.
   :focus-visible (line ~166) already gives keyboard users an outline; this
   is the :focus case — pointer and programmatic focus included — and the
   two are deliberately consistent rather than competing. */
input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D4AF37' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.field-hint {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-top: 6px;
}
.field-error {
  font-size: 0.82rem;
  color: #f0a3a3;
  margin-top: 6px;
  display: none;
}
.has-error input, .has-error select {
  border-color: #d16565;
}
.has-error .field-error { display: block; }

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
}
.inline-form input { flex: 1 1 240px; }

.form-success {
  display: none;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.8rem;
  text-align: left;
}
.form-success.is-visible { display: block; }
.form-success h2, .form-success h3 { color: var(--gold-bright); }

.consent-note {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-top: 0.9rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--navy-deep);
  padding: 3.5rem 0 2rem;
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  margin-bottom: 2.5rem;
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.footer-brand p { max-width: 32ch; }

/* Was `.footer-col h4`. The footers now use <h2> — the columns are
   siblings of the page's main sections, not subsections four levels deep,
   and <h4> after an <h2> was a skipped level on every page. The explicit
   font-size below is what keeps them looking identical. */
.footer-col h2 {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}
.footer-col li { margin-bottom: 0.6rem; }
.footer-col a { color: var(--ink-muted); }
.footer-col a:hover { color: var(--gold-bright); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* Currently UNUSED. The three footers that carried a .social-row all pointed
   their links at a bare "#", so the markup was removed rather than left as a
   broken affordance (see the comment in each footer). These rules are kept
   deliberately: the moment real profile URLs exist the block goes straight
   back in and styles itself. Delete them if that decision is reversed. */
.social-row {
  display: flex;
  gap: 12px;
}
.social-row a {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
}
.social-row a:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */

.page-hero {
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.2rem, 4vw, 3rem);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-bottom: 1px solid var(--border);
}
.page-hero .lede { margin-top: 0.6rem; }

/* Utility */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-lg { margin-top: 3rem; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Profile pages (sample profile + builder)
   ========================================================================== */

.profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 2rem;
}

.profile-banner {
  height: 160px;
  background:
    radial-gradient(60% 100% at 80% 0%, rgba(212, 175, 55, 0.16), transparent 60%),
    linear-gradient(135deg, var(--charcoal), var(--navy-deep));
  position: relative;
}

.profile-body {
  padding: 0 clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
}

.profile-avatar {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--gold-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1rem;
  border: 5px solid var(--surface);
  margin-top: -54px;
  flex-shrink: 0;
}

.profile-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1rem;
  margin-bottom: 0.5rem;
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.verified-badge {
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid var(--gold-border);
  color: var(--gold-bright);
}

.sample-badge {
  background: rgba(237, 239, 242, 0.06);
  border: 1px solid var(--border-strong);
  color: var(--ink-muted);
  text-transform: uppercase;
}

.profile-role {
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0.2rem 0 0;
}

.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 1.1rem 0 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}

.meta-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9rem;
  color: var(--ink-muted);
}
.meta-chip .flag { font-size: 1.05rem; line-height: 1; }
.meta-chip svg { color: var(--gold); flex-shrink: 0; }
.meta-chip strong { color: var(--ink); font-weight: 500; }

/* Timeline */
.timeline {
  position: relative;
  padding-left: 30px;
  margin-top: 0.5rem;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border-strong);
}
.timeline-item {
  position: relative;
  padding-bottom: 1.9rem;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--surface);
}
.timeline-year {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 0.2rem;
  letter-spacing: 0.02em;
}
.timeline-item h4 { margin-bottom: 0.15rem; }
.timeline-org {
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  display: block;
}
.timeline-item p:last-child { margin-bottom: 0; }

/* Tags */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill {
  font-size: 0.82rem;
  background: var(--navy-deep);
  border: 1px solid var(--border-strong);
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--ink-muted);
}

/* Video / highlight reel placeholder */
.video-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--navy-deep);
  border: 1px solid var(--border);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.play-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.14);
  border: 1px solid var(--gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.video-caption {
  font-size: 0.85rem;
  color: var(--ink-faint);
  padding: 0 1rem;
}

/* Section subheads inside profile card */
.profile-section {
  padding-top: 1.8rem;
  margin-top: 1.8rem;
  border-top: 1px solid var(--border);
}
.profile-section h3 { margin-bottom: 1rem; }

/* Builder layout */
.builder-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 980px) {
  .builder-grid { grid-template-columns: 1fr 0.86fr; }
  .builder-preview-col { position: sticky; top: 96px; }
}

.builder-form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.builder-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 2rem;
}
.builder-fieldset:last-child { margin-bottom: 0; }
.builder-fieldset legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
  padding: 0;
}

.entry-card {
  background: var(--navy-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.3rem 1.4rem 1.1rem;
  margin-bottom: 1rem;
  position: relative;
}

.entry-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--ink-faint);
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
}
.entry-remove:hover { color: #f0a3a3; border-color: #a35a5a; }

.btn-sm {
  padding: 9px 18px;
  font-size: 0.85rem;
}

/* Upload dropzone */
.upload-zone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 1.8rem 1.4rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.upload-zone:hover, .upload-zone.is-dragover {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.05);
}
.upload-zone input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
.upload-zone .upload-icon {
  color: var(--gold);
  margin: 0 auto 10px;
  width: 34px;
  height: 34px;
}
.upload-filename {
  font-size: 0.85rem;
  color: var(--gold-bright);
  margin-top: 8px;
  word-break: break-all;
}

.builder-note {
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin-bottom: 2rem;
}
.builder-note strong { color: var(--gold-bright); }

.preview-empty {
  color: var(--ink-faint);
  font-size: 0.9rem;
  font-style: italic;
}

/* ==========================================================================
   Discover (search, filters, account directory, chat drawer)
   ========================================================================== */

.search-bar {
  position: relative;
  max-width: 480px;
  margin: 0 auto 1.5rem;
}
.search-bar svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
}
.search-bar input {
  padding-left: 44px;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 2.5rem;
}
.filter-chip {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.88rem;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}
.filter-chip:hover { color: var(--ink); border-color: var(--gold-border); }
.filter-chip.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--gold-ink);
}

.account-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .account-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .account-grid { grid-template-columns: repeat(3, 1fr); }
}

.account-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.account-card:hover { border-color: var(--gold-border); transform: translateY(-3px); }
.account-card.is-hidden { display: none; }

.account-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy-deep);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.account-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.account-name-row h3 {
  font-size: 1.02rem;
  margin: 0;
}
.account-role {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 2px 0 0;
}

.account-actions {
  display: flex;
  gap: 10px;
}
.account-actions .btn { flex: 1; }

.follow-btn.is-following {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--gold-border);
  color: var(--gold-bright);
}

.no-results {
  display: none;
  text-align: center;
  color: var(--ink-faint);
  padding: 2rem 0;
}
.no-results.is-visible { display: block; }

/* Floating chat drawer (shared across account cards) */
.chat-drawer {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 360px;
  max-width: calc(100vw - 32px);
  z-index: 150;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
@media (max-width: 480px) {
  .chat-drawer { right: 16px; left: 16px; width: auto; bottom: 16px; }
}

/* ==========================================================================
   Feed (Instagram-style: story strip + posts)
   ========================================================================== */

.feed-wrap {
  max-width: 640px;
  margin: 0 auto;
}

.story-strip {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 0.25rem 0.25rem 1.4rem;
  margin-bottom: 0.5rem;
  scrollbar-width: thin;
}

.story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: 78px;
  text-align: center;
}

.story-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold-bright);
  font-size: 0.85rem;
  border: 2px solid var(--navy);
}

.story-label {
  font-size: 0.72rem;
  color: var(--ink-muted);
  line-height: 1.25;
}

.post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.post-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem 1.2rem;
}

.post-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy-deep);
  border: 1px solid var(--gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.post-meta-name {
  font-weight: 500;
  color: var(--ink);
  font-size: 0.95rem;
  display: block;
}
.post-meta-time {
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.post-type-badge { margin-left: auto; }

.post-visual { padding: 0 1.2rem; }

.post-body { padding: 1rem 1.2rem 0.2rem; }
.post-body h3 { margin-bottom: 0.3rem; }
.post-body p:last-child { margin-bottom: 0; }

.post-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0.9rem 1.2rem 1.2rem;
  margin-top: 0.6rem;
}

.post-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px;
}
.post-action-btn:hover { color: var(--gold-bright); }
.post-action-btn.is-liked { color: var(--gold-bright); }
.post-action-btn svg { flex-shrink: 0; }
.post-action-btn.is-liked svg { fill: currentColor; }

.post-cta { margin-left: auto; }

/* ==========================================================================
   Direct message / chat panel
   ========================================================================== */

.chat-panel {
  background: var(--navy-deep);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-md);
  margin-top: 1rem;
  overflow: hidden;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--border);
}

.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--gold-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.chat-status {
  font-size: 0.78rem;
  color: var(--ink-faint);
  display: block;
}

.chat-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--ink-faint);
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
.chat-close:hover { color: var(--ink); }

.chat-thread {
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
}

.chat-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.45;
}
.chat-bubble-them {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.chat-bubble-me {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--gold-ink);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.chat-input-row {
  display: flex;
  gap: 10px;
  padding: 1rem 1.2rem;
  border-top: 1px solid var(--border);
}
.chat-input-row input { flex: 1; }


/* ==========================================================================
   PRODUCT PREVIEWS  (homepage)
   Faithful, static renderings of real GOLSZ app surfaces — Sports Passport,
   AI Scout, the pathway map, benchmarks. Built from the same tokens the app
   uses so they stay honest as the product changes, rather than being
   screenshots that silently rot. Every one is marked "Illustrative preview"
   in the markup: the layout and labels are real, the athlete is not.
   ========================================================================== */

.preview-frame {
  background: var(--navy-deep);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.preview-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-strong);
}
.preview-chrome i {
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--border-strong); flex-shrink: 0;
}
.preview-chrome span {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.preview-body { padding: clamp(1rem, 2.5vw, 1.5rem); }

/* Alternating text/visual rows. Single column until there's genuinely room
   for two — a 50/50 split below ~900px squeezes both halves. */
.showcase {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.showcase-copy .lede { margin-bottom: 0; }
@media (min-width: 900px) {
  .showcase { grid-template-columns: 1fr 1.05fr; }
  .showcase.is-flipped .showcase-copy { order: 2; }
}

/* --- Passport preview --- */
.pp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.pp-avatar {
  width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(140deg, var(--surface-raised), var(--charcoal));
  border: 1px solid var(--gold-border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; color: var(--gold-bright);
}
.pp-name { font-family: var(--font-display); font-weight: 800; color: var(--ink); line-height: 1.2; }
.pp-sub { font-size: 0.82rem; color: var(--ink-muted); }
.pp-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--border-strong); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); overflow: hidden;
}
@media (min-width: 480px) { .pp-grid { grid-template-columns: repeat(4, 1fr); } }
.pp-cell { background: var(--navy-deep); padding: 0.7rem 0.6rem; text-align: center; }
.pp-cell b {
  display: block; font-family: var(--font-mono); font-size: 1rem;
  color: var(--ink); font-weight: 700;
}
.pp-cell span {
  font-size: 0.6rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
}
/* Passport Strength meter — mirrors the app's composite bar. */
.pp-meter { margin-top: 1rem; }
.pp-meter-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin-bottom: 6px;
}
.pp-meter-top b { font-family: var(--font-mono); font-size: 1.05rem; color: var(--gold-bright); }
.pp-bar { height: 7px; border-radius: 999px; background: var(--charcoal); overflow: hidden; }
.pp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }

/* --- Scout conversation preview --- */
.sc-line { display: flex; gap: 9px; margin-bottom: 0.85rem; align-items: flex-start; }
.sc-line.is-me { flex-direction: row-reverse; }
.sc-dot {
  width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
  background: var(--charcoal); color: var(--gold-bright);
  border: 1px solid var(--gold-border);
}
.sc-line.is-me .sc-dot { background: var(--surface-raised); color: var(--ink); border-color: var(--border-strong); }
.sc-bubble {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 13px; padding: 0.65rem 0.85rem;
  font-size: 0.88rem; line-height: 1.55; color: var(--ink-muted); max-width: 82%;
}
.sc-line.is-me .sc-bubble { background: var(--surface-raised); color: var(--ink); }
.sc-bubble strong { color: var(--ink); font-weight: 700; }

/* --- Pathway preview --- */
.path-row { display: flex; align-items: flex-start; gap: 0; }
.path-node { flex: 1 1 0; min-width: 0; text-align: center; }
.path-ring {
  width: 38px; height: 38px; margin: 0 auto 7px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border-strong); color: var(--ink-faint);
  background: var(--navy-deep);
}
.path-node.is-done .path-ring { border-color: var(--gold); color: var(--gold-bright); background: rgba(212,175,55,0.1); }
.path-node.is-goal .path-ring { border-color: var(--gold-bright); color: var(--gold-ink); background: var(--gold-bright); }
.path-node b {
  display: block; font-size: 0.68rem; font-weight: 800; line-height: 1.25;
  color: var(--ink); overflow-wrap: anywhere;
}
.path-node span { font-size: 0.6rem; color: var(--ink-faint); font-weight: 700; }
.path-link { flex: 0 0 auto; width: 14px; height: 2px; background: var(--border-strong); margin-top: 18px; }
.path-link.is-done { background: var(--gold); }

/* --- Benchmark rows --- */
.bm-row {
  display: flex; align-items: center; gap: 10px;
  padding: 0.6rem 0; border-bottom: 1px solid var(--border-strong);
}
.bm-row:last-child { border-bottom: none; }
.bm-row b { font-family: var(--font-mono); color: var(--gold-bright); font-size: 0.95rem; }
.bm-name { font-size: 0.86rem; color: var(--ink); font-weight: 700; }
.bm-meta { font-size: 0.68rem; color: var(--ink-faint); }
.bm-delta { margin-left: auto; font-family: var(--font-mono); font-size: 0.78rem; color: var(--gold); white-space: nowrap; }

/* --- Journey strip: ATHLETE -> PASSPORT -> SCOUT -> PLAN -> PROGRESS --- */
.journey {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem 0.65rem; align-items: center;
  padding: 1.4rem 0 0;
}
.journey b {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 700;
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 13px;
}
.journey b.is-hot { color: var(--gold-bright); border-color: var(--gold-border); }
.journey i { color: var(--ink-faint); font-style: normal; }

/* --- Goal chips --- */
.goal-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.3rem; }
.goal-chip {
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 8px 15px; font-size: 0.85rem; font-weight: 700; color: var(--ink);
  background: var(--surface); transition: border-color 0.18s ease, color 0.18s ease;
}
.goal-chip:hover { border-color: var(--gold); color: var(--gold-bright); }

/* --- Trust list --- */
.trust-grid { display: grid; gap: 0.75rem; margin-top: 1.6rem; }
@media (min-width: 720px) { .trust-grid { grid-template-columns: 1fr 1fr; gap: 0.85rem 2rem; } }
.trust-item { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-muted); }
.trust-item svg { flex-shrink: 0; margin-top: 4px; color: var(--gold); }
.trust-item strong { color: var(--ink); font-weight: 700; }

/* --- Pricing --- */
.plan { display: flex; flex-direction: column; height: 100%; position: relative; }
.plan.is-featured { border-color: var(--gold-border); box-shadow: 0 0 0 1px var(--gold-border); }
.plan-price {
  font-family: var(--font-mono); font-size: 2rem; font-weight: 700;
  color: var(--gold-bright); margin: 0.15rem 0 0.1rem; line-height: 1.1;
}
.plan-price small { font-size: 0.85rem; color: var(--ink-muted); font-weight: 400; }
.plan-for { font-size: 0.84rem; color: var(--ink-muted); min-height: 2.6em; margin-bottom: 0.9rem; }
.plan-feats { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.plan-feats li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 0.86rem; color: var(--ink-muted); margin-bottom: 0.5rem;
}
.plan-feats svg { flex-shrink: 0; margin-top: 4px; color: var(--gold); }
.plan-scout {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em;
  color: var(--ink); background: var(--charcoal); border-radius: var(--radius-sm);
  padding: 7px 11px; margin-bottom: 1.1rem; text-align: center;
}
.plan .btn { margin-top: auto; width: 100%; }