/* Additional page-specific styles from the developer package. */

/* the-pulse */
/* =============================================================================
   SHARED SITE CSS · copied unchanged from the homepage (Website/index.html).
   On WordPress this is already in the theme (lbnz.css). Skip to
   "THE PULSE · new components" for the only new styles.
   ============================================================================= */
/* Hallmark · genre: editorial · macrostructure: Manifesto · theme: custom (LBNZ brand-locked) · v5 "glass film"
 * One fixed photographic stage dissolves between scenes; every content block is a glass panel over it.
 * The receipt is the one paper object. Motion: RISE (masks) · PRINT (receipt) · FILL (56 circles) · DISSOLVE (stage).
 */

/* ---- Klyno ------------------------------------------------------------ */
@font-face { font-family: "Klyno"; src: url("../assets/fonts/Klyno-Light.woff2") format("woff2");     font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Klyno"; src: url("../assets/fonts/Klyno-Regular.woff2") format("woff2");   font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Klyno"; src: url("../assets/fonts/Klyno-Medium.woff2") format("woff2");    font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Klyno"; src: url("../assets/fonts/Klyno-SemiBold.woff2") format("woff2");  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Klyno"; src: url("../assets/fonts/Klyno-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* ---- Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { overflow-x: clip; scroll-behavior: smooth; font-variant-numeric: tabular-nums; }
body {
  overflow-x: clip;
  background: var(--color-navy);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--color-accent); color: var(--color-navy); }
img, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
.on-light, .on-light * { --color-focus: var(--color-ink); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: var(--space-md); top: -4rem;
  background: var(--color-navy); color: var(--color-paper);
  padding: var(--space-sm) var(--space-md); z-index: 600;
  text-decoration: none; font-weight: 600; white-space: nowrap;
  transition: top var(--dur-micro) var(--ease-out);
}
.skip:focus-visible { top: var(--space-md); }

.max { width: 100%; max-width: 76rem; margin-inline: auto; }
.measure { max-width: var(--measure); font-weight: 500; color: var(--color-paper); }
.dim { color: var(--color-ivory-dim); }
/* Klyno's comma sits small and high; give it a touch more presence in prose */
.js .cm { font-size: 1.18em; line-height: 0; }

h1, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  overflow-wrap: break-word;
  min-width: 0;
  text-wrap: balance;
}
h1 { font-size: var(--display-1); letter-spacing: var(--track-1); line-height: 1.02; }
h2 { font-size: var(--display-2); letter-spacing: var(--track-2); line-height: 1.06; }
h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); }
strong { font-weight: 600; color: var(--color-paper); }

/* Masked line reveal: the page's one display gesture */
.mask { display: block; overflow: clip; padding-block: 0.08em; margin-block: -0.08em; }
.mask > b { display: block; font-weight: inherit; }

/* ---- The stage: one film, dissolving between scenes -------------------- */
.stage { position: fixed; inset: 0; z-index: -1; overflow: clip; background: var(--color-navy); }
.stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  filter: saturate(0.8) contrast(1.06) brightness(0.9);
  transition: opacity 1100ms var(--ease-in-out);
}
.stage img.is-active { opacity: 1; }
.stage::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, oklch(20% 0.035 233.4 / 0.62) 0%, oklch(20% 0.035 233.4 / 0.3) 55%, oklch(20% 0.035 233.4 / 0.2) 100%),
    linear-gradient(to top, oklch(20% 0.035 233.4 / 0.9) 0%, oklch(20% 0.035 233.4 / 0.42) 45%, oklch(20% 0.035 233.4 / 0.45) 100%);
}

/* ---- Glass: the interface layer ---------------------------------------- */
.glass {
  background: var(--color-navy-2);
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--ivory-ghost), 0 24px 60px oklch(17.4% 0.0017 17.3 / 0.35);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .glass {
    background: oklch(24% 0.042 233.4 / 0.66);
    -webkit-backdrop-filter: blur(24px) saturate(1.15);
    backdrop-filter: blur(24px) saturate(1.15);
  }
  @media (max-width: 40rem) { .glass { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } }
}
.glass--pad { padding: clamp(1.25rem, 3vw, 2.5rem); }

/* ---- Nav: a glass bar, always over film -------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky);
  padding: calc(var(--space-sm) + env(safe-area-inset-top, 0px)) max(var(--page-gutter), env(safe-area-inset-right, 0px)) var(--space-sm) max(var(--page-gutter), env(safe-area-inset-left, 0px));
  background: var(--glass-dark-strong);
  box-shadow: 0 1px 0 var(--ivory-ghost);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav { background: oklch(24% 0.044 233.4 / 0.72); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); }
}
.nav__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); }
.nav__brand { display: flex; align-items: center; gap: var(--space-md); min-width: 0; }
.nav__brand img { height: clamp(2.3rem, 5vw, 2.9rem); width: auto; }
.nav__brand .inz { height: clamp(1.7rem, 3.6vw, 2.1rem); }
.nav__brand i { width: 1px; height: 2rem; background: var(--rule-on-dark); }
.nav__progress {
  position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: var(--color-accent);
  transform-origin: left; transform: scaleX(0);
}
.nav__links { display: none; gap: var(--space-lg);
  margin-inline-start: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
}
.nav__links a { position: relative; color: var(--color-paper); text-decoration: none; white-space: nowrap; padding-block: 0.25rem; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-short) var(--ease-out);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after, .nav__links a[aria-current]::after { transform: none; }
@media (min-width: 64rem) { .nav__links { display: flex; } }
.nav__actions { display: flex; align-items: center; gap: var(--space-xs); flex: 0 0 auto; }
/* Phones and tablets: a menu button opens the section links as a sheet under the bar */
.nav__menu {
  display: grid; place-content: center; gap: 4px; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1.5px solid var(--rule-on-dark); border-radius: 50%; background: none; cursor: pointer;
}
.nav__menu i { display: block; width: 1.1rem; height: 2px; border-radius: 1px; background: var(--color-paper); transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.nav.is-open .nav__menu i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__menu i:nth-child(2) { opacity: 0; }
.nav.is-open .nav__menu i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav__menu:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.nav__links-signup { display: none; }
@media (max-width: 63.99rem) {
  .nav.is-open .nav__links {
    display: grid; position: absolute; left: 0; right: 0; top: 100%;
    padding: var(--space-xs) var(--page-gutter) var(--space-lg);
    background: var(--scrim-strong); box-shadow: 0 1px 0 var(--ivory-ghost) inset, 0 24px 48px oklch(17.4% 0.0017 17.3 / 0.45);
  }
  .nav.is-open .nav__links a { font-size: var(--text-lg); padding: var(--space-sm) 0; border-bottom: var(--rule-w) solid var(--ivory-ghost); }
  .nav.is-open .nav__links a::after { display: none; }
  .nav.is-open .nav__links-signup { display: block; color: var(--color-accent); border-bottom: 0; }
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  @media (max-width: 63.99rem) { .nav.is-open .nav__links { -webkit-backdrop-filter: blur(20px) saturate(1.15); backdrop-filter: blur(20px) saturate(1.15); } }
}
@media (min-width: 64rem) { .nav__menu { display: none; } }
/* The smallest phones: dots tighten and the strip's label goes */
@media (max-width: 22.5rem) { .till__dots { gap: 0.28rem; } .till__dots span { display: none; } }
/* The smallest phones drop the second mark so the bar never crowds */
@media (max-width: 22.5rem) { .nav__brand .inz, .nav__brand i { display: none; } }
.nav .btn { transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short), background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.nav.at-signup .btn { opacity: 0; visibility: hidden; pointer-events: none; }
.nav .nav__signup { display: none; }
@media (min-width: 64rem) { .nav .nav__signup { display: inline-grid; } }
.nav__share .long { display: none; }
@media (min-width: 80rem) { .nav__share .long { display: inline; } .nav__share .short { display: none; } }

.btn {
  display: inline-grid; place-content: center;
  background: var(--color-accent);
  color: var(--color-navy);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: none;
  border: 0; border-radius: 99px;
  padding: 0 1.5rem;
  min-height: var(--control-h);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: color-mix(in oklch, var(--color-accent), white 8%); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.6; cursor: default; transform: none; }
.btn--big { min-height: 4rem; font-size: var(--text-md); padding-inline: 2.2rem; }
.btn--ghost { background: transparent; color: var(--color-paper); box-shadow: inset 0 0 0 1.5px var(--rule-on-dark); }
.btn--ghost:hover { background: var(--ivory-ghost); }
.share {
  font: inherit; font-family: var(--font-display); font-weight: 600;
  color: inherit; background: none; border: 0; cursor: pointer;
  padding: 0 0 2px; border-bottom: 2px solid var(--color-accent);
  white-space: nowrap;
}

/* Section frame */
.scene { position: relative; padding: var(--space-scene) var(--page-gutter) var(--space-2xl); scroll-margin-top: 4.5rem; }
.hero, .bill, .bleed, .pivot, .signup { grid-template-columns: minmax(0, 1fr); }

/* ---- Hero · title card over Parliament ---------------------------------- */
.hero { min-height: min(100svh, 68rem); display: grid; align-content: end; padding-top: var(--space-4xl); padding-bottom: var(--space-3xl); }
@media (max-width: 40rem) {
  .hero { min-height: auto; align-content: start; padding-top: calc(var(--nav-h, 4.5rem) + var(--space-xl)); padding-bottom: var(--space-2xl); }
  .hero__meta { margin-top: var(--space-lg); }
}
.hero h1 { display: grid; max-width: none; }
.hero h1 .line-2 { color: var(--color-accent); }
.hero__sub {
  margin-top: var(--space-md);
  max-width: 26ch;
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--display-3); line-height: 1.14; letter-spacing: var(--track-3);
  color: var(--color-ivory-dim);
  text-wrap: balance;
}
.hero__meta {
  margin-top: var(--space-xl);
  display: grid; gap: var(--space-md) var(--space-xl);
  align-items: center;
  padding: var(--space-md) var(--space-lg);
}
@media (min-width: 60rem) { .hero__meta { grid-template-columns: auto minmax(0, 1fr) auto; } }
.who { display: flex; align-items: center; gap: var(--space-sm); }
.who__label {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-ivory-dim);
  text-transform: uppercase; letter-spacing: 0.16em; white-space: nowrap;
}
.who__mark { height: 2.4rem; width: auto; }
.who__line {
  padding-left: var(--space-md); border-left: 2px solid var(--color-accent);
    font-weight: 500; color: var(--color-paper); line-height: 1.4; text-wrap: balance;
}
.clock {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.75rem;
  padding: 0.6rem 1rem;
  background: oklch(19% 0.032 233.4 / 0.55);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--rule-on-dark);
}
.clock small {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-ivory-dim);
  text-transform: uppercase; letter-spacing: 0.16em; white-space: nowrap;
}
.clock b { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; font-weight: 400; }
.clock .n {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem, 2.4vw, 2.1rem); line-height: 1;
  letter-spacing: -0.025em; color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.clock .u {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-md); color: var(--color-paper);
}
.clock .t {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-md); color: var(--color-ivory-dim);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  padding-left: 0.25rem;
}

/* ---- Story · over the crew ------------------------------------------------ */
.story .max { display: grid; gap: var(--space-2xl); }
.story { display: grid; align-content: center; }
@media (min-width: 64rem) { .story { min-height: 52svh; } .story .beat { font-size: clamp(2rem, 3vw + 0.6rem, 3.4rem); max-width: 22ch; } }
.beat {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-beat);
  letter-spacing: var(--track-3);
  line-height: 1.1;
  overflow-wrap: break-word;
  text-wrap: balance;
  max-width: 30ch;
}
.beat + .beat { margin-top: var(--space-lg); }
.figure {
  margin-top: var(--space-md);
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 6.4vw + 0.4rem, 6.4rem); line-height: 1;
  letter-spacing: -0.025em; color: var(--color-accent);
}
.src {
  margin-top: var(--space-md);
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: var(--text-sm); font-weight: 400;
  color: var(--color-ivory-dim);
}
.src a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--color-navy-rule); }
.src a:hover { text-decoration-color: var(--color-accent); }

