/* ============================================================
   Foundry Revenue Partners — Packaging & Pricing page
   Loaded after services.css, which it shares the title, the
   typewriter, the fades and the closing section with. Only what
   this page adds lives here, and every class is prefixed prc-
   so nothing here can collide with site.css or services.css
   (Rule 32).
   ============================================================ */

/* ---------- shared section heads ---------- */
/* The intro is the title alone (its paragraph was removed), so the spacing
   that framed a paragraph goes too: one 60px step from title to next section. */
.prc-intro { padding-bottom: 0; }
.prc-intro .svc-title { margin-bottom: 0; }
.prc-pre { padding-top: var(--spacing-60); }
.prc-head { max-width: 52rem; }
.prc-kicker { display: block; color: var(--color-accent-edge); letter-spacing: 0.16em; margin-bottom: var(--spacing-20); }
/* Section heads here are sentences, not two-word headlines, so they get more
   air than the site's display default (0.9 leading, -0.04em): open leading,
   lighter tracking, and a wider measure so a long one sits on two lines. */
.prc-head h2 {
  font-size: clamp(2.25rem, 5vw, 4.25rem); max-width: 24ch;
  line-height: 1.06; letter-spacing: var(--tracking-mid);
  margin: 0 0 var(--spacing-30); text-wrap: balance;
}
.prc-head p {
  font-family: var(--font-ui); font-weight: var(--font-weight-light);
  font-size: clamp(1.125rem, 1.7vw, 1.4rem); line-height: 1.65; letter-spacing: 0;
  max-width: 52ch; margin: 0;
}

/* ---------- the free pre-assessment: three steps ----------
   One line joining three numbered nodes, side by side. On arrival the line
   fills left to right at an even pace, each node lights and pops as the line
   reaches it, then its words rise beneath. Then all three keep a slow pulse
   that travels along the line. On a phone the same
   thing runs top to bottom down a rail on the left. */
.prc-flow {
  --node: 38px; --gap: clamp(20px, 3vw, 40px);
  position: relative; margin-top: var(--spacing-45); max-width: 64rem;
}
.prc-steps {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap);
}
.prc-steps li { display: flex; flex-direction: column; gap: var(--spacing-8); }
.prc-flow-line {
  position: absolute; top: calc(var(--node) / 2 - 1px); height: 2px;
  left: calc(var(--node) / 2);
  /* ends on the third node: the width of one column, less half a node */
  right: calc((100% - 2 * var(--gap)) / 3 - var(--node) / 2);
  background: var(--color-muted-sage);
}
.prc-flow-fill {
  position: absolute; inset: 0; background: var(--color-typesetter-ink);
  transform-origin: left center;
}
.prc-node {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: var(--node); height: var(--node);
  margin-bottom: var(--spacing-10);
  border-radius: var(--radius-round);
  background: var(--color-typesetter-ink); color: var(--color-highlighter-green);
  border: 2px solid var(--color-typesetter-ink);
  font-family: var(--font-ui); font-size: var(--text-body-sm); font-weight: var(--font-weight-w550);
  font-variant-numeric: tabular-nums;
}
.prc-node::after {
  content: ''; position: absolute; inset: -2px; border-radius: var(--radius-round);
  border: 2px solid var(--color-highlighter-green); opacity: 0; pointer-events: none;
}
.prc-steps h3 {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8);
  font-family: var(--font-ui); font-weight: var(--font-weight-w550);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.2; letter-spacing: var(--tracking-mid);
}
.prc-steps p {
  margin: 0; font-weight: var(--font-weight-light);
  font-size: clamp(0.975rem, 1.15vw, 1.0625rem); line-height: 1.55; max-width: 30ch;
}
.prc-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Arrival. Timings share one clock: the line runs 1.4s linearly from the
   first node to the third, so node i is reached at 0.2s + i * 0.7s. */
