/* ==========================================================================
   Club 1000 Plus — marketing design system
   Shared by every page in the public marketing site (index, leaderboards,
   activity-feed, contact-us, legal pages).

   Design concept: the meet attempt board. Competition powerlifting scores
   lifters on a public ruled board — one row per lifter, each attempt lit
   white for a good lift or red for a no-lift, with a running total in a
   mechanical numeric face. That is exactly what this product does, and a
   scoreboard belongs to every lifter on the platform regardless of who they
   are, which is why the page is built from board furniture rather than from
   the pink/black split most fitness marketing falls into.

   Palette is anchored to the logo red (#FA0005, the CLUB1000+ plus mark) with
   the coral used across the ad creative (#FD5C5C) as the secondary accent.
   Calibrated plate colours (blue 20kg, yellow 15kg, green 10kg) encode the
   three boards; they are never decoration.
   ========================================================================== */

:root {
  /* --- surfaces ---------------------------------------------------------- */
  --iron: #0B0C0E;
  --platform: #131519;
  --platform-2: #1A1D22;
  --rule: #24272D;
  --rule-soft: #191B20;

  /* --- brand ------------------------------------------------------------- */
  --brand: #FA0005;          /* logo red — CTAs, the plus mark, no-lift light */
  --brand-hot: #FF2A20;      /* hover */
  --brand-deep: #A30000;     /* logo gradient terminus */
  --coral: #FD5C5C;          /* ad-creative accent — headline emphasis */
  --brand-wash: rgba(250, 0, 5, 0.09);
  --brand-edge: rgba(250, 0, 5, 0.34);

  /* --- calibrated plate colours (board encoding) ------------------------- */
  --plate-blue: #2F7BF0;     /* 20 kg — exercise boards */
  --plate-yellow: #F5C518;   /* 15 kg — 1000+ board */
  --plate-green: #19B36B;    /* 10 kg — biggest loser board */

  /* --- type -------------------------------------------------------------- */
  --chalk: #F4F3F0;
  --chalk-2: #9BA0A8;
  --chalk-3: #6B7079;

  --display: 'Archivo', 'Arial Narrow', sans-serif;
  --body: 'Chivo', system-ui, sans-serif;
  --numeric: 'Martian Mono', ui-monospace, monospace;

  /* --- radii: encode hierarchy, don't apply one value to everything ------ */
  --r-control: 8px;
  --r-panel: 3px;
  --r-device-phone: 30px;

  --page: 1180px;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--iron);
  color: var(--chalk);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Faint plate-knurl texture so the page is not a flat black field. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 7px);
}

body > * { position: relative; z-index: 1; }

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

a { color: var(--coral); text-decoration: none; }
a:hover { color: var(--chalk); }

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}

.shell {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: 22px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: 12px 18px;
  font-weight: 700;
  z-index: 99;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ==========================================================================
   Type scale
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.12rem, 1.6vw, 1.3rem); font-stretch: 112%; }
h4 { font-size: 1rem; font-stretch: 112%; }

p { margin: 0 0 1.05em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.06rem, 1.75vw, 1.28rem);
  color: var(--chalk-2);
  line-height: 1.58;
  max-width: 60ch;
}

.muted { color: var(--chalk-2); }
.fine { font-size: 0.86rem; color: var(--chalk-3); line-height: 1.55; }

/* Numeric voice — weights, totals, board figures. Numbers only. */
.num {
  font-family: var(--numeric);
  font-weight: 700;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: var(--r-control);
  border: 1.5px solid transparent;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 0.97rem;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(250, 0, 5, 0.4), 0 10px 30px -14px rgba(250, 0, 5, 0.9);
}
.btn-primary:hover { background: var(--brand-hot); color: #fff; }

.btn-line {
  border-color: var(--rule);
  color: var(--chalk);
  background: transparent;
}
.btn-line:hover { border-color: var(--chalk-3); color: var(--chalk); background: var(--platform); }

/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: rgba(11, 12, 14, 0.9);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 15px;
}

.masthead-mark img { width: 176px; }