/* ---- The bill · one paper object in the film ---------------------------- */
.bill { padding-bottom: var(--space-2xl); }
.till { display: grid; gap: var(--space-xl); align-items: start; }
.till > *, .till__pick > * { min-width: 0; }
@media (min-width: 64rem) { .till { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); } }
.till__pick { --pick-pad: clamp(1.25rem, 3vw, 2.5rem); padding: var(--pick-pad); }
.till__pick .measure { margin-top: var(--space-md); }
.till__sub { margin-top: var(--space-sm); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--display-3); line-height: 1.05; letter-spacing: var(--track-3); color: var(--color-accent); }
/* The picker is a filmstrip everywhere: one row, snapping, the next tile always peeking in */
.till__strip { display: block; min-width: 0; margin-top: var(--space-lg); }
.till__grid {
  display: flex; gap: var(--space-sm); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  scroll-padding-inline: var(--pick-pad); margin: 0 calc(var(--pick-pad) * -1); padding: 0 var(--pick-pad);
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.till__grid::-webkit-scrollbar { display: none; }
.till__grid.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.till__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-xs); }
.till__dots { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; min-width: 0; min-height: 1.5rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-ivory-dim); }
.till__dots span { margin-right: 0.35rem; }
.till__dots i { width: 0.45rem; height: 0.45rem; border-radius: 99px; background: var(--rule-on-dark); transition: width var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.till__dots i.is-on { width: 1.1rem; background: var(--color-accent); }
@media (min-width: 40rem) { .till__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile {
  flex: 0 0 11rem; scroll-snap-align: start;
  display: grid; gap: 0.3rem; align-content: start; padding: 0; border: 0; border-radius: 10px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.tile img { -webkit-user-drag: none; }
.tile img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px;
  filter: saturate(0.6) brightness(0.8); box-shadow: 0 0 0 1px var(--ivory-ghost);
  transition: filter var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.tile:hover img, .tile:focus-visible img { filter: saturate(0.9) brightness(0.95); }
.tile.is-on img { filter: none; box-shadow: 0 0 0 3px var(--color-accent); }
.tile:active img { transform: scale(0.98); }
.tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.tile__name { margin-top: 0.25rem; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); line-height: 1.2; text-wrap: balance; }
.tile.is-on .tile__name { color: var(--color-accent); }
.tile__where { font-size: var(--text-sm); color: var(--color-ivory-dim); }
/* Single column (phones and tablets): the panel dissolves, the heading sits on the film, and the
   tiles become a filmstrip pinned under the nav, so a tap always reprints a receipt you can see */
@media (max-width: 63.99rem) {
  .till { gap: var(--space-md); }
  .till__pick { display: contents; }
  .till__pick > .measure { margin-top: var(--space-md); }
    .till__strip {
    display: block; min-width: 0; position: sticky; top: var(--nav-h, 4.5rem); z-index: 5; margin-top: var(--space-xs);
    margin: var(--space-sm) calc(var(--page-gutter) * -1) 0; padding: var(--space-sm) var(--page-gutter) var(--space-xs);
    background: var(--color-navy-2); box-shadow: 0 1px 0 var(--ivory-ghost), 0 12px 24px oklch(17.4% 0.0017 17.3 / 0.25);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .till__strip { background: var(--glass-dark-strong); -webkit-backdrop-filter: blur(20px) saturate(1.15); backdrop-filter: blur(20px) saturate(1.15); }
  }
    .till__grid { scroll-padding-inline: var(--page-gutter); margin: 0 calc(var(--page-gutter) * -1); padding: 0 var(--page-gutter); }
  .tile { flex-basis: 32vw; min-width: 8rem; max-width: 11rem; gap: 0.2rem; }
  .tile img { aspect-ratio: 3 / 2; }
  .till__sub { font-size: clamp(1.35rem, 5.2vw, 1.7rem); }
  .till__pick > .measure { font-size: var(--text-base); }
  .tile__name { font-size: var(--text-sm); margin-top: 0.15rem; }
  .tile__where { display: none; }
    .bill__rig { margin-top: 0; }
}
.sound {
  font: inherit; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  color: var(--color-ivory-dim); background: none; border: 1px solid var(--rule-on-dark); border-radius: 99px;
  min-height: 2.75rem; padding: 0 1rem; cursor: pointer;
}
.sound[aria-pressed="true"] { color: var(--color-paper); border-color: var(--color-accent); }
.sound:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* The till prints one item at a time; tapping another project reprints the paper */
.js .bill .items .row:not(.is-current) { display: none; }
.bill__rig { position: relative; isolation: isolate; max-width: 34rem; margin-inline: auto; color: var(--color-ink); }
/* The sheet carries the shadow, so it follows the serrated edges of the paper inside it */
.bill__sheet { filter: drop-shadow(0 2px 3px oklch(17.4% 0.0017 17.3 / 0.35)) drop-shadow(0 28px 44px oklch(17.4% 0.0017 17.3 / 0.5)); }
.bill__paper {
  --pad-x: var(--space-xl);
  --pad-top: calc(var(--space-xl) + 6px);
    --tear-h: 3.25rem;
  --pad-bottom: calc(var(--tear-h) + var(--space-md));
  position: relative;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  /* thermal paper: a faint horizontal grain, a shade of curl at both tear edges */
  background:
    repeating-linear-gradient(to bottom, transparent 0 3px, oklch(0% 0 0 / 0.013) 3px 4px),
    linear-gradient(to bottom, oklch(0% 0 0 / 0.06), transparent 22px),
    linear-gradient(to top, oklch(0% 0 0 / 0.05), transparent 22px),
    var(--color-paper);
  clip-path: polygon(0% 6px, 1.25% 0%, 2.5% 6px, 3.75% 0%, 5% 6px, 6.25% 0%, 7.5% 6px, 8.75% 0%, 10% 6px, 11.25% 0%, 12.5% 6px, 13.75% 0%, 15% 6px, 16.25% 0%, 17.5% 6px, 18.75% 0%, 20% 6px, 21.25% 0%, 22.5% 6px, 23.75% 0%, 25% 6px, 26.25% 0%, 27.5% 6px, 28.75% 0%, 30% 6px, 31.25% 0%, 32.5% 6px, 33.75% 0%, 35% 6px, 36.25% 0%, 37.5% 6px, 38.75% 0%, 40% 6px, 41.25% 0%, 42.5% 6px, 43.75% 0%, 45% 6px, 46.25% 0%, 47.5% 6px, 48.75% 0%, 50% 6px, 51.25% 0%, 52.5% 6px, 53.75% 0%, 55% 6px, 56.25% 0%, 57.5% 6px, 58.75% 0%, 60% 6px, 61.25% 0%, 62.5% 6px, 63.75% 0%, 65% 6px, 66.25% 0%, 67.5% 6px, 68.75% 0%, 70% 6px, 71.25% 0%, 72.5% 6px, 73.75% 0%, 75% 6px, 76.25% 0%, 77.5% 6px, 78.75% 0%, 80% 6px, 81.25% 0%, 82.5% 6px, 83.75% 0%, 85% 6px, 86.25% 0%, 87.5% 6px, 88.75% 0%, 90% 6px, 91.25% 0%, 92.5% 6px, 93.75% 0%, 95% 6px, 96.25% 0%, 97.5% 6px, 98.75% 0%, 100% 6px, 100% calc(100% - 6px), 98.75% 100%, 97.5% calc(100% - 6px), 96.25% 100%, 95% calc(100% - 6px), 93.75% 100%, 92.5% calc(100% - 6px), 91.25% 100%, 90% calc(100% - 6px), 88.75% 100%, 87.5% calc(100% - 6px), 86.25% 100%, 85% calc(100% - 6px), 83.75% 100%, 82.5% calc(100% - 6px), 81.25% 100%, 80% calc(100% - 6px), 78.75% 100%, 77.5% calc(100% - 6px), 76.25% 100%, 75% calc(100% - 6px), 73.75% 100%, 72.5% calc(100% - 6px), 71.25% 100%, 70% calc(100% - 6px), 68.75% 100%, 67.5% calc(100% - 6px), 66.25% 100%, 65% calc(100% - 6px), 63.75% 100%, 62.5% calc(100% - 6px), 61.25% 100%, 60% calc(100% - 6px), 58.75% 100%, 57.5% calc(100% - 6px), 56.25% 100%, 55% calc(100% - 6px), 53.75% 100%, 52.5% calc(100% - 6px), 51.25% 100%, 50% calc(100% - 6px), 48.75% 100%, 47.5% calc(100% - 6px), 46.25% 100%, 45% calc(100% - 6px), 43.75% 100%, 42.5% calc(100% - 6px), 41.25% 100%, 40% calc(100% - 6px), 38.75% 100%, 37.5% calc(100% - 6px), 36.25% 100%, 35% calc(100% - 6px), 33.75% 100%, 32.5% calc(100% - 6px), 31.25% 100%, 30% calc(100% - 6px), 28.75% 100%, 27.5% calc(100% - 6px), 26.25% 100%, 25% calc(100% - 6px), 23.75% 100%, 22.5% calc(100% - 6px), 21.25% 100%, 20% calc(100% - 6px), 18.75% 100%, 17.5% calc(100% - 6px), 16.25% 100%, 15% calc(100% - 6px), 13.75% 100%, 12.5% calc(100% - 6px), 11.25% 100%, 10% calc(100% - 6px), 8.75% 100%, 7.5% calc(100% - 6px), 6.25% 100%, 5% calc(100% - 6px), 3.75% 100%, 2.5% calc(100% - 6px), 1.25% 100%, 0% calc(100% - 6px));
}
.bill__ink { position: relative; }
/* The print head: a carriage a little wider than the paper, stepping down the strip */
.bill__head {
    position: absolute; left: var(--pad-x); right: var(--pad-x); top: var(--pad-top); bottom: var(--pad-bottom);
  pointer-events: none; opacity: 0;
}
.bill__head::after {
  content: ""; position: absolute; top: -2px; height: 4px;
  left: calc(var(--pad-x) * -1 - 6px); right: calc(var(--pad-x) * -1 - 6px);
  border-radius: 2px;
  background: oklch(22% 0.01 40);
  box-shadow: 0 3px 8px oklch(0% 0 0 / 0.35), 0 0 0 1px oklch(36% 0.01 40 / 0.6);
}
.rc__head { text-align: center; padding-bottom: var(--space-md); }
.rc__org { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-muted); }
.rc__title { margin-top: var(--space-2xs); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--text-xl); letter-spacing: 0; line-height: 1.1; }
.rc__meta { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-muted); }
.bill dl { margin: 0; border-top: 3px double var(--color-ink); }
.bill dl + dl { margin-top: var(--space-xs); }
.bill .row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md);
  align-items: start; padding-block: var(--space-md);
  border-bottom: var(--rule-w) dashed var(--color-rule-dash);
}
.bill dl > .row:last-child { border-bottom: 0; }
.bill dt { font-size: var(--text-base); line-height: 1.35; text-wrap: pretty; }
.bill dt small, .row__note { display: block; margin-top: 0.2rem; font-size: var(--text-sm); line-height: 1.35; color: var(--color-ink-muted); }
.bill dd {
  margin: 0; padding-top: 0.12em; text-align: right;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.45rem, 2.8vw, 1.95rem);
  line-height: 1; letter-spacing: -0.02em; white-space: nowrap;
}
.bill .row--key dd { color: var(--color-accent-deep); }
/* Line items: a printed thumbnail, the project, then its stop-start record as dated stamps */
.bill .items { --thumb: 4.25rem; }
.bill .items dt { display: grid; grid-template-columns: var(--thumb) minmax(0, 1fr); gap: 0.15rem var(--space-md); align-items: start; }
.bill .items .row__note, .bill .items dt > small { grid-column: 1 / -1; }
.bill .items .row__note { margin-top: var(--space-sm); font-size: 0.95rem; line-height: 1.5; text-wrap: pretty; }
.bill .items dt > small { margin-top: var(--space-xs); }
.bill .items dt > b { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); line-height: 1.2; }
.bill .items dd { font-size: clamp(1.25rem, 2.1vw, 1.6rem); padding-top: 0.15em; white-space: normal; max-width: 8.5rem; line-height: 1.05; color: var(--color-accent-deep); }
.row__pic {
  grid-row: 1 / span 2; width: var(--thumb); height: var(--thumb); object-fit: cover; border-radius: 4px;
  filter: grayscale(1) sepia(0.3) contrast(1.06); mix-blend-mode: multiply;
  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.18);
}
.seq { display: flex; flex-wrap: wrap; gap: 0.3rem 0.35rem; margin-top: 0.35rem; font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-muted); }
.seq > span { white-space: nowrap; padding: 0.08rem 0.45rem; border-radius: 4px; background: oklch(0% 0 0 / 0.045); box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.06); }
.seq i { font-style: normal; font-family: var(--font-display); font-weight: 800; color: var(--color-ink); letter-spacing: -0.01em; }
.bill .items .row__note { margin-top: 0.1rem; color: var(--color-ink); }
.bill .totals dt, .bill .owing dt { font-weight: 500; }
.bill .row--key dt { font-weight: 600; }
.bill .row--key dd { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
@media (max-width: 40rem) {
  /* Phones: the amount sits top-right beside the name and the description runs full width under it */
    .bill__paper { --pad-x: 1.25rem; }
  .bill .items { --thumb: 3rem; }
  .bill .items .row { grid-template-columns: minmax(0, 1fr); position: relative; }
  .bill .items dt { gap: 0.15rem var(--space-sm); }
  .bill .items dt > b { padding-right: 6.25rem; }
  .bill .items dd { position: absolute; top: calc(var(--space-md) + 0.15em); right: 0; font-size: 1.05rem; padding-top: 0; max-width: 6rem; text-align: right; }
}
@media (max-width: 22rem) {
  .bill .items dt > b { font-size: 1.05rem; padding-right: 5rem; }
  .bill .items dd { font-size: 1.05rem; }
}
.bill__foot { padding-top: var(--space-md); margin-top: var(--space-2xs); border-top: 3px double var(--color-ink); text-align: center; font-weight: 600; }
.bill__foot > span { display: block; margin: var(--space-xs) auto 0; max-width: 42ch; font-weight: 400; font-size: var(--text-sm); line-height: 1.4; color: var(--color-ink-muted); text-wrap: pretty; }
.bill__share { text-align: center; margin-top: var(--space-md); font-size: var(--text-sm); }
.bill__share .share { color: var(--color-ink); }

/* ---- Not live yet: grey until the section publishes --------------------- */
.nav__links a.is-pending { color: var(--color-ivory-dim); opacity: 0.7; }
.nav__links a.is-pending:hover, .nav__links a.is-pending:focus-visible { opacity: 1; }
.is-pending .glass, .is-pending .preview { background: oklch(27% 0.004 233.4); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .is-pending .glass, .is-pending .preview { background: oklch(27% 0.004 233.4 / 0.7); }
}
.is-pending h2 > .mask > b, .is-pending h2 > b { color: oklch(84% 0.005 233.4); }
.is-pending .stamp { border-color: oklch(58% 0.006 233.4); color: oklch(80% 0.005 233.4); }
.is-pending .timeline li.is-key { border-top-color: oklch(58% 0.006 233.4); }
.is-pending .timeline li.is-key b { color: oklch(84% 0.005 233.4); }

/* ---- The wide shot · the quote over the station ------------------------- */
.bleed { min-height: min(60svh, 38rem); display: grid; align-content: end; }
@media (max-height: 40rem) { .bleed { min-height: auto; } }
.bleed blockquote { max-width: 34ch; font-family: var(--font-display); font-weight: 800; font-size: var(--display-2); line-height: 1.08; letter-spacing: var(--track-2); }
.bleed blockquote footer { margin-top: var(--space-lg); font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); letter-spacing: 0; color: var(--color-ivory-dim); }

