@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* Design tokens live in tokens.css (loaded before this file).
   Nothing below may contain a raw colour literal. See task/plan.md #22. */

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Without this, an anchor target or a Tab-focused control lands underneath
     the 64px fixed nav. Measured on the new #streamline CTA before the fix:
     top 10, bottom 60, nav bottom 65, i.e. entirely obscured while focused
     (WCAG 2.4.11). Set from the nav's own height plus a little air. */
  scroll-padding-top: 5rem;
}
body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Grain overlay ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* ── Brand lockup: the iQ glyph ──
   The nav wordmark is the word RALLY followed by this glyph, which supplies
   the "iQ". The anchor is therefore `align-items: baseline` with NO gap - the
   glyph carries its own sidebearings, and a flex gap on top of them opens the
   pair into "RALLY i Q". The anchor also needs aria-label="RallyIQ", because
   the only text in it now reads "RALLY".

   Painted as a CSS mask, not an <img>. An <img src="*.svg"> bakes its own
   colours and cannot see the page's custom properties, so on the light theme
   it stayed #3d9e42 while the surrounding wordmark dropped to #256b29 - a
   visible two-green mismatch inside one lockup. A mask consumes only the
   file's alpha channel and fills it with var(--green), so the glyph tracks the
   theme toggle for free. Consequence: it is single-colour, which is correct
   here anyway - the gold ball belongs to the icon, not to the logotype.

   Sizing is in `em` so the glyph scales with whatever font-size the lockup
   uses. At 1.07em the glyph's 100u cap band renders at 23.0px against a
   31.2px font - Barlow Condensed 900's measured cap height at that size.

   The `top` offset is not a fudge. A flex item that has no baseline of its own
   gets one SYNTHESIZED FROM ITS BORDER BOX, so `align-items: baseline` lands
   the element's bottom edge on the text baseline - not the artwork's baseline,
   which sits 31u above that inside the viewBox. `top` pushes the box down by
   exactly that 31u/145u so the two baselines coincide. A negative
   `margin-bottom` does NOT work here: margins are excluded from the
   synthesized baseline, so it silently changes nothing and the glyph rides 7px
   high - which is exactly the bug this replaced. Verified by measuring
   Range.getBoundingClientRect + TextMetrics.fontBoundingBoxAscent against the
   glyph's computed baseline; the error is now 0.00px.

   The three numbers (1.159, 0.2138, and the viewBox) are locked together.
   Change the viewBox and you must recompute both. */
.brand-iq {
  --h: 1.07em;
  height: var(--h);
  width: calc(var(--h) * 1.159);       /* viewBox aspect: 168 / 145 */
  flex: none;
  position: relative;
  top: calc(var(--h) * 0.2138);        /* below-baseline portion: 31u / 145u */
  background: var(--green);
  -webkit-mask: url("Brand_Assets/rally-iq-lockup-iq.svg") center / contain no-repeat;
          mask: url("Brand_Assets/rally-iq-lockup-iq.svg") center / contain no-repeat;
}

/* ── Nav links ── */
.nav-link {
  position: relative;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s;
  padding-bottom: 2px;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--green);
  transition: width 0.2s ease;
}
.nav-link:hover { color: var(--text-primary); }
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: var(--text-primary); }
.nav-link.active::after { width: 100%; }

/* ── Hero ── */
.hero-glow {
  background:
    radial-gradient(ellipse 60% 70% at 85% 40%, rgba(var(--green-rgb),0.05) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 15% 70%, rgba(var(--gold-rgb),0.02) 0%, transparent 50%);
}

/* ── Sport word rotator ── */
.sport-word {
  display: inline-block;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.sport-word.exiting {
  opacity: 0;
  transform: translateY(-14px);
}
.sport-word.entering {
  opacity: 0;
  transform: translateY(14px);
}

/* ── Marquee sports strip ── */
.marquee-outer { overflow: hidden; }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee-outer:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.sport-strip-item {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--strip-idle);
  padding: 0 2.5rem;
  white-space: nowrap;
  cursor: default;
  transition: color 0.2s;
}
.sport-strip-item:hover { color: var(--text-primary); }
.sport-strip-sep {
  color: var(--green);
  font-size: 0.75rem;
  opacity: 0.5;
  white-space: nowrap;
  align-self: center;
}

/* ── Section label w/ red bar ── */
.section-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.section-label::before {
  content: '';
  display: block;
  width: 1.75rem;
  height: 2px;
  background: var(--green);
  flex-shrink: 0;
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--green);
  /* Label sits ON the accent fill, so it tracks the fill, not the page text.
     A white label on the dark-theme brand green is 3.40:1 and fails WCAG at
     this 13px semibold size; black is 5.16:1 and leaves the green untouched.
     Exact values live in tokens.css. */
  color: var(--text-on-accent);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.875rem 2rem;
  text-decoration: none;
  transition: background 0.2s;
  white-space: nowrap;
  cursor: pointer;
  border: none;
}
.btn-primary:hover { background: var(--green-hover); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.875rem 2rem;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
  white-space: nowrap;
}
.btn-ghost:hover {
  border-color: rgba(var(--overlay-rgb),0.4);
  background: rgba(var(--overlay-rgb),0.04);
}

