/* assets/rn/pages/prototypes.css — Prototypes (3-approach-prototypes). Linked LAST on prototypes.html.
   The studio family: --rn-signal is lime (tokens.css). Lime marks the H1's one word, eyebrow dots, the status dots,
   the recorded-prototype bar and the band's emphasis and USE dot; red appears nowhere outside the footer rule.
   A calm lab: no perpetual loops. The stage is a still composition whose three screens arrive once; every card gets a
   one-shot media reveal (the card rises in, its picture settles from 104% on the CAM spring) and the shared spring
   hover and press; the speed comparison draws its two bars to length, the benchmark first, then the lime one.
   Transform and opacity only; final states under reduced motion and html[data-motion=paused] (motion.css).

   1. Hero and stage     3. Speed comparison     5. Closing band
   2. Catalogue          4. Audit strip          6. Motion                                                        */

body.studio-prototypes-page {
  /* The 88px grid, as the hero and the closing band draw it: the hero's --rn-grid-line on ink, 4.5% ink on paper. */
  --pp-grid-ink: linear-gradient(var(--rn-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--rn-grid-line) 1px, transparent 1px);
  --pp-grid-paper: linear-gradient(rgba(9, 11, 13, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(9, 11, 13, 0.045) 1px, transparent 1px);
  --pp-bench: var(--rn-bench);
}

/* 1. Hero and stage ───────────────────────────────────────────────────────────────────────────────────────────
   The copy on the left; on the right a still lab window: ink-soft, a 1px ring, radius 20 and the 88px grid, holding
   three screens (radius 12, a ring each, a pill label) laid flat and slightly overlapped. No blur, no colour wash, no
   orbit or readout, nothing moving once they have landed. */
.pp-hero {
  min-height: 0;
  padding: calc(var(--rn-header-top) + var(--rn-header-h) + clamp(40px, 6vw, 96px)) 0 clamp(56px, 7vw, 112px);
  border-bottom: 1px solid var(--rn-ring);
  background-color: var(--rn-ink);
}

.pp-hero::before {
  opacity: 1;
  background-image: var(--pp-grid-ink);
  background-size: var(--rn-grid) var(--rn-grid);
  background-position: -1px -1px;
}

.pp-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--rn-space-7) clamp(40px, 5vw, 80px);
}

.pp-hero-copy h1 {
  max-width: 6em;
  margin: var(--rn-space-5) 0 0;
  color: var(--rn-text-on-ink);
}

.pp-hero-copy h1 em {
  display: block;
}

.pp-hero-lede {
  max-width: 30em;
  margin: var(--rn-space-5) 0 0;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-lead)/var(--rn-lh-lead) var(--rn-font-body);
}

.pp-hero-copy .rn-actions {
  margin-top: var(--rn-space-6);
}

.pp-hero .studio-text-link {
  color: var(--rn-text-on-ink);
}

.pp-stage {
  position: relative;
  aspect-ratio: 6 / 5;
  overflow: hidden;
  border: 1px solid var(--rn-ring);
  border-radius: var(--rn-radius-card);
  background-color: var(--rn-ink-soft);
  background-image: var(--pp-grid-ink);
  background-size: var(--rn-grid) var(--rn-grid);
  background-position: -1px -1px;
}

.pp-stage-list {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-screen {
  position: absolute;
}

.pp-screen.is-top {
  z-index: 1;
  top: 7%;
  right: 6%;
  width: 46%;
}

.pp-screen.is-main {
  z-index: 2;
  top: 29%;
  left: 6%;
  width: 60%;
}

.pp-screen.is-bottom {
  z-index: 3;
  right: 7%;
  bottom: 7%;
  width: 40%;
}

/* The screen in hand comes to the front, so its focus ring and corners are never under a neighbour. */
.pp-screen:has(> a:focus-visible) {
  z-index: 4;
}

@media (hover: hover) {
  .pp-screen:has(> a:hover) {
    z-index: 4;
  }
}

.pp-screen > a {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--rn-radius-media);
  background: var(--rn-ink);
  box-shadow: 0 0 0 1px var(--rn-ring);
  color: var(--rn-text-on-ink);
  text-decoration: none;
  transition-property: translate, scale, box-shadow;
  transition-duration: var(--rn-dur-snap);
  transition-timing-function: var(--rn-ease-snap);
}