/* ---- Chant · the smash cut (the one opaque band) ------------------------- */
.chant { position: relative; background: var(--color-accent); color: var(--color-navy); overflow: clip; padding-block: var(--space-lg); }
.chant__track { display: flex; width: max-content; animation: chant 46s linear infinite; will-change: transform; }
.chant:hover .chant__track { animation-play-state: paused; }
.chant span { font-family: var(--font-display); font-weight: 800; font-size: var(--display-3); line-height: 1.1; text-transform: uppercase; letter-spacing: var(--track-3); white-space: nowrap; padding-inline-end: 1.2em; }
.chant b { font-weight: 800; color: transparent; -webkit-text-stroke: 2px var(--color-navy); }
@keyframes chant { to { transform: translateX(-50%); } }

/* ---- The turn · the lift over the wind farm ----------------------------- */
.turn__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 60rem) { .turn__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter-col); align-items: start; } .turn__copy { grid-column: 1 / 8; } .turn__fig { grid-column: 8 / 13; } }
.turn__copy .measure { margin-top: var(--space-lg); }
.turn__fig { padding: var(--space-lg); }
.unlock b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4.2vw, 4rem); line-height: 1; letter-spacing: -0.03em; color: var(--color-accent); overflow-wrap: break-word; font-variant-numeric: tabular-nums; transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  .js .unlock b.is-locked { animation: lock 480ms var(--ease-out); }
}
@keyframes lock { 0% { transform: scale(1.04); } 60% { transform: scale(0.995); } 100% { transform: scale(1); } }
.unlock b span { display: inline; }
.unlock > span { display: block; margin-top: var(--space-sm); max-width: 30ch; font-weight: 500; }
.unlock > span, .unlock .src { transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }

.breadth { margin-top: var(--space-2xl); padding: var(--space-lg); }
/* The total and what it would have bought */
.cost .max { display: grid; gap: var(--space-xl); }
.cost__panel { margin-top: 0; }
.mosaic--cost .mosaic__word { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: clamp(0.9rem, 1.2vw, 1.05rem); line-height: 1.15; padding-left: 0; }
.mosaic--cost .mosaic__word::before { display: none; }
.mosaic--cost .mosaic__word b { display: block; font-weight: 800; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 0.95; letter-spacing: var(--track-2); color: var(--color-accent); margin-bottom: 0.2rem; }
.mosaic--cost .mosaic__word small { display: block; margin-top: 0.3rem; font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); line-height: 1.3; color: var(--color-ivory-dim); }
.mosaic--cost .mosaic__tile::after { background: linear-gradient(to top, oklch(23.8% 0.0433 233.4 / 0.94) 0%, oklch(23.8% 0.0433 233.4 / 0.6) 55%, transparent 85%); }
.cost__close { margin-top: var(--space-lg); font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.25; letter-spacing: var(--track-3); max-width: 40ch; text-wrap: balance; }
.mosaic--cost .mosaic__word small i { font-style: normal; }
@media (max-width: 40rem) {
  .mosaic--cost .mosaic__word b { font-size: 1.9rem; }
  .mosaic--cost .mosaic__word small { margin-top: 0.15rem; line-height: 1.2; }
  .mosaic--cost .mosaic__word small i { display: none; }
}
.breadth > p { font-weight: 500; text-wrap: balance; }
.mosaic { list-style: none; padding: 0; margin: var(--space-lg) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
@media (min-width: 40rem) { .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); } }
@media (min-width: 60rem) { .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mosaic__tile { position: relative; overflow: clip; border-radius: 12px; isolation: isolate; aspect-ratio: 4 / 3; box-shadow: 0 0 0 1px var(--ivory-ghost); }
.mosaic__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.mosaic__tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, oklch(23.8% 0.0433 233.4 / 0.88) 0%, var(--scrim-soft) 48%, transparent 75%); }
@media (hover: hover) { .mosaic__tile:hover img { transform: scale(1.05); } }
.mosaic__word { position: absolute; z-index: 2; left: var(--space-md); right: var(--space-md); bottom: var(--space-md); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(0.875rem, 1.6vw, 1.35rem); line-height: 1.06; letter-spacing: var(--track-3); padding-left: 0.9em; color: var(--color-paper); }
.mosaic__word::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 0.5em; height: 0.5em; background: var(--color-accent); }
.mosaic__tile--long .mosaic__word { font-size: clamp(0.875rem, 1.15vw, 1rem); }
@media (max-width: 40rem) {
  .mosaic__tile--long, .mosaic__tile:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
}
@media (max-width: 40rem) { .mosaic__tile--long, .mosaic__tile:last-child { grid-column: auto; aspect-ratio: 4 / 3; } .mosaic__tile--long .mosaic__word { font-size: 0.875rem; } }

/* ---- The held breath ------------------------------------------------------- */
.pivot { min-height: 44svh; display: grid; align-content: center; }
@media (max-width: 40rem) { .pivot { min-height: auto; padding-block: var(--space-2xl); } }
.pivot p { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: 1.06; letter-spacing: var(--track-2); font-size: var(--display-2); max-width: 21ch; text-wrap: balance; }

/* ---- The reckoning · back at Parliament ----------------------------------- */
.scorecard .status { margin-top: var(--space-lg); font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); }
@media (max-width: 40rem) { .status .stamp { display: block; width: fit-content; margin: 0 0 var(--space-xs); } }
.stamp { display: inline-block; border: 2px solid var(--color-accent); color: var(--color-accent); border-radius: 6px; padding: 0.1rem 0.6rem; margin-inline-end: 0.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; }
.scorecard .measure { margin-top: var(--space-md); }