.svc-motion .prc-flow .prc-flow-fill { transform: scaleX(0); }
.svc-motion .prc-flow .prc-node {
  transform: scale(0.55); background: var(--surface-canvas); color: var(--color-newsprint-gray);
  border-color: var(--color-muted-sage);
}
.svc-motion .prc-flow .prc-steps li > :not(.prc-node) { opacity: 0; transform: translateY(10px); }
.svc-motion .prc-flow.is-shown .prc-flow-fill { transform: none; transition: transform 1.4s linear 0.2s; }
.svc-motion .prc-flow.is-shown .prc-node {
  transform: none; background: var(--color-typesetter-ink); color: var(--color-highlighter-green);
  border-color: var(--color-typesetter-ink);
  transition: transform 0.5s cubic-bezier(0.34, 1.7, 0.64, 1) calc(0.2s + var(--i) * 0.7s),
              background-color 0.25s ease calc(0.2s + var(--i) * 0.7s),
              color 0.25s ease calc(0.2s + var(--i) * 0.7s),
              border-color 0.25s ease calc(0.2s + var(--i) * 0.7s);
}
/* Each node rings once as the line reaches it, then all three keep a slow
   pulse, offset so it travels 1 -> 2 -> 3 along the line. */
.svc-motion .prc-flow.is-shown .prc-node::after {
  animation: prc-ring 0.9s ease-out calc(0.2s + var(--i) * 0.7s) 1 both,
             prc-ring 2.4s ease-out calc(2.6s + var(--i) * 0.8s) infinite;
}
.svc-motion .prc-flow.is-shown .prc-steps li > :not(.prc-node) {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease calc(0.35s + var(--i) * 0.7s), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(0.35s + var(--i) * 0.7s);
}
@keyframes prc-ring {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}

@media (max-width: 600px) {
  /* A rail down the left: one segment per step, from its node to the next,
     each filling as the one before it finishes. */
  .prc-steps { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-25); }
  .prc-steps li { position: relative; padding-left: calc(var(--node) + var(--spacing-15)); min-height: var(--node); }
  .prc-node { position: absolute; left: 0; top: -6px; margin: 0; }
  .prc-flow-line { display: none; }
  .prc-steps li:not(:last-child)::before,
  .prc-steps li:not(:last-child)::after {
    content: ''; position: absolute; left: calc(var(--node) / 2 - 1px); width: 2px;
    top: calc(var(--node) / 2 - 6px); height: calc(100% + var(--spacing-25));
    background: var(--color-muted-sage);
  }
  .prc-steps li:not(:last-child)::after { background: var(--color-typesetter-ink); transform-origin: center top; }
  .svc-motion .prc-flow .prc-steps li::after { transform: scaleY(0); }
  .svc-motion .prc-flow.is-shown .prc-steps li::after { transform: none; transition: transform 0.7s linear calc(0.2s + var(--i) * 0.7s); }
  .prc-steps p { max-width: none; }
}