.pp-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--rn-dur-ui) var(--rn-ease-ui);
}

.pp-screen-label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 20px);
  min-height: 26px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid var(--rn-ring);
  border-radius: var(--rn-radius-pill);
  background: var(--rn-ink);
  font: 500 var(--rn-fs-label)/1.1 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
  white-space: nowrap;
}

/* The top screen's lower left sits under the main screen, so its label moves to the lower right. */
.pp-screen.is-top .pp-screen-label {
  right: 10px;
  left: auto;
}

.pp-screen > a:focus-visible {
  outline: var(--rn-focus-outline);
  outline-offset: var(--rn-focus-offset);
  box-shadow: var(--rn-focus-band);
}

@media (hover: hover) {
  .pp-screen > a:hover {
    box-shadow: 0 0 0 1px var(--rn-muted-on-ink);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pp-screen > a:hover {
    translate: 0 -2px;
  }

  .pp-screen > a:hover img {
    scale: 1.02;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pp-screen > a:active {
    scale: 0.99;
  }
}

/* 2. Catalogue ────────────────────────────────────────────────────────────────────────────────────────────────
   Paper on the 88px grid. Static jump chips (never sticky), three groups (h3) and one card surface: paper-hi, a
   hairline ring, radius 20, equal heights per row, the picture at 16:10 with one status chip (lime dot, no pulse) and
   one action cue at the foot of the caption. No number badges, no scrims, no words over the artwork. */
.pp-catalogue {
  padding-block: var(--rn-section);
  background-color: var(--rn-paper);
  background-image: var(--pp-grid-paper);
  background-size: var(--rn-grid) var(--rn-grid);
  background-position: -1px -1px;
  color: var(--rn-text-on-paper);
}

.pp-catalogue-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: var(--rn-space-5) clamp(40px, 6vw, 96px);
}

.pp-catalogue-head h2 {
  margin: var(--rn-space-4) 0 0;
}

.pp-catalogue-head > p {
  max-width: 40ch;
  margin: 0;
  color: var(--rn-muted-on-paper);
  font: 500 var(--rn-fs-body-lg)/1.55 var(--rn-font-body);
}

.pp-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rn-space-2);
  margin-top: var(--rn-space-6);
}

.pp-jump .rn-chip {
  background: var(--rn-paper-hi);
}

.pp-jump .rn-chip > span[aria-hidden] {
  color: var(--rn-muted-on-paper);
  font: 500 var(--rn-fs-label)/1 var(--rn-font-mono);
}

.pp-group {
  margin-top: clamp(56px, 7vw, 96px);
  scroll-margin-top: var(--rn-header-clearance);
}

.pp-jump + .pp-group {
  margin-top: clamp(40px, 5vw, 64px);
}

.pp-group-head {
  display: grid;
  grid-template-columns: minmax(8rem, 3fr) minmax(0, 7fr) auto;
  align-items: baseline;
  gap: var(--rn-space-2) var(--rn-space-5);
  margin-bottom: var(--rn-space-5);
  padding-top: var(--rn-space-5);
  border-top: 1px solid var(--rn-line-strong-on-paper);
}

.pp-group-head h3 {
  margin: 0;
  font-size: var(--rn-fs-h3);
}

.pp-group-head p {
  max-width: 52ch;
  margin: 0;
  color: var(--rn-muted-on-paper);
}

.pp-group-count {
  color: var(--rn-muted-on-paper);
  font: 500 var(--rn-fs-label)/1.3 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.pp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--rn-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-card {
  --rn-card-bg: var(--rn-paper-hi);
  --rn-card-ring: rgba(9, 11, 13, 0.12);
  --rn-card-ring-hover: var(--rn-line-strong-on-paper);
  --rn-text: var(--rn-text-on-paper);
  --rn-muted: var(--rn-muted-on-paper);
}

.pp-card .rn-media {
  background: var(--rn-ink);
}

/* The status chip sits on artwork, so it is solid ink with the ring and paper text; its dot is the lime signal. It
   sits in the lower left, like the stage labels, because the game captures carry their HUD (score, lives) along the
   top edge. */
.pp-card .rn-media > .rn-chip {
  top: auto;
  bottom: 14px;
  left: 14px;
  border-color: var(--rn-ring);
  background: var(--rn-ink);
  color: var(--rn-text-on-ink);
}

.pp-card .rn-card-body {
  gap: var(--rn-space-2);
  padding: clamp(20px, 2.2vw, 28px);
}

.pp-card .rn-card-title {
  font-size: var(--rn-fs-title);
}

.pp-card .rn-card-body > p:not(.rn-card-kicker) {
  max-width: 48ch;
}

.pp-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rn-text-on-paper);
  font: 700 var(--rn-fs-small)/1.2 var(--rn-font-body);
}