/* ── Nav top-right CTAs: green outline, fill on hover ── */
nav .flex.items-center.gap-3 > a {
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
nav .flex.items-center.gap-3 > a:hover {
  background: var(--green);
  color: var(--text-on-accent);   /* on the accent fill, same rule as .btn-primary */
  border-color: var(--green);
}

/* ── Mockup chrome ── */
.mockup-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.mockup-card-header {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 0.625rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.mockup-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ── Feature cards ── */
.feature-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  transition: border-color 0.25s, transform 0.25s;
}
.feature-card:hover {
  border-color: rgba(var(--green-rgb),0.35);
  transform: translateY(-3px);
}

/* ── Sport cards (grid) ── */
.sport-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
  aspect-ratio: 3/4;
  border: 1px solid var(--border-dim);
  background-size: cover;
  background-position: center;
}
.sport-card:hover { transform: scale(1.02); }
.sport-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--green-rgb),0);
  transition: background 0.3s;
}
.sport-card:hover::after { background: rgba(var(--green-rgb),0.07); }
.sport-card-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
}
.sport-bg-badminton   { background-image: linear-gradient(to top, rgba(20,12,12,0.92) 0%, rgba(25,25,25,0.45) 55%, rgba(25,25,25,0.25) 100%), url('Brand_Assets/badminton.webp'); }
.sport-bg-tennis      { background-image: linear-gradient(to top, rgba(12,20,12,0.92) 0%, rgba(25,25,25,0.45) 55%, rgba(25,25,25,0.25) 100%), url('Brand_Assets/tennis.webp'); }
.sport-bg-pickleball  { background-image: linear-gradient(to top, rgba(12,18,20,0.92) 0%, rgba(25,25,25,0.45) 55%, rgba(25,25,25,0.25) 100%), url('Brand_Assets/pickleball.jpg'); }
.sport-bg-padel       { background-image: linear-gradient(to top, rgba(15,12,24,0.92) 0%, rgba(25,25,25,0.45) 55%, rgba(25,25,25,0.25) 100%), url('Brand_Assets/padel.webp'); }
.sport-bg-table       { background-image: linear-gradient(to top, rgba(22,12,12,0.92) 0%, rgba(25,25,25,0.45) 55%, rgba(25,25,25,0.25) 100%), url('Brand_Assets/table-tennis.jpg'); }
.sport-bg-squash      { background-image: linear-gradient(to top, rgba(18,12,22,0.92) 0%, rgba(25,25,25,0.45) 55%, rgba(25,25,25,0.25) 100%), url('Brand_Assets/squash.jpg'); }

/* ── Phone mockup ── */
.phone-mockup {
  width: 220px;
  height: 440px;
  background: var(--bg-elevated);
  border: 5px solid var(--border-strong);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--shadow-phone);
  position: relative;
}
.phone-notch {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 20px;
  background: var(--border-dim);
  border-radius: 0 0 12px 12px;
  z-index: 10;
}
.phone-screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--surface-sunk);
}

/* ── Stat number ── */
.stat-number {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  line-height: 1;
}

/* ── Form inputs ── */
.form-input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.2s;
  border-radius: 4px;
}
.form-input:focus { border-color: var(--green); }
.form-input::placeholder { color: var(--text-dim); }
select.form-input option { background: var(--bg-elevated); color: var(--text-primary); }

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ── Footer links ── */
.footer-link {
  color: var(--text-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-link:hover { color: var(--text-primary); }

/* ── Dividers ── */
.section-divider { border: none; border-top: 1px solid var(--border-dim); }

/* ── Floating badge ── */
.floating-badge {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow-sm);
}

/* ── Draw item row ── */
.draw-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  background: rgba(var(--overlay-rgb),0.025);
  border: 1px solid var(--border-dim);
  margin-bottom: 0.375rem;
}
.draw-item:last-child { margin-bottom: 0; }

/* ── Pulse (live dot) ── */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* ── Interactive demo ── */
.demo-panel,
.demo-config {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.demo-config {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
}
.demo-panel { background: none; border: none; }
.demo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.demo-progress { min-width: 180px; }
.demo-progress__big {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
  color: var(--text-primary);
}
.demo-progress__big small { font-size: 1rem; color: var(--text-dim); font-weight: 700; }
.demo-progress__lbl {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin: 0.25rem 0 0.5rem;
}
.demo-progress__bar {
  height: 5px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.demo-progress__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--green);
  border-radius: 99px;
  transition: width 0.4s ease;
}

.demo-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.625rem;
  border-radius: 99px;
  background: rgba(var(--overlay-rgb),0.05);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.demo-pill--accent {
  background: var(--green-dim);
  border-color: rgba(var(--green-rgb),0.35);
  color: var(--green-bright);
}

.demo-label-row {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 0.875rem;
}

