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

/* 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;
}
.pv-steps li::after {
  content: "";
  position: absolute; top: 20px; left: 48px; right: -8px;
  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(--marrow-accent);
  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); }
}