:root {
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--v2-onyx); color: var(--v2-text-on-dark); }
a { color: inherit; text-decoration: none; }
/* Regular always. Emphasis is carried by colour and rules, never by weight. */
strong, b, th { font-weight: var(--v2-weight); }
button, select, input, textarea { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--v2-mauve); outline-offset: 3px; }
.ltv2-nav :focus-visible, .ltv2-section--light :focus-visible, .pp-drawer :focus-visible { outline-color: var(--v2-slate-blue); }
::selection { background: var(--v2-mauve); color: var(--v2-onyx); }

/* The brandbook field: 40px margins at 1920, capped at 1300px. */
.pp-container { width: min(100% - 2 * var(--v2-grid-margin), var(--v2-field-max)); margin: 0 auto; }
.pp-banner { background: var(--v2-onyx); border-bottom: 1px solid var(--v2-border-on-dark); }
.pp-banner[hidden] { display: none; }
.pp-banner__inner { min-height: 40px; display: flex; align-items: center; justify-content: center; position: relative; }
.pp-banner__content { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: var(--v2-space-16); min-width: 0; }
.pp-banner .ltv2-annotation { white-space: nowrap; }
.pp-banner__claim { font-size: var(--v2-text-sm); }
.pp-banner__dismiss { position: absolute; right: 0; top: 0; width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--v2-dusk); font-size: 22px; cursor: pointer; transition: color 200ms var(--v2-ease-out); }
.pp-banner__dismiss:hover { color: var(--v2-text-on-dark); }
/* Header and footer are the shared .ltv2-nav / .ltv2-footer system now
   (brand-v2/assets/components.css), matched to LatentWeb--Sep70. */
.pp-page .ltv2-nav { border-bottom: 1px solid rgba(19, 18, 21, 0.12); }

/* Hero. Light, per Brand Guide frame Latent_Proposal_036: the headline sits on
   Off White with the split below it, a hairline drawing the field down the
   left margin from the nav to the plate. */
.pp-hero { padding: var(--v2-space-96) 0 var(--v2-space-128); overflow: clip; }
.pp-featured { position: relative; }
.pp-featured::before { content: ""; position: absolute; left: 0; top: -100vh; bottom: calc(-1 * var(--v2-space-128)); width: 1px; background: var(--pp-rule); }
.pp-hero__title, .pp-hero__support { margin-inline-start: var(--v2-grid-gutter); }
.pp-hero__title { max-width: 22ch; margin-block: 0; text-wrap: balance; }
.pp-hero__support { max-width: 44ch; margin-block: var(--v2-space-24) 0; color: var(--v2-text-secondary); font-size: var(--v2-p1); line-height: var(--v2-leading-body); }
.ltv2-eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--v2-space-8); }
.pp-hero .ltv2-eyebrow strong { color: var(--v2-text-primary); }

/* The featured split — Brand Guide Latent_Proposal_036.
   Four of six columns carry the visual plate; the last two carry the 01-04
   progression. The active step holds its copy and pushes the remaining steps
   to the foot of the column, which is how the frame reads. */
.pp-featured { --pp-rule: rgba(19, 18, 21, 0.12); --pp-rule-strong: rgba(19, 18, 21, 0.24); --pp-num: 1.75rem; --pp-muted: rgba(19, 18, 21, 0.42); margin-top: var(--v2-space-64); }
.pp-split { position: relative; display: grid; grid-template-columns: repeat(var(--v2-grid-columns), minmax(0, 1fr)); column-gap: var(--v2-grid-gutter); border-bottom: 1px solid var(--pp-rule); }
/* The rule above the split runs the full viewport, not just the field. */
.pp-split::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; border-top: 1px solid var(--pp-rule); transform: translateX(-50%); pointer-events: none; }
/* 4:3 is the floor; page.js sizes the step column to its tallest story once,
   so the plate holds one height whichever step is open. */