.demo-round__head {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.demo-match { transition: border-color 0.2s; }
.demo-match.is-done { border-color: rgba(var(--green-rgb),0.3); background: rgba(var(--green-rgb),0.04); }
.demo-court {
  font-size: 0.625rem;
  font-weight: 700;
  font-family: monospace;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 5px;
  flex-shrink: 0;
}
.demo-line { font-size: 0.8125rem; color: var(--text-primary); min-width: 0; }
.demo-name { font-weight: 600; }
.demo-vs { color: var(--text-dim); font-weight: 400; margin: 0 0.25rem; }
.demo-score { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; color: var(--green); font-size: 1rem; }
.demo-score-btn {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.375rem 0.75rem;
  border-radius: 5px;
  border: 1px solid var(--green);
  background: transparent;
  color: var(--green-bright);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.demo-score-btn:hover { background: var(--green); color: var(--text-on-accent); }
.demo-score-btn.is-done { border-color: var(--border); color: var(--text-muted); }
.demo-score-btn.is-done:hover { background: var(--bg-elevated); color: var(--text-primary); }

.demo-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.demo-table th {
  text-align: left;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 700;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.demo-table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border-dim); color: var(--text-sec); }
.demo-table tbody tr:last-child td { border-bottom: none; }
.demo-table .center { text-align: center; }
.demo-table .demo-rank { color: var(--text-dim); font-weight: 700; width: 2rem; }
.demo-table tr.is-champ td { background: rgba(var(--green-rgb),0.08); color: var(--text-primary); }
.demo-table tr.is-champ .demo-rank { color: var(--gold); }

.demo-modal {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: grid;
  place-items: center;
  z-index: 100;
  padding: 20px;
}
.demo-modal[hidden] { display: none; }
.demo-modal__card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.75rem;
  width: 100%;
  max-width: 380px;
}
.demo-modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; margin-bottom: 1.5rem; }
.demo-modal__row label { display: grid; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-muted); }
.demo-modal__row input {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem;
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
}
.demo-modal__row input:focus { outline: none; border-color: var(--green); }
.demo-modal__btns { display: flex; justify-content: flex-end; gap: 0.625rem; }

/* ── Demo: draw generation + AI insights ── */
.demo-roster { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.875rem 0 1.25rem; }
.demo-roster__row { display: flex; align-items: center; gap: 0.625rem; }
.demo-roster__row span { font-size: 0.625rem; font-family: monospace; color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; flex-shrink: 0; }
.demo-roster input {
  flex: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-family: 'Inter', sans-serif;
}
.demo-roster input:focus { outline: none; border-color: var(--green); }
.demo-stage { display: none; }
.demo-stage.is-active { display: block; }
.demo-insights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
.demo-insight {
  background: rgba(var(--green-rgb),0.05);
  border: 1px solid rgba(var(--green-rgb),0.18);
  border-radius: 8px;
  padding: 0.75rem 0.875rem;
}
.demo-insight__k { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 0.25rem; }
.demo-insight__v { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
.demo-insight__v small { color: var(--green); font-weight: 700; }

/* ── Floating action buttons (home + back-to-top) ── */
.fab-stack {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.fab {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s;
}
.fab:hover { color: var(--text-primary); border-color: rgba(var(--green-rgb),0.5); transform: translateY(-2px); }
.fab--top { opacity: 0; pointer-events: none; transform: translateY(8px); }
.fab--top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ── Demo: points chart ── */
.demo-chart { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border-dim); }
.demo-chart__title { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 0.75rem; }
.demo-chart__row { display: grid; grid-template-columns: 96px 1fr 34px; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.demo-chart__row:last-child { margin-bottom: 0; }
.demo-chart__name { font-size: 0.8125rem; color: var(--text-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-chart__track { height: 10px; background: var(--bg-elevated); border-radius: 99px; overflow: hidden; }
.demo-chart__track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green-hover), var(--green)); border-radius: 99px; transition: width 0.5s ease; }
.demo-chart__val { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; color: var(--text-primary); text-align: right; font-size: 0.9375rem; }
.demo-chart__empty { font-size: 0.8125rem; color: var(--text-dim); }

/* ── Pricing page ── */
.founding-banner {
  background: var(--green-dim);
  border: 1px solid rgba(var(--green-rgb),0.35);
  color: var(--green-bright);
  border-radius: 10px;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}
.bill-toggle {
  display: inline-flex;
  gap: 0.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 0.25rem;
}
.bill-opt {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 1.125rem;
  border-radius: 99px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: background 0.2s, color 0.2s;
}
.bill-opt.is-active { background: var(--green); color: var(--text-on-accent); }
.bill-opt span { font-size: 0.6875rem; color: var(--green); font-weight: 700; }
.bill-opt.is-active span { color: var(--text-on-accent); }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
.pricing-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
}
.pricing-card--featured {
  border-color: rgba(var(--green-rgb),0.55);
  box-shadow: 0 0 0 1px rgba(var(--green-rgb),0.25), var(--shadow-md);
  position: relative;
}
.pricing-badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: var(--text-on-accent);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  white-space: nowrap;
}
.pricing-card__name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.375rem; }
.pricing-card__tag { color: var(--text-muted); font-size: 0.8125rem; line-height: 1.5; margin: 0.25rem 0 1.25rem; min-height: 2.4em; }
.price { display: flex; align-items: baseline; gap: 0.125rem; }
.price__cur { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.price__amt { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 3rem; line-height: 1; color: var(--text-primary); }
.price__per { color: var(--text-muted); font-size: 0.9375rem; font-weight: 500; }
.price__note { color: var(--text-dim); font-size: 0.75rem; margin-top: 0.375rem; min-height: 1.1em; }
.pricing-card .btn-primary, .pricing-card .btn-ghost { width: 100%; justify-content: center; margin: 1.5rem 0; }
.pricing-features { display: flex; flex-direction: column; gap: 0.625rem; margin-top: auto; }
.pricing-feat-head { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); font-weight: 700; margin-bottom: 0.25rem; }
.pricing-feature { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.8125rem; color: var(--text-sec); line-height: 1.5; }
.pricing-feature i { color: var(--green); width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }

/* ── FAQ accordion (native <details>) ── */
.faq-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.125rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
  transition: color 0.2s;
}
.faq-item summary:hover { color: var(--green); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--green);
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item__a {
  padding: 0 1.25rem 1.25rem;
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 0.9375rem;
}

/* ── Docs page ── */
.docs-shell { max-width: 1180px; margin: 0 auto; padding: 6rem 1.5rem 4rem; display: grid; grid-template-columns: 240px 1fr; gap: 3rem; }
.docs-side { position: sticky; top: 5rem; align-self: start; height: max-content; }
.docs-side__group { margin-bottom: 1.5rem; }
.docs-side__group h5 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
  color: var(--text-dim);
  margin-bottom: 0.625rem;
}
.docs-side a {
  display: block;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.3125rem 0;
  transition: color 0.2s;
}
.docs-side a:hover { color: var(--text-primary); }
.docs-main { min-width: 0; }
.docs-main h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 0.98;
  margin-bottom: 0.75rem;
}
.docs-main h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--text-primary);
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-dim);
}
.docs-main h3 { font-weight: 700; font-size: 1.0625rem; color: var(--text-primary); margin: 1.5rem 0 0.5rem; }
.docs-main p, .docs-main li { color: var(--text-muted); line-height: 1.75; font-size: 0.9375rem; }
.docs-main p { margin-bottom: 0.875rem; }
.docs-main ul, .docs-main ol { margin: 0 0 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
.docs-main ul { list-style: disc; }
.docs-main ol { list-style: decimal; }
.docs-main strong { color: var(--text-sec); }
.docs-main code { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: 0.8125rem; color: var(--green); }
.docs-lead { font-size: 1.0625rem !important; color: var(--text-sec) !important; margin-bottom: 1.5rem; }
.docs-callout {
  background: rgba(var(--green-rgb),0.06);
  border: 1px solid rgba(var(--green-rgb),0.2);
  border-left: 3px solid var(--green);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  font-size: 0.9375rem;
  color: var(--text-sec);
}
.docs-callout a { color: var(--green); }
@media (max-width: 860px) {
  .docs-shell { grid-template-columns: 1fr; gap: 1.5rem; }
  .docs-side { position: static; display: none; }
}

/* ── Legal pages (privacy, terms) ── */
.legal-shell { max-width: 820px; margin: 0 auto; padding: 7rem 1.5rem 4rem; }
.legal-meta { color: var(--text-dim); font-size: 0.8125rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-dim); }
.legal-toc { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; margin-bottom: 2.5rem; }
.legal-toc h2 { font-size: 0.6875rem !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim) !important; margin: 0 0 0.75rem !important; padding: 0 !important; border: none !important; font-family: 'Inter', sans-serif !important; font-weight: 700 !important; }
.legal-toc ol { display: block; columns: 2; gap: 1.5rem; margin: 0 0 0 1.1rem; }
.legal-toc li { break-inside: avoid; margin-bottom: 0.375rem; }
.legal-toc a { color: var(--text-muted); text-decoration: none; font-size: 0.8125rem; }
.legal-toc a:hover { color: var(--green); }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }

/* ── Learn page ── */
.learn-hero { padding: 7rem 1.5rem 2.5rem; max-width: 1180px; margin: 0 auto; }
.learn-group { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem 2.5rem; }
.learn-group__head { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.375rem; }
.learn-group__head h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.5rem;
}
.learn-card {
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  text-decoration: none;
  transition: border-color 0.25s, transform 0.25s;
}
.learn-card:hover { border-color: rgba(var(--green-rgb),0.35); transform: translateY(-3px); }
.learn-card h3 { font-weight: 700; font-size: 1.0625rem; color: var(--text-primary); margin-bottom: 0.5rem; }
.learn-card p { color: var(--text-muted); line-height: 1.65; font-size: 0.875rem; margin-bottom: 0.875rem; }
.learn-card__link { font-size: 0.8125rem; font-weight: 600; color: var(--green); display: inline-flex; align-items: center; gap: 0.375rem; }

/* ── Lead-form status states ──
   Set by main.js via classList, never as an inline style: an element-level
   inline colour beats every custom property and would pin this line to the
   dark palette on a light page. */
#lead-status { transition: color 0.2s; }
.lead-status--pending { color: var(--text-muted); }
.lead-status--ok      { color: var(--green-text); }
.lead-status--error   { color: var(--error); }

/* ── Theme toggle (injected into the nav by main.js) ──
   Not an <a>, so the `nav .flex.items-center.gap-3 > a` CTA rule never
   claims it and it stays visually quieter than the two CTAs beside it. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--text-primary);
  border-color: var(--green);
  background: rgba(var(--green-rgb), 0.08);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ── Docs tables ── */
.docs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 1.75rem;
  font-size: 0.875rem;
}
.docs-table th,
.docs-table td {
  text-align: left;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--border-dim);
  vertical-align: top;
}
.docs-table th {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
  color: var(--text-primary);
  border-bottom-color: var(--border);
}
.docs-table td { color: var(--text-muted); line-height: 1.6; }
.docs-table tr:last-child td { border-bottom: none; }
.docs-table tbody tr:hover { background: rgba(var(--overlay-rgb), 0.03); }
/* Tables are the one docs element that cannot reflow below ~420px; scroll the
   table rather than let it force the whole page horizontal. */