.masthead-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.masthead-nav a {
  color: var(--chalk-2);
  font-size: 0.92rem;
  font-weight: 500;
}
.masthead-nav a:hover { color: var(--chalk); }
.masthead-nav .btn { font-size: 0.88rem; padding: 10px 18px; }

@media (max-width: 860px) {
  .masthead-nav .nav-link { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding-block: clamp(48px, 8vw, 96px) clamp(40px, 6vw, 76px);
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(180deg, rgba(11,12,14,0.72) 0%, rgba(11,12,14,0.8) 60%, var(--iron) 100%), url('/marketing/img/hero-atmosphere.jpg');
  background-size: cover;
  background-position: center 30%;
}

/* Single light source, upper right — the platform spotlight in the ad art. */
.hero::before {
  content: '';
  position: absolute;
  top: -34%;
  right: -14%;
  width: 74vw;
  height: 88vh;
  background: radial-gradient(circle, rgba(250, 0, 5, 0.19) 0%, rgba(250, 0, 5, 0.05) 42%, transparent 68%);
  pointer-events: none;
}

/* Cool counter-light from the lower left. Two light sources read as a lit
   platform rather than a single hot red wash, which is what made the old page
   feel like an energy-drink ad. */
.hero::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -18%;
  width: 62vw;
  height: 80vh;
  background: radial-gradient(circle, rgba(47, 123, 240, 0.13) 0%, rgba(47, 123, 240, 0.04) 44%, transparent 70%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(30px, 5vw, 66px);
  align-items: center;
}

.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--coral); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.hero-proof div { display: flex; align-items: baseline; gap: 9px; }
.hero-proof .num { font-size: 1.15rem; color: var(--chalk); }
.hero-proof span { font-size: 0.85rem; color: var(--chalk-3); }

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Attempt board — the hero's centrepiece
   ========================================================================== */

.board {
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: linear-gradient(180deg, var(--platform) 0%, #0E1013 100%);
  overflow: hidden;
}

.board-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.018);
}

/* A real board labels its columns in caps — that is where this belongs, and
   nowhere else on the page. */
.board-label {
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--chalk-3);
}

.board-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--coral);
}

.board-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(250, 0, 5, 0.2);
}

.board-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 15px 18px;
  border-bottom: 1px solid var(--rule-soft);
}
.board-row:last-child { border-bottom: 0; }

.board-rank {
  font-family: var(--numeric);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--chalk-3);
}

.board-lifter { min-width: 0; }

.board-name {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 0.98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-meta {
  font-size: 0.76rem;
  color: var(--chalk-3);
  font-variant-numeric: tabular-nums;
}

/* Attempt lights: white = good lift, red = no lift. Standard meet signalling. */
.board-lights { display: flex; gap: 5px; }

.light {
  width: 13px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid var(--rule);
  background: var(--platform-2);
}

.light.good { background: var(--chalk); border-color: var(--chalk); }
.light.no { background: var(--brand); border-color: var(--brand); }

.board-total {
  font-family: var(--numeric);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.06em;
  text-align: right;
  min-width: 66px;
}

.board-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.012);
}

/* The one orchestrated motion moment on the page: attempts light in sequence
   once on load, then stop. Everything else responds only to input. */
.board-anim .light {
  opacity: 0;
  animation: light-up 260ms ease-out forwards;
}

@keyframes light-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .board-anim .light { opacity: 1; animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Plate chips — board identity, used as encoding
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-2);
}

.chip::before {
  content: '';
  width: 9px;
  height: 22px;
  border-radius: 1.5px;
  background: var(--chip-colour, var(--brand));
}

.chip-blue   { --chip-colour: var(--plate-blue); }
.chip-yellow { --chip-colour: var(--plate-yellow); }
.chip-green  { --chip-colour: var(--plate-green); }

/* ==========================================================================
   Store badges / platform strip
   ========================================================================== */

.platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.store-badge { display: inline-block; transition: opacity 140ms ease; }
.store-badge img { height: 54px; width: auto; }
.store-badge:hover { opacity: 0.84; }

/* Until the listing is live the badge is not a link and must not look like one. */
.store-badge[data-state='pending'] {
  cursor: default;
  opacity: 0.5;
  filter: grayscale(0.65);
}