.preview { margin-top: var(--space-md); padding: var(--space-md) var(--space-lg) var(--space-lg); }
.preview__note { margin-top: var(--space-xl); font-weight: 500; color: var(--color-paper); max-width: 62ch; }
.preview__note b { font-weight: 600; color: var(--color-accent); }
.preview__head, .preview__row { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto auto; gap: var(--space-sm) var(--space-lg); align-items: center; padding-block: var(--space-md); }
.preview__head { position: relative; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--color-ivory-dim); }
.preview__head::after { content: ""; position: absolute; inset: auto 0 0 0; height: var(--rule-strong); background: var(--rule-on-dark); transform-origin: left; }
.preview__head .preview__party { grid-column: 2 / 4; }
.preview__nums, .preview__dots { display: grid; grid-template-columns: repeat(8, var(--unit)); justify-items: center; align-items: center; gap: 0 0.5rem; }
.preview__nums { display: none; }
.preview__nums i { font-style: normal; font-family: var(--font-body); font-weight: 500; font-size: 0.78rem; line-height: 1.2; text-align: center; color: var(--color-paper); align-self: end; cursor: default; transition: color var(--dur-short) var(--ease-out); }
@media (min-width: 66rem) { .preview__nums { display: grid; } .preview__nums, .preview__dots { grid-template-columns: repeat(8, 4.3rem); gap: 0; } }
.preview__row { border-radius: 8px; scroll-margin-top: 6rem; }
.preview__row + .preview__row { border-top: var(--rule-w) solid var(--color-navy-rule); }
@media (hover: hover) { .preview__row { transition: background-color var(--dur-micro) var(--ease-out); } .preview__row:hover { background: var(--ivory-ghost); } }
.preview__row[data-party="national"] { --pc: #00529f; }
.preview__row[data-party="labour"]   { --pc: #d82a20; }
.preview__row[data-party="green"]    { --pc: #098137; }
.preview__row[data-party="act"]      { --pc: #ec008c; }
.preview__row[data-party="nzfirst"]  { --pc: #111010; }
.preview__row[data-party="maori"]    { --pc: #b3001e; }
.preview__row[data-party="top"]      { --pc: #00b2a9; }
.preview__mark { width: 0.95rem; height: 0.95rem; border-radius: 3px; background: var(--pc); box-shadow: inset 0 0 0 1px var(--rule-on-dark); }
.preview__name { min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); white-space: nowrap; }
.preview__status { justify-self: end; font-size: var(--text-sm); color: var(--color-ivory-dim); border: var(--rule-w) solid var(--rule-on-dark); border-radius: 99px; padding: 0.1rem 0.65rem; white-space: nowrap; transition: opacity var(--dur-short) var(--ease-out); }
.preview__status[data-state="invited"] { color: var(--color-paper); border-color: var(--color-accent); }
.preview__row.has-rating .preview__status { opacity: 0; }
.preview__dots { counter-reset: d; }
.preview__dots i, .preview__dots a { counter-increment: d; display: grid; place-content: center; width: var(--unit); height: var(--unit); border: 1px solid var(--rule-on-dark); border-radius: 50%; font-style: normal; font-weight: 600; font-size: 0.7rem; color: var(--color-ivory-dim); text-decoration: none; transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.preview__dots i::before, .preview__dots a::before { content: counter(d); }
.preview__dots > :nth-child(1) { --c: 0; } .preview__dots > :nth-child(2) { --c: 1; } .preview__dots > :nth-child(3) { --c: 2; } .preview__dots > :nth-child(4) { --c: 3; }
.preview__dots > :nth-child(5) { --c: 4; } .preview__dots > :nth-child(6) { --c: 5; } .preview__dots > :nth-child(7) { --c: 6; } .preview__dots > :nth-child(8) { --c: 7; }
.preview__nums i.is-col, .tests__list li.is-col b { color: var(--color-accent); }
.preview__dots .is-col { border-color: var(--color-accent); color: var(--color-accent); transform: scale(1.15); }
.preview__dots [data-r] { border-color: transparent; font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; color: var(--color-navy); }
.preview__dots [data-r]::before { content: attr(data-r); }
.preview__dots [data-r="C"] { background: var(--rate-c); }
.preview__dots [data-r="P"] { background: var(--rate-p); }
.preview__dots [data-r="N"] { background: var(--rate-n); color: var(--color-paper); }
.preview__dots [data-r="0"] { background: var(--rate-0); font-size: 1.3rem; line-height: 0.7; }
.preview__dots [data-r="0"]::before { content: "·"; }
.preview figcaption { margin-top: var(--space-md); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); color: var(--color-ivory-dim); }
.preview__stamp { font-family: var(--font-display); font-weight: 500; color: var(--color-paper); white-space: nowrap; }
.preview__legend { display: none; }
@media (max-width: 66rem) { .preview__legend { display: inline; } }
@media (max-width: 44rem) {
  .preview__head { display: none; }
  .preview__row { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-sm); padding-block: var(--space-md); }
  .preview__name { white-space: normal; font-size: var(--text-md); line-height: 1.2; }
  .preview__status { grid-column: 3; justify-self: end; font-size: 0.875rem; padding: 0.2rem 0.6rem; }
  .preview__dots { grid-column: 1 / -1; grid-template-columns: repeat(8, 1.5rem); gap: 0.35rem; justify-items: start; }
  .preview__dots i, .preview__dots a { width: 1.5rem; height: 1.5rem; }
}
@media (max-width: 26rem) {
  :root { --display-1: clamp(2.2rem, 11vw, 2.8rem); }
  .btn--big { font-size: var(--text-base); padding-inline: 1.5rem; min-height: 3.25rem; }
  .mosaic__word { font-size: 1rem; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); }
  .nav__brand { gap: var(--space-sm); }
    .bill__paper { --pad-x: var(--space-lg); }
}
@media (max-width: 22rem) {
  .preview__status { grid-column: 2 / -1; justify-self: start; font-size: 0.875rem; }
  .preview__dots { grid-template-columns: repeat(8, 1.35rem); gap: 0.3rem; }
  .preview__dots i, .preview__dots a { width: 1.35rem; height: 1.35rem; }
}

/* Dormant: the eight tests, the ratings explainer and the discipline list are held back
   until the scorecard publishes (client note, 8 Sept). Styles kept so the markup can return. */
.score-panel { margin-top: var(--space-xl); padding: var(--space-xl); }
@media (max-width: 40rem) { .score-panel { padding: var(--space-lg) var(--space-md); } .preview { padding-inline: var(--space-md); } }
.tests__intro { margin-top: var(--space-sm); font-weight: 500; max-width: 52ch; }
.tests__list { list-style: none; padding: 0; counter-reset: t; margin: var(--space-lg) 0 0; display: grid; gap: var(--space-md); }
@media (min-width: 60rem) { .tests__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-2xl); } }
.tests__list li { counter-increment: t; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; align-content: start; color: var(--color-paper); }
.tests__list li::before { content: counter(t); display: grid; place-content: center; width: var(--unit); height: var(--unit); border: 1px solid var(--rule-on-dark); border-radius: 50%; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--color-accent); transform: translateY(0.1em); }
.tests__list b { font-weight: 600; display: block; transition: color var(--dur-short) var(--ease-out); }
.key { margin-top: var(--space-2xl); }
.key h3, .discipline { margin-top: 0; }
.discipline { margin-top: var(--space-2xl); }
.ratings-key { list-style: none; padding: 0; margin: var(--space-xl) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); }
.ratings-key li { display: flex; align-items: center; gap: var(--space-sm); font-weight: 500; }
.chip { display: grid; place-content: center; width: var(--unit); height: var(--unit); border-radius: 6px; font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); color: var(--color-navy); }
.chip--c { background: var(--rate-c); } .chip--p { background: var(--rate-p); } .chip--n { background: var(--rate-n); color: var(--color-paper); } .chip--0 { background: var(--rate-0); font-size: 1.6rem; line-height: 0.7; }
.key > p { margin-top: var(--space-md); max-width: 56ch; }
.discipline { list-style: none; padding: 0; margin: var(--space-xl) 0 0; max-width: 46rem; }
.discipline li { padding-block: var(--space-sm); display: flex; gap: var(--space-sm); align-items: baseline; }
.discipline li::before { content: ""; flex: 0 0 auto; width: 0.5em; height: 0.5em; background: var(--color-accent); transform: translateY(-0.08em); }
.scorecard__ask { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.scorecard .neutral { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ivory-dim); max-width: 52ch; }

/* ---- The plan · over the hospital ------------------------------------------ */
.plan .intro { margin-top: var(--space-lg); font-size: var(--text-md); max-width: 54ch; }
.plan .glass { margin-top: var(--space-2xl); padding: clamp(1.5rem, 4vw, 3.5rem); }
.plan .ledger { margin-top: 0; }
.ledger { list-style: none; padding: 0; margin: var(--space-2xl) 0 0; counter-reset: p; display: grid; gap: 0 var(--space-3xl); }
@media (min-width: 60rem) { .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ledger li {
  counter-increment: p;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs) var(--space-lg);
  align-items: start; align-content: start;
  padding-block: var(--space-xl);
  border-top: var(--rule-w) solid var(--color-navy-rule);
}
.ledger li::before {
  content: counter(p, decimal-leading-zero);
  grid-row: 1 / 3;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 3.4vw, 3.4rem); line-height: 0.85;
  letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1.5px var(--color-accent);
  font-variant-numeric: tabular-nums;
}
@supports not (-webkit-text-stroke: 1px black) { .ledger li::before { color: var(--color-accent); } }
.ledger h3 { font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.01em; }
.ledger p { font-size: var(--text-base); max-width: 46ch; color: var(--color-ivory-dim); }
.manifesto-cta { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.manifesto-cta small { color: var(--color-ivory-dim); }

/* ---- The end card ----------------------------------------------------------- */
.signup { min-height: min(92svh, 64rem); display: grid; align-content: end; }
@media (max-height: 40rem) { .signup { min-height: auto; } }
.signup h2 { display: grid; font-size: var(--display-1); letter-spacing: var(--track-1); line-height: 1.02; max-width: none; }
.signup h2 .line-2 { color: var(--color-accent); }
.signup .measure { margin-top: var(--space-lg); }
.signup__card { margin-top: var(--space-xl); max-width: 36rem; padding: var(--space-lg) var(--space-lg) var(--space-md); }
/* The members' ask: one wide band, display heading, big buttons */
.share-band { margin-top: var(--space-lg); padding: clamp(1.5rem, 4vw, 3rem); display: grid; gap: var(--space-lg); scroll-margin-top: 6rem; transition: box-shadow 600ms var(--ease-out); }
.share-band.is-lit { box-shadow: 0 0 0 3px var(--color-accent), 0 24px 60px oklch(17.4% 0.0017 17.3 / 0.35); }
@media (min-width: 60rem) { .share-band { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--space-2xl); } }
.share-band h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--display-3); line-height: 1.04; letter-spacing: var(--track-3); }
.share-band p { margin-top: var(--space-sm); color: var(--color-ivory-dim); max-width: 34ch; font-size: var(--text-md); }
.share-grid { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.share-grid .btn { min-height: 3.5rem; min-width: 8.5rem; padding-inline: 1.75rem; font-size: var(--text-md); }
.signup form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.signup form.is-sent { opacity: 0; transform: translateY(-8px); }
@media (min-width: 40rem) { .signup form { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.signup .field { position: relative; display: grid; gap: var(--space-2xs); }
.signup input { font: inherit; color: var(--color-paper); background: transparent; border: 0; border-bottom: var(--rule-w) solid var(--rule-on-dark); padding: 0 0.1rem; height: var(--control-h); border-radius: 0; }
.signup .field::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--control-h) - 2px); height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-long) var(--ease-out); }
.signup .field:focus-within::after { transform: none; }
.signup input:focus-visible { outline: none; }
.signup input::placeholder { color: var(--color-ivory-dim); }
.signup input[aria-invalid="true"] { border-bottom-color: var(--color-accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-msg { min-height: 1.4rem; font-size: var(--text-sm); }
.form-msg[data-tone="error"] { color: var(--color-accent); }
.signup .fine { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ivory-dim); max-width: 52ch; }
.done { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); }
.done p + p { margin-top: var(--space-sm); font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); color: var(--color-ivory-dim); }
.done .share { margin-top: var(--space-md); font-size: var(--text-base); }

/* ---- Footer · credits --------------------------------------------------------- */
.foot { position: relative; background: var(--color-onyx); color: var(--color-ivory-dim); border-top: 3px solid var(--color-accent); padding: var(--space-2xl) var(--page-gutter) var(--space-xl); font-size: var(--text-sm); }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); }
.foot__row img { height: 2.8rem; width: auto; }
.foot a { color: var(--color-paper); text-underline-offset: 3px; white-space: nowrap; }
.foot a:hover { text-decoration-color: var(--color-accent); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
@media (min-width: 60rem) {
  .foot__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter-col); }
  .foot__row img { grid-column: 1 / 3; }
  .foot__row > span { grid-column: 3 / 9; }
  .foot__links { grid-column: 9 / 13; justify-self: end; }
}
.foot__record { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-w) solid var(--color-onyx-rule); }
.foot__record a { color: var(--color-ivory-dim); text-decoration-color: var(--color-onyx-rule); }
.foot__record a:hover { color: var(--color-paper); text-decoration-color: var(--color-accent); }
.foot__print {
  font: inherit; font-family: var(--font-display); font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0 0.9rem;
  background: none; border: var(--rule-w) solid var(--rule-on-dark); border-radius: 99px;
  color: var(--color-paper); cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.foot__print::before {
  content: ""; width: 0.85rem; height: 0.85rem; flex: 0 0 auto;
  background: var(--color-accent);
  clip-path: polygon(20% 0, 80% 0, 80% 32%, 100% 32%, 100% 78%, 80% 78%, 80% 100%, 20% 100%, 20% 78%, 0 78%, 0 32%, 20% 32%);
}
.foot__print:hover { border-color: var(--color-accent); background: var(--ivory-ghost); }
.foot__legal { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-w) solid var(--color-onyx-rule); display: grid; gap: var(--space-md) var(--space-xl); }
@media (min-width: 60rem) { .foot__legal { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.foot .auth { max-width: 60ch; }
.credits { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ivory-dim); max-width: 60ch; }
.foot__policies { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.foot__policies a { color: var(--color-ivory-dim); text-decoration-color: var(--color-onyx-rule); }
.foot__policies a:hover { color: var(--color-paper); text-decoration-color: var(--color-accent); }

/* ---- Story aside: what infrastructure is -------------------------------- */
.story__aside { padding: var(--space-lg) var(--space-xl); display: grid; gap: var(--space-md) var(--space-xl); }
@media (min-width: 60rem) {
  .story__aside { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
  .aside__close { grid-column: 1 / -1; }
}
.aside__lead { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); white-space: nowrap; }
.aside__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); }
@media (max-width: 40rem) { .aside__list { flex-direction: column; } }
.aside__list li { position: relative; padding-left: 1.25rem; font-size: var(--text-md); font-weight: 500; line-height: 1.3; }
.aside__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.5rem; height: 0.5rem; background: var(--color-accent); }
.aside__close { padding-top: var(--space-md); border-top: var(--rule-w) solid var(--rule-on-dark); font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.25; letter-spacing: var(--track-3); text-wrap: balance; }