.pp-cue > [aria-hidden="true"] {
  display: inline-block;
  transition: translate var(--rn-dur-snap) var(--rn-ease-snap);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pp-card:hover .pp-cue > [aria-hidden="true"] {
    translate: 2px -2px;
  }
}

/* Press: the whole card gives a little under the finger (motion.css 6 has the same for [data-rn-lift]). */
@media (prefers-reduced-motion: no-preference) {
  .pp-card:active {
    scale: 0.995;
  }
}

/* 3. Speed comparison ─────────────────────────────────────────────────────────────────────────────────────────
   Moved from Approach, like for like: one published agency process to first concepts (3-5 weeks, the benchmark grey)
   against one recorded prototype to a first working version (3 hours, lime, tagged Example). The bars are to scale on
   a 5-week track at 40 working hours a week: the grey bar is solid to 3 weeks and outlined and hatched from 3 to 5
   (the range), so the range never reads as empty track; 3 hours is 1.5%. */
.pp-speed {
  padding-block: var(--rn-section);
  background-color: var(--rn-stage);
  background-image: var(--pp-grid-ink);
  background-size: var(--rn-grid) var(--rn-grid);
  background-position: -1px -1px;
  color: var(--rn-text-on-ink);
}

.pp-speed-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: var(--rn-space-5) clamp(40px, 6vw, 96px);
  margin-bottom: clamp(48px, 6vw, 88px);
}

.pp-speed-head h2 {
  max-width: 12ch;
  margin: var(--rn-space-4) 0 0;
}

.pp-speed-head > p {
  max-width: 42ch;
  margin: 0;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-body-lg)/1.55 var(--rn-font-body);
}

.pp-speed-figure {
  margin: 0;
}

.pp-speed-row {
  display: grid;
  grid-template-columns: minmax(170px, 15rem) minmax(0, 1fr) minmax(150px, 13rem);
  align-items: center;
  gap: var(--rn-space-3) clamp(20px, 3vw, 40px);
  padding-block: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--rn-ring);
}

.pp-speed-label,
.pp-speed-value {
  display: grid;
  gap: 6px;
  margin: 0;
}

.pp-speed-label strong,
.pp-speed-value strong {
  color: var(--rn-text-on-ink);
  font: 700 var(--rn-fs-title)/1.2 var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
}

.pp-speed-value strong {
  font-size: var(--rn-fs-h3);
  font-variant-numeric: tabular-nums;
}

.pp-speed-label > span,
.pp-speed-value > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-label)/1.3 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.pp-speed-value {
  justify-items: end;
  text-align: right;
}

.pp-speed-value > span {
  justify-content: flex-end;
}

.pp-speed-track {
  position: relative;
  height: 18px;
  overflow: hidden;
  border-radius: var(--rn-radius-pill);
  background: var(--rn-ink-soft);
  box-shadow: inset 0 0 0 1px var(--rn-ring);
}

.pp-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  border-radius: var(--rn-radius-pill);
}

.pp-bar.is-agency {
  width: 100%;
  background: linear-gradient(90deg, var(--pp-bench) 60%, transparent 60%);
}

.pp-bar.is-agency::after {
  position: absolute;
  inset: 0 0 0 60%;
  border-radius: 0 var(--rn-radius-pill) var(--rn-radius-pill) 0;
  background: repeating-linear-gradient(-45deg, rgba(74, 80, 86, 0.7) 0 1.5px, transparent 1.5px 6px);
  box-shadow: inset 0 0 0 1.5px var(--pp-bench);
  content: "";
}

.pp-bar.is-proto {
  width: max(1.5%, 8px);
  background: var(--rn-lime);
}

.pp-speed-row:last-of-type {
  border-bottom: 1px solid var(--rn-ring);
}

.pp-speed-figure figcaption {
  max-width: 78ch;
  padding-block: var(--rn-space-5) 0;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-small)/1.6 var(--rn-font-body);
}