.store-note {
  font-size: 0.8rem;
  color: var(--chalk-3);
  line-height: 1.45;
  max-width: 24ch;
}

.platform-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  font-size: 0.83rem;
  color: var(--chalk-2);
}

.platform-tag svg { width: 16px; height: 16px; flex: none; }

/* ==========================================================================
   Sections
   ========================================================================== */

.band { padding-block: clamp(54px, 8vw, 100px); }
.band-ruled { border-top: 1px solid var(--rule); }
.band-raised { background: linear-gradient(180deg, #0E1013 0%, var(--iron) 100%); }

.band-head { max-width: 62ch; margin-bottom: clamp(30px, 4.5vw, 52px); }
.band-head h2 { margin-bottom: 16px; }

/* ==========================================================================
   Device frames — real screenshots in honest Android / iPhone hardware
   ========================================================================== */

.device {
  position: relative;
  flex: none;
  border-radius: var(--r-device-phone);
  background: linear-gradient(150deg, #32363D 0%, #15171B 42%, #2A2E34 100%);
  padding: 9px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 34px 64px -26px rgba(0, 0, 0, 0.95),
    0 0 70px -26px rgba(250, 0, 5, 0.5);
}

.device-screen {
  position: relative;
  border-radius: calc(var(--r-device-phone) - 8px);
  overflow: hidden;
  background: #000;
  display: block;
}

.device-screen img { width: 100%; height: auto; display: block; }

/* Android: uniform bezel, centred punch-hole, tighter corner radius. */
.device-android { --r-device-phone: 26px; }

.device-android .device-screen::after {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #000;
}

/* iPhone: Dynamic Island pill, larger radius, home indicator. */
.device-ios { --r-device-phone: 38px; }

.device-ios .device-screen::after {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 33%;
  height: 21px;
  border-radius: 11px;
  background: #000;
}

.device-badge {
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--platform);
  font-family: var(--display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--chalk-2);
  white-space: nowrap;
}

.device-badge svg { width: 12px; height: 12px; }

/* Paired hero devices, overlapped and tilted like the ad creative. */
.device-pair {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  perspective: 1500px;
}

.device-pair .device-ios {
  width: 46%;
  transform: rotate(-4deg) translateY(14px);
  z-index: 1;
}

.device-pair .device-android {
  width: 52%;
  margin-left: -7%;
  transform: rotate(3deg);
  z-index: 2;
}

/* Horizontal screenshot rail */
.device-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(215px, 1fr);
  gap: 30px;
  overflow-x: auto;
  padding: 8px 2px 34px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

.device-rail > * { scroll-snap-align: center; }

.device-rail::-webkit-scrollbar { height: 7px; }
.device-rail::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 99px; }

.rail-item { display: flex; flex-direction: column; gap: 20px; }
.rail-item .device { width: 100%; }
.rail-item h3 { font-size: 1.02rem; }
.rail-item p { font-size: 0.88rem; color: var(--chalk-2); margin: 6px 0 0; }

/* ==========================================================================
   Ad creative gallery
   ========================================================================== */

.ad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}

.ad-card {
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: #000;
  transition: border-color 160ms ease;
}

.ad-card:hover { border-color: var(--brand-edge); }
.ad-card img { width: 100%; height: auto; }

.ad-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.ad-feature-flip { direction: rtl; }
.ad-feature-flip > * { direction: ltr; }

.ad-feature img {
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  width: 100%;
}

@media (max-width: 880px) {
  .ad-feature,
  .ad-feature-flip { grid-template-columns: minmax(0, 1fr); direction: ltr; }
}

/* ==========================================================================
   Feature rows — ruled, not carded
   ========================================================================== */

.rows { border-top: 1px solid var(--rule); }

.row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
  padding-block: 30px;
  border-bottom: 1px solid var(--rule);
}

.row-index {
  font-family: var(--numeric);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--chalk-3);
  padding-top: 5px;
}

.row p { margin: 0; font-size: 0.95rem; color: var(--chalk-2); }