/* ---- Scorecard timeline -------------------------------------------------- */
.timeline { list-style: none; margin: var(--space-xl) 0 0; padding: var(--space-lg) var(--space-xl); display: grid; gap: var(--space-md); }
@media (min-width: 48rem) { .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); } }
.timeline li { padding-top: var(--space-sm); border-top: var(--rule-strong) solid var(--rule-on-dark); }
.timeline li.is-key { border-top-color: var(--color-accent); }
.timeline b { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); line-height: 1; white-space: nowrap; }
.timeline li.is-key b { color: var(--color-accent); }
.timeline span { display: block; margin-top: var(--space-xs); font-size: var(--text-base); font-weight: 500; color: var(--color-paper); }

/* ---- Receipt: spelled-out values need a smaller step --------------------- */


/* ---- The Voice ----------------------------------------------------------- */
.voice .status { margin-top: var(--space-lg); font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); }
.voice .measure { margin-top: var(--space-md); }
.voice__grid { list-style: none; padding: 0; margin: var(--space-xl) 0 0; display: grid; gap: var(--space-md); }
@media (min-width: 60rem) { .voice__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); } }
.voice__grid li { display: grid; align-content: center; gap: var(--space-sm); min-height: 7rem; }
@media (max-width: 60rem) { .voice__grid li { min-height: 5rem; } }
.voice__grid h3 { font-size: var(--text-lg); line-height: 1.15; text-wrap: balance; }
.voice__ask { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); }

/* ---- Mobile: touch targets and minimum type ----------------------------- */
.nav__brand { min-height: 44px; }
.share { padding-block: 0.7rem 0.6rem; margin-block: -0.6rem; }
.foot__links a, .foot__record a, .foot__policies a { display: inline-block; padding-block: 0.7rem; }
.src a { display: inline-block; padding-block: 0.72rem; }
@media (max-width: 60rem) {
  .preview__status { font-size: 0.875rem; }
  .preview__dots i, .preview__dots a { font-size: 0.75rem; }
}
@media (pointer: coarse) {
  .foot a, .nav__links a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---- Tear off ------------------------------------------------------------ */
.bill__tear {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--tear-h);
  display: block; padding: 0; border: 0;
  border-top: var(--rule-w) dashed var(--color-rule-dash);
  background: none; cursor: pointer;
  font: inherit; font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(60% 0.03 94.7);
  transition: color var(--dur-short) var(--ease-out);
}
.bill__tear:hover, .bill__tear:focus-visible { color: var(--color-accent-deep); }
.bill__rig.is-torn .bill__paper { padding-bottom: var(--space-lg); }
.bill__rig.is-torn .bill__sheet { transform: translateY(-0.55rem) rotate(-0.55deg); transition: transform 620ms var(--ease-out); }
.bill__torn {
  margin-top: var(--space-lg); text-align: center;
  font-weight: 500; color: var(--color-paper);
}
.bill__torn a { color: var(--color-accent); text-underline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .js .bill__torn { opacity: 0; transform: translateY(8px);
    transition: opacity 420ms var(--ease-out) 260ms, transform 420ms var(--ease-out) 260ms; }
  .js .bill__rig.is-torn .bill__torn { opacity: 1; transform: none; }
}

/* ---- Logo build ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .nav__brand.is-building img:first-of-type { animation: build 720ms var(--ease-out); }
}
@keyframes build { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---- Countdown is tappable ----------------------------------------------- */
button.clock { border: 0; -webkit-appearance: none; appearance: none; text-align: inherit; cursor: pointer; font: inherit; color: inherit; }
button.clock:hover { box-shadow: inset 0 0 0 1px var(--color-accent); }

/* ---- Motion -------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not(.mask) {
    opacity: 0; transform: translateY(var(--dy, 24px));
    transition: opacity var(--dur, var(--dur-reveal)) var(--ease-cine), transform var(--dur, var(--dur-reveal)) var(--ease-cine);
    transition-delay: calc(var(--i, 0) * 90ms + var(--lead, 0ms));
  }
  .js [data-reveal]:not(.mask).is-in { opacity: 1; transform: none; }
    .js .mask[data-reveal] > b { transform: translateY(112%); transition: transform var(--dur-line) var(--ease-cine); transition-delay: calc(var(--i, 0) * 130ms + 60ms); }
  .js .mask[data-reveal].is-in > b { transform: none; }

  .js .stage img.is-active { animation: settle 9000ms cubic-bezier(0.2, 0.6, 0.2, 1) both; }

  .js .bill__sheet { opacity: 0; transform: translateY(18px); transition: opacity 500ms var(--ease-cine), transform 600ms var(--ease-cine); }
  .js .bill__rig.is-in .bill__sheet { opacity: 1; transform: none; }
    /* Thermal print: 84 discrete lines over 3.6s, then the head lifts away */
  .js .bill__ink { clip-path: inset(0 0 100% 0); }
    .js .bill__rig.is-in .bill__ink { animation: print 2600ms steps(56, end) 420ms both; }
    .js .bill__rig.is-in .bill__head { animation: head-run 2600ms steps(56, end) 420ms both, head-out 320ms var(--ease-out) 3020ms forwards; }
  .js .bill .items.is-reprint { animation: print 640ms steps(12, end) both; }

  .js .unlock:not(.is-done) > span, .js .unlock:not(.is-done) .src { opacity: 0; transform: translateY(8px); }

  .js .preview__head::after { transform: scaleX(0); transition: transform 600ms var(--ease-cine); }
  .js .preview.is-in .preview__head::after { transform: none; }
  .js .preview__row { opacity: 0; transform: translateY(10px); transition: opacity 480ms var(--ease-cine), transform 480ms var(--ease-cine); transition-delay: calc(var(--r, 0) * 70ms + 200ms); }
  .js .preview.is-in .preview__row { opacity: 1; transform: none; }
  .js .preview__dots i { opacity: 0; transform: scale(0.5); transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-pop); transition-delay: calc(var(--r, 0) * 70ms + var(--c, 0) * 28ms + 420ms); }
  .js .preview.is-in .preview__dots i { opacity: 1; transform: none; }
  .js .preview.is-settled .preview__dots i { transition-delay: 0ms; transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
  .js .preview.is-in .preview__dots [data-r] { animation: fill 420ms var(--ease-out) both; animation-delay: calc(var(--r, 0) * 70ms + var(--c, 0) * 40ms + 900ms); }
  .js .ratings-key li:not(.is-in) .chip { transform: scale(0.6); }
  .js .chip { transition: transform 360ms var(--ease-pop); }
}
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes head-run { from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(100%); } }
@keyframes head-out { to { opacity: 0; } }
@keyframes fill { from { transform: scale(0.55); opacity: 0; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .nav__progress { animation: nav-progress linear both; animation-timeline: scroll(root); }
  }
}
@keyframes nav-progress { to { transform: scaleX(1); } }

