/* ==========================================================================
   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: 24px;

  --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 a thin outline (no hardware mock-up)
   ========================================================================== */

.device {
  position: relative;
  flex: none;
  border-radius: var(--r-device-phone);
  background: #050506;
  border: 1px solid #2A2D33;
  padding: 3px;
  box-shadow:
    0 28px 56px -28px rgba(0, 0, 0, 0.9),
    0 0 60px -30px rgba(250, 0, 5, 0.4);
}

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

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

/* Both platform classes draw the same plain outline: no bezel, notch or punch-hole. */
.device-android,
.device-ios { --r-device-phone: 24px; }

.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%;
  height: auto;
  max-width: 340px;
  display: block;
  margin-inline: auto;
}

@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; }
.band-chalk .step p { color: #3A3E45; }

/* --------------------------------------------------------------------------
   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); }

/* Open-source licenses: a component table that scrolls inside itself on a
   phone, and the licence texts verbatim in monospace blocks. */
.prose .license-table { overflow-x: auto; margin: 0 0 8px; }
.prose .license-table table { width: 100%; border-collapse: collapse; font-size: 0.9rem; color: var(--chalk-2); }
.prose .license-table th,
.prose .license-table td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); }
.prose .license-table thead th { color: var(--chalk-3); font-weight: 500; }
.prose .license-table tbody th { color: var(--chalk); font-weight: 500; }
@media (max-width: 640px) {
  .prose .license-table thead { display: none; }
  .prose .license-table tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .prose .license-table th,
  .prose .license-table td { display: block; padding: 2px 0; border: 0; }
}
.prose pre.license-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 420px;
  overflow-y: auto;
  padding: 14px 16px;
  background: var(--platform);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  color: var(--chalk-2);
  font: 0.8rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.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; }

/* Choices inside a form (content-removal.html): radios in a fieldset, and a
   statement box the visitor ticks. */
fieldset.field { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
fieldset.field > legend {
  padding: 0;
  margin-bottom: 7px;
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 700;
  font-stretch: 112%;
  color: var(--chalk-2);
}
.check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; color: var(--chalk); line-height: 1.45; }
.check input,
.field .check input { flex: none; width: 20px; height: 20px; margin-top: 2px; padding: 0; accent-color: var(--coral); }

/* Calculators (marketing-front-end.md §17): the contact form's fields, laid out
   in a grid, with the estimate as one large number beside them. */
.field select {
  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 select:focus { border-color: var(--coral); outline: none; }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0 16px; }
.calc-lift { border-top: 1px solid var(--rule); padding-top: 18px; }
.calc-lift h3 { font-size: 1rem; margin-bottom: 12px; }
.calc-result { border-top: 1px solid var(--rule); padding-top: 20px; margin-top: 4px; }
.calc-result .num { display: block; font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1; color: var(--chalk); margin: 6px 0 10px; }
.calc-result p { margin: 0 0 6px; color: var(--chalk-2); }
.calc-meter { height: 8px; background: var(--platform-2); border-radius: 4px; overflow: hidden; margin: 14px 0 8px; }
.calc-meter span { display: block; height: 100%; width: 0; background: var(--plate-yellow); }
.calc-grid [hidden], .calc-result [hidden], .calc-result[hidden] { display: none; }
.calc-table th[scope="row"] { font-family: var(--body); font-weight: 500; font-stretch: 100%; color: var(--chalk); }
.calc-pace { display: block; font-size: 0.82rem; color: var(--chalk-3); font-weight: 400; }
.calc-warn-row td { padding-top: 0; }
/* Warnings are ink with a yellow rule, never red (nutrition copy is adherence-neutral). */
/* Cuisine pages (§19): licensed food photos, credited in their captions. */
.cuisine-photo { margin: 0; }
.cuisine-photo img { display: block; width: 100%; height: auto; border-radius: var(--r-panel); border: 1px solid var(--rule); }
.cuisine-photo figcaption { margin-top: 8px; font-size: 0.78rem; color: var(--chalk-3); line-height: 1.45; }
.cuisine-photo figcaption a { color: var(--chalk-2); }
.cuisine-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.dish-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.calc-warn { margin: 0 0 6px; padding-left: 10px; border-left: 2px solid var(--plate-yellow); font-size: 0.84rem; color: var(--chalk-2); }

