/* /scoring/, /streaming/ and /safety/: the three capability pages (site refresh, lane C,
   2026-10-19). Additive and route-scoped: every token, control and surface comes from
   styles.css, pages.css, soft.css and pages-art.css (the .chapter-head grid,
   .faq-list, .site-close, .seg, .icon-disc). This file lays the three routes out on the page
   column and draws only what no other route has: the capture wells, the
   cards, the sport posters and the promise panel. Type stays on the
   round-4 scale (13/15/17/20 at 1.4 or 1.6, plus the display triples); radii on 16/28/40/pill.
   Every colour is a token or a light-dark() pair. Nothing here animates except the shared
   control state machine, so there is no motion to pause or reduce. Subtrees that draw app
   UI (the device and browser frames) carry data-lint-exempt. */

.product-page {
  --pp-rim: light-dark(rgb(255 255 255 / 70%), var(--rim-dark));
}
/* One rhythm (soft.css spacing scale): sections are spaced by margin, so a section's frame
   holds only its content; the index under the hero is a block of the hero. */
.pp-section {
  margin-top: var(--space-section);
}
.product-page .chapter-lede {
  color: var(--ink-secondary);
}
.product-page .chapter-head + * {
  margin-top: var(--space-lede);
}
.product-page .chapter-head:not(:has(> .chapter-lede)) + * {
  margin-top: var(--space-head);
}

/* ─── Hero ───────────────────────────────────────────────────────────────────────────── */
.pp-hero {
  --h1-cap: calc(var(--d-h1) * 0.18);
  align-items: start;
  padding-top: var(--space-top);
}
.pp-hero__copy {
  grid-column: 1 / 7;
  min-width: 0;
}
.pp-hero__copy .pages-title {
  margin: 0 0 var(--space-head);
}
.pp-hero__lede {
  max-width: 38ch;
  margin: 0;
}
.pp-hero__stage {
  grid-column: 7 / 13;
  min-width: 0;
  margin-top: var(--h1-cap);
}
.pp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: var(--space-lede) 0 0;
}

/* ─── On this page ───────────────────────────────────────────────────────────────────── */
.pp-index {
  display: flex;
  margin-top: var(--space-block);
}
.pp-index__seg {
  max-width: 100%;
  scroll-padding-inline: 44px;
}
.pp-index__seg > a {
  flex: none;
  white-space: nowrap;
  scroll-snap-align: start;
}

/* ─── Split: copy on one side, a capture on the other ───────────────────────────────── */
.pp-split {
  align-items: start;
}
/* A short chapter (headline, one line, three labels) sits level with its screen. */
@media (min-width: 761px) {
  .pp-split {
    align-items: center;
  }
}
.pp-split__copy {
  grid-column: 1 / 7;
  min-width: 0;
}
.pp-split__stage {
  grid-column: 7 / 13;
  min-width: 0;
}
.pp-split--flip .pp-split__copy {
  grid-column: 7 / 13;
}
.pp-split--flip .pp-split__stage {
  grid-column: 1 / 7;
  grid-row: 1;
}
.pp-split__copy h2 {
  margin: 0;
}
.pp-split__copy .chapter-lede {
  max-width: 44ch;
  margin: var(--space-head) 0 0;
  font-size: var(--fs-20);
  line-height: var(--lh-prose);
}
.pp-note {
  max-width: 60ch;
  margin: var(--space-block) 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}

.pp-note strong {
  color: var(--ink);
  font-weight: 600;
}

/* Facts: a quiet bulleted list in running type. */
.pp-facts {
  display: grid;
  gap: 12px;
  max-width: 56ch;
  margin: var(--space-lede) 0 0;
  padding: 0;
  list-style: none;
}
.pp-facts > li {
  position: relative;
  padding-left: 22px;
  color: var(--ink);
  font-size: var(--fs-17);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
.pp-facts > li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-secondary);
}

.pp-facts strong,
.pp-card strong {
  font-weight: 600;
}

/* ─── Captures ───────────────────────────────────────────────────────────────────────
   One device in a recessed well, the tag in the well's corner, a caption under it. The
   device starts 56px under the well's top (64px to the screen) and the well shows
   --show rows of the screen (in points: a design preview is 390 wide, a real iPhone 17 Pro
   capture 402 wide and 874 tall, --basis) before fading over --fade, so a tall capture
   ends softly on what is readable rather than on a cut. Each figure names its rows with a
   class: --show-d at desktop widths, --show-m on phones. The screen never shrinks below
   232px wide, so a whole screen is never reduced to decoration. */