/* ---- Print: a clean one-pager for anyone on deadline ---------------------- */
@media print {
  @page { margin: 16mm; }
  html, body { background: #fff !important; color: #111 !important; font-size: 10.5pt; }
  .stage, .nav, .chant, .mosaic, .story__aside, .signup__card, .foot__record,
  .scorecard__ask, .manifesto-cta, .bill__share, .bill__tear, .share,
  .preview__dots, .preview__nums, .voice__grid, .voice__ask, .share-band, .till__pick { display: none !important; }
  .bill .items .row { display: grid !important; }
  .till { display: block !important; }
  .scene { min-height: 0 !important; padding: 0 0 10mm !important; page-break-inside: avoid; }
  .glass, .preview, .score-panel, .signup__card, .turn__fig, .breadth {
    background: none !important; box-shadow: none !important; backdrop-filter: none !important;
    border: 1px solid #bbb !important; border-radius: 0 !important; padding: 6mm !important;
  }
  h1, h2, h3, .beat, .pivot p, .bleed blockquote, .preview__name, .clock,
  .mosaic__word, .unlock b, .stamp { color: #111 !important; }
    h1 { font-size: 24pt; } h2 { font-size: 16pt; } h3 { font-size: 11pt; }
  
  .beat, .pivot p, .bleed blockquote { font-size: 13pt !important; }
  .unlock b { font-size: 20pt !important; }
  p, li, dd, dt, .measure, .dim, .src, figcaption { color: #333 !important; }
  .bill__paper { clip-path: none !important; transform: none !important;
    box-shadow: none !important; border: 1px solid #bbb; padding: 6mm !important; }
  
  .bill__rig { max-width: none !important; }
    .bill__head { display: none !important; }
  .bill__ink { clip-path: none !important; }
  .bill__sheet { filter: none !important; opacity: 1 !important; transform: none !important; }
  .bill dd { color: #111 !important; font-size: 14pt !important; }
  .preview__row { display: flex !important; gap: 4mm; border-bottom: 1px solid #ddd; padding: 2mm 0; }
  .preview__mark { box-shadow: inset 0 0 0 1px #999 !important; }
  .preview__status { border-color: #999 !important; color: #333 !important; }
  .timeline { grid-template-columns: repeat(3, 1fr) !important; }
  .timeline li { border-top: 1px solid #999 !important; }
  .foot { background: none !important; border-top: 2px solid #111 !important; color: #333 !important; }
  .foot a, a { color: #111 !important; }
  .src a::after, .foot__links a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; word-break: break-all; }
  [data-reveal], .mask > b { opacity: 1 !important; transform: none !important; animation: none !important; }
  .story .max, .turn__grid, .ledger, .tests__list { display: block !important; }
  .ledger li, .tests__list li { page-break-inside: avoid; }
}

/* ---- Exit intent (desktop) ------------------------------------------------ */
.exit { position: fixed; inset: 0; z-index: calc(var(--z-sticky) + 10); display: grid; place-items: center; padding: var(--page-gutter); }
.exit__scrim { position: absolute; inset: 0; background: oklch(17% 0.03 233.4 / 0.72); }
.exit__card {
  position: relative; width: min(30rem, 100%); padding: clamp(1.5rem, 3vw, 2.5rem);
  display: grid; gap: var(--space-md); justify-items: start;
}
.exit__card h2 { font-size: var(--display-3); line-height: 1.05; }
.exit__card > p { color: var(--color-paper); font-weight: 500; max-width: 38ch; }
.exit__mark { height: 2.75rem; width: auto; }
.exit__close {
  position: absolute; top: var(--space-md); right: var(--space-md); width: 2.75rem; height: 2.75rem;
  display: grid; place-content: center; border: 1.5px solid var(--rule-on-dark); border-radius: 50%;
  background: none; color: var(--color-paper); font: 500 1.4rem/1 var(--font-body); cursor: pointer;
}
.exit__close:hover { border-color: var(--color-accent); }
.exit__form { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm) var(--space-md); align-items: start; }
.exit__form input {
  font: inherit; color: var(--color-paper); background: transparent; border: 0; border-bottom: var(--rule-w) solid var(--rule-on-dark);
  padding: 0 0.1rem; height: var(--control-h); border-radius: 0; min-width: 0;
}
.exit__form input:focus-visible { outline: none; border-bottom-color: var(--color-accent); }
.exit__form input::placeholder { color: var(--color-ivory-dim); }
.exit__form input[aria-invalid="true"] { border-bottom-color: var(--color-accent); }
.exit__form .form-msg { grid-column: 1 / -1; margin: 0; }
.exit__fine { font-size: var(--text-sm); color: var(--color-ivory-dim); }
.exit__no { font: inherit; color: inherit; background: none; border: 0; padding: 0.6rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.exit__no:hover { color: var(--color-paper); }
.exit__done { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); }
@media (prefers-reduced-motion: no-preference) {
  .exit__scrim { animation: exit-fade 260ms var(--ease-out) both; }
  .exit__card { animation: exit-rise 420ms var(--ease-cine) both; }
}
@keyframes exit-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes exit-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media print { .exit { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 100ms !important; }
    [data-reveal], .mask > b, .bill__paper, .bill__sheet, .preview__row, .preview__dots i, .preview__dots a, .chip,
  .unlock > span, .unlock .src, .preview__head::after { opacity: 1 !important; transform: none !important; animation: none !important; }
    .stage img, .chant__track, .nav__progress { animation: none !important; }
  .bill__ink { clip-path: none !important; animation: none !important; }
  .bill__head { display: none !important; }
  .nav__progress { transform: none !important; }
}

/* =============================================================================
   THE PULSE · new components
   Everything above this block is the homepage stylesheet, unchanged (on WordPress
   it already lives in lbnz.css). Everything below is new, and is all a developer
   needs to add for this page.
   ============================================================================= */

/* Chart steps, derived from the brand and validated against the navy panel with the
   data-viz six checks: worst adjacent colour-blind ΔE 9.0, normal-vision ΔE 15.7.
   Neutral and the soft accent sit under 3:1 on navy, so every chart carries direct
   labels and a table view. No traffic-light greens, ambers or reds, and no party
   colours: those stay reserved for the scorecard. */
:root {
  --viz-paper:       var(--color-paper);          /* #faf5e2 */
  --viz-paper-soft:  oklch(74% 0.03 94.7);        /* #b1ab96 */
  --viz-neutral:     oklch(44% 0.015 233.4);      /* #4b545a */
  --viz-accent-soft: oklch(53% 0.115 44);         /* #a1532f */
  --viz-accent:      var(--color-accent);         /* #ed7833 */
  --viz-track:       oklch(96.9% 0.0255 94.7 / 0.12);
  --viz-rule:        oklch(96.9% 0.0255 94.7 / 0.16);
  --viz-panel:       oklch(24% 0.042 233.4 / 0.9);
}

/* ---- Labels ------------------------------------------------------------------ */
/* The orange chip from the In Focus title card */
.tag {
  display: inline-block; padding: 0.24rem 0.6rem 0.16rem; border-radius: 3px;
  background: var(--color-accent); color: var(--color-navy);
  font-family: var(--font-display); font-weight: 800; font-size: 0.875rem; line-height: 1.2;
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-bottom: var(--space-lg); font-size: var(--text-sm); font-weight: 500; color: var(--color-ivory-dim); }
.crumb a { color: var(--color-paper); text-underline-offset: 4px; text-decoration-color: var(--color-accent); padding-block: 0.7rem; }

/* ---- Title card ---------------------------------------------------------------- */
.pulse-count { justify-self: start; }
@media (min-width: 60rem) { .pulse-count { justify-self: end; } }
.pulse-count b { font-weight: 800; }

/* ---- Numbers ------------------------------------------------------------------- */
.kpi__num {
  font-family: var(--font-display); font-weight: 800; color: var(--color-accent);
  font-size: clamp(2.8rem, 4.8vw, 4.2rem); line-height: 0.95; letter-spacing: -0.03em;
  font-variant-numeric: proportional-nums;
}
.kpi__num span { font-size: 0.42em; letter-spacing: -0.01em; color: var(--color-paper); }
.kpi__line { font-weight: 500; font-size: var(--text-md); line-height: 1.35; color: var(--color-paper); max-width: 34ch; text-wrap: pretty; }
.kpi { display: grid; gap: var(--space-sm); align-content: start; padding: clamp(1.25rem, 3vw, 2rem); }
.figure { font-variant-numeric: proportional-nums; }
.figure--score b { display: inline-flex; align-items: baseline; gap: 0.08em; }
.figure--score small { font-size: 0.38em; letter-spacing: 0; color: var(--color-ivory-dim); }
.figure--hero { font-size: clamp(5rem, 13vw, 11rem); line-height: 0.9; margin-top: 0; }

/* ---- The chart panel ------------------------------------------------------------- */
.viz { margin: 0; padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
.viz.glass { background: var(--viz-panel); }
.viz figcaption { display: grid; gap: 0.2rem; }
.viz__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); line-height: 1.25; color: var(--color-paper); text-wrap: balance; }
.viz__sub { font-size: var(--text-sm); line-height: 1.4; color: var(--color-ivory-dim); }
.viz .src { margin-top: 0; }
.viz__note { margin-top: var(--space-xs); color: var(--color-ivory-dim); }

.legend { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem var(--space-lg); font-size: var(--text-sm); line-height: 1.4; color: var(--color-ivory-dim); }
.legend li { display: inline-flex; align-items: center; gap: 0.45rem; }
.legend i { flex: 0 0 auto; width: 0.8rem; height: 0.8rem; border-radius: 2px; background: var(--c); }
.legend i.is-dot { border-radius: 50%; }
.legend i.is-track { background: var(--viz-track); box-shadow: inset 0 0 0 1px var(--viz-rule); }

/* ---- Stacked bar: 24px, a 2px surface gap, labels inside only when they fit ------- */
.bar { display: flex; gap: 2px; height: 1.5rem; border-radius: 0 4px 4px 0; outline-offset: 4px; }
.bar > span {
  flex: var(--v) 1 0; min-width: 0; display: grid; place-items: center;
  background: var(--c); color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; line-height: 1; white-space: nowrap;
  transition: filter var(--dur-micro) var(--ease-out);
}
.bar > span:last-child { border-radius: 0 4px 4px 0; }
.bar > span > b { font-weight: 600; }
.bar > span.is-tight > b { visibility: hidden; }
@media (hover: hover) { .bar > span:hover { filter: brightness(1.12); } }
.s-accent      { --c: var(--viz-accent);      --ink: var(--color-navy); }
.s-accent-soft { --c: var(--viz-accent-soft); --ink: var(--color-paper); }
.s-neutral     { --c: var(--viz-neutral);     --ink: var(--color-paper); }
.s-paper-soft  { --c: var(--viz-paper-soft);  --ink: var(--color-navy); }
.s-paper       { --c: var(--viz-paper);       --ink: var(--color-navy); }
.s-track       { --c: var(--viz-track);       --ink: var(--color-ivory-dim); }

.bars { display: grid; gap: var(--space-lg); }
.bars__row { display: grid; gap: 0.45rem; }
.bars__label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2rem var(--space-md); font-weight: 500; line-height: 1.3; }
.bars__label em { font-style: normal; font-size: var(--text-sm); color: var(--color-ivory-dim); white-space: nowrap; }
.bars__label em b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); color: var(--color-paper); }

/* ---- Diverging bar: centred on neutral, prepared left, ill-prepared right --------- */
.diverge { display: grid; gap: var(--space-lg); }
.diverge__heads { display: grid; grid-template-columns: 1fr 1fr; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ivory-dim); }
.diverge__heads span:first-child { text-align: right; padding-right: 0.8rem; }
.diverge__heads span:first-child::before { content: "← "; }
.diverge__heads span:last-child { padding-left: 0.8rem; }
.diverge__heads span:last-child::after { content: " →"; }
.diverge__row { display: grid; gap: 0.45rem; }
.diverge__lane { position: relative; height: 1.5rem; }
.diverge__lane::before { content: ""; position: absolute; left: 50%; top: -0.4rem; bottom: -0.4rem; width: 1px; background: var(--viz-rule); }
.diverge__lane .bar {
  position: absolute; top: 0; bottom: 0;
  left: calc((var(--max) - var(--l)) / (2 * var(--max)) * 100%);
  width: calc(100% / (2 * var(--max)) * 100);
  border-radius: 4px;
}
.diverge__lane .bar > span:first-child { border-radius: 4px 0 0 4px; }
/* Phones: too narrow to centre and still label, so the bar runs full width, prepared to ill-prepared */
@media (max-width: 40rem) {
  .diverge__heads { display: none; }
  .diverge__lane::before { display: none; }
  .diverge__lane .bar { left: 0; width: 100%; }
  .delay__viz .viz__sub { display: none; }
}

/* ---- Ranked bars: 14px, scale fixed 0 to 10, value at the tip ---------------------- */
.rank { list-style: none; padding: 0; margin: 0; display: grid; }
.rank li {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1.25fr) minmax(0, 1fr) 2.8rem;
  gap: 0.3rem var(--space-md); align-items: center;
  padding-block: 0.55rem; border-top: var(--rule-w) solid var(--viz-rule); border-radius: 4px;
  outline-offset: 2px;
}
.rank li:first-child { border-top: 0; }
@media (hover: hover) { .rank li[data-tip] { transition: background-color var(--dur-micro) var(--ease-out); } .rank li[data-tip]:hover { background: var(--ivory-ghost); } }
.rank__n { font-family: var(--font-display); font-weight: 800; font-size: var(--text-base); color: var(--color-ivory-dim); text-align: right; font-variant-numeric: tabular-nums; }
.rank li.is-key .rank__n { color: var(--color-accent); }
.rank__label { line-height: 1.3; color: var(--color-paper); }
.rank__bar { position: relative; height: 0.875rem; background: oklch(96.9% 0.0255 94.7 / 0.06); }
.rank__bar i { display: block; height: 100%; width: calc(var(--v) * 10%); background: var(--c, var(--viz-paper-soft)); border-radius: 0 4px 4px 0; transform-origin: left; }
.rank li.is-key .rank__bar i { --c: var(--viz-accent); }
.rank__score { text-align: right; font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.rank li.is-key .rank__score { font-weight: 800; }
@media (max-width: 44rem) {
  .rank li { grid-template-columns: 1.6rem minmax(0, 1fr) 2.8rem; }
  .rank__label { grid-column: 2 / -1; }
  .rank__bar { grid-column: 2; }
  .rank__score { grid-column: 3; }
}
.rank--plain .rank__bar i { width: calc(var(--v) * 2%); }
.rank--plain li { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 2.8rem; padding-block: 0.45rem; }
.rank--plain .rank__label { font-size: var(--text-sm); color: var(--color-ivory-dim); }
@media (max-width: 44rem) { .rank--plain li { grid-template-columns: minmax(0, 1fr) 2.8rem; } .rank--plain .rank__label { grid-column: 1 / -1; } .rank--plain .rank__bar { grid-column: 1; } .rank--plain .rank__score { grid-column: 2; } }

/* ---- Unit chart: out of every 100, one circle each ------------------------------ */
.dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(4px, 0.7vw, 7px); width: 100%; max-width: 20rem; border-radius: 6px; outline-offset: 6px; }
.dots--big { max-width: 24rem; }
.dots i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--viz-track); }
.dots i.d-accent { background: var(--viz-accent); }
.dots i.d-accent-soft { background: var(--viz-accent-soft); }
.dots-card { justify-items: start; }

/* ---- Quotes ------------------------------------------------------------------------ */
.voiceq { margin: 0; max-width: 40rem; }
.voiceq .beat { max-width: 26ch; }
.voiceq footer, .q footer { margin-top: var(--space-md); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.02em; color: var(--color-ivory-dim); }
.q { margin: 0; padding: clamp(1.25rem, 3vw, 2rem); display: grid; align-content: space-between; gap: var(--space-md); border-left: 2px solid var(--color-accent); }
.q p { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.25; letter-spacing: var(--track-3); color: var(--color-paper); text-wrap: pretty; }
.q footer { margin-top: 0; }
.q--lead p { font-weight: 800; font-size: var(--text-beat); line-height: 1.1; }

/* ---- Scene layouts ---------------------------------------------------------------- */
.wait .max, .treading .max, .people .max, .delay .max, .worries .max, .ask .max { display: grid; gap: var(--space-xl); }
.wait__cards { display: grid; gap: var(--space-md); }
@media (min-width: 60rem) { .wait__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); } }
.wait__note, .people__note, .ask__note { margin-top: 0; }

.treading__grid { display: grid; gap: var(--space-lg); align-items: start; }
.treading__main { display: grid; gap: var(--space-lg); min-width: 0; }
.treading__main .figure { margin-top: 0; }
.treading__side { display: grid; gap: var(--space-md); }
@media (min-width: 60rem) { .treading__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-xl); } }

.pulse-bleed blockquote { max-width: 30ch; font-size: clamp(1.7rem, 2.6vw + 0.7rem, 3.1rem); line-height: 1.1; }

.people__grid { display: grid; gap: var(--space-md); align-items: start; }
.people__side { display: grid; gap: var(--space-md); }
@media (min-width: 48rem) { .people__side { grid-template-columns: repeat(2, minmax(0, 1fr)); } .people__side .q { grid-column: 1 / -1; } }
@media (min-width: 60rem) { .people__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-lg); } }