.pp-split__visual { position: relative; grid-column: span 4; min-width: 0; border-right: 1px solid var(--pp-rule); }
.pp-split__visual::after { content: ""; position: absolute; right: -1px; bottom: 100%; width: 1px; height: 100vh; background: var(--pp-rule); }
.pp-split__visual::before { content: ""; display: block; padding-top: 75%; }
/* The brand halftone plate, at its own dot pitch — never rescaled off it. */
.pp-split__field { position: absolute; inset: 0; overflow: hidden; background: var(--v2-amethyst, #3D2B60) url("assets/split-halftone-field.webp") center / cover no-repeat; }
.pp-split__aurora { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.pp-split__field { background-image: -webkit-image-set(url("assets/split-halftone-field-1280.webp") 1x, url("assets/split-halftone-field.webp") 2x); background-image: image-set(url("assets/split-halftone-field-1280.webp") 1x, url("assets/split-halftone-field.webp") 2x); }
/* Plates that are not live also drop out of the tab order and the hit test, not only out of view. */
.pp-split__plate { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; opacity: 0; visibility: hidden; transition: opacity 900ms var(--v2-ease-out), visibility 0s 900ms; }
.pp-split__plate.is-live { opacity: 1; visibility: visible; transition-delay: 0s; }
/* The link is the centred grid item; Chromium does not centre a display: contents picture. */
.pp-split__link { display: block; width: 67%; }
.pp-split__link:focus-visible { outline-offset: 6px; }
.pp-split__plate picture { display: block; }
.pp-makers__portrait picture { display: contents; }
.pp-split__plate img { display: block; width: 100%; height: auto; box-shadow: 0 24px 64px rgba(10, 10, 10, 0.5); transform: translateY(12px) scale(0.985); transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1); }
.pp-split__plate.is-live img { transform: none; }
.pp-split__plate.is-live .pp-split__link:hover img { transform: translateY(-4px); }
.pp-split__steps { display: flex; flex-direction: column; grid-column: span 2; min-width: 0; padding: var(--v2-space-24) 0 var(--v2-space-24) var(--v2-space-32); }
.pp-split__step { order: 2; }
.pp-split__step + .pp-split__step { margin-top: var(--v2-space-12); }
.pp-split__step:not(.is-live) { margin-left: calc(-1 * var(--v2-space-32)); padding: var(--v2-space-16) 0 0 var(--v2-space-32); border-top: 1px solid var(--pp-rule); }
.pp-split__step.is-live { order: 1; flex: 1 1 auto; margin: 0 0 var(--v2-space-32); }
.pp-split__heading { margin: 0; }
.pp-split__trigger { display: grid; grid-template-columns: var(--pp-num) minmax(0, 1fr); align-items: start; width: 100%; padding: 0; border: 0; background: transparent; color: var(--pp-muted); text-align: left; cursor: pointer; }
.pp-split__num { font: var(--v2-mono-l2) / var(--v2-mono-l2-lh) var(--v2-font-mono); letter-spacing: var(--v2-tracking-mono); transform: translateY(0.5em); }
.pp-split__title { font-size: var(--v2-s2); font-weight: var(--v2-weight); line-height: var(--v2-s2-lh); letter-spacing: var(--v2-tracking-display); text-wrap: balance; transition: font-size 600ms var(--v2-ease-out), line-height 600ms var(--v2-ease-out); }
.pp-split__step:not(.is-live) .pp-split__title { font-size: calc(var(--v2-s2) * 0.68); line-height: 1.1; }
.pp-split__step:not(.is-live) .pp-split__trigger { opacity: 0.8; }
.pp-split__step.is-live .pp-split__trigger { color: var(--v2-text-primary); }
.pp-split__trigger:hover { color: var(--v2-text-primary); }
.pp-split__copy { --pp-inset: calc(var(--v2-space-32) + var(--pp-num) + var(--v2-space-4)); margin-left: calc(-1 * var(--v2-space-32)); margin-top: var(--v2-space-16); }
.pp-split__copy > * { padding-left: var(--pp-inset); }
.pp-split__copy .ltv2-eyebrow { padding-bottom: var(--v2-space-16); border-bottom: 1px solid var(--pp-rule); }
.pp-split__line, .pp-split__quote cite, .pp-split__meta, .pp-split__cta { max-width: 46ch; }
.pp-split__line { display: block; }
.pp-split__step.is-live .pp-split__copy { animation: pp-fade 800ms 120ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes pp-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pp-split__quote { margin: var(--v2-space-16) 0 0; padding-bottom: var(--v2-space-16); border-bottom: 1px solid var(--pp-rule); font-size: var(--v2-p2); line-height: var(--v2-p1-lh); color: var(--v2-text-primary); }
.pp-split__quote cite { display: block; margin-top: var(--v2-space-8); font-size: var(--v2-text-sm); line-height: var(--v2-leading-body); color: var(--v2-text-secondary); }
.pp-split__meta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--v2-space-8); margin: var(--v2-space-16) 0 0; }
.pp-split__stat { display: inline-flex; max-width: 100%; align-items: baseline; gap: var(--v2-space-8); padding: var(--v2-space-8) var(--v2-space-12); border: 1px solid var(--v2-taupe); border-radius: var(--v2-radius-xs); background: var(--v2-platinum); color: var(--v2-text-secondary); font: var(--v2-mono-l2) / var(--v2-mono-l2-lh) var(--v2-font-mono); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; }
.pp-split__stat strong { color: var(--v2-text-primary); font-weight: var(--v2-weight); white-space: nowrap; }
.pp-split__cta { width: fit-content; margin-top: var(--v2-space-16); }
.pp-split__cta span, .pp-close .ltv2-btn span, .pp-drawer .ltv2-btn span { font-size: 1.2em; }
.pp-split__cta span { transition: transform 320ms var(--v2-ease-out); }
.pp-split__cta:hover span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .pp-split__plate, .pp-split__plate img, .pp-split__title, .pp-split__cta span { transition: none; }
  .pp-split__step.is-live .pp-split__copy { animation: none; }
}

.pp-proof { border-top: 1px solid var(--v2-border-on-dark); border-bottom: 1px solid var(--v2-border-on-dark); padding: var(--v2-space-48) 0; }
/* Logo marquee, the Home mechanics: four copies of the set slide one set per cycle,
   edges fade out, and --marquee-start (set by page.js) lands the lead logo at the centre.
   The band sits below the fold, so it holds that frame until it scrolls into view. */