.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; }
/* The logo never shrinks and the nav never grows into it. */
.masthead-mark { flex: none; }

.masthead-nav { display: flex; align-items: center; gap: 22px; }
/* Masthead labels never wrap; just above the ribbon's breakpoint the gaps
   tighten so Help (§12c) fits beside Blog and Contact. */
.masthead-nav a, .masthead-nav summary { white-space: nowrap; }
@media (min-width: 1201px) and (max-width: 1360px) {
  .masthead-nav { gap: 14px; }
  .masthead-nav a.nav-area + .nav-drop { padding-left: 14px; }
}

/* "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; }

/* ==========================================================================
   PART SIX — short checkmark bullets (Hevy-style feature lists: a handful of
   scannable lines, never a paragraph, always paired with one screenshot)
   ========================================================================== */

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.check-list li {
  position: relative;
  padding-left: 30px;
  font-size: 1rem;
  color: var(--chalk-2);
  line-height: 1.5;
}

.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--brand-wash);
  border: 1px solid var(--brand-edge);
}

.check-list li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 7px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--coral);
  border-bottom: 2px solid var(--coral);
  transform: rotate(-45deg);
}

.band-chalk .check-list li { color: #3A3E45; }

/* ==========================================================================
   PART SEVEN — hero device frame (real product screenshot, not a mockup)
   ========================================================================== */

.hero-device-frame {
  display: flex;
  justify-content: center;
}

.hero-device-frame .device {
  width: 100%;
  max-width: 300px;
}

/* ==========================================================================
   PART EIGHT — "Inside the app" hub grid + prev/next pager
   ========================================================================== */

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

.hub-card {
  display: block;
  padding: 22px 22px 26px;
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: var(--platform);
  transition: border-color 140ms ease, background 140ms ease;
}

.hub-card:hover { border-color: var(--brand-edge); background: var(--platform-2); }

.hub-card-visual {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 200px;
  margin-bottom: 18px;
  overflow: hidden;
}

.hub-card-visual .device { width: 140px; }
.hub-card-visual img.feature-visual { max-width: 160px; margin: 0; border: 0; }

.hub-card h3 {
  font-size: 1.02rem;
  margin-bottom: 6px;
  color: var(--chalk);
}

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

/* Prev / next pager: always tells you exactly what's next, never a flat
   grab-bag of links to guess from. */
.pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.pager-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  color: var(--chalk);
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 0.98rem;
}

.pager-link:hover { border-color: var(--brand-edge); background: var(--platform); color: var(--chalk); }

.pager-link span {
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-3);
}

.pager-next { text-align: right; align-items: flex-end; }

.pager-overview {
  font-size: 0.85rem;
  color: var(--chalk-3);
  white-space: nowrap;
}

.pager-overview:hover { color: var(--coral); }

@media (max-width: 640px) {
  .pager { grid-template-columns: 1fr; text-align: center; }
  .pager-next { text-align: center; align-items: center; }
  .pager-overview { order: -1; }
}

/* ==========================================================================
   Four areas — lifting, WODs, nutrition, body (September 2026)
   Motion rules: marketing-front-end.md §5. Every moving part below is gated
   on html.motion, which marketing.js sets only when the visitor has not
   asked for reduced motion. Without JS, or with reduced motion, the page
   renders in its final state.
   ========================================================================== */

/* --- scroll reveal ------------------------------------------------------ */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(.2, .7, .2, 1), transform 700ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* --- area tag (text label, never a plate colour: those encode boards) --- */
.area-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--coral);
  margin-bottom: 12px;
}

.area-tag::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--brand);
}

/* --- hero: three phones, lifting, nutrition and WODs --------------------- */
.hero-pair {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  max-width: 560px;
  margin-inline: auto;
  padding-bottom: 40px; /* room for the fanned phones, which sit lower than their boxes */
}