/* ---------- where are you starting from? ---------- */
.prc-route { padding-top: var(--spacing-40); }
.prc-picks {
  list-style: none; margin: var(--spacing-40) 0 var(--spacing-30); padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-15);
}
.prc-picks li { display: flex; }
.prc-pick {
  position: relative; width: 100%; min-height: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-15);
  padding: var(--spacing-25) var(--spacing-20) var(--spacing-20);
  text-align: left; cursor: pointer;
  font-family: var(--font-ui); color: var(--color-typesetter-ink);
  background: color-mix(in srgb, var(--color-bone-white) 85%, transparent);
  border: 1px solid var(--color-muted-sage); border-radius: var(--radius-pills);
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, transform 0.25s ease;
}
.prc-pick:hover { border-color: var(--color-typesetter-ink); transform: translateY(-3px); }
.prc-pick:focus-visible { outline: 2px solid var(--color-accent-edge); outline-offset: 3px; }
.prc-pick-mark {
  width: 22px; height: 22px; border-radius: var(--radius-round);
  border: 1.5px solid var(--color-newsprint-gray); position: relative;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.prc-pick-mark::after {
  content: ''; position: absolute; inset: 4px; border-radius: var(--radius-round);
  background: var(--color-accent-ink); transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.prc-pick-say {
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.05; letter-spacing: var(--tracking-mid); flex: 1 1 auto;
}
.prc-pick-route {
  font-size: var(--text-caption); line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: var(--font-weight-w550); color: var(--color-accent-edge);
}
.prc-pick[aria-pressed="true"] {
  background: var(--color-press-black); border-color: var(--color-press-black);
  color: var(--color-bone-white); box-shadow: var(--shadow-lg); transform: translateY(-3px);
}
.prc-pick[aria-pressed="true"] .prc-pick-mark { background: var(--color-highlighter-green); border-color: var(--color-highlighter-green); }
.prc-pick[aria-pressed="true"] .prc-pick-mark::after { transform: scale(1); }
.prc-pick[aria-pressed="true"] .prc-pick-route { color: var(--color-highlighter-green); }
/* Without script the cards are the four routes, written out, and nothing to press. */
.prc-route:not(.is-live) .prc-pick { cursor: default; }
.prc-route:not(.is-live) .prc-pick:hover { transform: none; border-color: var(--color-muted-sage); }
.prc-route:not(.is-live) .prc-pick-mark,
.prc-route:not(.is-live) .prc-grow-row { display: none; }

/* ---------- the route map: a circuit on a Blueprint sheet ---------- */
.prc-sheet {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  column-gap: clamp(25px, 3.5vw, 50px);
  background-color: var(--color-press-black);
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-shadow-moss) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-shadow-moss) 16%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--color-shadow-moss) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-shadow-moss) 7%, transparent) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  color: var(--color-bone-white);
  border-radius: var(--radius-images);
  padding: var(--spacing-25) clamp(20px, 3.5vw, 40px) var(--spacing-20);
}
/* Crop marks, as on the Phase 01 sheets. */
.prc-sheet::before,
.prc-sheet::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  border: 0 solid var(--color-highlighter-green); pointer-events: none;
}
.prc-sheet::before { top: 9px; left: 9px; border-top-width: 1.5px; border-left-width: 1.5px; }
.prc-sheet::after { bottom: 9px; right: 9px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.prc-sheet-head,
.prc-sheet-foot {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; gap: var(--spacing-15);
  font-size: var(--text-caption); letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: var(--font-weight-medium); color: var(--color-shadow-moss);
}
.prc-sheet-head { padding-bottom: var(--spacing-10); margin-bottom: var(--spacing-20); border-bottom: 1px solid color-mix(in srgb, var(--color-shadow-moss) 45%, transparent); }
.prc-sheet-foot { padding-top: var(--spacing-10); margin-top: var(--spacing-20); border-top: 1px solid color-mix(in srgb, var(--color-shadow-moss) 45%, transparent); }

.prc-map { display: block; width: 100%; height: auto; overflow: visible; align-self: center; }
.prc-map path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.prc-tarmac { stroke: var(--color-slate-verdant); stroke-width: 30; }
.prc-tarmac-pit { stroke-width: 20; }
.prc-centre { stroke: var(--color-shadow-moss); stroke-opacity: 0.45; stroke-width: 1.5; stroke-dasharray: 8 10; }
.prc-check-a { fill: var(--color-bone-white); }
.prc-check-b { fill: var(--color-press-black); }

/* The lit line: every one carries pathLength="1", so one dash rule draws
   them all. Switched on, a sector draws in its place in the route (--k);
   switched off, it retracts at once with no delay. */
.prc-lit {
  stroke: var(--color-highlighter-green); stroke-width: 5;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-highlighter-green) 55%, transparent));
  transition: stroke-dashoffset 0.35s ease;
}
.prc-lit.is-on,
.prc-lit-pit { stroke-dashoffset: 0; }
.prc-lit.is-on { transition: stroke-dashoffset 0.85s cubic-bezier(0.65, 0, 0.35, 1) calc(0.15s + var(--k, 0) * 0.75s); }
.svc-motion .prc-sheet .prc-lit-pit { stroke-dashoffset: 1; }
.svc-motion .prc-sheet.is-shown .prc-lit-pit { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }

/* Engine Growth: the inner lane, beside lit sectors only, always moving. */
.prc-grow {
  stroke: var(--color-highlighter-green); stroke-width: 2.5; stroke-dasharray: 5 9;
  opacity: 0; transition: opacity 0.4s ease;
}
.prc-sheet.is-growing .prc-grow.is-on { opacity: 0.9; animation: prc-march 0.9s linear infinite; }
@keyframes prc-march { to { stroke-dashoffset: -28; } }

.prc-badge circle { fill: var(--color-press-black); stroke: var(--color-shadow-moss); stroke-width: 2; transition: fill 0.3s ease, stroke 0.3s ease; }
.prc-badge text { fill: var(--color-bone-white); font-family: var(--font-ui); font-size: 15px; font-weight: var(--font-weight-w550); letter-spacing: 0.04em; transition: fill 0.3s ease; }
.prc-badge.is-on circle { fill: var(--color-highlighter-green); stroke: var(--color-highlighter-green); }
.prc-badge.is-on text { fill: var(--color-accent-ink); }
.prc-map text.prc-name,
.prc-map text.prc-cap { font-family: var(--font-ui); text-transform: uppercase; }
.prc-name { fill: var(--color-muted-sage); font-size: 17px; font-weight: var(--font-weight-medium); letter-spacing: 0.08em; transition: fill 0.3s ease, opacity 0.3s ease; }
.prc-name.is-on { fill: var(--color-bone-white); }
.prc-name-pit { fill: var(--color-highlighter-green); }
.prc-cap { fill: var(--color-shadow-moss); font-size: 12px; font-weight: var(--font-weight-medium); letter-spacing: 0.14em; }
/* Once a route is picked, what is not in it steps back. */
.prc-sheet:not([data-route=""]) .prc-badge:not(.is-on),
.prc-sheet:not([data-route=""]) .prc-name:not(.is-on):not(.prc-name-pit) { opacity: 0.45; }