.docs-table-wrap { overflow-x: auto; }

/* ── Docs sidebar: scroll-spy + overflow ──
   A sticky column does NOT scroll independently, so once the link list is
   taller than the viewport the overflow becomes unreachable. At 23 sections it
   is. max-height + overflow-y is the whole fix. */
.docs-side {
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  scrollbar-width: thin;
}
.docs-side a.active {
  color: var(--green-text);
  font-weight: 600;
}

/* ── Mobile docs TOC ──
   .docs-side is display:none below 860px, which left a 23-section page with no
   navigation at all on a phone. Native <details>, zero JS, same pattern as the
   FAQ on the homepage. Hidden on desktop where the sidebar does the job. */
.docs-toc-mobile { display: none; }
@media (max-width: 860px) {
  .docs-toc-mobile {
    display: block;
    background: var(--bg-surface);
    border: 1px solid var(--border-dim);
    border-radius: 10px;
    margin-bottom: 2rem;
  }
  .docs-toc-mobile > summary {
    cursor: pointer;
    padding: 0.875rem 1rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    list-style: none;
  }
  .docs-toc-mobile > summary::-webkit-details-marker { display: none; }
  .docs-toc-mobile > summary::after { content: ' ▾'; color: var(--green-text); }
  .docs-toc-mobile[open] > summary::after { content: ' ▴'; }
  .docs-toc-mobile__body {
    padding: 0 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .docs-toc-mobile__body a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.875rem;
  }
  .docs-toc-mobile__body h6 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    color: var(--text-dim);
    margin: 0.5rem 0 0;
  }
}

/* ── Guide pages ──
   Same shell as the docs page: sticky TOC + main column, collapsing to a
   single column with a <details> TOC on mobile (injected by main.js). */
.guide-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 6rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 3.5rem;
}
.guide-side {
  position: sticky;
  top: 5rem;
  align-self: start;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  scrollbar-width: thin;
}
.guide-side__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.guide-toc { display: flex; flex-direction: column; border-left: 1px solid var(--border-dim); }
.guide-toc a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.8125rem;
  line-height: 1.4;
  padding: 0.4rem 0 0.4rem 0.875rem;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.guide-toc a:hover { color: var(--text-primary); }
.guide-toc a.active {
  color: var(--green-text);
  border-left-color: var(--green);
  font-weight: 600;
}

.guide-head { margin-bottom: 2.5rem; }
.guide-back { color: var(--text-muted); font-size: 0.8125rem; text-decoration: none; }
.guide-back:hover { color: var(--text-primary); }
.guide-head h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.0;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  margin: 0.875rem 0 0.75rem;
}
.guide-sub { color: var(--text-sec); font-size: 1.0625rem; line-height: 1.6; max-width: 46rem; }
.guide-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.875rem;
}
.guide-note {
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border-left: 2px solid var(--green);
  background: rgba(var(--green-rgb), 0.06);
  color: var(--text-sec);
  font-size: 0.875rem;
  line-height: 1.6;
  border-radius: 0 6px 6px 0;
}

.guide-body h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.625rem;
  letter-spacing: 0.01em;
  margin: 2.75rem 0 0.875rem;
  color: var(--text-primary);
  scroll-margin-top: 5.5rem;
}
.guide-body p, .guide-body li, .guide-body dd {
  color: var(--text-muted);
  line-height: 1.75;
  font-size: 0.9375rem;
}
.guide-body p { margin-bottom: 1rem; max-width: 46rem; }
.guide-body ul, .guide-body ol { margin: 0 0 1.25rem 1.25rem; max-width: 46rem; }
.guide-body ul { list-style: disc; }
.guide-body ol { list-style: decimal; }
.guide-body li { margin-bottom: 0.5rem; padding-left: 0.25rem; }
.guide-body strong { color: var(--text-primary); font-weight: 600; }
/* Must exclude the button components: `.guide-body a` is specificity 0,1,1 and
   `.btn-primary` is 0,1,0, so without :not() the descendant rule wins and the
   CTA renders green-on-green (measured 1.00:1 — literally invisible). Body
   prose links only. */