.hero-pair .device { width: min(34%, 220px); }
.hero-pair .hero-fan-left  { transform: rotate(-6deg) translateY(30px); z-index: 1; }
.hero-pair .hero-fan-mid   { z-index: 3; margin-inline: -6%; }
.hero-pair .hero-fan-right { transform: rotate(6deg) translateY(22px); z-index: 2; margin-left: -6%; }

.motion .hero-pair .hero-fan-left  { animation: hero-rise-left 1100ms cubic-bezier(.2, .7, .2, 1) both; }
.motion .hero-pair .hero-fan-mid   { animation: hero-rise-mid 1100ms 100ms cubic-bezier(.2, .7, .2, 1) both; }
.motion .hero-pair .hero-fan-right { animation: hero-rise-right 1100ms 200ms cubic-bezier(.2, .7, .2, 1) both; }

@keyframes hero-rise-left {
  from { opacity: 0; transform: rotate(0deg) translateY(70px); }
  to   { opacity: 1; transform: rotate(-6deg) translateY(30px); }
}

@keyframes hero-rise-mid {
  from { opacity: 0; transform: translateY(90px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-rise-right {
  from { opacity: 0; transform: rotate(0deg) translateY(80px); }
  to   { opacity: 1; transform: rotate(6deg) translateY(22px); }
}

@media (max-width: 560px) {
  .hero-pair .device { width: 30%; }
}

/* --- sticky showcase: steps scroll, the phone stays and changes screen --- */
.showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(32px, 6vw, 90px);
  align-items: start;
}

.showcase-steps { list-style: none; margin: 0; padding: 0; }

.showcase-step {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 40px;
  border-left: 2px solid var(--rule);
  padding-left: clamp(18px, 3vw, 34px);
  transition: border-color 300ms ease;
}

.showcase-step.is-active { border-left-color: var(--brand); }
.showcase-step h3 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); margin-bottom: 14px; }
.showcase-step > p { color: var(--chalk-2); max-width: 52ch; margin: 0 0 18px; }

.motion .showcase-step { opacity: 0.38; transition: opacity 400ms ease, border-color 300ms ease; }
.motion .showcase-step.is-active { opacity: 1; }

.showcase-points {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 8px;
  max-width: 52ch;
}

.showcase-points li {
  position: relative;
  padding-left: 20px;
  font-size: 0.95rem;
  color: var(--chalk-2);
}

.showcase-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 2px;
  background: var(--brand);
}

.showcase-points strong { color: var(--chalk); font-weight: 500; }