@media (max-width: 760px) {
  .row { grid-template-columns: 34px minmax(0, 1fr); }
  .row p { grid-column: 2; margin-top: 8px; }
}

/* ==========================================================================
   Panels (used for FAQ, resources, contact, legal bodies)
   ========================================================================== */

.panel {
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: var(--platform);
  padding: clamp(20px, 3vw, 30px);
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

details.qa {
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
}
details.qa:last-of-type { border-bottom: 0; }

details.qa summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1.03rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

details.qa summary::-webkit-details-marker { display: none; }

details.qa summary::after {
  content: '+';
  font-family: var(--numeric);
  color: var(--coral);
  flex: none;
  transition: transform 160ms ease;
}

details.qa[open] summary::after { transform: rotate(45deg); }
details.qa p { margin: 12px 0 0; color: var(--chalk-2); font-size: 0.95rem; }

/* ==========================================================================
   Closing call to action
   ========================================================================== */

.closer {
  border: 1px solid var(--brand-edge);
  border-radius: var(--r-panel);
  background:
    radial-gradient(120% 150% at 88% 0%, rgba(250, 0, 5, 0.2) 0%, transparent 58%),
    var(--platform);
  padding: clamp(30px, 5vw, 58px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

@media (max-width: 820px) {
  .closer { grid-template-columns: minmax(0, 1fr); }
}

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

.site-foot {
  border-top: 1px solid var(--rule);
  padding-block: 44px 56px;
  margin-top: clamp(48px, 7vw, 90px);
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: 34px;
  margin-bottom: 34px;
}

.foot-grid img { width: 156px; margin-bottom: 16px; }
.foot-col h4 { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chalk-3); margin-bottom: 14px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-col a { color: var(--chalk-2); font-size: 0.9rem; }
.foot-col a:hover { color: var(--chalk); }

.foot-base {
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
}

/* Utility */
.stack-sm > * + * { margin-top: 12px; }
.stack > * + * { margin-top: 22px; }
.stack-lg > * + * { margin-top: 38px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   PART TWO — shared page furniture
   Added when the secondary pages were brought onto this stylesheet. Everything
   below is used by index.html and every subpage alike.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Masthead lockup: 1K+ mark to the left of the wordmark
   -------------------------------------------------------------------------- */

.masthead-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.masthead-mark .mark {
  width: 42px;
  height: auto;
  flex: none;
}

.masthead-mark .wordmark { width: 158px; height: auto; }

@media (max-width: 480px) {
  .masthead-mark .mark { width: 34px; }
  .masthead-mark .wordmark { width: 124px; }
}

/* --------------------------------------------------------------------------
   Subpage hero
   Smaller than the homepage hero, same light treatment, always carries a
   breadcrumb so a visitor landing from search knows where they are.
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(38px, 6vw, 72px) clamp(30px, 4vw, 52px);
  border-bottom: 1px solid var(--rule);
}

.page-hero::before {
  content: '';
  position: absolute;
  top: -70%;
  right: -10%;
  width: 60vw;
  height: 150%;
  background: radial-gradient(circle, rgba(250, 0, 5, 0.16) 0%, transparent 66%);
  pointer-events: none;
}

.page-hero::after {
  content: '';
  position: absolute;
  bottom: -80%;
  left: -14%;
  width: 52vw;
  height: 150%;
  background: radial-gradient(circle, rgba(47, 123, 240, 0.1) 0%, transparent 68%);
  pointer-events: none;
}

.page-hero > * { position: relative; z-index: 1; }

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
}

@media (max-width: 900px) {
  .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
}

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  font-size: 0.82rem;
  color: var(--chalk-3);
}

.crumb a { color: var(--chalk-2); }
.crumb a:hover { color: var(--chalk); }
.crumb span[aria-hidden] { color: var(--rule); }

/* --------------------------------------------------------------------------
   Chalk band — a light surface to break up the dark
   One or two per page at most. The point is air and contrast, not a theme
   switch, so it keeps the same type and accent system.
   -------------------------------------------------------------------------- */

.band-chalk {
  background: linear-gradient(180deg, #F4F2EE 0%, #E9E6E0 100%);
  color: #16181C;
  border-block: 1px solid var(--rule);
}

.band-chalk h2,
.band-chalk h3,
.band-chalk h4 { color: #0E1013; }
.band-chalk .lede { color: #4A4E56; }
.band-chalk p { color: #3A3E45; }
.band-chalk .muted { color: #5A5E66; }
.band-chalk .fine { color: #6A6E76; }
.band-chalk a { color: #C40004; }
.band-chalk a:hover { color: #0E1013; }
.band-chalk .rows,
.band-chalk .row { border-color: rgba(20, 22, 26, 0.14); }
.band-chalk .row-index { color: #8A8E96; }
.band-chalk .chip { color: #4A4E56; }
.band-chalk .btn-line { border-color: rgba(20, 22, 26, 0.28); color: #16181C; }
.band-chalk .btn-line:hover { background: rgba(20, 22, 26, 0.06); border-color: #16181C; }

.band-chalk .panel {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(20, 22, 26, 0.14);
}

/* --------------------------------------------------------------------------
   Ratio cards — pound-for-pound framing
   Strength relative to bodyweight is how the sport compares lifters who are
   not the same size. It is the honest answer to "is this board for me", and
   it carries far more weight here than any styling choice.
   -------------------------------------------------------------------------- */

.ratio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: rgba(20, 22, 26, 0.14);
  border: 1px solid rgba(20, 22, 26, 0.14);
}

.ratio {
  background: #F4F2EE;
  padding: 22px 20px;
}

.ratio .num {
  display: block;
  font-size: 1.9rem;
  line-height: 1;
  margin-bottom: 10px;
  color: #0E1013;
}

.ratio h3 { font-size: 0.98rem; margin-bottom: 6px; }
.ratio p { font-size: 0.86rem; margin: 0; }

/* Dark-surface variant for the same component */
.band:not(.band-chalk) .ratio-grid { background: var(--rule); border-color: var(--rule); }
.band:not(.band-chalk) .ratio { background: var(--platform); }
.band:not(.band-chalk) .ratio .num { color: var(--chalk); }

/* --------------------------------------------------------------------------
   Figures — screenshots with a caption
   -------------------------------------------------------------------------- */

.figure { margin: 0; }

.figure .device { width: 100%; max-width: 268px; margin-inline: auto; }

.figure figcaption {
  margin-top: 26px;
  font-size: 0.85rem;
  color: var(--chalk-3);
  text-align: center;
  line-height: 1.5;
}

.band-chalk .figure figcaption { color: #6A6E76; }

.figure-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

/* --------------------------------------------------------------------------
   Split layout — prose beside a screenshot
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 62px);
  align-items: center;
}

.split-flip { direction: rtl; }
.split-flip > * { direction: ltr; }

@media (max-width: 880px) {
  .split, .split-flip { grid-template-columns: minmax(0, 1fr); direction: ltr; }
}

/* --------------------------------------------------------------------------
   Steps — ordered process (rank updates, review flow)
   Numbered markers are used here because these genuinely are sequences.
   -------------------------------------------------------------------------- */

.steps { counter-reset: step; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }

.step {
  counter-increment: step;
  background: var(--platform);
  padding: 20px 22px 20px 58px;
  position: relative;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 20px;
  top: 21px;
  font-family: var(--numeric);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--coral);
}

.step h3 { font-size: 0.98rem; margin-bottom: 5px; }
.step p { font-size: 0.9rem; color: var(--chalk-2); margin: 0; }

.band-chalk .steps { background: rgba(20, 22, 26, 0.14); border-color: rgba(20, 22, 26, 0.14); }
.band-chalk .step { background: #F4F2EE; }

/* --------------------------------------------------------------------------
   Notes / callouts
   -------------------------------------------------------------------------- */

.note {
  border-left: 3px solid var(--coral);
  background: var(--platform);
  padding: 16px 20px;
  border-radius: 0 var(--r-panel) var(--r-panel) 0;
}

.note p { font-size: 0.92rem; margin: 0; color: var(--chalk-2); }
.note.note-good { border-left-color: var(--plate-green); }
.note.note-info { border-left-color: var(--plate-blue); }

.band-chalk .note { background: rgba(255, 255, 255, 0.72); }
.band-chalk .note p { color: #3A3E45; }

/* --------------------------------------------------------------------------
   Prose — legal and long-form reference pages
   -------------------------------------------------------------------------- */

.prose { max-width: 74ch; }

.prose h2 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin-top: 44px;
  margin-bottom: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.prose h2:first-of-type { margin-top: 26px; }
.prose h3 { margin-top: 28px; margin-bottom: 8px; }
.prose p { color: var(--chalk-2); font-size: 0.98rem; }
.prose ul, .prose ol { color: var(--chalk-2); font-size: 0.98rem; padding-left: 22px; }
.prose li { margin-bottom: 9px; }
.prose li::marker { color: var(--chalk-3); }
.prose strong { color: var(--chalk); }

.prose .card,
.prose .callout {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--coral);
  background: var(--platform);
  padding: 16px 20px;
  border-radius: 0 var(--r-panel) var(--r-panel) 0;
  margin: 22px 0;
  color: var(--chalk-2);
  font-size: 0.94rem;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 0.92rem;
}

.prose th, .prose td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  color: var(--chalk-2);
}

.prose th {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  color: var(--chalk);
}

/* Long-form reference pages get a sticky table of contents on wide screens. */
.doc-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
}

.doc-toc { position: sticky; top: 92px; }

.doc-toc h2 {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-3);
  margin-bottom: 14px;
  border: 0;
  padding: 0;
}

.doc-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.doc-toc a {
  display: block;
  padding: 8px 12px;
  border-left: 2px solid var(--rule);
  color: var(--chalk-2);
  font-size: 0.88rem;
  line-height: 1.4;
}

.doc-toc a:hover { border-left-color: var(--coral); color: var(--chalk); background: var(--platform); }

@media (max-width: 900px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-toc { position: static; }
  .doc-toc ul { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); display: grid; gap: 4px; }
}

/* --------------------------------------------------------------------------
   Forms — contact page
   -------------------------------------------------------------------------- */

.field { display: grid; gap: 7px; margin-bottom: 18px; }

.field > span {
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 700;
  font-stretch: 112%;
  color: var(--chalk-2);
}

.field input,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--iron);
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  color: var(--chalk);
  font-family: var(--body);
  font-size: 1rem;
}

.field input:focus,
.field textarea:focus { border-color: var(--coral); outline: none; }

.field textarea { min-height: 160px; resize: vertical; }

.form-status { margin-top: 14px; font-size: 0.92rem; }
.form-status.error { color: var(--coral); }
.form-status.success { color: var(--plate-green); }

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  font-size: 0.82rem;
  color: var(--chalk-2);
}

.band-chalk .tag { border-color: rgba(20, 22, 26, 0.2); color: #4A4E56; }

.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }

.link-list a {
  display: block;
  background: var(--platform);
  padding: 18px 22px;
  color: var(--chalk);
}

.link-list a:hover { background: var(--platform-2); }
.link-list span { display: block; font-size: 0.87rem; color: var(--chalk-2); margin-top: 4px; }
.link-list a:hover span { color: var(--chalk-2); }

/* Chapter eyebrows inside long-form rules documents. Caps is appropriate here
   because the chapters genuinely are a numbered sequence in a formal ruleset. */
.prose .board-label {
  margin: 0 0 6px;
  color: var(--coral);
}

.prose section + section { margin-top: 8px; }
.prose section h2 { margin-top: 0; }
.prose section + section h2 { margin-top: 0; }
.prose section:not(:first-child) { padding-top: 30px; border-top: 1px solid var(--rule); margin-top: 38px; }
.prose section:not(:first-child) h2 { border-top: 0; padding-top: 0; }

/* ==========================================================================
   PART THREE — navigation overhaul, desktop analytics, progress showcase
   Added when mobile navigation was fixed and the analytics section was
   finally wired in (previously built but never placed on the page).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Masthead: official wordmark asset, Boards dropdown, hamburger drawer
   -------------------------------------------------------------------------- */

.masthead-mark .wordmark { width: 152px; height: auto; }

.masthead-nav { display: flex; align-items: center; gap: 22px; }

/* "Boards" as a native <details> disclosure: keyboard accessible with no JS
   required, closes automatically when another one opens (JS enhancement
   below adds click-outside and Escape handling on top of that). */
.nav-drop { position: relative; }

.nav-drop > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--chalk-2);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 8px 2px;
}

.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary:hover { color: var(--chalk); }

.nav-drop > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
  opacity: 0.7;
}

.nav-drop[open] > summary::after { transform: rotate(-135deg) translateY(2px); }

.nav-drop-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: 264px;
  padding: 8px;
  background: var(--platform);
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.7);
  z-index: 50;
}

.nav-drop-panel a {
  display: block;
  padding: 11px 13px;
  border-radius: var(--r-control);
  color: var(--chalk);
}

.nav-drop-panel a:hover { background: var(--platform-2); color: var(--chalk); }
.nav-drop-panel a span { display: block; font-size: 0.78rem; color: var(--chalk-3); margin-top: 2px; }
.nav-drop-panel a:hover span { color: var(--chalk-2); }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  color: var(--chalk);
  cursor: pointer;
}

.nav-toggle svg { width: 19px; height: 19px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded='true'] .icon-open { display: none; }
.nav-toggle[aria-expanded='true'] .icon-close { display: block; }

/* Mobile drawer: a full nav duplicate, so nothing on the site is ever more
   than one tap away regardless of viewport width. */
.nav-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
}

.nav-drawer[data-open='true'] { display: block; }

.nav-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 6, 0.7);
}