.pp-capture {
  position: relative;
  margin: 0;
}
.pp-capture--real {
  --basis: 402;
}
.pp-show-500 {
  --show-d: 500;
  --show-m: 480;
  --fade-d: 40px;
}
.pp-show-640 {
  --show-d: 640;
  --show-m: 480;
}
.pp-show-720 {
  --show-d: 720;
  --show-m: 560;
}
.pp-show-740 {
  --show-d: 740;
  --show-m: 720;
  --fade-d: 64px;
}
.pp-show-760 {
  --show-d: 760;
  --show-m: 620;
  --fade-d: 64px;
}
/* Phones show each capture down to its last readable row (--show-m), not a fixed slice:
   a box score without its batting lines would be decoration. */
/* The whole screen, foot to top: the Scorebook's keys sit on its last rows. */
.pp-show-874 {
  --show-d: 874;
  --fade-d: 24px;
}
/* The hero's device is a size smaller from 761px, so a whole screen and the copy beside
   it fit one desktop view. */
@media (min-width: 761px) {
  .pp-hero__stage .pp-capture__well {
    --device-w: clamp(256px, min(21vw, 32svh), 300px);
  }
}
.pp-capture--short {
  --show-d: 548;
}
.pp-capture__well {
  --device-w: clamp(256px, min(22vw, 34svh), 316px);
  --show: var(--show-d, 640);
  --fade: var(--fade-d, 88px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: calc(
    var(--pad-well) + 8px + (var(--device-w) - 16px) * var(--show) / var(--basis, 390) + var(--fade)
  );
  padding-top: var(--pad-well);
  border: 1px solid light-dark(rgb(255 255 255 / 55%), var(--rim-dark));
  border-radius: var(--r-window);
  background: var(--surface);
  box-shadow: var(--e-inset-lg);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--fade)), transparent);
}
.pp-device {
  --bezel: 8px;
  --corner: calc(var(--device-w) * 0.14);
  flex: none;
  box-sizing: border-box;
  width: var(--device-w);
  border: var(--bezel) solid var(--surface);
  border-radius: calc(var(--corner) + var(--bezel));
  background: var(--surface);
  box-shadow: var(--e-raised-lg);
  overflow: hidden;
}
/* The screen takes the capture's own height (a capture may be cropped to the top of the
   390x844 screen); the well, not the screen, decides how much of it shows. */
.pp-device__screen {
  border-radius: var(--corner);
  background: var(--graphite);
  overflow: hidden;
}
.pp-device__screen > img {
  display: block;
  width: 100%;
  height: auto;
}
.pp-capture__caption {
  max-width: 60ch;
  margin: var(--space-caption) 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}

/* ─── Cards ──────────────────────────────────────────────────────────────────────────── */
.pp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp-cards--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pp-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: var(--pad-card);
  border: 1px solid var(--pp-rim);
  border-radius: var(--r-28);
  background: var(--surface);
  box-shadow: var(--e-raised-lg);
}
.pp-card h3 {
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.pp-card p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-17);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
.pp-card__meta {
  order: -1;
  color: var(--ink);
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: var(--lh-ui);
}
.pp-card .pp-facts {
  margin: 4px 0 0;
  gap: 8px;
}
.pp-card .pp-facts > li {
  color: var(--ink-secondary);
  font-size: var(--fs-15);
}
.pp-card .text-link {
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: var(--lh-ui);
}
.pp-card .icon-disc {
  order: -2;
}
/* A glyph soft.css's icon disc does not name yet; the file ships in /icons/. */
.icon-disc[data-icon='rotate-ccw'] {
  --icon: url('/icons/rotate-ccw.svg');
}

/* ─── Sports: the eight sports' posters, still ──────────────────────────────── */
.pp-sports {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp-sport {
  margin: 0;
}
.pp-sport__window {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-16);
  background: var(--graphite);
  box-shadow: var(--e-raised-sm);
  overflow: hidden;
}
.pp-sport__window::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--e-window);
  pointer-events: none;
}
.pp-sport__window > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp-sport figcaption {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: var(--lh-ui);
}

/* ─── Promise panel (/safety/ hero) ──────────────────────────────────────────────────── */
.pp-promises {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 12px 28px;
  border: 1px solid var(--pp-rim);
  border-radius: var(--r-40);
  background: var(--surface);
  box-shadow: var(--e-raised-lg);
  list-style: none;
}
.pp-promises > li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  padding: 18px 0;
}
.pp-promises > li + li {
  border-top: 1px solid var(--border);
}
.pp-promises p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
.pp-promises a {
  display: inline-block;
  color: var(--ink);
  font-size: var(--fs-17);
  font-weight: 600;
  line-height: var(--lh-ui);
}

/* ─── Questions ─────────────────────────────────────────────────────────────────────── */
.pp-faq {
  align-items: start;
}
.pp-faq__aside {
  grid-column: 1 / 6;
  min-width: 0;
}
.pp-faq__aside h2 {
  margin: 0;
}
.pp-faq__aside p {
  max-width: 40ch;
  margin: var(--space-head) 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-17);
  line-height: var(--lh-prose);
}
.pp-faq .faq-list {
  grid-column: 7 / 13;
  min-width: 0;
}
.pp-faq .faq-answer p + p {
  margin-top: 12px;
}