.guide-body a:not(.btn-primary):not(.btn-ghost):not(.learn-card) {
  color: var(--green-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.guide-dl { max-width: 46rem; margin-bottom: 1.25rem; }
.guide-dl dt {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem;
  color: var(--text-primary);
  margin-top: 1.125rem;
}
.guide-dl dd { margin: 0.25rem 0 0; }

.guide-faq {
  border-bottom: 1px solid var(--border-dim);
  max-width: 46rem;
}
.guide-faq > summary {
  cursor: pointer;
  padding: 0.875rem 0;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
  list-style: none;
}
.guide-faq > summary::-webkit-details-marker { display: none; }
.guide-faq > summary::after { content: ' +'; color: var(--green-text); font-weight: 700; }
.guide-faq[open] > summary::after { content: ' −'; }
.guide-faq p { padding-bottom: 0.875rem; margin-bottom: 0; }

.guide-cta {
  margin-top: 3rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  padding: 2rem;
}
.guide-cta h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.guide-cta__row { display: flex; gap: 0.875rem; flex-wrap: wrap; margin-top: 1.25rem; }
.guide-related { margin-top: 3rem; }

@media (max-width: 860px) {
  .guide-shell { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 5rem; }
  .guide-side { display: none; }
}

/* ═══════════════════ Beta feedback page (feedback.html) ═══════════════════
   Mobile is the primary target here: testers open this on a phone at the
   venue. Every control is a real radio or textarea styled as a chip - the
   scoreboard numerals are the page's one signature, and using inputs rather
   than divs keeps keyboard and screen-reader support without rebuilding it.

   --text-dim and --text-dead are deliberately absent from this block. Both
   measure below 4.5:1 on --bg-surface in the dark theme; --text-muted is the
   smallest safe grey and carries every label here. */

.fb-page { padding: 7.5rem 0 5rem; background: var(--bg-deep); }
.fb-wrap { max-width: 620px; margin: 0 auto; padding: 0 1.25rem; }

.fb-head { margin-bottom: 2.5rem; }
.fb-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.01em;
  font-size: clamp(2.75rem, 11vw, 4.25rem);
  margin-bottom: 1rem;
}
.fb-lede { color: var(--text-muted); font-size: 1rem; line-height: 1.7; }

/* -- Question card -- */
.fb-q {
  border: 1px solid var(--border-dim);
  background: var(--bg-surface);
  border-radius: 10px;
  padding: 1.125rem 1.125rem 1.25rem;
  margin: 0 0 0.875rem;
}
.fb-q__label {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 0.875rem;
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}
.fb-q--role { background: transparent; border: none; padding: 0; margin-bottom: 1.25rem; }
/* The nav is fixed at 4rem. Without this, the scroll after picking a role parks
   the first question underneath it and the tester answers question two first. */
.fb-branch, .fb-q { scroll-margin-top: 5.5rem; }
.fb-q--overall { border-color: rgba(var(--green-rgb), 0.35); }

/* -- Role gate -- */
.fb-role { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.fb-role__opt { position: relative; display: block; cursor: pointer; }
.fb-role__opt input {
  position: absolute; inset: 0;
  opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer;
}
.fb-role__body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  height: 100%;
  padding: 1.125rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
  transition: border-color 0.2s, background 0.2s;
}
.fb-role__body i { width: 20px; height: 20px; color: var(--text-muted); }
.fb-role__body strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.25rem;
  line-height: 1.05;
  color: var(--text-primary);
}
.fb-role__body em { font-style: normal; font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }
.fb-role__opt:hover .fb-role__body { border-color: rgba(var(--green-rgb), 0.5); }
.fb-role__opt input:checked + .fb-role__body {
  border-color: var(--green);
  background: var(--green-dim);
}
.fb-role__opt input:checked + .fb-role__body i { color: var(--green-bright); }
.fb-role__opt input:focus-visible + .fb-role__body { outline: 2px solid var(--green); outline-offset: 2px; }

/* -- Rating scale: scoreboard chips -- */
.fb-scale { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fb-chip { position: relative; flex: 1 1 2.75rem; }
.fb-chip input {
  position: absolute; inset: 0;
  opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer;
}
.fb-chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 48px keeps every target above the 44px minimum for a thumb. */
  min-height: 48px;
  padding: 0 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.fb-chip:hover span { border-color: rgba(var(--green-rgb), 0.5); }
.fb-chip input:checked + span {
  background: var(--green);
  border-color: var(--green);
  color: var(--text-on-accent);   /* on the accent fill - same rule as .btn-primary */
}
.fb-chip input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }

/* Word chips ("Too easy", "Not seen") need body type, not scoreboard numerals. */
.fb-scale--words .fb-chip { flex: 1 1 5.5rem; }
.fb-scale--words .fb-chip span,
.fb-chip--na span {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* The opt-out takes its own row on a phone rather than squeezing the 1-5 run
   into six columns, where the numerals stop being tappable. */
.fb-chip--na { flex: 1 1 100%; }

.fb-anchor {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.625rem 0 0;
  font-size: 0.6875rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fb-q textarea.form-input { resize: vertical; line-height: 1.6; }


/* Revealed name/email under the early-access question. Sits inside the same
   card as its yes/no chips, so it reads as part of that question rather than a
   new one. feedback.js pairs `hidden` with `disabled` on it. */
.fb-reveal {
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border-dim);
}
.fb-reveal .fb-about__note { margin-bottom: 0.625rem; }

/* -- Optional identity -- */
.fb-about {
  border: 1px solid var(--border-dim);
  background: var(--bg-surface);
  border-radius: 10px;
  margin-bottom: 1.25rem;
}
.fb-about summary {
  cursor: pointer;
  padding: 1rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  list-style: none;
}
.fb-about summary::-webkit-details-marker { display: none; }
.fb-about summary::after {
  content: '+';
  float: right;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-muted);
}
.fb-about[open] summary::after { content: '-'; }
.fb-about summary span {
  margin-left: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.fb-about summary:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.fb-about__body { padding: 0 1.125rem 1.125rem; }
.fb-about__note { font-size: 0.75rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 0.875rem; }

/* -- Submit -- */
.fb-submit { width: 100%; justify-content: center; min-height: 52px; }
.fb-submit:disabled { opacity: 0.6; cursor: default; }
.fb-status {
  margin-top: 0.875rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-muted);
  transition: color 0.2s;
}
.fb-status a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fb-status--pending { color: var(--text-muted); }
.fb-status--ok      { color: var(--green-text); }
.fb-status--error   { color: var(--error); }

