/* DANA Onboarding, on the case study system.
   Shared patterns come from ../case-study.css (see DESIGN.md). This file
   holds only this page's one-offs:
     - the hero filmstrip of the six shipped screens
     - the conversion funnel and its three leaks
     - the five studies on a 2020 -> 2024 track
     - one anatomy for all six screens, with the sticky mini filmstrip
       whose marker follows the screen being read (onboarding-registration.js)
     - the OTP vendor panel, the phone-input pairs, the arrival strip */

/* ---------- hero filmstrip ---------- */

.ob-film { margin: 0; }
.ob-film__frames {
  list-style: none;
  margin: 0;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  border-radius: var(--cs-radius);
  background: var(--cs-surface);
}
/* the image is centred in its slot and the label pinned to the bottom, so
   labels share one baseline even when a source screen is a few px taller */
.ob-film__frame { min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; justify-items: center; align-items: center; }
/* height is a ceiling, not a fixed size: when the column is narrower than
   the screen at that height, a fixed height plus max-width squashed it */
.ob-film__frame img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(280px, calc(100svh - 470px), 430px);
  border-radius: var(--cs-radius-inner);
}
.ob-film__frame span { font-size: 13px; font-weight: 700; color: var(--ink); text-align: center; }
.ob-film > figcaption { margin-top: 12px; font-size: var(--cs-type-caption); color: var(--ink-muted); }

/* ---------- the funnel, as 100 people ----------
   The page has two real numbers, everyone who started and the ~51.3% who
   finished, so the chart is a unit grid of 100: 51 ink marks, 49 hollow
   rings, filled column by column so the two halves read as one split.
   The three leaks below are the suspected reasons for the hollow half.
   Hovering a half is pure CSS (:has); nothing hides or moves, and the
   text above already states every number. */

.ob-funnel { margin: var(--cs-block-gap) 0; }
.ob-funnel__chart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "start end"
    "people people"
    "key key";
  align-items: end;
  row-gap: 16px;
}
.cs-chapter .ob-funnel__start {
  grid-area: start;
  margin: 0;
  font-size: var(--cs-type-label);
  font-weight: 700;
  color: var(--ink);
}
.cs-chapter .ob-funnel__end {
  grid-area: end;
  display: grid;
  justify-items: end;
  margin: 0;
  font-size: var(--cs-type-caption);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-muted);
}
.ob-funnel__value {
  font-family: "Tanker", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: var(--cs-type-evidence);
  line-height: 0.84;
  letter-spacing: 0.012em;
  color: var(--ink);
}

/* each cell is the hover target and the mark is drawn inside it, so the
   pointer never falls through a gap and the halves don't flicker */
/* --ob-pull widens the grid by each dot's inset in its cell (24% of a
   cell, 20 columns), so the outer dots sit on the text edges above and
   below: 0.24 / 20 / (1 - 2 x 0.24 / 20) of the column, each side */