/* Short laptop screens (720-800px tall): a split's lede and points step down one size so
   the copy column stays as tall as its capture, inside one view. */
@media (min-width: 761px) and (max-height: 800px) {
  .pp-split__copy .chapter-lede {
    font-size: var(--fs-17);
  }
  .pp-split .pp-facts > li {
    font-size: var(--fs-15);
  }
  .pp-split .pp-facts {
    gap: 8px;
  }
  .pp-split .pp-capture {
    --show-d: 600;
  }
}

/* ─── Tablet and phone ──────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .pp-sports {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .pp-cards--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .pp-hero__copy,
  .pp-hero__stage,
  .pp-split__copy,
  .pp-split__stage,
  .pp-split--flip .pp-split__copy,
  .pp-split--flip .pp-split__stage,
  .pp-faq__aside,
  .pp-faq .faq-list {
    grid-column: 1 / -1;
  }
  .pp-split--flip .pp-split__stage {
    grid-row: auto;
  }
  /* Phones read a chapter as headline, line, screen, then its labels. */
  .pp-split {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .pp-split__copy {
    display: contents;
  }
  .pp-split__copy > h2 {
    order: 0;
  }
  .pp-split__copy > .chapter-lede {
    order: 1;
  }
  .pp-split .pp-split__stage {
    order: 2;
    margin-top: var(--space-lede);
  }
  .pp-split__copy > .pp-facts {
    order: 3;
    margin-top: var(--space-block);
  }
  .pp-split__copy > .pp-note {
    order: 4;
  }
  .pp-hero__stage {
    margin-top: var(--space-block);
  }
  .pp-split__copy .chapter-lede {
    font-size: var(--fs-17);
  }
  .pp-capture__well {
    --device-w: 232px;
    --show: var(--show-m, 340);
    --fade: 64px;
  }
  .pp-hero__stage .pp-capture {
    --show-m: 250;
  }
  /* Phones: a card group is one snapping row, the next card peeking at the edge, so a
     section stays near one screen tall (the fit rule) instead of stacking three or four
     cards. The row is focusable (tabindex in the markup) so a keyboard can scroll it; the
     padding keeps the cards' raised shadows inside the row's clip. */
  .pp-cards,
  .pp-cards--2 {
    --shadow-room: 16px;
    display: flex;
    gap: var(--grid-gap);
    margin-inline: -20px;
    margin-bottom: calc(-1 * var(--shadow-room));
    padding: var(--shadow-room) 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }
  .pp-cards::-webkit-scrollbar {
    display: none;
  }
  .pp-cards > .pp-card {
    flex: 0 0 min(84%, 320px);
    box-shadow: var(--e-raised-sm);
    scroll-snap-align: start;
  }
  /* The sport posters are a row too. */
  .pp-sports[tabindex] {
    --shadow-room: 12px;
    display: flex;
    gap: 12px;
    max-width: none;
    margin-inline: -20px;
    margin-bottom: calc(-1 * var(--shadow-room));
    padding: var(--shadow-room) 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }
  .pp-sports[tabindex]::-webkit-scrollbar {
    display: none;
  }

  .pp-sports[tabindex] > li {
    flex: 0 0 96px;
    scroll-snap-align: start;
  }
  .pp-sports[tabindex]:focus-visible {
    outline-offset: -3px;
    border-radius: var(--r-16);
  }
  .pp-cards:focus-visible {
    outline-offset: -3px;
    border-radius: var(--r-28);
  }
  .pp-sports {
    gap: 10px;
  }
  .pp-sport figcaption {
    margin-top: 6px;
    font-size: var(--fs-13);
  }
  /* The hero's four promises keep their headings on phones; their lines and the sections
     below say the rest, so the hero stays near one screen. */
  .pp-promises p {
    display: none;
  }
  .pp-promises > li {
    align-items: center;
  }
  .pp-promises {
    padding: 4px 20px;
    border-radius: var(--r-28);
  }
  .pp-promises > li {
    column-gap: 12px;
    padding: 14px 0;
  }
  .pp-faq .faq-list {
    margin-top: var(--space-lede);
  }
  /* A scroller's padding is room for its cards' shadows, not space: the gap above it is
     taken back from the step that precedes it. */
  .product-page .chapter-head + :is(.pp-cards, .pp-sports[tabindex]) {
    margin-top: calc(var(--space-lede) - var(--shadow-room));
  }
  .product-page .chapter-head:not(:has(> .chapter-lede)) + :is(.pp-cards, .pp-sports[tabindex]) {
    margin-top: calc(var(--space-head) - var(--shadow-room));
  }
}