.showcase-stage {
  position: sticky;
  top: calc(50vh - min(38vh, 400px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.showcase-device { width: min(100%, 310px, 33vh); }

.showcase-screens { position: relative; aspect-ratio: 780 / 1688; }

.showcase-screens picture {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 520ms ease, transform 700ms cubic-bezier(.2, .7, .2, 1);
}

.showcase-screens picture.is-active { opacity: 1; transform: none; }
.showcase-screens img { width: 100%; height: 100%; object-fit: cover; }

.showcase-nav {
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  background: var(--platform);
}

.showcase-nav button {
  appearance: none;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--chalk-3);
  font: 700 0.82rem/1 var(--display);
  font-stretch: 112%;
  padding: 9px 12px;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.showcase-nav button:hover { color: var(--chalk); }
.showcase-nav button[aria-current='true'] { background: var(--brand); color: #fff; }
.showcase-nav button:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* Each step carries its own phone for narrow screens, where there is no
   room for a sticky stage beside the text. */
.showcase-inline { display: none; }

@media (max-width: 880px) {
  .showcase-grid { grid-template-columns: minmax(0, 1fr); }
  .showcase-stage { display: none; }
  .showcase-step { min-height: 0; padding-block: 34px; }
  .motion .showcase-step { opacity: 1; }
  .showcase-inline { display: block; width: min(76%, 290px); margin: 8px auto 12px; }
}

/* --- phone fan: three phones stacked, spread when scrolled into view ---- */
.phone-fan {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-block: 20px 34px;
}

.phone-fan .device { width: min(31%, 250px); }
.phone-fan .fan-left  { transform: translateX(8%) rotate(-7deg) translateY(26px); z-index: 1; }
.phone-fan .fan-mid   { z-index: 2; margin-inline: -4%; }
.phone-fan .fan-right { transform: translateX(-8%) rotate(7deg) translateY(26px); z-index: 1; }

.motion .phone-fan .fan-left,
.motion .phone-fan .fan-right {
  transition: transform 1000ms cubic-bezier(.2, .7, .2, 1) 150ms;
}

.motion .phone-fan:not(.is-in) .fan-left  { transform: translateX(62%) rotate(0deg) translateY(10px) scale(.94); }
.motion .phone-fan:not(.is-in) .fan-right { transform: translateX(-62%) rotate(0deg) translateY(10px) scale(.94); }

@media (max-width: 560px) {
  .phone-fan .device { width: 38%; }
  .phone-fan .fan-mid { margin-inline: -9%; }
}

/* --- area bands: text beside screenshots, ruled rows below ------------- */
.area-band-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 84px);
  align-items: center;
}

.area-band-flip > :first-child { order: 2; }

@media (max-width: 880px) {
  .area-band-grid { grid-template-columns: minmax(0, 1fr); }
  .area-band-flip > :first-child { order: 0; }
}

.area-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 26px 0 8px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.area-stat { background: var(--platform); padding: 16px 16px 14px; }
.area-stat .num { display: block; font-size: clamp(1.3rem, 2.4vw, 1.75rem); color: var(--chalk); margin-bottom: 6px; }
.area-stat span:last-child { font-size: 0.82rem; color: var(--chalk-3); line-height: 1.4; display: block; }

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

/* Two phones side by side with a gentle scroll parallax (marketing.js). */
.phone-duo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(14px, 3vw, 30px);
}

.phone-duo > * { width: min(46%, 270px); }
.phone-duo > :last-child { margin-top: 64px; }
.phone-duo .device { width: 100%; }

.motion [data-parallax] { will-change: transform; }

/* Reduced motion wins over everything above, even if html.motion slipped
   through (e.g. the preference changed after load). */
@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal],
  .motion .showcase-step,
  .motion .hero-pair .device,
  .motion .phone-fan .device,
  .showcase-screens picture {
    transition: none !important;
    animation: none !important;
  }
  .motion [data-reveal] { opacity: 1; transform: none; }
  .motion .phone-fan:not(.is-in) .fan-left  { transform: translateX(8%) rotate(-7deg) translateY(26px); }
  .motion .phone-fan:not(.is-in) .fan-right { transform: translateX(-8%) rotate(7deg) translateY(26px); }
  .motion [data-parallax] { transform: none !important; }
}

/* Ruled two-column list of features on the area pages (board furniture:
   hairlines, no cards, no numbering). */
.feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.feature-list > div { background: var(--iron); padding: 22px 22px 20px; }
.band-raised .feature-list > div { background: #0D0F12; }
.feature-list h3 { font-size: 1.02rem; margin-bottom: 8px; }
.feature-list p { font-size: 0.92rem; color: var(--chalk-2); margin: 0; }

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

/* --------------------------------------------------------------------------
   Area ribbon — Nutrition, Workouts, Body check-ins, WODs straight in the
   masthead (marketing-front-end.md §12). The current page is marked with
   aria-current and a brand underline. Below 1200px the ribbon moves into
   the drawer only, where the same four links lead the list.
   -------------------------------------------------------------------------- */
.masthead-nav a.nav-area {
  position: relative;
  color: var(--chalk);
  white-space: nowrap;
  padding-block: 6px;
}

.masthead-nav a.nav-area::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.masthead-nav a.nav-area:hover::after,
.masthead-nav a.nav-area[aria-current='page']::after { transform: scaleX(1); }

.masthead-nav a.nav-area + .nav-drop { margin-left: 8px; padding-left: 22px; border-left: 1px solid var(--rule); }

.nav-drawer-panel a.nav-drawer-area[aria-current='page'] { color: var(--coral); }

/* The featured page (§12, product owner 2026-10-11: "available from the main nav,
   it should be a featured page"): the app comparison, a coral link after the
   menus on desktop and right after the area links in the drawer. */
.masthead-nav a.nav-featured { color: var(--coral); }
.masthead-nav a.nav-featured:hover,
.masthead-nav a.nav-featured[aria-current='page'] { color: var(--chalk); }
.nav-drawer-panel a.nav-drawer-featured { color: var(--coral); }
.nav-drawer-panel a.nav-drawer-featured[aria-current='page'] { color: var(--chalk); }
/* Below 1201px it leaves the bar with the area ribbon; the drawer keeps it. */
@media (max-width: 1200px) {
  .masthead-nav a.nav-featured { display: none; }
}

@media (max-width: 1200px) {
  .masthead-nav .nav-area { display: none; }
  .masthead-nav a.nav-area + .nav-drop { margin-left: 0; padding-left: 0; border-left: 0; }
  .nav-toggle { display: inline-flex; }
}

@media (min-width: 1201px) {
  .nav-drawer-panel a.nav-drawer-area { display: none; }
}

/* Steps written as an <ol> (a real sequence): the styled counter replaces
   the browser's list numbers. */
ol.steps { list-style: none; margin: 0; padding: 0; }

/* A desktop screenshot beside two phones: give the screenshot the room. */
@media (min-width: 881px) {
  .area-band-wide { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
  .area-band-wide .phone-duo .device { width: 100%; }
}

/* A real app screen in a phone frame where an ad creative used to sit
   (ad creatives with fitness models were retired 2026-09-28, §9). */
.ad-phone { width: min(100%, 300px); margin-inline: auto; }

/* ==========================================================================
   Blog (marketing-front-end.md §15) — posts are ruled rows, never a card grid;
   an article is .prose beside a phone frame showing the real app.
   ========================================================================== */

.post-list { border-top: 1px solid var(--rule); list-style: none; margin: 0; padding: 0; }
.post-list > li { border-bottom: 1px solid var(--rule); }
.post-link {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  gap: 8px clamp(16px, 3vw, 40px);
  padding-block: 28px;
  color: inherit;
}
.post-thumb { grid-row: 1 / span 3; grid-column: 1; }
.post-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; border: 1px solid var(--rule); border-radius: var(--r-panel); }
.post-link h2 { grid-column: 2; font-size: clamp(1.2rem, 2.2vw, 1.55rem); margin: 0; }
.post-link p { grid-column: 2; margin: 0; color: var(--chalk-2); font-size: 0.95rem; }
.post-link time { grid-row: 1; grid-column: 3; color: var(--chalk-3); font-size: 0.86rem; white-space: nowrap; padding-top: 6px; }
.post-link:hover h2 { color: var(--coral); }
.post-stats { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 6px 0 0; align-self: start; padding: 0; color: var(--chalk-3); font-size: 0.86rem; }
.post-stat { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.post-stat[hidden] { display: none; }
.post-stat svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.post-stat b { font-weight: 600; color: var(--chalk-2); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .post-link { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .post-thumb, .post-link h2, .post-link p, .post-link time, .post-stats { grid-row: auto; grid-column: 1; }
  .post-link time { padding-top: 0; }
}

.post-cover { margin: 28px 0 0; max-width: 900px; }
.post-cover img { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; border: 1px solid var(--rule); border-radius: var(--r-panel); }

.post-byline { margin-top: 14px; color: var(--chalk-3); font-size: 0.9rem; }

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.post-aside { position: sticky; top: 92px; display: grid; gap: 14px; }
.post-aside .device { width: 100%; }
.post-aside figcaption { font-size: 0.86rem; color: var(--chalk-3); }

@media (max-width: 900px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); }
  .post-aside { position: static; max-width: 280px; margin-inline: auto; }
}
.prose .steps { margin: 22px 0; }
.prose .steps .step { margin-bottom: 0; }
.prose .steps .step h3 { margin-top: 0; }

/* Blog post: an opening hook line and a pair of the author's photos (§15). */
.prose .post-hook { font-size: 1.12rem; line-height: 1.55; color: var(--chalk); }
.post-photos { margin: 32px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); gap: 14px; align-items: start; }
.post-photos img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--r-panel); }
.post-photos figcaption { grid-column: 1 / -1; font-size: 0.86rem; color: var(--chalk-3); }