.ob-people {
  --ob-pull: 1.23%;
  grid-area: people;
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin-inline: calc(-1 * var(--ob-pull));
}
.ob-people i {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}
.ob-people i::before,
.ob-people__key span::before {
  content: "";
  display: block;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-sizing: border-box;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.ob-people .is-kept::before,
.ob-people__key .is-kept::before { background: var(--ink); }
.ob-people .is-lost::before,
.ob-people__key .is-lost::before { border: 2px solid var(--ink-muted); }

.cs-chapter .ob-people__key {
  grid-area: key;
  display: flex;
  gap: 22px;
  margin: 0;
  font-size: var(--cs-type-caption);
  font-weight: 600;
  color: var(--ink-muted);
}
.ob-people__key span { display: inline-flex; align-items: center; gap: 8px; }
.ob-people__key span::before { width: 12px; }
.ob-people__key .is-lost::before { border-width: 2px; }

/* hover the hollow half: its rings and the three suspected leaks go to
   full ink while the finished half steps back; hover the finished half
   and the hollow rings fade instead */
.ob-funnel .ob-funnel__value,
.ob-funnel .ob-funnel__leaks h3,
.ob-funnel .ob-funnel__leaks p { transition: color 120ms ease; }
.ob-funnel:has(.ob-people .is-lost:hover) .ob-people .is-lost::before { border-color: var(--ink); }
.ob-funnel:has(.ob-people .is-lost:hover) .ob-people .is-kept::before { background: var(--ink-faint); }
.ob-funnel:has(.ob-people .is-lost:hover) .ob-funnel__value { color: var(--ink-muted); }
.cs-chapter .ob-funnel:has(.ob-people .is-lost:hover) .ob-funnel__leaks p { color: var(--ink); }
.ob-funnel:has(.ob-people .is-kept:hover) .ob-people .is-lost::before { border-color: var(--ink-faint); }
.ob-funnel:has(.ob-people .is-kept:hover) .ob-funnel__leaks h3 { color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) {
  .ob-people i::before,
  .ob-funnel .ob-funnel__value,
  .ob-funnel .ob-funnel__leaks h3,
  .ob-funnel .ob-funnel__leaks p { transition: none; }
}
.ob-funnel__leaks {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.ob-funnel__leaks h3 {
  margin: 0 0 8px;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cs-chapter .ob-funnel__leaks p { margin: 0; font-size: var(--cs-type-small); line-height: 1.6; }
.ob-funnel > figcaption { margin-top: 22px; font-size: var(--cs-type-caption); color: var(--ink-muted); }

/* ---------- the five studies, 2020 -> 2024 ---------- */

.ob-studies {
  position: relative;
  list-style: none;
  margin: var(--cs-block-gap) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.ob-studies::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 24px;
  height: 4px;
  border-radius: 4px;
  background: var(--stroke);
}
.ob-study { min-width: 0; }
.cs-chapter .ob-study__year {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-right: 12px;
  background: var(--bg);
  font-family: "Tanker", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: var(--cs-type-seq);
  line-height: 0.9;
  letter-spacing: 0.012em;
  color: var(--ink-faint);
}
.ob-study:last-child .ob-study__year { color: var(--ink); }
.cs-chapter .ob-study__date { margin: 12px 0 4px; font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.ob-study h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.35; color: var(--ink); }
.cs-chapter .ob-study > p:not(.ob-study__year):not(.ob-study__date) { margin: 0; font-size: 14.5px; line-height: 1.6; }
.ob-study__found {
  margin-top: 16px;
  padding: 16px 16px 18px;
  border-radius: 16px;
  background: var(--cs-surface);
}
.ob-study__found h4 { margin: 0 0 6px; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.ob-study__found h4 + p { margin-top: 0; }
.ob-study__found p + h4 { margin-top: 16px; }
.cs-chapter .ob-study__found p { margin: 0; font-size: 14px; line-height: 1.55; }
.cs-chapter .ob-study__found .ob-study__stat { margin-top: 8px; font-weight: 700; color: var(--ink); }

.ob-health { margin-top: 64px; max-width: 40rem; }
.ob-health h3 { margin: 0 0 10px; font-size: var(--cs-type-card); letter-spacing: -0.01em; color: var(--ink); }
.ob-health p:not(.cs-verdict) { margin: 0; }

/* ---------- six screens, one anatomy ---------- */

/* the mini filmstrip: sticks under the nav while the six screens pass */
.ob-thumbs {
  position: sticky;
  top: 100px;
  z-index: 3;
  margin: 40px 0 8px;
  padding: 12px 0 10px;
  background: var(--bg);
}
.ob-thumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.ob-thumbs a {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding-bottom: 12px;
  text-decoration: none;
  color: var(--ink-muted);
}
.ob-thumbs img { display: block; height: 62px; width: auto; border-radius: 6px; }
.ob-thumbs span { font-size: 13px; font-weight: 600; text-align: center; line-height: 1.2; }
.ob-thumbs a:hover,
.ob-thumbs a[aria-current="true"] { color: var(--ink); }
.ob-thumbs a[aria-current="true"] span { font-weight: 700; }
.ob-thumbs__marker {
  position: absolute;
  left: 0;
  bottom: 6px;
  width: calc((100% - 50px) / 6);
  height: 3px;
  border-radius: 3px;
  background: var(--ink);
  transform: translateX(calc(var(--ob-i, 0) * (100% + 10px)));
}
/* the page's one motion: the marker steps to the screen being read */
@media (prefers-reduced-motion: no-preference) {
  .ob-thumbs__marker { transition: transform 320ms cubic-bezier(0.2, 0.75, 0.2, 1); }
}

.ob-screen {
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding-top: 56px;
  scroll-margin-top: 196px;
}
.ob-screen__shot img { cursor: zoom-in; }
.ob-screen h3 { margin: 6px 0 18px; font-size: var(--cs-type-sub); letter-spacing: -0.01em; color: var(--ink); }
.ob-rail { margin: 0; display: grid; gap: 10px; }
.ob-rail > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--cs-surface);
}
.ob-rail dt { font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.ob-rail dd { margin: 0; font-size: var(--cs-type-small); line-height: 1.6; color: var(--ink-muted); }

/* ---------- OTP vendors and phone input pairs ---------- */

.ob-vendors__sets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  gap: 24px;
  align-items: end;
}
.ob-vendors__sets div { display: flex; gap: 8px; justify-content: center; }
.ob-vendors__sets img { display: block; width: calc(50% - 4px); height: auto; border-radius: 10px; cursor: zoom-in; }
.ob-vendors__sets li:last-child img { width: 100%; max-width: 180px; }
.ob-vendors__sets span { display: block; margin-top: 10px; font-size: var(--cs-type-caption); font-weight: 700; text-align: center; color: var(--ink); }

.ob-pairs__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.ob-pair__shots { display: flex; align-items: center; gap: 10px; }
.ob-pair__shots img { display: block; width: calc(50% - 27px); height: auto; border-radius: 10px; cursor: zoom-in; }
.ob-pair__arrow {
  flex: none;
  width: 34px;
  height: 14px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cs-chapter .ob-pair p { margin: 12px 0 0; font-size: var(--cs-type-caption); line-height: 1.5; color: var(--ink-muted); }

/* ---------- the arrival strip ---------- */

.ob-arrive__title { margin: 0 0 10px; font-size: var(--cs-type-sub); letter-spacing: -0.01em; color: var(--ink); }
.ob-arrive {
  position: relative;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
/* one track through the strip, so the six screens read as one journey */
.ob-arrive::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 150px;
  height: 4px;
  border-radius: 4px;
  background: var(--ink);
}
.ob-arrive__step { position: relative; min-width: 0; }
.ob-arrive .cs-frame { padding: 8px 8px 10px; }
.ob-arrive .cs-frame img { border-radius: 10px; }
.cs-chapter .ob-arrive__name { margin: 12px 0 2px; font-size: 15px; font-weight: 700; color: var(--ink); }
.cs-chapter .ob-arrive__fixed { margin: 0 0 6px; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.cs-chapter .ob-arrive__line { margin: 0; font-size: 13.5px; line-height: 1.55; }

.cs-chapter > .ob-baseline {
  max-width: 34rem;
  margin: 56px 0 0;
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink);
}

.cs .ob-cta svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* view transition: only the title flies in; the hero holds no home art */
@media (prefers-reduced-motion: no-preference) {
  .onboarding-page .cs-facts__project { view-transition-name: vt-title-onboard; }
  .onboarding-page .cs-hero__pitch { view-transition-name: vt-sub-onboard; }
}

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .ob-studies { gap: 12px; }
  .ob-arrive::before { top: 128px; }
}

@media (max-width: 1023px) {
  .ob-film__frames { grid-template-columns: repeat(6, 150px); overflow-x: auto; scroll-snap-type: x mandatory; }
  .ob-film__frame { scroll-snap-align: start; }
  .ob-film__frame img { height: 300px; }

  .ob-studies { grid-template-columns: 1fr; gap: 28px; }
  .ob-studies::before { left: 26px; right: auto; top: 8px; bottom: 8px; width: 4px; height: auto; }
  .ob-study { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; }
  .ob-study__year { grid-row: span 5; align-self: start; padding: 0 0 8px; font-size: 40px; }
  .ob-study__date { margin-top: 2px; }

  .ob-arrive { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .ob-arrive::before { display: none; }
}

@media (max-width: 760px) {
  .ob-film__frames { grid-template-columns: repeat(6, 130px); padding: 12px; gap: 10px; }
  .ob-film__frame img { height: 260px; }

  .ob-people { --ob-pull: 2.53%; grid-template-rows: repeat(10, auto); }
  .ob-funnel__leaks { grid-template-columns: 1fr; gap: 20px; }

  .ob-thumbs { top: 84px; }
  .ob-thumbs ol { gap: 4px; }
  .ob-thumbs__marker { width: calc((100% - 20px) / 6); transform: translateX(calc(var(--ob-i, 0) * (100% + 4px))); }
  .ob-thumbs img { height: 44px; }
  .ob-thumbs span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ob-thumbs a { padding-bottom: 14px; }

  .ob-screen { grid-template-columns: 1fr; gap: 20px; padding-top: 48px; scroll-margin-top: 170px; }
  .ob-screen__shot { max-width: 240px; }
  .ob-rail > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }

  .ob-vendors__sets { grid-template-columns: 1fr; gap: 20px; }
  .ob-vendors__sets img { width: calc(50% - 4px); max-width: 150px; }
  .ob-vendors__sets li:last-child img { max-width: 150px; width: calc(50% - 4px); }

  .ob-pairs__row { grid-template-columns: 1fr; gap: 24px; }

  .ob-arrive { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; row-gap: 24px; }
}