/* Public visual components, 2026-09-24.
   Layout only. Every colour, font family, weight and radius below is an
   existing token from /css/styles.css. No new colour, font or token is defined
   here. Pills use the site's existing 999px full round, and the arrow dot plays
   three times and stops, never looping.
   Used by the public marketing pages for product shots, the money flow
   diagram, the setup steps and the icon grids. */

.pv-shot { margin: 0; }
.pv-shot-frame {
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-card);
  background: var(--paper-card);
  overflow: hidden;
  line-height: 0;
}
.pv-shot img { display: block; width: 100%; height: auto; }
.pv-shot figcaption {
  margin-top: var(--space-2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--ink-muted);
  text-align: center;
}
.pv-shot.is-phone { max-width: 320px; margin-inline: auto; }
.pv-shot.is-phone .pv-shot-frame { border-radius: var(--radius-elevated); border-color: var(--rule-strong); }

.pv-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-6);
  align-items: center;
}
.pv-split.is-phone { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
@media (max-width: 860px) {
  .pv-split, .pv-split.is-phone { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

.pv-lede { color: var(--ink-secondary); font-size: 17px; line-height: 1.55; margin: 0 0 var(--space-3); max-width: 46ch; }
.pv-link { color: var(--marrow-red); font-weight: 550; }
/* A link that stands alone in its line is a tap target, so it gets the 44px
   floor. A .pv-link inside a sentence keeps the WCAG inline exemption. */
.pv-link.is-standalone { display: inline-flex; align-items: center; min-height: 44px; }
/* A .pv-link that is the whole of a heading stands alone too. */
h3 > .pv-link:only-child { display: inline-flex; align-items: center; min-height: 44px; }

/* Icon grid: one icon, one title, one line. */
.pv-icons {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--space-3);
}
.pv-icons li {
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-card);
  background: var(--paper-card);
  padding: var(--space-4);
}
.pv-ic {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-control);
  border: 1px solid var(--rule-soft);
  color: var(--marrow-accent);
  margin-bottom: var(--space-2);
}
.pv-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv-icons h3 { font-family: var(--sans); font-size: 16px; font-weight: var(--weight-sans-max); color: var(--ink-primary); margin: 0 0 var(--space-1); }
.pv-icons p { font-size: 14px; line-height: 1.5; color: var(--ink-secondary); margin: 0; }

/* Numbered steps with a connecting line. */
.pv-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  counter-reset: pvstep;
}
.pv-steps li { position: relative; padding-top: 52px; }
.pv-steps li::before {
  counter-increment: pvstep;
  content: counter(pvstep);
  position: absolute; top: 0; left: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--marrow-accent);
  color: var(--marrow-accent);
  background: var(--paper-card);
  font-family: var(--mono); font-size: 14px;
  z-index: 1;
}
/* The connector stops at its own step's edge. It ran 8px past it (right: -8px),
   which made every step 8px wider than itself to a measurement (Gauntlet
   2026-10-02, the English home at 1280 and 1440: li 290 holding 298). The
   next step's dot still sits a full grid gap away, so the line reads the same. */
.pv-steps li::after {
  content: "";
  position: absolute; top: 20px; left: 48px; right: 0;
  height: 1px;
  background: var(--rule-strong);
}
.pv-steps li:last-child::after { display: none; }
.pv-steps h3 { font-family: var(--sans); font-size: 16px; font-weight: var(--weight-sans-max); color: var(--ink-primary); margin: 0 0 var(--space-1); }
.pv-steps p { font-size: 14px; line-height: 1.5; color: var(--ink-secondary); margin: 0; }
@media (max-width: 760px) {
  .pv-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .pv-steps li { padding: 0 0 0 56px; min-height: 40px; }
  .pv-steps li::after { top: 48px; bottom: -16px; left: 20px; right: auto; width: 1px; height: auto; }
}

/* Money flow: member payment, the 8 percent, your bank. */
.pv-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: center;
  gap: 0;
}
.pv-node {
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-card);
  background: var(--paper-card);
  padding: var(--space-4);
  text-align: center;
}
.pv-node.is-accent { border-color: var(--marrow-accent); }
.pv-node-k { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-1); }
.pv-node-v { display: block; font-family: var(--display); font-size: 34px; line-height: 1.1; color: var(--ink-primary); }
.pv-node-s { display: block; font-size: 13px; color: var(--ink-secondary); margin-top: var(--space-1); }
.pv-arrow { position: relative; height: 2px; background: var(--rule-strong); margin: 0 8px; overflow: visible; }
.pv-arrow::after {
  content: ""; position: absolute; right: -2px; top: -4px;
  border-left: 8px solid var(--rule-strong);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.pv-arrow i {
  position: absolute; top: -3px; left: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-primary);
  animation: pv-travel 2.4s ease-in-out 3 forwards;
}
@keyframes pv-travel { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@media (max-width: 760px) {
  .pv-flow { grid-template-columns: minmax(0, 1fr); }
  .pv-arrow { width: 2px; height: 32px; margin: 8px auto; }
  .pv-arrow::after { right: auto; left: -4px; top: auto; bottom: -2px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--rule-strong); border-bottom: 0; }
  .pv-arrow i { left: -3px; animation-name: pv-travel-down; animation-fill-mode: forwards; }
  @keyframes pv-travel-down { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
}

/* Fine print as a short list of facts. */
.pv-facts {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--space-3);
}
.pv-facts li { font-size: 14px; line-height: 1.5; color: var(--ink-secondary); border-top: 1px solid var(--rule-soft); padding-top: var(--space-2); }
.pv-facts strong { display: block; color: var(--ink-primary); font-weight: var(--weight-sans-max); margin-bottom: var(--space-1); }

/* A rendered connections list: the gym's own accounts. */
.pv-conn {
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-card);
  background: var(--paper-card);
  padding: var(--space-2) var(--space-4);
  margin: 0;
}
.pv-conn-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule-soft); }
.pv-conn-row:last-child { border-bottom: 0; }
.pv-conn-row .pv-ic { margin: 0; flex: none; }
.pv-conn-t { flex: 1; min-width: 0; }
.pv-conn-t b { display: block; font-size: 15px; font-weight: var(--weight-sans-max); color: var(--ink-primary); }
.pv-conn-t span { display: block; font-size: 13px; color: var(--ink-secondary); }
.pv-pill { flex: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--marrow-accent); border: 1px solid var(--marrow-accent); border-radius: 999px; padding: 4px 10px; }

/* Modality chips. */
.pv-chips { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pv-chips li { font-size: 14px; color: var(--ink-primary); border: 1px solid var(--rule-soft); border-radius: 999px; padding: 6px 14px; background: var(--paper-card); }

@media (prefers-reduced-motion: reduce) {
  .pv-arrow i { animation: none; left: calc(50% - 4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .pv-arrow i { left: -3px; top: calc(50% - 4px); }
}