.nav-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 84vw);
  background: var(--iron);
  border-left: 1px solid var(--rule);
  padding: 20px 20px 28px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.nav-drawer-panel a.nav-drawer-link {
  padding: 14px 4px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--chalk);
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 0.98rem;
}

.nav-drawer-panel a.nav-drawer-sublink {
  padding: 12px 4px 12px 18px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--chalk-2);
  font-size: 0.92rem;
}

.nav-drawer-panel .btn { margin-top: 18px; width: 100%; }
.nav-drawer-panel .store-badge { margin-top: 14px; align-self: flex-start; }

@media (max-width: 860px) {
  .masthead-nav .nav-drop,
  .masthead-nav .nav-link,
  .masthead-nav .btn { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   Browser frame — desktop screenshot previews
   Mirrors the honesty rule for phone frames: a real (if minimal) browser
   chrome, not a bare cropped screenshot floating on the page.
   -------------------------------------------------------------------------- */

.browser-frame {
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #1D2025 0%, #15171B 100%);
  border: 1px solid var(--rule);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.85);
}

.browser-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: #17191D;
  border-bottom: 1px solid var(--rule);
}

.browser-dots { display: flex; gap: 6px; flex: none; }
.browser-dots span { width: 9px; height: 9px; border-radius: 50%; background: #33363C; }

.browser-address {
  flex: 1;
  height: 22px;
  border-radius: 6px;
  background: #0E1013;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--body);
  font-size: 0.72rem;
  color: var(--chalk-3);
  overflow: hidden;
  white-space: nowrap;
}

.browser-frame .browser-screen { display: block; background: #0B0C0E; }
.browser-frame .browser-screen img { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   Analytics grid — the four desktop dashboard tiles
   -------------------------------------------------------------------------- */

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 30px);
}

@media (max-width: 760px) {
  .analytics-grid { grid-template-columns: minmax(0, 1fr); }
}

.analytics-tile h3 {
  margin-top: 16px;
  margin-bottom: 6px;
  font-size: 1.02rem;
}

.analytics-tile p {
  font-size: 0.88rem;
  color: var(--chalk-2);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Progress showcase — two fictional examples, matched treatment
   -------------------------------------------------------------------------- */

.progress-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 44px);
}