.pp-proof__logos {
  height: 54px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--v2-onyx) 12%, var(--v2-onyx) 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, var(--v2-onyx) 12%, var(--v2-onyx) 88%, transparent 100%);
}
.pp-proof__track { display: flex; height: 100%; width: max-content; transform: translate3d(var(--marquee-start, 0px), 0, 0); animation: pp-marquee 48s linear infinite paused; }
.pp-proof__track.is-running { animation-play-state: running; }
.pp-proof__set { display: flex; align-items: center; height: 100%; }
.pp-proof__set > * { flex: none; padding-inline: 30px; display: grid; place-items: center; }
.pp-proof__track img { width: auto; }
.pp-proof__track img.pp-proof__raster { filter: brightness(0) invert(1); }
@keyframes pp-marquee { to { transform: translate3d(calc(var(--marquee-start, 0px) - 25%), 0, 0); } }
@media (prefers-reduced-motion: reduce) { .pp-proof__track { animation: none; } }

/* Change Makers. The film's own specimen language on a dark field: four
   corner marks, a dashed crosshair that draws on reveal then springs after
   the cursor, a coordinate readout and a decoding subject tag over the
   portrait; a ruled roster of the four leaders beside it. */
.pp-makers { --pp-paper: var(--v2-off-white); padding: var(--v2-space-96) 0 var(--v2-space-128); border-bottom: 1px solid var(--v2-border-on-dark); }
.pp-makers__head { display: grid; gap: var(--v2-space-24); }
.pp-makers__head .ltv2-eyebrow { margin: 0; }
.pp-makers__title { margin: 0; text-wrap: balance; }
.pp-makers__title span { display: block; color: var(--v2-dusk); }
.pp-makers__dek { margin: 0; max-width: 44ch; color: var(--v2-dusk); font-size: var(--v2-p1); line-height: var(--v2-leading-body); }
.pp-makers__grid { display: grid; grid-template-columns: repeat(var(--v2-grid-columns), minmax(0, 1fr)); column-gap: var(--v2-grid-gutter); margin-top: var(--v2-space-64); padding-top: var(--v2-space-32); border-top: 1px solid var(--v2-border-on-dark); }
.pp-makers__portrait { position: relative; grid-column: span 4; aspect-ratio: 16 / 9; min-width: 0; background: var(--v2-onyx); }
.pp-makers__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 700ms var(--v2-ease-out); }
.pp-makers__still.is-live { opacity: 1; }
/* the whole portrait is the invitation: click anywhere to watch with sound */
.pp-makers__watch { position: absolute; inset: 0; z-index: 4; cursor: pointer; background: none; border: 0; padding: 0; }
.pp-makers__watch:focus-visible { outline: 2px solid var(--v2-mauve); outline-offset: -4px; }
/* cursor viewfinder, the Change Makers hero watch tag: corner brackets with a play glyph, label riding above */
.pp-makers__tag { position: fixed; z-index: 9100; left: var(--x, 50vw); top: var(--y, 50vh); display: none; pointer-events: none; }
.pp-makers__tagframe {
  --wc: color-mix(in srgb, var(--v2-off-white) 92%, transparent);
  position: absolute; left: 0; top: 0; width: 84px; aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.82); opacity: 0;
  transition: transform 340ms var(--v2-ease-out), opacity 260ms ease;
  background:
    linear-gradient(var(--wc), var(--wc)) left 0 top 0 / 16px 1px,
    linear-gradient(var(--wc), var(--wc)) left 0 top 0 / 1px 16px,
    linear-gradient(var(--wc), var(--wc)) right 0 top 0 / 16px 1px,
    linear-gradient(var(--wc), var(--wc)) right 0 top 0 / 1px 16px,
    linear-gradient(var(--wc), var(--wc)) left 0 bottom 0 / 16px 1px,
    linear-gradient(var(--wc), var(--wc)) left 0 bottom 0 / 1px 16px,
    linear-gradient(var(--wc), var(--wc)) right 0 bottom 0 / 16px 1px,
    linear-gradient(var(--wc), var(--wc)) right 0 bottom 0 / 1px 16px;
  background-repeat: no-repeat;
}
.pp-makers__tagframe::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid var(--wc); }
.pp-makers__taglabel { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-42px - 100% - 1px)); background: var(--v2-off-white); color: var(--v2-onyx); padding: 3px 9px; white-space: nowrap; font-family: var(--v2-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity 260ms ease 80ms; }
@media (hover: hover) and (pointer: fine) {
  .pp-makers__tag { display: block; }
  .pp-makers__portrait:hover .pp-makers__tagframe { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .pp-makers__portrait:active .pp-makers__tagframe { transform: translate(-50%, -50%) scale(.9); transition-duration: 140ms; }
  .pp-makers__portrait:hover .pp-makers__taglabel { opacity: 1; }
  .pp-makers__portrait:hover .pp-makers__watch { cursor: none; }
}
@media (prefers-reduced-motion: reduce) { .pp-makers__tagframe, .pp-makers__taglabel { transition: opacity 200ms ease; } }
.pp-makers__player { position: absolute; inset: 0; z-index: 5; display: none; background: var(--v2-deep-black); }
.pp-makers__player mux-player { width: 100%; height: 100%; --media-object-fit: cover; }
.pp-makers__portrait.is-playing .pp-makers__player { display: block; }
.pp-makers__portrait.is-playing .pp-makers__watch, .pp-makers__portrait.is-playing .pp-makers__tag, .pp-makers__portrait.is-playing .pp-lens, .pp-makers__portrait.is-playing .pp-frame { display: none; }
.pp-lens { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pp-lens__vt, .pp-lens__ht { position: absolute; will-change: transform; }
.pp-lens__vt { left: 17.98%; top: 0; width: 1px; height: 100%; }
.pp-lens__ht { top: 75.83%; left: 0; right: 0; height: 1px; }
.pp-lens__v, .pp-lens__h { display: block; width: 100%; height: 100%; opacity: 0.8; }
.pp-lens__v { background-image: repeating-linear-gradient(to bottom, var(--pp-paper) 0 3px, transparent 3px 6px); transform: scaleY(0); transform-origin: top; transition: transform 900ms var(--v2-ease-out) 350ms; }
.pp-lens__h { background-image: repeating-linear-gradient(to right, var(--pp-paper) 0 3px, transparent 3px 6px); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--v2-ease-out) 450ms; }
.pp-makers__portrait.is-in .pp-lens__v { transform: scaleY(1); }
.pp-makers__portrait.is-in .pp-lens__h { transform: scaleX(1); }
.pp-frame { position: absolute; inset: -14px; pointer-events: none; }
.pp-frame > i { position: absolute; width: 22px; height: 22px; opacity: 0.5; }
.pp-frame > i::before, .pp-frame > i::after { content: ""; position: absolute; background: var(--pp-paper); }
.pp-frame > i::before { width: 100%; height: 1px; }
.pp-frame > i::after { width: 1px; height: 100%; }
.pp-frame > i:nth-child(1) { top: 0; left: 0; }
.pp-frame > i:nth-child(2) { top: 0; right: 0; transform: scaleX(-1); }
.pp-frame > i:nth-child(3) { bottom: 0; left: 0; transform: scaleY(-1); }
.pp-frame > i:nth-child(4) { bottom: 0; right: 0; transform: scale(-1); }
.pp-frame__tag, .pp-frame__coord { position: absolute; font: var(--v2-mono-l2) / 1.3 var(--v2-font-mono); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; white-space: pre; }
.pp-frame__tag { top: -8px; left: 30px; padding: 2px 8px; background: var(--pp-paper); color: var(--v2-text-primary); }
.pp-frame__coord { top: calc(14px + var(--v2-space-24)); right: calc(14px + var(--v2-space-24)); color: var(--pp-paper); opacity: 0.7; letter-spacing: 0; text-transform: none; }
.pp-makers__dossier { display: flex; flex-direction: column; grid-column: span 2; min-width: 0; padding-left: var(--v2-space-32); border-left: 1px solid var(--v2-border-on-dark); }
.pp-makers__quotes { flex: 1 1 auto; }
.pp-makers__quote { margin: 0; font-size: var(--v2-p1); line-height: var(--v2-p1-lh); text-wrap: pretty; }
.pp-makers__quote:not([hidden]) { animation: pp-fade 700ms 80ms var(--v2-ease-out) both; }
.pp-makers__roster { list-style: none; margin: var(--v2-space-32) 0 0; padding: 0; border-top: 1px solid var(--v2-border-on-dark); }
.pp-makers__roster li { border-bottom: 1px solid var(--v2-border-on-dark); }
.pp-makers__leader { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); row-gap: var(--v2-space-4); align-items: baseline; width: 100%; padding: var(--v2-space-12) 0; border: 0; background: transparent; color: var(--v2-dusk); text-align: left; cursor: pointer; transition: color var(--v2-dur-fast) var(--v2-ease-out); }
.pp-makers__leader:hover, .pp-makers__leader:focus-visible, .pp-makers__leader[aria-pressed="true"] { color: var(--v2-text-on-dark); }
.pp-makers__num { grid-row: 1 / span 3; align-self: start; font: var(--v2-mono-l2) / var(--v2-mono-l2-lh) var(--v2-font-mono); letter-spacing: var(--v2-tracking-mono); transform: translateY(0.35em); }
.pp-makers__leader[aria-pressed="true"] .pp-makers__num { color: var(--v2-mauve); }
.pp-makers__name { font-size: var(--v2-p1); line-height: var(--v2-p1-lh); letter-spacing: var(--v2-tracking-display); }
.pp-makers__role, .pp-makers__org { grid-column: 2; font: var(--v2-mono-l2) / var(--v2-mono-l2-lh) var(--v2-font-mono); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; color: var(--v2-text-on-dark-2); }
.pp-makers__foot { display: grid; justify-items: start; gap: var(--v2-space-16); margin-top: var(--v2-space-32); }
.pp-makers__cta { width: fit-content; }
.pp-makers__cta span { font-size: 1.2em; transition: transform 320ms var(--v2-ease-out); }
.pp-makers__cta:hover span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .pp-makers__still, .pp-lens__v, .pp-lens__h, .pp-makers__leader, .pp-makers__cta span { transition: none; }
  .pp-makers__quote:not([hidden]) { animation: none; }
}

