.pr-quote { display: grid; gap: 2rem; margin-top: var(--pr-band); padding: var(--pr-band) var(--pr-inset); background: var(--pr-concrete-deep); }
.pr-quote__intro { display: grid; gap: 1rem; align-content: start; padding-top: 1.25rem; border-top: var(--pr-rule); }
.pr-quote__intro h2 { max-width: 13ch; margin: 0; }
.pr-quote__intro p { max-width: 36rem; margin: 0; color: var(--pr-ink-muted); font-size: var(--pr-size-lede); line-height: 1.55; }
.pr-quote__intro .pr-soon { justify-self: start; }

.pr-quote__form { display: grid; gap: 0; border: var(--pr-rule); background: var(--pr-white); }
.pr-quote__form fieldset { display: grid; gap: 0; margin: 0; padding: 0; border: 0; min-width: 0; }
.pr-quote__form legend { width: 100%; padding: .6rem 1rem; background: var(--pr-asphalt); color: var(--pr-on-dark); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pr-pick { position: relative; display: grid; gap: .4rem; padding: 1rem 1rem 1.1rem 3.75rem; border-bottom: 1px solid var(--pr-joint); }
.pr-pick:has(input[type="checkbox"]:checked) { box-shadow: inset 6px 0 0 var(--pr-tip-yellow); }
.pr-pick__glyph { position: absolute; left: 1.1rem; top: 1.05rem; color: var(--pr-asphalt); }
.pr-pick .ui-field:first-of-type label { display: flex; gap: .6rem; align-items: center; font-size: 1.05rem; font-weight: 800; }
.pr-pick__detail { margin: 0; color: var(--pr-ink-muted); font-size: var(--pr-size-small); }
.pr-pick .ui-field:last-child label, .pr-quote__extras .ui-field label { color: var(--pr-ink-muted); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pr-quote__form input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--pr-asphalt); }
.pr-quote__form input[type="number"], .pr-quote__form select { width: 100%; padding: .55rem .75rem .45rem; border: 2px solid var(--pr-asphalt); border-radius: 0; font-family: var(--pr-display); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-quote__extras { padding-bottom: 1rem; }
.pr-quote__extras .ui-field { padding: 1rem 1rem 0; }
.pr-quote__extras .ui-field:last-child label { display: flex; gap: .6rem; align-items: center; color: var(--pr-asphalt); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.pr-quote__form .ui-button { justify-self: stretch; margin: 0; padding: 1.1rem 1.5rem 1rem; border: 0; border-top: var(--pr-rule); border-radius: 0; background: var(--pr-tip-yellow); color: var(--pr-asphalt); font-size: 1.05rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pr-quote__form .ui-button:hover { background: var(--pr-asphalt); color: var(--pr-tip-yellow); }

.pr-receipt { align-self: start; padding: 1.5rem clamp(1.25rem, 3vw, 1.75rem) 1.5rem; border: var(--pr-rule); background: var(--pr-canary); color: var(--pr-asphalt); -webkit-mask: radial-gradient(circle at 50% 0, transparent 6px, black 6.5px) 0 0 / 20px 100% repeat-x; mask: radial-gradient(circle at 50% 0, transparent 6px, black 6.5px) 0 0 / 20px 100% repeat-x; }
.pr-receipt__stub { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pr-receipt__title { margin: 0 0 1rem; font-family: var(--pr-display); font-size: 2.4rem; line-height: 1; }
.pr-receipt__lines { margin: 0; border-top: 2px solid var(--pr-asphalt); }
.pr-receipt__line { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px dashed var(--pr-ink-muted); }
.pr-receipt__line dt { color: var(--pr-ink-muted); }
.pr-receipt__line dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.pr-receipt__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 1.25rem 0 .75rem; }
.pr-receipt__total span { font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pr-receipt__total strong { font-family: var(--pr-display); font-size: clamp(3rem, 2.2rem + 2.5vw, 4.5rem); font-weight: 800; line-height: .9; font-variant-numeric: tabular-nums; }
.pr-receipt__area { margin: 0; color: var(--pr-ink-muted); font-size: var(--pr-size-small); }
.pr-receipt .ui-error { color: var(--pr-error); font-weight: 700; }

@media (min-width: 48rem) {
  .pr-quote__surfaces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-quote__surfaces .pr-pick:nth-of-type(odd) { border-right: 1px solid var(--pr-joint); }
  .pr-quote__extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-quote__extras legend { grid-column: 1 / -1; }
  .pr-quote__extras .ui-field:last-child { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .pr-quote { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .pr-quote__intro { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: 3rem; }
  .pr-quote__intro > .pr-tip { grid-column: 1 / -1; }
  .pr-quote__intro h2 { grid-row: span 2; }
  .pr-quote__intro .pr-soon { grid-column: 2; }
  .pr-receipt { grid-column: 2; position: sticky; top: 6rem; }
}