/* Stock photography with photographer and source credits beside each image. */
.post-stock-photo { margin: 32px 0; }
.post-stock-photo img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--r-panel); }
.post-cover figcaption { margin-top: 10px; font-size: 0.86rem; color: var(--chalk-3); }
.post-stock-photo figcaption { margin-top: 12px; font-size: 0.86rem; color: var(--chalk-3); }

/* Blog share links: plain links to the platforms' share pages, no scripts or trackers. */
.post-share { margin: 36px 0 22px; padding-top: 22px; border-top: 1px solid var(--rule); }
.post-share-label { margin: 0 0 12px; color: var(--chalk-3); font-size: 0.9rem; }
.post-share ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.post-share li { margin: 0; }
.post-share .btn { min-height: 44px; }

/* Blog counters: a Like toggle and a share count, shown once the counters answer (§15). */
.post-engage { margin: 36px 0 0; padding-top: 22px; border-top: 1px solid var(--rule); }
.post-engage[hidden] { display: none; }
.post-engage-label { margin: 0 0 12px; color: var(--chalk-3); font-size: 0.9rem; }
.post-engage ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.post-engage li { margin: 0; }
.post-engage .btn { min-height: 44px; gap: 8px; }
.post-engage .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.post-engage .btn.is-on { border-color: var(--brand-edge); background: var(--brand-wash); color: var(--chalk); }
.post-engage .btn.is-on svg { fill: currentColor; }
.post-engage .count { font-variant-numeric: tabular-nums; color: var(--chalk-2); }
.post-share-count { margin: 12px 0 0; color: var(--chalk-3); font-size: 0.9rem; }
.post-share-count[hidden], .post-engage[hidden] ~ .post-share .post-share-count { display: none; }

/* Share buttons are icons; the accessible name is the aria-label (§15). */
.post-share .btn-icon { min-width: 44px; padding: 0 12px; justify-content: center; }
.post-share .btn-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.post-share-note { margin: 12px 0 0; color: var(--chalk-2); font-size: 0.9rem; }
.post-share-note[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Hub pages (Tools): ruled rows that act as the navigation page for a group
   of pages, the way the blog index does for posts. Never a card grid.
   -------------------------------------------------------------------------- */
.hub-list { border-top: 1px solid var(--rule); list-style: none; margin: 0; padding: 0; }
.hub-list > li { border-bottom: 1px solid var(--rule); }
.hub-link { display: block; padding-block: 24px; color: inherit; }
.hub-link h2 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); margin: 0 0 6px; }
.hub-link p { margin: 0; color: var(--chalk-2); font-size: 0.95rem; max-width: 62ch; }
.hub-link:hover h2 { color: var(--coral); }

/* The current page inside a menu or the drawer. */
.nav-drop-panel a[aria-current='page'],
.nav-drawer-panel a.nav-drawer-link[aria-current='page'] { color: var(--coral); }

/* --------------------------------------------------------------------------
   Help Center (§12c) — one page per article, docs layout: the topic tree on
   the left, the article in the middle, "On this page" on the right. Pages are
   built by tools/marketing/build-help.mjs; marketing.js adds search, the
   phone drawer and the scroll-following highlight.
   -------------------------------------------------------------------------- */

.help-main { --help-top: 76px; }
.help-layout {
  max-width: 1320px;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 220px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-block: 36px 96px;
}