.pp-stories { padding: var(--v2-space-96) 0 var(--v2-space-128); color: var(--v2-text-primary); }
.pp-stories__toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--v2-space-32); border-bottom: 1px solid var(--v2-border-on-light); padding-bottom: var(--v2-space-24); }
.pp-chips { display: flex; flex-wrap: wrap; gap: var(--v2-space-8); }
/* Chips take the nav CTA spec: Berkeley Mono caps, the live one filled Onyx, the rest a hairline ghost. */
.pp-chip { display: inline-flex; align-items: center; height: var(--v2-cta-height); padding-inline: var(--v2-cta-pad); border: 1px solid var(--v2-border-on-light); border-radius: var(--v2-radius-sm); background: transparent; color: var(--v2-text-primary); font: var(--v2-mono-l2) / 1 var(--v2-font-mono); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; cursor: pointer; }
.pp-chip:hover { background: var(--v2-platinum); }
.pp-chip[aria-pressed="true"] { background: var(--v2-light-lavender, #E2DFFF); color: var(--v2-text-primary); border-color: var(--v2-light-lavender, #E2DFFF); }
.pp-chip[aria-pressed="true"]:hover { background: var(--v2-pale, #D6C2FF); }
.pp-system { display: grid; gap: var(--v2-space-8); min-width: 220px; color: var(--v2-text-secondary); font: var(--v2-text-xs) / 1 var(--v2-font-mono); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; }
.pp-system select { min-height: 44px; padding: 0 var(--v2-space-40) 0 var(--v2-space-16); border: 1px solid var(--v2-taupe); border-radius: var(--v2-radius-sm); background: var(--v2-white-smoke) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2357505C' stroke-width='1.25'/%3E%3C/svg%3E") right var(--v2-space-16) center / 12px 8px no-repeat; color: var(--v2-text-secondary); font: var(--v2-mono-l2) / 1 var(--v2-font-mono); letter-spacing: var(--v2-tracking-mono); appearance: none; -webkit-appearance: none; cursor: pointer; }
.pp-system select:hover { background-color: var(--v2-platinum); }
.pp-empty { margin: var(--v2-space-48) 0; color: var(--v2-text-secondary); }
/* The story index: rows, not cards. A 3:2 cover plate (the same frame
   as the Blog index), title + the systems it features + category, then
   the proof, one outcome at a time, ruled off from each other. */
.pp-index { --pp-thumb: 240px; }
.pp-row { display: grid; grid-template-columns: var(--pp-thumb) minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--v2-grid-gutter); align-items: stretch; padding: var(--v2-space-24) 0; border-bottom: 1px solid var(--v2-border-on-light); color: var(--v2-text-primary); transition: opacity var(--v2-dur-base) var(--v2-ease-out), background-color var(--v2-dur-fast) var(--v2-ease-out); }
.pp-row[hidden] { display: none; }
.pp-row--out { opacity: 0; pointer-events: none; }
.pp-row:hover { background: var(--v2-white-smoke); }
.pp-row__thumb { display: block; align-self: start; width: var(--pp-thumb); aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--v2-border-on-light); background: var(--v2-white-smoke); }
.pp-row__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1200ms var(--v2-ease-out); }
.pp-row:hover .pp-row__thumb img { transform: scale(1.015); }
.pp-row__head { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--v2-space-24); min-width: 0; padding-top: 0.2em; }
.pp-row__head::before { content: ""; position: absolute; top: calc(-1 * var(--v2-space-24)); bottom: calc(-1 * var(--v2-space-24)); left: calc(-0.5 * var(--v2-grid-gutter)); border-left: 1px solid var(--v2-border-on-light); }
.pp-row__title { display: block; max-width: 26ch; font-size: var(--v2-s2); line-height: var(--v2-s2-lh); letter-spacing: var(--v2-tracking-display); text-wrap: balance; text-decoration: none; }
/* Every name carries a hairline on its left; the strip is pulled one
   step left and clipped, so the first name on each wrapped line loses
   its rule and lines up with the title. */
.pp-row__systems { display: flex; flex-wrap: wrap; align-self: stretch; row-gap: var(--v2-space-8); margin: calc(-1 * var(--v2-space-8)) 0 0 calc(-1 * var(--v2-space-12)); overflow: hidden; }
.pp-row__systems i { position: relative; display: inline-flex; align-items: center; margin-left: -1px; padding-inline: var(--v2-space-12); color: var(--v2-text-primary); font: var(--v2-mono-l2) / 1.4 var(--v2-font-mono); font-style: normal; letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; }
.pp-row__systems i::before { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 0.9em; background: var(--v2-border-on-light); transform: translateY(-50%); }
.pp-row__more { color: var(--v2-text-secondary); }
.pp-row__tags { display: flex; flex-wrap: wrap; gap: var(--v2-space-8); margin-top: auto; }
.pp-row__tags i { display: inline-flex; align-items: center; height: calc(var(--v2-cta-height) * 0.85); padding-inline: calc(var(--v2-cta-pad) * 0.85); border-radius: var(--v2-radius-sm); background: var(--v2-accent-well); color: var(--v2-text-primary); font: calc(var(--v2-mono-l2) * 0.85) / 1 var(--v2-font-mono); font-style: normal; letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; }
.pp-row__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--v2-space-16); min-width: 0; padding-top: 0.4em; }
/* Every outcome stays in the row (and in the link text); they share one
   cell so the row is sized by the tallest and only the live one shows. */
