/* Points as a scroll section (site.mjs pointScroll, js/point-scroll.js). On
   computers with the script the section pins while you scroll through it:
   every point's title stays in the list on the left, the point you have
   scrolled to is dark and opens its line, and its picture shows in the
   frame on the right. Each point takes --per of scrolling; the script sets
   the rows so the list never moves. Without the script and on phones the
   points stack, each picture under its words. */

.ps-pin { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1120px; margin: 0 auto; }
.ps-step { padding-top: 40px; }
.ps-step:first-child { padding-top: 0; }
.ps-title { font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); }
.ps-body p { margin-top: 10px; max-width: 32ch; color: var(--ink-3); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; }
.ps-art { min-width: 0; margin-top: 24px; display: flex; justify-content: center; }

/* The pictures beside the points (moved here from the timed list,
   2026-10-18). A recording in the computer's frame (as on How it works). */
.pt-rec { width: 100%; max-width: 640px; }
.pt-rec video, .pt-rec img { display: block; width: 100%; height: auto; border-radius: calc(var(--r) - var(--frame)); background: #fff; }
/* The frame's own color behind a recording: its box can be a fraction of a pixel taller than the picture, and a white background showed as a hairline along the bottom (2026-10-23). */
.pt-rec video { background: #1A1A1E; }
/* A recording made on Spark's phone at every screen size (the Spark page). */
.pt-rec.pt-phone { max-width: 240px; }
/* A message to Spark and its answer (the industry pages). */
.pt-spark { width: 100%; max-width: 520px; }
.pt-spark .sc-ex { width: min(400px, 100%); }
/* Two asks at once: the cards already say Applied, so Spark's replies are
   left out to keep the picture no taller than the phone beside it. */
.pt-spark.pt-two { gap: 22px; }
.pt-spark.pt-two .sc-them { display: none; }
@media (max-width: 640px) { .pt-rec:not(:has(img)) { --r: 36px !important; max-width: min(280px, 78vw); } }

@media (min-width: 861px) {
  .ps { --frame-h: min(540px, calc(100svh - var(--nav-h) - 80px)); --per: 60svh; }
  .ps.js-on { height: calc(var(--frame-h) + (var(--n) - 1) * var(--per)); }
  .ps.js-on .ps-pin { position: sticky; top: calc(var(--nav-h) + (100svh - var(--nav-h) - var(--frame-h)) / 2); height: var(--frame-h); grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-rows: var(--ps-rows); column-gap: clamp(32px, 6vw, 96px); }
  .ps.js-on .ps-step { position: relative; grid-column: 1; grid-row: var(--row); padding: 22px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
  /* The title is a button (js/point-scroll.js) that covers its whole row. */
  .ps-btn { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
  .ps-btn::after { content: ''; position: absolute; inset: 0; }
  .ps-btn:focus-visible { outline: none; }
  .ps-step:has(.ps-btn:focus-visible) { outline: 2px solid var(--purple); outline-offset: 4px; border-radius: 8px; }
  .ps.js-on .ps-step:first-child { border-top: 1px solid var(--line); }
  .ps.js-on .ps-title { font-size: clamp(20px, 1.9vw, 24px); letter-spacing: -0.025em; line-height: 1.2; color: var(--ink-4); transition: color 0.25s ease; }
  .ps.js-on .ps-step:hover .ps-title { color: var(--ink-3); }
  .ps.js-on .ps-step.is-active .ps-title { color: var(--ink); }
  .ps.js-on .ps-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
  .ps.js-on .ps-body p { overflow: hidden; margin-top: 0; max-width: none; font-size: 17px; }
  .ps.js-on .ps-step.is-active .ps-body { grid-template-rows: 1fr; }
  .ps.js-on .ps-step.is-active .ps-body p { padding-top: 8px; }
  .ps.js-on .ps-art { grid-column: 2; grid-row: 1 / -1; margin: 0; align-items: center; opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.985); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s; }
  .ps.js-on .ps-art.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  /* No picture grows taller than the frame (short laptop screens). */
  .ps.js-on .ps-art .pic { width: auto; max-height: var(--frame-h); object-fit: contain; }
  /* The two asks (Spark page) shrink a little on short screens to fit. */
  @media (max-height: 620px) { .ps.js-on .pt-two { zoom: 0.92; } }
  /* The phone recording never grows taller than the frame. */
  .ps.js-on .pt-phone { max-width: min(240px, calc((var(--frame-h) - 14px) * 780 / 1688)); }
}

@media (prefers-reduced-motion: reduce) {
  .ps-title, .ps-body, .ps-art { transition: none !important; }
}