.delay__viz { max-width: 60rem; }
.delay__close, .worries__close, .ask__close {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.25;
  letter-spacing: var(--track-3); max-width: 40ch; text-wrap: balance; color: var(--color-paper);
}
.delay__close + .src { margin-top: calc(var(--space-xl) * -1 + var(--space-xs)); }

.rank-viz { max-width: 60rem; }

.ask__grid { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 60rem) { .ask__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); } }
.ask__fig { display: grid; gap: var(--space-md); }
.ask__line { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.25; letter-spacing: var(--track-3); max-width: 28ch; text-wrap: balance; }
.ask__fig .src { margin-top: 0; }
.quotes { display: grid; gap: var(--space-md); }
@media (min-width: 64rem) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .q--lead { grid-column: 1 / -1; } }
.q--lead { padding-block: clamp(1.5rem, 3.5vw, 2.75rem); }
.q--lead p { font-size: var(--display-3); line-height: 1.06; max-width: 30ch; text-wrap: balance; }
.ask__close { font-size: var(--text-xl); font-weight: 800; max-width: 34ch; }
.ask__close .hl { color: var(--color-accent); }

/* ---- The asks, in the plan ---------------------------------------------------------- */
.pulse-plan .glass { margin-top: var(--space-2xl); }
.asks { list-style: none; padding: 0; margin: 0; counter-reset: a; display: grid; }
.asks > li {
  counter-increment: a; display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md) var(--space-lg); align-items: start;
  padding-block: var(--space-xl); border-top: var(--rule-w) solid var(--color-navy-rule);
}
.asks > li:first-child { border-top: 0; padding-top: 0; }
.asks > li::before {
  content: counter(a, decimal-leading-zero); grid-row: 1 / 4;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 3.4vw, 3.4rem); line-height: 0.85; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1.5px var(--color-accent); font-variant-numeric: tabular-nums;
}
@supports not (-webkit-text-stroke: 1px black) { .asks > li::before { color: var(--color-accent); } }
@media (min-width: 60rem) {
  .asks > li { grid-template-columns: auto minmax(0, 6fr) minmax(0, 2.4fr) minmax(0, 3fr); gap: var(--space-md) var(--space-xl); }
  .asks > li::before { grid-row: auto; }
}
.asks h3 { font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.asks__ask p { margin-top: var(--space-xs); max-width: 50ch; color: var(--color-ivory-dim); }
.asks__num { display: grid; gap: 0.2rem; }
.asks__num b { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -0.02em; color: var(--color-accent); font-variant-numeric: proportional-nums; }
.asks__num span { font-size: var(--text-sm); line-height: 1.35; color: var(--color-ivory-dim); max-width: 18ch; }
.asks__plan { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.asks__plan small { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-ivory-dim); }
.asks__plan a {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); line-height: 1.3;
  color: var(--color-paper); text-decoration: underline; text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px; text-underline-offset: 5px; padding-block: 0.7rem;
}
.asks__plan a:hover { color: var(--color-accent); }
@media (max-width: 59.99rem) { .asks__ask, .asks__num, .asks__plan { grid-column: 2; } }
.asks__src { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-w) solid var(--color-navy-rule); max-width: 70ch; }

/* ---- On the record ------------------------------------------------------------------- */
.record .max { display: grid; gap: var(--space-xl); }
.record__pivot { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: 1.06; letter-spacing: var(--track-2); font-size: var(--display-2); max-width: 21ch; text-wrap: balance; }
.record__grid { display: grid; gap: var(--space-md); }
@media (min-width: 60rem) { .record__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-lg); align-items: stretch; } }
.record__card { padding: clamp(1.25rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: var(--space-md); }
.record__card h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--display-3); line-height: 1.04; letter-spacing: var(--track-3); text-wrap: balance; }
.record__card > p:not(.record__kicker):not(.record__ask) { color: var(--color-ivory-dim); max-width: 44ch; }
.record__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
.record__kicker .stamp { margin: 0; }
.record__meta { font-size: var(--text-sm); font-weight: 600; color: var(--color-ivory-dim); }
.record__ask { margin-top: auto; padding-top: var(--space-xs); }
.record__card--film { padding: clamp(0.75rem, 1.6vw, 1rem); gap: 0; }
.record__film-copy { display: grid; gap: var(--space-sm); padding: var(--space-lg) clamp(0.5rem, 1.6vw, 1.5rem) var(--space-md); }
.record__film-copy h3 { font-size: clamp(1.45rem, 2.2vw + 0.4rem, 2.2rem); text-transform: none; font-weight: 800; letter-spacing: var(--track-3); }
.film { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: clip; background: var(--color-navy); box-shadow: 0 0 0 1px var(--ivory-ghost); }
.film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.film__play {
  position: absolute; inset: 0; display: grid; place-content: center; padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(to top, oklch(20% 0.035 233.4 / 0.55), oklch(20% 0.035 233.4 / 0.05) 60%);
}
.film__play span {
  display: grid; place-content: center; width: clamp(4rem, 7vw, 5.25rem); aspect-ratio: 1; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 12px 32px var(--shadow-deep);
  transition: transform var(--dur-short) var(--ease-out);
}
.film__play span::before { content: ""; width: 1.4rem; height: 1.6rem; margin-left: 0.3rem; background: var(--color-navy); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.film__play:hover span, .film__play:focus-visible span { transform: scale(1.06); }
.film__play:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -4px; }
.film.is-playing .film__play { display: none; }
.record .neutral { font-size: var(--text-sm); color: var(--color-ivory-dim); max-width: 52ch; }
.record .share-band { margin-top: 0; }

/* ---- Method ---------------------------------------------------------------------------- */
.method__panel { display: grid; gap: var(--space-lg); }
.method__panel h2 { font-size: var(--display-3); line-height: 1.04; }
.method__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 60rem) { .method__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); } }
.method__copy { display: grid; gap: var(--space-md); align-content: start; }
.method__copy p { max-width: 62ch; color: var(--color-paper); }
.method__copy .src { color: var(--color-ivory-dim); }
.method__who { display: grid; gap: var(--space-xl); align-content: start; }
.who-viz { padding: 0; gap: var(--space-sm); }

/* ---- Tables: every chart has one ----------------------------------------------------------- */
.viz__table { font-size: var(--text-sm); }
.viz__table summary {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; color: var(--color-paper);
  text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.viz__table summary::-webkit-details-marker { display: none; }
.viz__table[open] summary { margin-bottom: var(--space-xs); }
.viz__table table { width: 100%; border-collapse: collapse; }
.viz__table th, .viz__table td { padding: 0.5rem 0.6rem 0.5rem 0; text-align: left; vertical-align: top; border-bottom: var(--rule-w) solid var(--viz-rule); font-weight: 400; }
.viz__table thead th { font-weight: 600; color: var(--color-ivory-dim); }
.viz__table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.viz__table tbody th { color: var(--color-paper); }
@media (max-width: 40rem) { .viz__table { overflow-x: auto; } .viz__table table { min-width: 30rem; } }

/* ---- Tooltip: the value leads, the label follows ------------------------------------------ */
.tip {
  position: fixed; left: 0; top: 0; z-index: calc(var(--z-sticky) + 20); pointer-events: none;
  max-width: 17rem; padding: 0.55rem 0.75rem 0.6rem; border-radius: 6px;
  background: var(--color-paper); color: var(--color-navy); box-shadow: 0 10px 28px var(--shadow-deep);
  font-size: var(--text-sm); line-height: 1.35;
  opacity: 0; transition: opacity var(--dur-short) var(--ease-out);
}
.tip.is-on { opacity: 1; }
.tip b { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); line-height: 1.1; }
.tip span { display: block; margin-top: 0.15rem; color: var(--color-ink-muted); }

/* ---- Motion: bars grow, circles fill, once, on arrival -------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .viz .bar > span { transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-cine), filter var(--dur-micro) var(--ease-out); }
  .js .viz.is-in .bar > span { transform: none; }
  .js .viz.is-in .bar > span:nth-child(2) { transition-delay: 90ms; }
  .js .viz.is-in .bar > span:nth-child(3) { transition-delay: 180ms; }
  .js .viz.is-in .bar > span:nth-child(4) { transition-delay: 270ms; }
  .js .viz.is-in .bar > span:nth-child(5) { transition-delay: 360ms; }
  .js .viz .rank__bar i { transform: scaleX(0); transition: transform 800ms var(--ease-cine); transition-delay: calc(var(--r, 0) * 60ms + 150ms); }
  .js .viz.is-in .rank__bar i { transform: none; }
  .js .dots i { transform: scale(0.55); opacity: 0.4; transition: transform 380ms var(--ease-pop), opacity 280ms var(--ease-out); transition-delay: calc(var(--k, 0) * 12ms + 250ms); }
  .js .is-in .dots i { transform: none; opacity: 1; }
}

/* ---- Print ------------------------------------------------------------------------------------ */
@media print {
  .crumb a, .film, .share-band, .record .neutral, .tip, .viz__table summary { display: none !important; }
  .viz__table { display: block !important; }
  .viz__table table { display: table !important; }
  .viz, .kpi, .q, .record__card, .method__panel { background: none !important; box-shadow: none !important; border: 1px solid #bbb !important; }
  .kpi__num, .figure, .asks__num b { color: #111 !important; }
  .bar > span, .dots i, .rank__bar i { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .bar > span, .rank__bar i, .dots i { transform: none !important; opacity: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .bar > span, .rank__bar i, .dots i { transform: none !important; opacity: 1 !important; }
}


/* scorecard */
/* =============================================================================
   SCORECARD · new components
   Everything above this block is the homepage stylesheet (plus The Pulse's labels,
   quotes and method panel), unchanged. Everything below is new for /scorecard/.
   Rating colours (--rate-c/p/n/0) stay reserved for ratings, as on the homepage.
   ============================================================================= */

/* ---- Neutral rating (v2, IAC method): pale, so it reads apart from the grey "?" of no response */
:root { --rate-z: oklch(86% 0.014 233); }
.chip--z { background: var(--rate-z); color: var(--color-navy); }
.preview__dots [data-r="-"] { background: var(--rate-z); color: var(--color-navy); }
.preview__dots [data-r="-"]::before { content: "–"; }
.ptab__mini [data-r="-"] { background: var(--rate-z); opacity: 1; }
/* v2: the "why this rating" line is gone, so INZ's position leads the left column */
.pri__why .pri__pos { font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); line-height: 1.45; color: var(--color-paper); max-width: 44ch; }

/* ---- Hero ---------------------------------------------------------------------- */
.sc-hero .crumb .stamp { margin: 0; font-size: 0.8rem; padding: 0.15rem 0.55rem; }
.sc-count b { font-weight: 800; }
.sc-count .of { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; white-space: nowrap; color: var(--color-ivory-dim); letter-spacing: 0; }
@media (min-width: 60rem) { .sc-count { justify-self: end; } }

/* ---- The table (homepage component, now live) ---------------------------------- */
.sc-table .max { display: grid; gap: var(--space-lg); }
.sc-table .ratings-key { margin-top: 0; }
.sc-table .preview { margin-top: 0; }
a.preview__name { color: var(--color-paper); text-decoration: none; }
a.preview__name:hover { text-decoration: underline; text-decoration-color: var(--pc); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.preview__status[data-state="answered"] { color: var(--color-paper); border-color: var(--rate-c); }
.preview__status[data-state="none"] { color: var(--color-paper); border-color: var(--rate-0); background: oklch(62% 0.012 233 / 0.18); }
.preview__row.is-none .preview__name { color: var(--color-ivory-dim); }
.preview__dots a[data-r]:hover { transform: scale(1.15); }
.preview__dots [data-r="0"] { opacity: 0.7; }

/* ---- The rule ------------------------------------------------------------------- */
.rule { display: grid; gap: var(--space-xl); }
@media (min-width: 60rem) { .rule { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-xl) var(--space-2xl); } }
.rule h2 { font-size: var(--display-3); line-height: 1.04; }
.rule__copy { display: grid; gap: var(--space-md); align-content: start; }
.rule__copy > p { max-width: 50ch; font-weight: 500; }
.rule__scale { list-style: none; padding: 0; margin: var(--space-sm) 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
.rule__scale li { display: grid; gap: 0.35rem; padding: 0.7rem 0.6rem 0.75rem; border-radius: 8px; background: var(--ivory-ghost); font-size: 0.875rem; line-height: 1.25; color: var(--color-ivory-dim); }
.rule__scale b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1; color: var(--color-paper); font-variant-numeric: proportional-nums; }
.rule__cards { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-sm); align-content: start; }
.rule__cards li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem var(--space-md); align-items: center; padding: var(--space-md) var(--space-lg); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--rule-on-dark); }
.rule__cards .chip { grid-row: 1 / 3; width: 2.4rem; height: 2.4rem; font-size: var(--text-md); }
.rule__cards h3 { font-weight: 800; font-size: var(--text-md); }
.rule__cards p { font-size: var(--text-sm); color: var(--color-ivory-dim); max-width: 44ch; }
.rule__note { grid-column: 1 / -1; padding-top: var(--space-lg); border-top: var(--rule-w) solid var(--color-navy-rule); max-width: 80ch; color: var(--color-paper); }