/* -- Success -- */
.fb-done {
  border: 1px solid rgba(var(--green-rgb), 0.35);
  background: var(--bg-surface);
  border-radius: 12px;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.fb-done:focus { outline: none; }
.fb-done i {
  width: 26px; height: 26px;
  color: var(--green-bright);
  margin-bottom: 0.75rem;
}
.fb-done h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 2.25rem;
  line-height: 1;
  margin-bottom: 0.625rem;
}
.fb-done p { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.7; max-width: 380px; margin: 0 auto; }
.fb-done__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.75rem; }
.fb-done__actions .btn-ghost { cursor: pointer; background: transparent; font-family: inherit; }

/* -- Feedback pill in the floating stack (injected by main.js) -- */
.fab--feedback {
  width: auto;
  padding: 0 0.875rem;
  gap: 0.5rem;
  background: var(--green);
  border-color: var(--green);
  color: var(--text-on-accent);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.fab--feedback:hover { background: var(--green-hover); border-color: var(--green-hover); color: var(--text-on-accent); }

@media (min-width: 480px) {
  .fb-chip--na { flex: 1 1 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fb-chip span,
  .fb-role__body,
  .fb-status { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STREaMLiNE maker's credit  (T004)
   ───────────────────────────────────────────────────────────────────────────
   STREaMLiNE designed and built RallyIQ. It appears here as a SECOND BRAND,
   not as part of the product's visual language, and the separation is enforced
   by three rules that must not be relaxed:

   1. Cyan is ink, hairline and ghost-border only. RallyIQ green keeps every
      filled primary button on the site, so the maker's credit can never
      out-shout a product CTA. The only filled cyan surface anywhere is the
      hover state of .btn-sl.
   2. The wordmark is Inter, never Barlow Condensed. Rendering another
      company's wordmark in RallyIQ's athletic display face misrepresents it.
   3. .sl-word forces text-transform:none. Several RallyIQ headings are
      uppercase, and an uppercased wordmark destroys the lowercase a and i
      that ARE the signature.

   Colour values and their measured ratios live in tokens.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The wordmark ── */
.sl-word {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.sl-word > span { color: var(--sl-cyan); }

/* ── Ghost CTA, cyan. Deliberately one tier below .btn-primary. ── */
.btn-sl {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--sl-cyan);
  color: var(--sl-cyan);
  background: transparent;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.875rem 1.75rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
  cursor: pointer;
}
.btn-sl:hover {
  background: var(--sl-cyan);
  border-color: var(--sl-cyan);
  color: var(--sl-on-cyan);
}
.btn-sl:focus-visible { outline: 2px solid var(--sl-cyan); outline-offset: 2px; }

/* Quiet tier: a text link with a rule, for the second action in a pair. */
.link-sl {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sl-cyan);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 1px solid var(--sl-cyan-dim);
  padding: 0.375rem 0;
  transition: border-color 0.2s;
}
.link-sl:hover { border-bottom-color: var(--sl-cyan); }
.link-sl:focus-visible { outline: 2px solid var(--sl-cyan); outline-offset: 3px; }

/* ── Nav byline. Stacked under the RallyIQ lockup rather than placed beside
      it: the nav already carries five links, two CTAs and a hamburger, and
      there is no horizontal room left. The byline is a SIBLING anchor, never
      nested inside the RallyIQ anchor, which would be invalid HTML. ── */
.nav-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  /* NOT min-width:0. The nav bar is justify-between with three flex items and
     no shrink control; with min-width:0 the brand is the item that gives, and
     it was measured collapsing to 0px wide between 768 and 800px. The logo is
     the one thing in a nav that must never be the thing that gives. */
  flex-shrink: 0;
}
.nav-byline {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  line-height: 1;
  text-decoration: none;
  /* The RallyIQ lockup above measures 46.8px inside a 64px bar, so there are
     only ~17px to spend here. 2px of padding buys 4px of hit area (11px of
     text becomes a 15px target) and still fits: 46.8 + 15 = 61.8 <= 64.
     SC 2.5.8's spacing exception does NOT rescue this at any padding we can
     afford, because a 24px circle centred on a control stacked directly under
     the logo will always intersect it. It is met instead by the Equivalent
     exception: the footer plate on every page carries a 258x50 control to the
     same destination. A taller nav bar is the only real fix and is logged as a
     follow-up rather than smuggled into a branding change. */
  padding: 2px 0;
}
.nav-byline__by {
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}
.nav-byline .sl-word { font-size: 0.6875rem; color: var(--text-sec); }
.nav-byline:hover .sl-word { color: var(--text-primary); }
.nav-byline:focus-visible { outline: 2px solid var(--sl-cyan); outline-offset: 3px; }

/* ── Maker's plate. Used in the footer and again on the feedback page. The
      cyan hairline along the top edge is the one place the second brand is
      allowed to mark the page furniture. ── */
.sl-plate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-top: 2px solid var(--sl-cyan);
  border-radius: 12px;
}
.sl-plate__eyebrow {
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.sl-plate__mark {
  display: block;
  font-size: 1.375rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.sl-plate__line {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 34rem;
}
.sl-plate__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* ── Social row. Real STREaMLiNE profiles, inline SVG. These replaced three
      dead href="#" placeholders that also rendered as empty boxes, because
      Lucide removed its brand icons upstream (see MEMORY, 2026-07-26). ── */
.sl-social { display: flex; gap: 0.5rem; }
.sl-social a {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  transition: color 0.2s, border-color 0.2s;
}
.sl-social a:hover { color: var(--sl-cyan); border-color: var(--sl-cyan); }
.sl-social a:focus-visible { outline: 2px solid var(--sl-cyan); outline-offset: 2px; }
.sl-social svg { width: 17px; height: 17px; }

/* ── The home-page maker section ── */
.sl-section {
  position: relative;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-dim);
  padding: 6rem 0;
  overflow: hidden;
}
/* A single faint cyan wash from the top-left. This is the only ambient cyan
   on the site and it is what tells a scrolling reader the ground has changed
   brand without changing the surface ladder. */
.sl-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60rem 28rem at 12% 0%, var(--sl-cyan-wash) 0%, transparent 70%);
}
.sl-section > * { position: relative; }
.sl-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.sl-pill {
  display: inline-block;
  padding: 0.3125rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--sl-cyan);
  /* Opaque, NOT a cyan tint. A translucent pill sitting on the section's cyan
     wash composites twice: measured 4.31:1 dark and 3.87:1 light, both below
     the 4.5 floor, and both would have read as a pass if scored against the
     flat surface underneath. On the recessed ground it is 7.24 / 4.99. */
  background: var(--bg-deep);
  color: var(--sl-cyan);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1.25rem;
}
.sl-h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  margin-bottom: 1.5rem;
}
.sl-lede { color: var(--text-muted); line-height: 1.7; margin-bottom: 1.25rem; }
.sl-lede--last { margin-bottom: 2rem; }
.sl-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }

/* Identity block: the wordmark at display size with its tagline under it.
   This, not the h2, is where STREaMLiNE is actually named at scale, so the
   heading stays in RallyIQ's own voice and about the reader's problem. */
.sl-ident {
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--border-dim);
  border-left: 2px solid var(--sl-cyan);
  border-radius: 12px;
  background: var(--bg-deep);
  margin-bottom: 1.5rem;
}
.sl-ident .sl-word { font-size: clamp(1.75rem, 3.4vw, 2.375rem); color: var(--text-primary); display: block; }
.sl-ident__tag {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
}
.sl-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.sl-tile {
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  padding: 1.25rem;
  transition: border-color 0.2s;
}
.sl-tile:hover { border-color: var(--sl-cyan); }
/* `.sl-tile svg` as well as `.sl-tile i`: Lucide REPLACES the <i> with an <svg>,
   so an <i>-only selector never matches at runtime. The four industry icons
   were rendering white at 24px instead of cyan at 20px, and nothing failed. */
.sl-tile i, .sl-tile svg { color: var(--sl-cyan); width: 20px; height: 20px; }
.sl-tile h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.125rem;
  margin: 0.625rem 0 0.25rem;
  color: var(--text-primary);
}
.sl-tile p { font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); }

/* ── Feedback page: plate sits below the form, so it is present in BOTH the
      form state and the success state, and cannot compete with the submit
      button for attention. ── */
.sl-plate--fb {
  margin: 3.5rem 0 0;
  padding: 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
/* Text tier only. The site-wide footer plate a few hundred pixels below this
   one already carries a ghost button to the same destination; two identical
   buttons on one short page is a duplicate-intent CTA. */
.sl-plate--fb .sl-plate__actions { gap: 1.5rem; }
.fb-done p.fb-done__maker {
  margin: 1.75rem auto 0;
  max-width: 30rem;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.fb-done p.fb-done__maker a { color: var(--sl-cyan); text-decoration: underline; text-underline-offset: 2px; }
.fb-done p.fb-done__maker a:focus-visible { outline: 2px solid var(--sl-cyan); outline-offset: 2px; }

/* ── The footer credit line's wordmark ──
   Deliberately NOT `color: inherit`. The surrounding copyright sentence is
   --text-dead, which measures 1.88:1 on the dark ground: the credit link was
   effectively invisible, which defeats the whole point of a maker's credit.
   --text-muted is 6.56:1 dark / 7.11:1 light. The rest of the copyright line
   is left alone; its contrast is a separate, pre-existing issue. */
.sl-credit { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.sl-credit:hover { color: var(--sl-cyan); }
.sl-credit:focus-visible { outline: 2px solid var(--sl-cyan); outline-offset: 2px; }
.sl-credit .sl-word { font-size: inherit; font-weight: 600; }

@media (max-width: 900px) {
  .sl-section__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .sl-section { padding: 4.5rem 0; }
}
@media (max-width: 560px) {
  .sl-tiles { grid-template-columns: 1fr; }
  .sl-plate { padding: 1.25rem; gap: 1.25rem; }
  .sl-plate__actions { width: 100%; }
  .btn-sl { width: 100%; justify-content: center; }
}

/* House rule: reveals must be gated. Added with the maker section, which uses
   .reveal; the gate was previously missing for every section on the site.
   `scroll-behavior` belongs here too: the new footer "Who builds RallyIQ" link
   triggers a full-page smooth scroll, which is a vestibular trigger. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .sl-tile, .btn-sl, .link-sl, .sl-social a, .nav-byline .sl-word { transition: none; }
}