/* The readout. */
.prc-read { display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-20); }
.dark .prc-read-say,
.prc-sheet .prc-read-say {
  margin: 0; min-height: 3.3em;
  font-family: var(--font-display); font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.12;
  letter-spacing: var(--tracking-mid); color: var(--color-bone-white);
}
.prc-legend { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--color-shadow-moss) 45%, transparent); }
.prc-leg {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--spacing-10);
  padding: var(--spacing-10) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-shadow-moss) 30%, transparent);
}
.prc-leg-code,
.prc-leg-state {
  font-size: var(--text-caption); letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: var(--font-weight-medium); color: var(--color-shadow-moss);
  transition: color 0.3s ease;
}
.prc-leg-state { text-align: right; }
.prc-leg-name {
  font-family: var(--font-ui); font-size: var(--text-body); line-height: 1.3;
  font-weight: var(--font-weight-regular); color: var(--color-muted-sage);
  text-decoration: none; transition: color 0.3s ease;
}
a.prc-leg-name:hover { color: var(--color-highlighter-green); text-decoration: underline; text-underline-offset: 3px; }
a.prc-leg-name:focus-visible { outline: 2px solid var(--color-highlighter-green); outline-offset: 2px; }
.prc-leg.is-on .prc-leg-code,
.prc-leg.is-on .prc-leg-state { color: var(--color-highlighter-green); }
.prc-leg.is-on .prc-leg-name { color: var(--color-bone-white); }

.prc-grow-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-10) var(--spacing-20); }
.prc-grow-btn {
  display: inline-flex; align-items: center; gap: var(--spacing-10);
  min-height: 48px; padding: var(--spacing-10) var(--spacing-20);
  background: transparent; color: var(--color-highlighter-green);
  border: 1.5px dashed var(--color-highlighter-green); border-radius: var(--radius-pills);
  font-family: var(--font-ui); font-size: var(--text-body-sm); font-weight: var(--font-weight-w550);
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.prc-grow-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--color-highlighter-green) 14%, transparent); }
.prc-grow-btn:focus-visible { outline: 2px solid var(--color-bone-white); outline-offset: 3px; }
.prc-grow-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.prc-grow-btn[aria-pressed="true"] { background: var(--color-highlighter-green); color: var(--color-accent-ink); border-style: solid; }
.prc-grow-plus { display: inline-block; font-size: 1.25rem; line-height: 1; transition: transform 0.3s ease; }
.prc-grow-btn[aria-pressed="true"] .prc-grow-plus { transform: rotate(45deg); }
.dark .prc-grow-note,
.prc-sheet .prc-grow-note { margin: 0; flex: 1 1 16rem; font-size: var(--text-body-sm); line-height: 1.5; color: var(--color-muted-sage); max-width: 40ch; }

/* Under the map: the three situations in words. A short lead, three columns
   each tagged with the phase it points to, and one closing line, instead of
   a six-sentence paragraph. Columns rise in order on arrival. */