.pp-row__proof { display: grid; max-width: 24ch; }
.pp-row__stat { grid-area: 1 / 1; display: flex; flex-direction: column; color: var(--v2-text-secondary); font: var(--v2-mono-l2) / var(--v2-mono-l2-lh) var(--v2-font-mono); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; opacity: 0; transition: opacity var(--v2-dur-base) var(--v2-ease-out); }
.pp-row__stat.is-live { opacity: 1; }
.pp-row__stat strong { margin-bottom: var(--v2-space-8); color: var(--v2-text-primary); font: var(--v2-s2) / var(--v2-s2-lh) var(--v2-font-display); letter-spacing: var(--v2-tracking-display); text-transform: none; }
.pp-row__who { margin-top: var(--v2-space-4); color: var(--v2-text-primary); }
.pp-row__index { display: flex; align-items: center; gap: var(--v2-space-12); margin-top: auto; color: var(--v2-text-secondary); font: var(--v2-mono-l2) / 1 var(--v2-font-mono); letter-spacing: var(--v2-tracking-mono); }
.pp-row__dots { display: flex; gap: 7px; }
.pp-row__dots i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--v2-accent-well); transition: background-color var(--v2-dur-fast) var(--v2-ease-out); }
.pp-row__dots i::after { content: ""; position: absolute; inset: -9px; }
.pp-row__dots i:hover { background: var(--v2-accent-soft); }
.pp-row__dots i.is-on { background: var(--v2-slate-blue); }
.pp-split__quote cite { margin-top: var(--v2-space-12); }
.pp-close { position: relative; padding: var(--v2-space-128) 0; }
.pp-close .dveil { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.pp-close .dveil canvas { display: block; width: 100%; height: 100%; }
.pp-close .dveil--off { display: none; }
.pp-close__in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pp-close h2 { max-width: 20ch; margin: 0 0 var(--v2-space-32); color: var(--v2-off-white); text-wrap: balance; }

.pp-drawer__scrim { position: fixed; inset: 0; z-index: 29; background: var(--v2-onyx); opacity: 0; pointer-events: none; transition: opacity 280ms var(--v2-ease-out); }
.pp-drawer__scrim.pp-open { opacity: 0.6; pointer-events: auto; }
.pp-drawer__scrim[hidden] { display: block; opacity: 0; pointer-events: none; }
.pp-drawer { position: fixed; z-index: 30; inset: 0 0 0 auto; width: min(480px, 100%); overflow-y: auto; background: var(--v2-off-white); color: var(--v2-text-primary); transform: translateX(100%); transition: transform 340ms var(--v2-ease-out); }
.pp-drawer.pp-open { transform: translateX(0); }
.pp-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: var(--v2-space-32); border-bottom: 1px solid var(--v2-border-on-light); }
.pp-drawer__top > a { display: flex; }
.pp-drawer__logo { width: 118px; }
.pp-drawer__close { width: 44px; height: 44px; border: 1px solid var(--v2-taupe); border-radius: 0; background: transparent; color: var(--v2-text-primary); font-size: 24px; cursor: pointer; transition: background-color 200ms var(--v2-ease-out); }
.pp-drawer__close:hover { background: var(--v2-white-smoke); }
.pp-drawer__body { padding: var(--v2-space-48) var(--v2-space-32) var(--v2-space-64); }
.pp-drawer__body h2 { margin: var(--v2-space-16) 0 0; font-size: var(--v2-s1); line-height: var(--v2-s1-lh); text-wrap: balance; }
.pp-drawer__body > div > p, .pp-drawer__body form > p { color: var(--v2-text-secondary); line-height: var(--v2-leading-body); }
.pp-drawer__body form { display: grid; gap: var(--v2-space-8); margin-top: var(--v2-space-32); }
.pp-drawer__body label { margin-top: var(--v2-space-12); font: var(--v2-text-xs) / 1 var(--v2-font-mono); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; }
.pp-drawer__body label span { color: var(--v2-text-secondary); text-transform: lowercase; }
.pp-drawer__body input, .pp-drawer__body textarea { width: 100%; min-height: 44px; padding: var(--v2-space-12); border: 1px solid var(--v2-taupe); border-radius: 0; background: var(--v2-off-white); color: var(--v2-text-primary); }
.pp-drawer__body textarea { min-height: 100px; resize: vertical; }
.pp-drawer__body .ltv2-btn { width: fit-content; margin-top: var(--v2-space-16); }
.pp-drawer__error { min-height: 20px; margin: 0; color: var(--v2-slate-blue); font-size: var(--v2-text-sm); }
.pp-drawer__trust { margin-top: var(--v2-space-64); padding-top: var(--v2-space-24); border-top: 1px solid var(--v2-border-on-light); color: var(--v2-text-secondary); font: var(--v2-text-xs) / 1.4 var(--v2-font-mono); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; }
/* Hairline 2 x 4 grid. Wordmark heights come from sizes.css (measured cap
   height) times --logo-scale; the stacked marks and the raster Tower mark
   are sized to the logo playbook so they carry the same visual weight. */