.pp-speed-figure figcaption a {
  color: var(--rn-text-on-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.pp-speed-figure figcaption a:hover {
  text-decoration-thickness: 2px;
}

/* 4. Audit strip ──────────────────────────────────────────────────────────────────────────────────────────────
   A slim hairline strip after the lab's story (catalogue, then its one piece of evidence) for the visitor whose
   problem is paid media: compact H2, one line, one link. Paper, like the closing band's field, so the band's ink card
   still closes the page; the strip is a footnote, not a second band. */
.pp-audit-strip {
  padding-block: var(--rn-section-tight) 0;
  background: var(--rn-paper);
  color: var(--rn-text-on-paper);
}

.pp-audit-strip-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) auto;
  align-items: center;
  gap: var(--rn-space-4) clamp(32px, 4vw, 64px);
  padding-top: var(--rn-space-6);
  border-top: 1px solid var(--rn-line-strong-on-paper);
}

.pp-audit-strip h2 {
  max-width: 20ch;
  margin: 0;
  font-size: var(--rn-fs-h2-sm);
}

.pp-audit-strip-grid > .studio-text-link {
  justify-self: start;
}

.pp-audit-strip p {
  max-width: 44ch;
  margin: 0;
  color: var(--rn-muted-on-paper);
}

/* 5. Closing band ──────────────────────────────────────────────────────────────────────────────────────────────
   The shared rn-band with the principle folded in: the H2's emphasis in lime, one sentence, the four-step idea loop as
   a still row with one lime dot on USE, and one button. */
.rn-band .studio-cta-grid > div:first-child > p:not(.studio-kicker) {
  margin: var(--rn-space-5) 0 0;
}

.pp-loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rn-space-2) 0;
  margin: var(--rn-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.pp-loop > li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-label)/1 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label-wide);
  text-transform: uppercase;
}

.pp-loop > li + li::before {
  width: clamp(20px, 3vw, 40px);
  height: 1px;
  margin-inline: 12px;
  background: var(--rn-ring);
  content: "";
}

.pp-loop > li.is-now {
  color: var(--rn-text-on-ink);
}

.pp-loop > li.is-now::after {
  order: -1;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rn-lime);
  content: "";
}

.pp-loop > li.is-now::before {
  order: -2;
}

/* Breakpoints ─────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .pp-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pp-group-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pp-group-head p {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 900px) {
  .pp-hero-grid,
  .pp-catalogue-head,
  .pp-speed-head,
  .pp-audit-strip-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pp-hero-copy h1 {
    max-width: none;
  }

  .pp-speed-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pp-speed-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 640px) {
  .pp-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pp-stage {
    aspect-ratio: 1 / 1;
  }

  .pp-screen.is-top { top: 6%; right: 5%; width: 58%; }
  .pp-screen.is-main { top: 33%; left: 5%; width: 72%; }
  .pp-screen.is-bottom { right: 5%; bottom: 6%; width: 50%; }

  .pp-screen-label {
    bottom: 8px;
    left: 8px;
  }

  /* On a phone the main screen covers the top screen's lower edge: its label moves to the top. */
  .pp-screen.is-top .pp-screen-label {
    top: 8px;
    right: 8px;
    bottom: auto;
    left: auto;
  }

  .pp-loop > li + li::before {
    width: 12px;
    margin-inline: 8px;
  }
}

/* 6. Motion ──────────────────────────────────────────────────────────────────────────────────────────────────────
   Stage screens land on their beats: the frame fades and rises (UI spring) while the picture settles from 104%
   (components.css 5). Inside a card, the card itself rises in, so its media frame drops its own fade and keeps
   only the settle. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="paused"]) .pp-screen > a[data-rn-reveal="media"].is-visible:not(.rn-shown) {
    animation:
      rn-reveal-fade var(--rn-dur-fade) var(--rn-ease-critical) backwards,
      rn-reveal-rise var(--rn-dur-ui) var(--rn-ease-ui) backwards;
    animation-delay: var(--rn-delay, 0ms);
  }
}

html.js .pp-card .rn-media[data-rn-reveal="media"]:not(.lux-hero *) {
  opacity: 1;
}

html.js .pp-card .rn-media[data-rn-reveal="media"].is-visible:not(.lux-hero *) {
  animation: none;
}