.prc-cases { margin-top: var(--spacing-60); max-width: 64rem; }
.prc-cases-lead {
  margin: 0 0 var(--spacing-25);
  font-family: var(--font-ui); font-weight: var(--font-weight-w550);
  font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.3; letter-spacing: var(--tracking-mid);
}
.prc-cases-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-30);
}
.prc-cases-list li {
  display: flex; flex-direction: column; gap: var(--spacing-8);
  padding-top: var(--spacing-20); border-top: 2px solid var(--color-typesetter-ink);
}
.prc-case-tag {
  font-size: var(--text-caption); line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: var(--font-weight-w550); color: var(--color-accent-edge);
}
.prc-cases-list h3 {
  margin: 0; font-family: var(--font-ui); font-weight: var(--font-weight-w550);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.2; letter-spacing: var(--tracking-mid);
}
.prc-cases-list p {
  margin: 0; font-weight: var(--font-weight-light);
  font-size: clamp(0.975rem, 1.15vw, 1.0625rem); line-height: 1.55; max-width: 32ch;
}
.prc-cases-close {
  margin: var(--spacing-30) 0 0;
  font-weight: var(--font-weight-light); color: var(--color-newsprint-gray); max-width: 60ch;
  font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.55;
}
.svc-motion .prc-cases > *,
.svc-motion .prc-cases-list li { opacity: 0; transform: translateY(12px); }
.svc-motion .prc-cases-list { opacity: 1; transform: none; }
.svc-motion .prc-cases.is-shown > *,
.svc-motion .prc-cases.is-shown .prc-cases-list li {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-motion .prc-cases.is-shown .prc-cases-list li { transition-delay: calc(0.15s + var(--i) * 0.12s); }
.svc-motion .prc-cases.is-shown .prc-cases-close { transition-delay: 0.6s; }
@media (max-width: 760px) {
  .prc-cases-list { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-20); }
  .prc-cases-list p { max-width: none; }
}

/* ---------- why there's no price list ---------- */
.prc-why { padding-block: var(--spacing-120); margin-top: var(--section-gap); }
.dark .prc-head h2 { color: var(--color-bone-white); }
.dark .prc-head p { color: var(--color-muted-sage); }
.dark .prc-kicker { color: var(--color-highlighter-green); }
/* What changes the scope: the Phase 03 carousel from /services (svc-auto,
   driven by /carousel.js), restyled for a dark section. The cards step up to
   slate so they stand off the black; the controls reverse to light. */
.dark .prc-vars-label {
  display: flex; align-items: center; gap: var(--spacing-10);
  margin: var(--spacing-45) 0 var(--spacing-25);
  font-family: var(--font-ui); font-size: clamp(1.125rem, 1.4vw, 1.25rem);
  font-weight: var(--font-weight-w550); letter-spacing: var(--tracking-mid); line-height: 1.2;
  color: var(--color-bone-white);
}
.prc-vars-label::before {
  content: ''; flex: 0 0 auto; width: 22px; height: 3px;
  border-radius: var(--radius-round); background: var(--color-highlighter-green);
}
.prc-auto { max-width: 56rem; }
.dark .prc-auto .svc-auto-item { border-color: color-mix(in srgb, var(--color-shadow-moss) 35%, transparent); }
.prc-auto .svc-auto-n { color: var(--color-highlighter-green); }
.prc-auto .svc-auto-text { display: flex; flex-direction: column; gap: var(--spacing-4); }
.prc-auto-title { font-weight: var(--font-weight-w550); color: var(--color-bone-white); }
.prc-auto-desc { color: var(--color-muted-sage); font-weight: var(--font-weight-light); }
.prc-auto.is-live .svc-auto-stage { height: clamp(200px, 20vw, 230px); }
.prc-auto.is-live .svc-auto-item {
  min-height: 190px; width: min(74%, 480px);
  background-color: var(--color-slate-verdant);
}
.prc-auto.is-live .svc-auto-text { gap: var(--spacing-8); }
.prc-auto.is-live .prc-auto-desc {
  font-size: clamp(0.975rem, 1.2vw, 1.0625rem); line-height: 1.45; letter-spacing: 0;
}
.dark .prc-auto .svc-auto-dot span { background: color-mix(in srgb, var(--color-shadow-moss) 45%, transparent); }
.dark .prc-auto .svc-auto-dot:hover span { background: var(--color-shadow-moss); }
.dark .prc-auto .svc-auto-dot.is-active span { background: color-mix(in srgb, var(--color-shadow-moss) 30%, transparent); }
.dark .prc-auto .svc-auto-pause { border-color: var(--color-shadow-moss); }
.dark .prc-auto .svc-auto-pause:hover { background: var(--color-slate-verdant); border-color: var(--color-highlighter-green); }
.dark .prc-auto .svc-auto-pause-icon { border-left-color: var(--color-bone-white); border-right-color: var(--color-bone-white); }
.dark .prc-auto .svc-auto-pause[aria-pressed="true"] .svc-auto-pause-icon { border-color: transparent transparent transparent var(--color-bone-white); }
.dark .prc-auto .svc-auto-dot:focus-visible,
.dark .prc-auto .svc-auto-pause:focus-visible { outline-color: var(--color-highlighter-green); }
@media (max-width: 560px) {
  .prc-auto.is-live .svc-auto-stage { height: 230px; }
  .prc-auto.is-live .svc-auto-item { min-height: 210px; }
}
/* ---------- the closing call: determining the scope ----------
   A light checklist on the page's own canvas, deliberately unlike the dark
   route map above it. Ticked is the resting state; only the script adds
   .is-live, which unticks the boxes so they can tick themselves in turn. */