.pp-drawer__logos { --logo-scale: 0.42; display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--v2-space-24); border-top: 1px solid var(--v2-border-on-light); border-left: 1px solid var(--v2-border-on-light); }
.pp-drawer__logos span { display: flex; align-items: center; justify-content: center; height: 72px; padding: 0 var(--v2-space-12); border-right: 1px solid var(--v2-border-on-light); border-bottom: 1px solid var(--v2-border-on-light); }
.pp-drawer__logos img { width: auto; max-width: 100%; object-fit: contain; filter: brightness(0); }
.pp-drawer__logos .logo--mayo-clinic { height: 28px; }
.pp-drawer__logos .logo--university-health-kc { height: 30px; }
.pp-drawer__logos .pp-logo-tower { height: 34px; }
.pp-drawer__done[hidden] { display: none; }

@media (max-width: 1024px) {
  .pp-index { --pp-thumb: 200px; }
  /* Two columns leave the plate nearly square, so the split stacks here
     rather than at the phone breakpoint. */
  .pp-split { grid-template-columns: 1fr; row-gap: var(--v2-space-32); }
  .pp-split__visual, .pp-split__steps { grid-column: span 1; }
  .pp-split__visual { border-right: 0; }
  .pp-split__visual::after, .pp-featured::before { display: none; }
  .pp-split__steps { padding: 0 0 var(--v2-space-32); }
  .pp-split__step:not(.is-live) { margin-left: 0; padding-left: 0; }
  .pp-split__copy { --pp-inset: calc(var(--pp-num) + var(--v2-space-4)); margin-left: 0; }
  .pp-split__step:not(.is-live) .pp-split__title { font-size: calc(var(--v2-s2) * 0.595); }
  .pp-makers__grid { row-gap: var(--v2-space-40); }
  .pp-makers__portrait, .pp-makers__dossier { grid-column: 1 / -1; }
  .pp-makers__dossier { padding-left: 0; border-left: 0; }
}

