.pr-strip { max-width: var(--pr-content); margin: 0 auto; padding: var(--pr-band) var(--pr-gutter) 0; }
.pr-strip__plate { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; padding: .6rem 1rem; background: var(--pr-asphalt); color: var(--pr-on-dark-muted); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pr-strip__plate span:first-child { color: var(--pr-tip-yellow); }
.pr-strip__title { margin: 0; padding: 1.25rem 1rem; border-inline: var(--pr-rule); font-family: var(--pr-display); font-size: var(--pr-size-h2); font-weight: 800; }
.pr-strip__list { display: grid; margin: 0; padding: 0; border: var(--pr-rule); list-style: none; }
.pr-feature { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; align-content: start; padding: 1.25rem 1rem; border-bottom: 1px solid var(--pr-joint); }
.pr-feature__glyph { grid-row: span 2; color: var(--pr-asphalt); }
.pr-feature__glyph .pr-glyph { width: 1.75rem; height: 1.75rem; }
.pr-feature__title { margin: 0; font-size: 1.05rem; }
.pr-feature__text { margin: 0; color: var(--pr-ink-muted); font-size: .97rem; }

.pr-surfaces { max-width: var(--pr-content); margin: 0 auto; padding: var(--pr-band) var(--pr-gutter) 0; }
.pr-surfaces__grid { margin: 0; padding: 0; border-bottom: var(--pr-rule); list-style: none; }
.pr-surface { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1.5rem; align-items: center; padding: 1.25rem 0; border-top: var(--pr-rule); }
.pr-surface__code { grid-column: 1 / -1; }
.pr-surface__body { min-width: 0; }
.pr-surface__name { display: flex; align-items: center; gap: .6rem; margin: 0 0 .3rem; }
.pr-surface__text { margin: 0; color: var(--pr-ink-muted); font-size: .97rem; }
.pr-surface__rate { margin: 0; color: var(--pr-ink-muted); font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.pr-surface__rate strong { display: block; color: var(--pr-asphalt); font-family: var(--pr-display); font-size: clamp(3rem, 2rem + 3vw, 5rem); font-weight: 800; letter-spacing: 0; line-height: .9; font-variant-numeric: tabular-nums; }
.pr-surface__photo { grid-column: 1 / -1; display: block; overflow: hidden; }
.pr-surface__photo img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

.pr-proof { display: grid; gap: clamp(2rem, 4vw, 3rem); margin-top: var(--pr-band); padding: 0 var(--pr-inset) var(--pr-band); background: var(--pr-asphalt); color: var(--pr-on-dark); }
.pr-proof__stage { position: relative; margin: 0 calc(-1 * var(--pr-inset)); }
.pr-proof__stage::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--pr-white); transform-origin: top; animation: pr-line .9s var(--pr-ease) .3s both; }
.pr-proof__art img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pr-proof__labels { position: absolute; inset: auto 0 1.25rem; display: flex; justify-content: center; gap: 3px; }
.pr-proof__labels span { padding: .4rem .8rem .3rem; color: var(--pr-white); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pr-proof__before { background: var(--pr-tip-red); }
.pr-proof__after { background: var(--pr-tip-green); }
.pr-proof__copy { display: grid; gap: 1rem clamp(2rem, 5vw, 5rem); }
.pr-proof__copy h2 { max-width: 14ch; margin: 0; }
.pr-proof__lede { max-width: 32rem; margin: 0; color: var(--pr-on-dark-muted); font-size: var(--pr-size-lede); line-height: 1.55; }
.pr-proof .pr-soon { border-color: var(--pr-on-dark-muted); color: var(--pr-on-dark); justify-self: start; }
.pr-proof .pr-tip__nozzle { fill: var(--pr-on-dark); }
.pr-proof .pr-tip__spray { stroke: var(--pr-on-dark); }
.pr-proof__steps { display: grid; margin: 0; padding: 0; list-style: none; }
.pr-proof .pr-feature { border-color: var(--pr-asphalt-soft); padding-inline: 0; }
.pr-proof .pr-feature__glyph { color: var(--pr-tip-yellow); }
.pr-proof .pr-feature__text { color: var(--pr-on-dark-muted); }
.pr-proof a:focus-visible { outline-color: var(--pr-tip-yellow); }

@keyframes pr-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (min-width: 40rem) {
  .pr-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-strip__list .pr-feature:nth-child(odd) { border-right: 1px solid var(--pr-joint); }
  .pr-surface { grid-template-columns: 9rem minmax(0, 1fr) auto minmax(0, 18rem); }
  .pr-surface__code { grid-column: auto; }
  .pr-surface__photo { grid-column: auto; }
  .pr-surface__photo img { aspect-ratio: 4 / 3; }
}
@media (min-width: 64rem) {
  .pr-proof__copy { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .pr-proof__copy { align-items: start; }
  .pr-proof__steps { grid-column: 2; grid-row: 1 / span 4; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-self: center; }
}