.prc-next-title {
  max-width: 16ch; text-wrap: balance;
  line-height: 1.05; letter-spacing: var(--tracking-mid);   /* a sentence, not a two-word display line (Rule 36) */
}
.prc-scope { margin-top: var(--spacing-40); max-width: 62rem; }
.prc-scope-head {
  display: flex; justify-content: space-between; gap: var(--spacing-15);
  padding-bottom: var(--spacing-10); margin-bottom: var(--spacing-20);
  border-bottom: 1px solid var(--color-muted-sage);
  font-size: var(--text-caption); letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: var(--font-weight-medium); color: var(--color-newsprint-gray);
}
.prc-scope-count { color: var(--color-typesetter-ink); font-variant-numeric: tabular-nums; }
.prc-scope-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--spacing-10); }
.prc-scope-list li {
  display: inline-flex; align-items: center; gap: var(--spacing-10);
  padding: var(--spacing-10) var(--spacing-15) var(--spacing-10) var(--spacing-10);
  border: 1px solid var(--color-typesetter-ink); border-radius: var(--radius-pills);
  background: color-mix(in srgb, var(--color-bone-white) 85%, transparent);
  font-family: var(--font-ui); font-size: 1rem; line-height: 1.2; color: var(--color-typesetter-ink);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.prc-box {
  flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center;
  border: 1.5px solid var(--color-accent-edge); border-radius: var(--radius-buttons);
  background: var(--color-highlighter-green);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.prc-box svg { width: 14px; height: 14px; overflow: visible; }
.prc-box path {
  fill: none; stroke: var(--color-typesetter-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 20; stroke-dashoffset: 0; transition: stroke-dashoffset 0.3s ease 0.08s;
}
.prc-next .actions { margin-top: var(--spacing-35); }

/* Waiting to be ticked. */
.prc-next.is-live .prc-scope-list li:not(.is-on) { border-color: var(--color-muted-sage); color: var(--color-newsprint-gray); }
.prc-next.is-live .prc-scope-list li:not(.is-on) .prc-box { background: transparent; border-color: var(--color-muted-sage); }
.prc-next.is-live .prc-scope-list li:not(.is-on) .prc-box path { stroke-dashoffset: 20; transition: none; }
.prc-next.is-live .prc-scope-list li.is-on { animation: prc-tick 0.35s ease-out; }
@keyframes prc-tick { 50% { transform: scale(1.05); } }

/* Once every box is ticked, the button draws the eye twice, then rests. */
.prc-next.is-done .btn { animation: prc-nudge 1.3s ease-out 2; }
@keyframes prc-nudge {
  from { box-shadow: var(--shadow-lg), 0 0 0 0 color-mix(in srgb, var(--color-highlighter-green) 60%, transparent); }
  to   { box-shadow: var(--shadow-lg), 0 0 0 16px transparent; }
}
@media (max-width: 560px) {
  .prc-scope-list { gap: var(--spacing-8); }
  .prc-scope-list li { font-size: 0.9375rem; padding: var(--spacing-8) var(--spacing-10) var(--spacing-8) var(--spacing-8); }
}
@media (prefers-reduced-motion: reduce) {
  .prc-next.is-done .btn, .prc-next.is-live .prc-scope-list li.is-on { animation: none; }
}

/* ---------- narrower screens ---------- */
@media (max-width: 1060px) {
  .prc-sheet { grid-template-columns: minmax(0, 1fr); }
  .prc-read { margin-top: var(--spacing-20); }
  .prc-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .prc-why { padding-block: var(--spacing-60); }
}
@media (max-width: 560px) {
  .prc-picks { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-10); }
  .prc-pick { padding: var(--spacing-20) var(--spacing-15) var(--spacing-15); }
  /* On a phone the map is too small for its words; the legend beneath carries them. */
  .prc-map text.prc-name,
  .prc-map text.prc-cap { display: none; }
  .prc-leg { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .prc-leg-state { grid-column: 2; text-align: left; margin-top: var(--spacing-4); }
}
@media (prefers-reduced-motion: reduce) {
  .prc-sheet.is-growing .prc-grow.is-on { animation: none; }
}