@media (max-width: 768px) {
  .pp-banner__inner { justify-content: flex-start; padding-right: 44px; }
  .pp-banner__content { justify-content: flex-start; }
  .pp-hero { padding-top: var(--v2-space-64); }
  .pp-split__link { width: 80%; }
  .pp-stories__toolbar { display: grid; align-items: start; }
  .pp-system { min-width: 0; }
  /* Two columns: the plate, then title and proof stacked beside it. */
  .pp-index { --pp-thumb: 180px; }
  .pp-row { grid-template-columns: var(--pp-thumb) minmax(0, 1fr); row-gap: var(--v2-space-16); }
  .pp-row__head, .pp-row__body { grid-column: 2; padding-top: 0; }
  .pp-row__head::before { display: none; }
  .pp-row__title { max-width: none; }
}

@media (max-width: 640px) {
  .pp-banner .ltv2-annotation { display: none; }
  .pp-banner__content { justify-content: center; }
  .pp-hero { padding-top: var(--v2-space-48); }
  .pp-featured { margin-top: var(--v2-space-40); }
  .pp-split { row-gap: var(--v2-space-24); }
  .pp-split__visual { overflow: hidden; }
  .pp-split__field { background-image: url("assets/split-halftone-field-1280.webp"); }
  .pp-proof__set > * { padding-inline: 20px; }
  /* On a phone the row becomes a stack: the plate across the field,
     then title, then the proof. */
  .pp-row { grid-template-columns: minmax(0, 1fr); }
  .pp-row__thumb { width: 100%; }
  .pp-row__head, .pp-row__body { grid-column: auto; }
  .pp-row__head { gap: var(--v2-space-16); }
  .pp-row__tags i { height: var(--v2-cta-height); padding-inline: var(--v2-cta-pad); font-size: var(--v2-mono-l2); }
  .pp-row__proof { max-width: none; }
  .pp-stories { padding-top: var(--v2-space-64); }
  .pp-close { padding: var(--v2-space-96) 0; }
  .pp-split__stat { display: flex; }
  .pp-drawer__top > a { min-height: 44px; align-items: center; }
}

/* The 01-04 progression runs as a rail across the whole field under the split;
   the right column carries only the live story, so the plate height is set by
   4:3 alone. The numeral lives on the rail, not in the column. */