.help-tree {
  position: sticky;
  top: calc(var(--help-top) + 16px);
  max-height: calc(100vh - var(--help-top) - 32px);
  overflow: auto;
  padding-right: 6px;
  font-size: 0.92rem;
}
.help-tree-head { display: none; }
.help-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  margin-bottom: 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  background: var(--platform);
  color: var(--chalk-3);
}
.help-search[hidden] { display: none; }
.help-search:focus-within { border-color: var(--coral); }
.help-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--chalk); font: inherit; outline: none; }
.help-search input::placeholder { color: var(--chalk-2); }
.help-tree a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--chalk-2); line-height: 1.4; }
.help-tree a:hover { color: var(--chalk); background: var(--platform); }
.help-tree a[aria-current='page'] { color: var(--chalk); background: var(--platform-2); box-shadow: inset 2px 0 0 var(--brand); }
.help-tree-home { font-weight: 500; }
.help-cat { margin-top: 4px; }
.help-cat[hidden] { display: none; }
.help-cat summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  color: var(--chalk);
}
.help-cat summary::-webkit-details-marker { display: none; }
.help-cat summary:hover { background: var(--platform); }
.help-cat-chevron { flex: none; color: var(--chalk-3); transition: transform 150ms ease; }
.help-cat[open] .help-cat-chevron { transform: rotate(90deg); }
.help-cat-count { margin-left: auto; font-family: var(--numeric); font-size: 0.7rem; color: var(--chalk-3); }
.help-cat ul { list-style: none; margin: 2px 0 8px 17px; padding: 0 0 0 10px; border-left: 1px solid var(--rule); }
.help-cat li[hidden] { display: none; }
.help-tree-empty { padding: 8px 10px; color: var(--chalk-2); }
.help-tree-empty[hidden] { display: none; }

.help-article { min-width: 0; }
.help-eyebrow {
  margin: 26px 0 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--coral);
}
.help-article h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: 14px; }
.help-article .lede { margin-bottom: 12px; }
.help-meta { margin: 0; padding-bottom: 22px; border-bottom: 1px solid var(--rule); font-size: 0.86rem; color: var(--chalk-3); max-width: none; }
.help-body { max-width: 70ch; }
.help-body h2,
.help-body h2:first-of-type {
  margin-top: 40px;
  padding-top: 0;
  border-top: 0;
  scroll-margin-top: calc(var(--help-top) + 24px);
}
.help-body ol.help-steps { list-style: none; padding: 0; margin: 4px 0 16px; counter-reset: help-step; border-top: 1px solid var(--rule); }
.help-body ol.help-steps li {
  counter-increment: help-step;
  position: relative;
  margin: 0;
  padding: 12px 0 12px 40px;
  border-bottom: 1px solid var(--rule);
}
.help-body ol.help-steps li::before {
  content: counter(help-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 16px;
  font-family: var(--numeric);
  font-size: 0.74rem;
  line-height: 1;
  color: var(--coral);
}
.help-qa { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.help-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 56px; max-width: 70ch; }
.help-pager a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  color: var(--chalk);
}
.help-pager a:hover { border-color: var(--coral); }
.help-pager small { font-size: 0.8rem; color: var(--chalk-3); }
.help-pager strong { font-family: var(--display); font-weight: 800; font-stretch: 112%; }
.help-pager-next { grid-column: 2; align-items: flex-end; text-align: right; }

.help-stuck { margin-top: 28px; max-width: 70ch; padding: 20px 22px; background: var(--platform); border: 1px solid var(--rule); border-radius: var(--r-panel); }
.help-stuck .help-stuck-title { margin: 0 0 6px; font-size: 1.05rem; font-stretch: 112%; scroll-margin-top: calc(var(--help-top) + 24px); }
.help-stuck p { margin: 0; color: var(--chalk-2); font-size: 0.95rem; }

.help-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 40px; background: var(--rule); border: 1px solid var(--rule); }
.help-hub-cat { padding: 22px 24px; background: var(--iron); }
.help-hub-cat h2 { margin: 0 0 12px; font-size: 1.15rem; font-stretch: 112%; scroll-margin-top: calc(var(--help-top) + 24px); }
.help-hub-cat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.help-hub-cat a { font-weight: 500; color: var(--chalk); }
.help-hub-cat a:hover { color: var(--coral); }
.help-hub-cat span { display: block; font-size: 0.88rem; color: var(--chalk-2); }

.help-toc {
  position: sticky;
  top: calc(var(--help-top) + 16px);
  max-height: calc(100vh - var(--help-top) - 32px);
  overflow: auto;
  padding-top: 30px;
}
.help-toc-label { margin: 0 0 12px; font-family: var(--display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--chalk-3); }
.help-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.help-toc a { display: block; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; color: var(--chalk-2); font-size: 0.88rem; line-height: 1.4; }
.help-toc a:hover { color: var(--chalk); }
.help-toc a[aria-current='true'] { color: var(--coral); border-left-color: var(--coral); }
.help-toc-top { display: inline-block; margin-top: 18px; font-size: 0.84rem; color: var(--chalk-3); }

