/* Data page: the estimator on the dark ground beside an ivory payout cheque. */
.desk { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: clamp(2rem, 4vw, 3.5rem); row-gap: 2.4rem; align-items: start;
  grid-template-areas: "copy slip" "form slip"; max-width: var(--stage); width: 100%; margin: 0 auto; padding: 2rem var(--gutter) 4rem; }
.hero-copy { grid-area: copy; }
.estimator { grid-area: form; }
.slip { grid-area: slip; }
.hero-copy .label { color: var(--ivory-faint); margin-bottom: 1.2rem; }
.hero-copy .title { max-width: 20ch; }

/* scrubbed-and-anonymized promise */
.assurance { margin-top: 1.8rem; max-width: 40rem; border-top: 1px solid var(--line-dark); padding-top: 1.1rem; }
.assurance > p { color: var(--ivory-soft); font-size: .98rem; }
.assurance strong { color: var(--ivory); font-weight: 500; }
.scrub { margin: 1rem 0 0; }
.scrub .label { margin-bottom: .6rem; }
.scrub dl { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.2rem; margin: 0; }
.scrub dt { font: var(--label-font); letter-spacing: var(--label-track); line-height: 2; text-transform: uppercase; color: var(--ivory-faint); }
.scrub dd { margin: 0; color: var(--ivory); font-family: var(--serif); font-size: 1.1rem; line-height: 1.45; }
.scrub mark { background: var(--brass-tint); color: var(--brass); border: 1px solid var(--brass); padding: 0 .35rem; border-radius: 2px; font-family: var(--sans); font-size: .9rem; white-space: nowrap; }

/* the estimator: a hairline panel on the dark ground */
.estimator { border: 1px solid var(--line-dark); background: rgba(11, 10, 8, .7); padding: clamp(1.3rem, 3vw, 2.1rem); border-radius: 2px; }
.estimator .fine { margin-top: .9rem; }
.estimator .step-intro { color: var(--ivory-soft); margin-bottom: 1.2rem; }
.progress { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; padding: 0 0 1rem; margin: 0 0 1.4rem; border-bottom: 1px solid var(--line-dark); font: var(--label-font); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ivory-faint); counter-reset: step; }
.progress li { counter-increment: step; }
.progress li::before { content: counter(step, decimal-leading-zero) "  "; color: var(--brass); }
.progress li[aria-current="step"] { color: var(--ivory); }
.progress li.done { color: var(--brass); }
input[type=range] { width: 100%; margin: .7rem 0 0; accent-color: var(--brass); }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: .5rem .75rem; border: 1px solid var(--line-dark); background: var(--field); color: var(--ivory-soft); font-size: .9rem; line-height: 1.2; cursor: pointer; user-select: none; border-radius: 2px; }
.chip:hover span { border-color: var(--line-strong); color: var(--ivory); }
.chip input:checked + span { background: var(--brass); border-color: var(--brass); color: var(--on-brass); }
.chip input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.field.invalid .chip span { border-color: var(--alert); }

/* the payout slip: a cheque on a dark table */
.slip { position: sticky; top: 1.5rem; container-type: inline-size; }
.slip-face { position: relative; color: var(--ink); padding: 2rem 2rem 1.7rem 2.6rem; border-radius: 3px;
  background: var(--paper) url("/img/guilloche.svg") center / cover no-repeat;
  box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--slip-rule), 0 30px 60px -28px rgba(0, 0, 0, .9);
  -webkit-mask: radial-gradient(circle 5px at 0 50%, transparent 98%, #000) 0 0 / 100% 18px repeat-y, linear-gradient(#000, #000) 12px 0 / calc(100% - 12px) 100% no-repeat;
          mask: radial-gradient(circle 5px at 0 50%, transparent 98%, #000) 0 0 / 100% 18px repeat-y, linear-gradient(#000, #000) 12px 0 / calc(100% - 12px) 100% no-repeat; }
.slip-payee { font-size: .92rem; color: var(--ink-soft); border-bottom: 1px solid var(--slip-rule); padding-bottom: .6rem; margin-bottom: 1.5rem; }
.slip-payee span { color: var(--ink); font-family: var(--serif); font-style: italic; font-size: 1.2rem; margin-left: .3rem; overflow-wrap: anywhere; }
.slip-label { font: var(--label-font); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--brass-ink); margin-bottom: .3rem; }
/* Sized to the slip's width so "$1.2M to $1.8M" always fits on one line. */
.slip-amount { font: 300 11.5cqi/1.05 var(--serif); letter-spacing: -0.02em; margin-bottom: 1.4rem; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.slip-to { font-style: italic; font-size: .42em; color: var(--ink-soft); vertical-align: .55em; margin: 0 .2em; letter-spacing: 0; }
.slip-memo { border-top: 1px solid var(--slip-rule); padding-top: .6rem; font-size: .9rem; color: var(--ink-soft); }
.slip-memo-key { font: var(--label-font); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink); margin-right: .5rem; }
.slip-fine { font-size: .82rem; color: var(--ivory-faint); margin: 1rem .3rem 0 .8rem; }
/* brass flash when the estimate changes (restarted from data.js) */
.slip-amount.flash { animation: flash .45s ease-out; }
@keyframes flash { from { color: var(--brass-ink); } to { color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .slip-amount.flash { animation: none; } }

/* booking step */
.booking { display: grid; gap: .8rem; }
.booking h3 { font-size: 1.6rem; }
.booking p { color: var(--ivory-soft); }
.booking-frame { width: 100%; height: 720px; border: 1px solid var(--line-dark); background: #fff; }
.booking-alt { font-size: .9rem; }
.booking .booked { border-left: 2px solid var(--brass); padding: .6rem 1rem; color: var(--ivory); }

/* the redacted thread: a printed page on the dark table */
.why h2 { max-width: 24ch; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.thread { margin: 0; background: var(--paper); color: var(--ink); padding: 1.5rem 1.5rem 1rem; font-size: .95rem; box-shadow: var(--object-shadow); }
.thread .post { padding-bottom: .8rem; margin-bottom: .8rem; border-bottom: 1px solid var(--line); }
.thread .post:last-of-type { border-bottom: 0; margin-bottom: .2rem; }
.thread .who { font-weight: 600; margin-bottom: .2rem; }
.when { font-weight: 400; color: var(--ink-soft); font-size: .8rem; margin-left: .4rem; }
.redact { background: var(--ink); color: transparent; padding: 0 2px; user-select: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.thread figcaption { font-size: .85rem; color: var(--ink-soft); padding-top: .8rem; border-top: 1px dashed var(--line); }
.faq > .label { margin-bottom: .4rem; }

@media (max-width: 960px) {
  /* Headline, then the slip pinned above the form so the number stays in view. */
  .desk { grid-template-columns: 1fr; grid-template-areas: "copy" "slip" "form"; row-gap: 1rem; }
  .slip { top: 0; z-index: 5; margin: 0 calc(-1 * var(--gutter)); padding: .6rem var(--gutter); background: var(--lacquer); }
  .slip-face { padding: 1rem 1.2rem .9rem 1.9rem; }
  .slip-payee, .slip-fine { display: none; }
  .slip-amount { font-size: 10.5cqi; margin-bottom: .5rem; }
}
@media (max-width: 560px) {
  .scrub dl { grid-template-columns: 1fr; gap: .1rem; }
  .scrub dd + dt { margin-top: .6rem; }
  .booking-frame { height: 760px; }
}