/* ---- Party tabs ------------------------------------------------------------------ */
.sc-said .max { display: grid; gap: var(--space-lg); }
.sc-said h2 { font-size: var(--display-2); }
.ptabs {
  position: sticky; top: calc(var(--nav-h, 4.5rem) + 0.5rem); z-index: 20;
  display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; padding: 0.4rem;
  border-radius: 14px; background: oklch(22% 0.04 233.4 / 0.86);
  box-shadow: 0 0 0 1px var(--ivory-ghost), 0 14px 36px oklch(17.4% 0.0017 17.3 / 0.35);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.ptabs::-webkit-scrollbar { display: none; }
.ptab {
  flex: 1 0 auto; display: grid; grid-template-columns: auto auto; align-items: center; gap: 0.3rem 0.55rem;
  min-height: 3.6rem; padding: 0.55rem 0.9rem; border-radius: 10px; text-decoration: none; color: var(--color-ivory-dim);
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.ptab:hover { background: var(--ivory-ghost); color: var(--color-paper); }
.ptab[aria-selected="true"] { background: var(--color-paper); color: var(--color-navy); }
.ptab__mark { width: 0.8rem; height: 0.8rem; border-radius: 3px; background: var(--pc); box-shadow: inset 0 0 0 1px var(--rule-on-dark); }
.ptab__mini { grid-column: 1 / -1; display: flex; gap: 3px; }
.ptab__mini i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--rate-0); opacity: 0.55; }
.ptab__mini [data-r="C"] { background: var(--rate-c); opacity: 1; }
.ptab__mini [data-r="P"] { background: var(--rate-p); opacity: 1; }
.ptab__mini [data-r="N"] { background: var(--rate-n); opacity: 1; }

/* ---- A party ----------------------------------------------------------------------- */
.panel { display: grid; gap: var(--space-md); scroll-margin-top: 9rem; }
.js .panel:not(.is-on) { display: none; }
.panel__head { display: grid; gap: var(--space-sm) var(--space-xl); padding: clamp(1.25rem, 3vw, 2.25rem); border-top: 6px solid var(--pc); }
@media (min-width: 60rem) { .panel__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .panel__dots { grid-column: 2; grid-row: 1 / 3; align-self: center; } }
.panel__id { display: flex; align-items: center; gap: var(--space-md); }
.panel__mark { width: 1.4rem; height: 1.4rem; border-radius: 4px; background: var(--pc); box-shadow: inset 0 0 0 1px var(--rule-on-dark); flex: 0 0 auto; }
.panel__head h2 { font-size: var(--display-3); line-height: 1; }
.panel__status { font-weight: 500; color: var(--color-ivory-dim); }
.panel__status .stamp { font-size: 0.8rem; padding: 0.1rem 0.5rem; }
.stamp--ok { border-color: var(--rate-c); color: var(--rate-c); }
.stamp--grey { border-color: var(--rate-0); color: var(--color-paper); background: oklch(62% 0.012 233 / 0.2); }
.panel__tally { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font-weight: 600; }
.panel__tally span { display: inline-flex; align-items: center; gap: 0.5rem; }
.panel__tally .chip { width: 1.6rem; height: 1.6rem; font-size: 0.8rem; border-radius: 5px; }
.panel__dots { justify-content: start; }
@media (min-width: 66rem) { .panel__dots.preview__dots { grid-template-columns: repeat(8, 2.4rem); } }
.panel__dots > * { width: 2.1rem; height: 2.1rem; }

/* ---- A priority ---------------------------------------------------------------- */
.pri { padding: clamp(1.25rem, 3vw, 2.25rem); display: grid; gap: var(--space-lg); scroll-margin-top: 10rem; }
.pri:target { box-shadow: 0 0 0 2px var(--color-accent), 0 24px 60px oklch(17.4% 0.0017 17.3 / 0.35); }
.pri__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs) var(--space-md); align-items: center; padding-bottom: var(--space-md); border-bottom: var(--rule-w) solid var(--color-navy-rule); }
@media (min-width: 48rem) { .pri__head { grid-template-columns: auto minmax(0, 1fr) auto; } }
.pri__n { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 0.85; letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: 1.5px var(--color-accent); }
.pri__head h3 { font-weight: 800; font-size: var(--text-lg); line-height: 1.15; text-wrap: balance; }
.pri__rate { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 600; white-space: nowrap; }
@media (max-width: 47.99rem) { .pri__rate { grid-column: 2; } }
.pri__rate .chip { width: 2.2rem; height: 2.2rem; font-size: var(--text-base); }
.pri__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 60rem) { .pri__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-2xl); } }
.pri__why { display: grid; gap: var(--space-xs); align-content: start; }
.pri__label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ivory-dim); }
.pri__label:not(:first-child) { margin-top: var(--space-md); }
.pri__reason { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); line-height: 1.4; color: var(--color-paper); max-width: 44ch; }
.pri__pos { font-size: var(--text-sm); color: var(--color-ivory-dim); max-width: 48ch; }
.pri__said { display: grid; gap: var(--space-lg); align-content: start; min-width: 0; }

.stmts__axis { display: none; }
@media (min-width: 48rem) {
  .stmts__axis { display: grid; grid-template-columns: minmax(0, 1fr) 11.5rem; gap: var(--space-sm); margin-bottom: calc(var(--space-lg) * -1 + 0.4rem); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ivory-dim); }
  .stmts__axis span:last-child { display: flex; justify-content: space-between; width: calc(1.9rem * 5 + 12px); }
  .stmts__axis i { font-style: normal; }
}
.stmts { list-style: none; padding: 0; margin: 0; display: grid; }
.stmts li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.35rem var(--space-sm); padding-block: 0.8rem; border-top: var(--rule-w) solid var(--color-navy-rule); }
.stmts li:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 48rem) { .stmts li { grid-template-columns: 2.4rem minmax(0, 1fr) 11.5rem; align-items: start; } }
.stmt__id { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--color-accent); padding-top: 0.15rem; }
.stmts p { font-size: 0.95rem; line-height: 1.45; color: var(--color-paper); }
.ans { display: grid; gap: 0.3rem; justify-items: start; }
@media (max-width: 47.99rem) { .ans { grid-column: 2; } }
.ans__pips { display: flex; gap: 3px; }
.ans__pips i { width: 1.9rem; height: 0.45rem; border-radius: 2px; background: var(--viz-track); box-shadow: inset 0 0 0 1px var(--viz-rule); }
.ans__pips i.on { background: var(--color-paper); box-shadow: none; }
.ans b { font-weight: 600; font-size: 0.875rem; line-height: 1.2; color: var(--color-paper); }
.ans[data-v="-1"] b, .ans[data-v="-2"] b { color: var(--color-paper); text-decoration: underline; text-decoration-color: var(--rate-n); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ans[data-v="0"] b { color: var(--color-ivory-dim); }

.said { margin: 0; padding: var(--space-lg) var(--space-lg) var(--space-md); border-left: 3px solid var(--pc); border-radius: 0 10px 10px 0; background: oklch(96.9% 0.0255 94.7 / 0.06); display: grid; gap: var(--space-sm); }
.said small { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ivory-dim); }
.said p { font-size: var(--text-base); line-height: 1.6; color: var(--color-paper); max-width: 68ch; }
.said p::before { content: none; }
.said footer { font-size: var(--text-sm); color: var(--color-ivory-dim); }
.said--empty { font-size: var(--text-sm); color: var(--color-ivory-dim); background: none; padding: 0; border: 0; }
.said--redact div { display: grid; gap: 0.6rem; padding-block: 0.3rem; }
.redact { display: block; height: 0.8rem; width: var(--w); border-radius: 3px; background: repeating-linear-gradient(135deg, oklch(96.9% 0.0255 94.7 / 0.2) 0 6px, oklch(96.9% 0.0255 94.7 / 0.1) 6px 12px); }
.pri--extra .said { border-left-color: var(--pc); }
.pri--note { margin-bottom: var(--space-sm); }
.links { margin: var(--space-xs) 0 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.links a { color: var(--color-paper); text-decoration-color: var(--color-accent); text-underline-offset: 4px; overflow-wrap: anywhere; }

/* ---- No response ----------------------------------------------------------------- */
.panel--none .panel__head { border-top-color: var(--rate-0); }
.silence { padding: clamp(1.5rem, 4vw, 3.5rem); display: grid; gap: var(--space-lg); }
.silence__big { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--display-2); line-height: 1.02; letter-spacing: var(--track-2); max-width: 16ch; }
.silence__big span { color: var(--color-accent); }
.silence__line { font-size: var(--text-md); font-weight: 500; max-width: 56ch; }
.silence__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 var(--space-2xl); }
@media (min-width: 60rem) { .silence__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.silence__list li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; padding-block: 0.85rem; border-top: var(--rule-w) solid var(--color-navy-rule); font-weight: 600; }
.silence__list li span { font-family: var(--font-display); font-weight: 800; color: var(--color-ivory-dim); }
.silence__list li b { font-size: var(--text-sm); font-weight: 600; color: var(--color-ivory-dim); padding: 0.1rem 0.6rem; border-radius: 99px; background: oklch(62% 0.012 233 / 0.22); white-space: nowrap; }
.silence__note { font-size: var(--text-sm); color: var(--color-ivory-dim); max-width: 60ch; }

/* ---- Method steps ------------------------------------------------------------------ */
.method__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; align-content: start; }
.method__steps li { display: grid; gap: 0.15rem; padding: var(--space-md) 0; border-top: var(--rule-strong) solid var(--rule-on-dark); }
.method__steps li.is-key { border-top-color: var(--color-accent); }
.method__steps b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); line-height: 1.1; }
.method__steps li.is-key b { color: var(--color-accent); }
.method__steps span { color: var(--color-ivory-dim); }

/* ---- Illustrative banner (anonymised build only) -------------------------------------- */
.anon-banner { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: calc(var(--z-sticky) + 5); width: min(92vw, 46rem);
  padding: 0.7rem 1.1rem; border-radius: 10px; background: var(--color-paper); color: var(--color-navy); font-size: var(--text-sm); line-height: 1.4; box-shadow: 0 10px 30px var(--shadow-deep); }
.anon-banner b { font-weight: 800; }

/* ---- Print: every party, every answer -------------------------------------------------- */
@media print {
  .js .panel:not(.is-on) { display: grid !important; }
  .ptabs, .anon-banner, .share-band { display: none !important; }
  .preview__dots, .panel__dots { display: grid !important; }
  .pri, .panel__head, .silence, .rule { background: none !important; box-shadow: none !important; border: 1px solid #bbb !important; page-break-inside: avoid; }
  .chip, .preview__dots > *, .ans__pips i, .ptab__mini i { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

.js .panel__dots i, .js .panel__dots a { opacity: 1 !important; transform: none !important; }

/* No response reads as a question: we don't know where they stand */
.preview__dots [data-r="0"]::before { content: "?"; }
.preview__dots [data-r="0"] { font-size: 0.8rem; line-height: 1; color: var(--color-paper); }
.chip--0 { font-size: var(--text-sm); line-height: 1; color: var(--color-paper); }