.help-subbar { display: none; }

@media (max-width: 1180px) {
  .help-layout { grid-template-columns: 232px minmax(0, 1fr); }
  .help-toc { display: none; }
  .help-subbar:not([hidden]) {
    display: block;
    position: sticky;
    top: var(--help-top);
    z-index: 30;
    background: var(--iron);
    border-bottom: 1px solid var(--rule);
  }
  .help-subbar-row { display: flex; align-items: center; gap: 12px; max-width: 1320px; margin: 0 auto; padding: 0 22px; min-height: 48px; }
  .help-subbar-btn { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; color: var(--chalk-2); font: inherit; font-size: 0.9rem; cursor: pointer; }
  .help-subbar-btn strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; color: var(--chalk); }
  .help-subbar-btn svg { flex: none; }
  .help-subbar-topics { display: none; }
  .help-subbar-list { list-style: none; margin: 0 auto; max-width: 1320px; padding: 4px 22px 12px; }
  .help-subbar-list[hidden] { display: none; }
  .help-subbar-list a { display: flex; align-items: center; min-height: 44px; border-top: 1px solid var(--rule-soft); color: var(--chalk-2); }
  .help-subbar-list a[aria-current='true'] { color: var(--coral); }
  .help-body h2, .help-body h2:first-of-type, .help-hub-cat h2, .help-stuck .help-stuck-title { scroll-margin-top: calc(var(--help-top) + 72px); }
}

@media (max-width: 880px) {
  .help-main { --help-top: 71px; }
  .help-layout { display: flex; flex-direction: column; gap: 32px; padding-block: 20px 72px; }
  .help-tree { position: static; max-height: none; order: 2; width: 100%; }
  .help-js .help-tree { display: none; }
  .help-js .help-tree.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    padding: 0 16px 40px;
    overflow: auto;
    background: var(--iron);
    font-size: 1rem;
  }
  .help-tree.is-open .help-tree-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1;
    height: 64px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--rule);
    background: var(--iron);
    font-family: var(--display);
    font-weight: 800;
    font-stretch: 112%;
    font-size: 1.05rem;
  }
  .help-tree-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: var(--chalk); cursor: pointer; }
  .help-tree a, .help-cat summary { min-height: 44px; display: flex; align-items: center; }
  .help-subbar-row { justify-content: space-between; padding: 0 16px; }
  .help-subbar-topics { display: flex; flex: none; padding-right: 12px; border-right: 1px solid var(--rule); }
  .help-subbar-list { padding: 4px 16px 12px; }
  .help-pager { grid-template-columns: minmax(0, 1fr); }
  .help-pager-next { grid-column: 1; }
  .help-hub-grid { grid-template-columns: minmax(0, 1fr); }
}

html.help-tree-open { overflow: hidden; }
/* body > * is its own stacking layer (z-index 1), under the masthead (40): lift
   the page while the topics drawer covers it. */
html.help-tree-open .help-main { z-index: 70; }

/* Help Center screenshots (§12c): a real app screen in a phone frame, the
   caption beside it on wide screens and under it on a phone. */
.help-shot {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  margin: 20px 0 8px;
  max-width: 70ch;
}
.help-shot .device { width: 236px; }
.help-shot figcaption { color: var(--chalk-2); font-size: 0.92rem; line-height: 1.55; padding-left: 14px; border-left: 2px solid var(--coral); }
/* A computer screen: the whole app window, full width, a thin outline like the phone frame. */
.help-shot--desktop { grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: none; }
.help-desktop { border: 1px solid var(--chalk-3, rgba(255, 255, 255, 0.28)); border-radius: 10px; padding: 3px; overflow: hidden; }
.help-desktop img { display: block; width: 100%; height: auto; border-radius: 7px; }
.help-new { padding: 14px 16px; background: var(--brand-wash); border: 1px solid var(--brand-edge); border-radius: var(--r-panel); color: var(--chalk); }
@media (max-width: 560px) {
  .help-shot { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; }
  .help-shot .device { width: min(260px, 78vw); }
  .help-shot figcaption { justify-self: stretch; }
}