@media (max-width: 760px) {
  .progress-pair { grid-template-columns: minmax(0, 1fr); max-width: 320px; margin-inline: auto; }
}

.progress-card { text-align: center; }
.progress-card .device { width: 100%; max-width: 300px; margin-inline: auto; }
.progress-card h3 { margin-top: 22px; font-size: 1rem; }
.progress-card p { font-size: 0.86rem; color: var(--chalk-3); margin-top: 4px; }

.fine-disclosure {
  max-width: 68ch;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

/* ==========================================================================
   PART FOUR — feature browser (replaces the old scrolling device rail)
   A CSS-only tab set: radio inputs drive which panel shows, so nothing here
   needs JavaScript and nothing ever scrolls or clips off-screen.
   ========================================================================== */

.feature-browser {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
}

.feature-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.feature-tab-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.feature-tab-label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.feature-tab-label:hover { background: var(--platform); }

.feature-tab-num {
  font-family: var(--numeric);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--chalk-3);
  padding-top: 2px;
  flex: none;
}

.feature-tab-label strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1rem;
  color: var(--chalk);
}

.feature-tab-label small {
  display: block;
  font-size: 0.86rem;
  color: var(--chalk-3);
  margin-top: 3px;
  line-height: 1.4;
}

/* Active tab: bordered, brand-tinted background, coral heading */
#feat-1:checked ~ .feature-tab-list label[for='feat-1'],
#feat-2:checked ~ .feature-tab-list label[for='feat-2'],
#feat-3:checked ~ .feature-tab-list label[for='feat-3'],
#feat-4:checked ~ .feature-tab-list label[for='feat-4'],
#feat-5:checked ~ .feature-tab-list label[for='feat-5'] {
  background: var(--brand-wash);
  border-color: var(--brand-edge);
}