.pp-rail .pp-split__step:not(.is-live) { display: none; }
.pp-rail .pp-split__step.is-live { display: flex; flex-direction: column; margin: 0; }
.pp-rail .pp-split__steps { justify-content: center; padding-block: var(--v2-space-40); }
.pp-rail .pp-split__trigger { grid-template-columns: minmax(0, 1fr); cursor: default; }
.pp-rail .pp-split__num { display: none; }
.pp-rail .pp-split__heading { order: 2; }
.pp-rail .pp-split__copy { --pp-inset: 0; display: contents; margin: 0; }
.pp-rail .pp-split__copy > * { padding-left: 0; }
.pp-rail .pp-split__copy .ltv2-eyebrow { order: 1; flex-wrap: nowrap; align-items: flex-start; margin-bottom: var(--v2-space-16); padding-bottom: 0; border-bottom: 0; font-size: calc(var(--v2-mono-l2) * 0.85); }
.pp-rail .pp-split__copy .ltv2-eyebrow::before { flex: none; margin-top: calc((1lh - var(--v2-dot-size)) / 2); }
.pp-rail .pp-split__copy .ltv2-eyebrow strong { min-width: 0; }
.pp-rail .pp-split__quote { position: relative; order: 3; margin-top: var(--v2-space-32); padding: var(--v2-space-24) 0 0 var(--v2-space-24); border-top: 1px solid var(--pp-rule); border-bottom: 0; font-size: var(--v2-p1); line-height: var(--v2-p1-lh); color: var(--v2-text-secondary); }
.pp-rail .pp-split__quote::before { content: "\201C"; position: absolute; left: 0; top: var(--v2-space-24); color: var(--v2-slate-blue); font: var(--v2-s2) / 1 var(--v2-font-display); }
.pp-rail .pp-split__line { display: block; }
.pp-rail .pp-split__quote cite { margin-top: var(--v2-space-16); }
.pp-split__name { display: block; font-size: var(--v2-text-sm); line-height: var(--v2-leading-body); color: var(--v2-text-primary); }
.pp-split__role, .pp-split__org { display: block; font: var(--v2-mono-l2) / var(--v2-mono-l2-lh) var(--v2-font-mono); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; color: var(--v2-text-secondary); }
.pp-split__role { margin-top: var(--v2-space-4); }
.pp-rail .pp-split__meta { order: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v2-space-24); margin-top: var(--v2-space-32); padding-top: var(--v2-space-24); border-top: 1px solid var(--pp-rule); }
.pp-rail .pp-split__stat { display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 0; background: transparent; }
.pp-rail .pp-split__stat strong { margin-bottom: var(--v2-space-8); font: var(--v2-s2) / var(--v2-s2-lh) var(--v2-font-display); letter-spacing: var(--v2-tracking-display); white-space: normal; }
.pp-rail .pp-split__cta { order: 5; margin-top: var(--v2-space-32); padding-left: 1.5rem; }
.pp-rail__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--pp-rule); }
.pp-rail__item { position: relative; display: grid; grid-template-columns: var(--pp-num) minmax(0, 1fr); align-items: start; gap: 0; padding: var(--v2-space-20) var(--v2-space-24) var(--v2-space-24); border: 0; border-top: 1px solid var(--pp-rule); background: transparent; color: var(--pp-muted); text-align: left; cursor: pointer; }
.pp-rail__item + .pp-rail__item { border-left: 1px solid var(--pp-rule); }
.pp-rail__item::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--v2-text-primary); transform: scaleX(0); transform-origin: left; }
.pp-rail__item.is-live::before { animation: pp-rail-fill 8000ms linear both; }
.pp-rail .pp-featured:hover .pp-rail__item.is-live::before { animation-play-state: paused; }
@keyframes pp-rail-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pp-rail__num, .pp-rail__title { font: var(--v2-mono-l2) / var(--v2-mono-l2-lh) var(--v2-font-mono); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; }
.pp-rail__item.is-live, .pp-rail__item:hover { color: var(--v2-text-primary); }
@media (max-width: 1024px) {
  .pp-rail__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-rail__item:nth-child(3) { border-left: 0; }
}
@media (max-width: 640px) {
  .pp-rail .pp-split__steps { padding-block: var(--v2-space-16) var(--v2-space-32); }
  .pp-rail .pp-split__copy .ltv2-eyebrow { font-size: var(--v2-mono-l2); }
  /* One action per screen: the story link sits under its title, ahead of the quote and stats. */
  .pp-rail .pp-split__cta { order: 2; margin-top: var(--v2-space-20); }
  .pp-rail__nav { grid-template-columns: 1fr; }
  .pp-rail__item + .pp-rail__item { border-left: 0; }
  /* Stories do not rotate on a phone, so the live rule is a still. */
  .pp-rail__item.is-live::before { animation: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
  .pp-row--out { opacity: 1; }
  .pp-row:hover .pp-row__thumb img { transform: none; }
  .pp-rail__item.is-live::before { transform: none; }
}

@media (pointer: coarse) {
  .pp-split__trigger { min-height: 44px; }
  /* Chips keep their 36px face; the hit area grows to 44px. */
  .pp-chip { position: relative; }
  .pp-chip::before { content: ""; position: absolute; inset: -5px 0; }
  /* iOS Safari zooms the page when a focused control is under 16px. */
  .pp-system select { font-size: var(--v2-text-base); }
}