#feat-1:checked ~ .feature-tab-list label[for='feat-1'] strong,
#feat-2:checked ~ .feature-tab-list label[for='feat-2'] strong,
#feat-3:checked ~ .feature-tab-list label[for='feat-3'] strong,
#feat-4:checked ~ .feature-tab-list label[for='feat-4'] strong,
#feat-5:checked ~ .feature-tab-list label[for='feat-5'] strong {
  color: var(--coral);
}

/* Panels: only the checked tab's matching panel is shown. A single fixed
   min-height keeps the section from jumping as different screenshots (which
   vary slightly in aspect ratio) swap in. */
.feature-panels {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 420px;
}

.feature-panel {
  display: none;
  width: 100%;
  max-width: 300px;
}

.feature-panel .device { width: 100%; }

#feat-1:checked ~ .feature-panels [data-panel='1'],
#feat-2:checked ~ .feature-panels [data-panel='2'],
#feat-3:checked ~ .feature-panels [data-panel='3'],
#feat-4:checked ~ .feature-panels [data-panel='4'],
#feat-5:checked ~ .feature-panels [data-panel='5'] {
  display: block;
  animation: panel-in 220ms ease-out;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .feature-browser { grid-template-columns: minmax(0, 1fr); }
  .feature-panels { order: -1; min-height: 0; margin-bottom: 8px; }
  .feature-panel { max-width: 240px; margin-inline: auto; }
}

.inside-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: clamp(32px, 5vw, 48px);
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

/* ==========================================================================
   PART FIVE — feature subpages, "Inside the app" nav dropdown
   ========================================================================== */

/* Defensive, explicit sizing for standalone campaign/creative images dropped
   into prose-style sections. Written as a dedicated class rather than inline
   styles so width/height/object-fit are never fighting an inline max-width
   against an external width rule. */
.feature-visual {
  width: 100%;
  height: auto;
  max-width: 460px;
  display: block;
  object-fit: contain;
  border-radius: var(--r-panel);
  border: 1px solid var(--rule);
  margin-inline: auto;
}

.band-chalk .feature-visual { border-color: rgba(20, 22, 26, 0.14); }

/* Short homepage teaser that replaces the old full feature browser. */
.teaser-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 22px 0 26px;
}

.teaser-row li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--chalk-2);
}

.teaser-row li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  flex: none;
}

/* Feature subpage hero visual pairing (screenshot + short copy) */
.feature-hero-visual { display: flex; justify-content: center; }
.feature-hero-visual .device { width: 100%; max-width: 300px; }