/* Estimate wizard page-specific styles — loaded only by estimate.html.raw.
   New components only: the ZIP tier notice, the redesigned result-card price
   lead, quote validity/reference metadata, and photo upload progress. Base
   card/list styles stay in site.css so the design system remains coherent. */

/* ---- Step-1 service-area tier notice ---------------------------------- */

.zip-tier-notice {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-off-white);
  color: var(--color-text);
  font-size: var(--fs-sm, 0.9375rem);
}
.zip-tier-notice a { color: inherit; font-weight: 600; }

.zip-tier-notice--core {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}
.zip-tier-notice--extended {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}
.zip-tier-notice--review {
  background: var(--color-tier-quote-bg);
  border-color: var(--color-border);
  color: var(--color-tier-quote-text);
}
.zip-tier-notice--unserved {
  background: var(--color-off-white);
  border-color: var(--color-border);
  color: var(--color-muted);
}

/* ---- Result card: price lead ------------------------------------------ */
/* The price lives in the hero band (see "Result proposal composition"
   further down). Only shared fine-print rules remain here. */

.estimate-result .price-lead { display: grid; gap: var(--space-1); margin: 0; }

.estimate-result .quote-validity {
  margin: 0;
  font-size: var(--fs-xs, 0.8125rem);
  color: var(--color-muted);
}

.estimate-result .estimate-reference {
  margin: 0;
  font-size: var(--fs-xs, 0.8125rem);
  color: var(--color-muted);
  letter-spacing: 0.02em;
}

/* ---- Two-column layout: form + reassurance rail ----------------------- */

.estimate-layout {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}
.estimate-main { min-width: 0; scroll-margin-top: calc(var(--header-height) + 1rem); }
@media (min-width: 920px) {
  .estimate-layout {
    grid-template-columns: minmax(0, 40rem) 20rem;
    justify-content: center;
  }
  /* The rail tracks the viewport as the customer works down the form. */
  .estimate-aside {
    position: sticky;
    top: calc(var(--header-height) + 1.25rem);
  }
}

.estimate-aside { display: grid; gap: var(--space-4); }
.estimate-aside__card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-white);
}
.estimate-aside__card--primary {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(201, 162, 77, 0.14), transparent 60%),
    linear-gradient(180deg, var(--color-navy-800) 0%, var(--color-navy-900) 100%);
  border-color: var(--color-navy-700);
  color: var(--color-white);
}
.estimate-aside__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs, 0.8125rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.estimate-aside__lead {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md, 1.125rem);
  line-height: 1.3;
  color: var(--color-white);
}
.estimate-aside__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.estimate-aside__list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-sm, 0.9375rem);
  color: rgba(233, 238, 246, 0.9);
  line-height: 1.45;
}
.estimate-aside__list strong { color: var(--color-white); font-weight: 700; }
.estimate-aside__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: rgba(201, 162, 77, 0.18);
  color: var(--color-accent-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.estimate-aside__icon svg { width: 13px; height: 13px; }
.estimate-aside__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-base, 1rem);
  color: var(--color-text);
}
.estimate-aside__body { margin: 0; font-size: var(--fs-sm, 0.9375rem); color: var(--color-muted); line-height: 1.55; }
.estimate-aside__trust {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: 0;
  font-size: var(--fs-xs, 0.8125rem);
  color: var(--color-muted);
  line-height: 1.5;
}
.estimate-aside__lock {
  flex-shrink: 0;
  color: var(--color-success);
  display: inline-flex;
  margin-top: 1px;
}
.estimate-aside__lock svg { width: 15px; height: 15px; }

/* ---- Result card shell -------------------------------------------------- */
/* One card, one hierarchy: the shell draws the only frame on the page; the
   sections inside separate by ground plane, rules, and whitespace (the
   --color-rule doctrine in site.css). overflow:hidden lets the hero band
   bleed to the rounded corners; scroll-margin keeps the post-submit scroll
   clear of the sticky header. */
.estimate-result {
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.estimate-photos-warning {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.estimate-photos-warning strong { display: block; margin-bottom: var(--space-1); }
.estimate-photos-warning .hint { color: var(--color-warning-text); opacity: 0.85; margin-top: var(--space-2); }
.photo-failures {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  font-size: var(--fs-sm);
  display: grid;
  gap: var(--space-1);
}
.photo-failures li {
  padding: var(--space-1) 0;
  border-bottom: 1px dotted var(--color-warning-border);
}

/* ---- Hero task mode ---------------------------------------------------- */
/* The full hero belongs to the first step only: it is the handoff from the
   marketing site into the application. The moment the customer advances (or
   lands on a saved quote / payment return), estimate.js puts
   `estimate-task-mode` on <body> and the hero folds down to a slim strip so
   the form owns the viewport. Collapse is animated; reduced motion gets an
   instant swap. */
.page-hero .lede { max-height: 20rem; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .page-hero {
    transition:
      padding-top var(--dur-med) var(--ease-out),
      padding-bottom var(--dur-med) var(--ease-out);
  }
  .page-hero h1 { transition: font-size var(--dur-med) var(--ease-out); }
  .page-hero .lede {
    transition:
      max-height var(--dur-med) var(--ease-out),
      opacity 180ms var(--ease-out),
      margin var(--dur-med) var(--ease-out);
  }
}
.estimate-task-mode .page-hero { padding: var(--space-6) 0 var(--space-5); }
.estimate-task-mode .page-hero h1 { font-size: var(--fs-2xl); margin-bottom: 0; }
.estimate-task-mode .page-hero .lede { max-height: 0; opacity: 0; margin: 0; }
.estimate-task-mode .page-hero .section__eyebrow { margin-bottom: var(--space-1); }

/* ---- Step 1: ZIP field + live service-area verdict ---------------------- */

.zip-field label { margin: 0 0 var(--space-2); font-weight: 600; }
.input-zip,
.estimate-form .zip-field input[name="zip"] {
  max-width: 11rem;
  min-height: 56px;
  padding: 0.6rem 1rem;
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: var(--radius-md);
}
.estimate-form .zip-field input[name="zip"]:focus {
  border-color: var(--color-primary);
  outline: 3px solid var(--color-primary-light);
}

.zip-feedback {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-off-white);
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.zip-feedback a { color: inherit; font-weight: 600; }
.zip-feedback__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.zip-feedback__icon svg { width: 12px; height: 12px; }
.zip-feedback--checking { color: var(--color-muted); }
.zip-feedback--core {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}
.zip-feedback--core .zip-feedback__icon {
  background: var(--color-success);
  color: var(--color-white);
}
.zip-feedback--extended {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}
.zip-feedback--extended .zip-feedback__icon {
  background: var(--color-warning);
  color: var(--color-white);
}
.zip-feedback--review {
  background: var(--color-primary-light);
  border-color: var(--color-info-border);
  color: var(--color-primary-dark);
}
.zip-feedback--review .zip-feedback__icon {
  background: var(--color-primary);
  color: var(--color-white);
}
.zip-feedback--unserved,
.zip-feedback--unknown { color: var(--color-muted); }
.zip-feedback--unserved .zip-feedback__icon,
.zip-feedback--unknown .zip-feedback__icon {
  background: var(--color-border);
  color: var(--color-text);
}
@media (prefers-reduced-motion: no-preference) {
  .zip-feedback--core .zip-feedback__icon { animation: zip-pop 320ms var(--ease-spring) both; }
  @keyframes zip-pop {
    from { transform: scale(0.4); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
}
.zip-spinner {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-pill);
}
@media (prefers-reduced-motion: no-preference) {
  .zip-spinner { animation: zip-spin 700ms linear infinite; }
  @keyframes zip-spin { to { transform: rotate(360deg); } }
}

/* ---- Draft restore notice ---------------------------------------------- */

.draft-notice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-off-white);
  color: var(--color-muted);
  font-size: var(--fs-sm);
}
.draft-notice__reset {
  background: none;
  border: 0;
  padding: var(--space-1) 0;
  font: inherit;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
}
.draft-notice__reset:hover { color: var(--color-primary-dark); }

/* Step-change motion — the incoming step fades/rises in. Motion-gated so
   reduced-motion users get an instant swap. */
@media (prefers-reduced-motion: no-preference) {
  .estimate-step[data-step-enter] {
    animation: estimate-step-in 360ms var(--ease-out, ease) both;
  }
  @keyframes estimate-step-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* --------------------------------------------------------------------------
   Quote-document mode. Once a result exists, the six-step wizard folds away
   behind it: the page transitions from configuring to reviewing/booking, and
   the per-section Edit links in the summary reopen the owning step.
   -------------------------------------------------------------------------- */
.estimate-quote-mode #estimate-form,
.estimate-quote-mode .wizard-progress,
.estimate-quote-mode [data-zip-notice],
.estimate-quote-mode [data-draft-notice] { display: none; }
.estimate-quote-mode #estimate-result { margin-top: 0; }
/* The result owns the page: the sales rail steps aside (its promises —
   line-item pricing, the 14-day save, next steps — now live inside the
   proposal itself) and the quote centers at reading width. */
.estimate-quote-mode .estimate-aside { display: none; }
@media (min-width: 920px) {
  .estimate-quote-mode .estimate-layout { grid-template-columns: minmax(0, 47rem); }
}

.estimate-result:focus { outline: none; }

/* ---- Result proposal composition --------------------------------------- */
/* Hero band: the payoff of six steps. Same navy/gold recipe as the aside's
   primary card (see .estimate-aside__card--primary above) — the two surfaces
   are siblings in the brand, but each phase shows only one of them. */
.result-hero {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6) var(--space-6);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(201, 162, 77, 0.16), transparent 60%),
    linear-gradient(180deg, var(--color-navy-800), var(--color-navy-900));
  color: var(--color-white);
}
.result-eyebrow {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.result-eyebrow::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-top: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}
.result-hero__service {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.15;
  color: var(--color-white);
}
.result-hero .price-lead__amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  line-height: 1.05;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}
.result-hero__lede {
  margin: 0;
  max-width: 36rem;
  font-size: var(--fs-sm);
  color: rgba(233, 238, 246, 0.92);
}
.result-hero__terms,
.result-hero .result-duration {
  margin: 0;
  font-size: var(--fs-sm);
  color: rgba(233, 238, 246, 0.8);
}
/* Review + custom quotes: same composition on a cream plane — a distinct,
   deliberate product state, not a dimmed error variant. */
.estimate-result[data-result-state="review"] .result-hero,
.estimate-result[data-result-state="quote_only"] .result-hero {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(201, 162, 77, 0.2), transparent 60%),
    var(--color-cream);
  color: var(--color-text);
}
.estimate-result[data-result-state="review"] .result-hero .result-eyebrow,
.estimate-result[data-result-state="quote_only"] .result-hero .result-eyebrow { color: var(--color-accent-text); }
.estimate-result[data-result-state="review"] .result-hero .result-hero__service,
.estimate-result[data-result-state="quote_only"] .result-hero .result-hero__service { color: var(--color-navy-900); }
.estimate-result[data-result-state="review"] .result-hero .price-lead__amount {
  color: var(--color-navy-900);
  font-size: clamp(2.1rem, 5.5vw, 2.9rem);
}
.estimate-result[data-result-state="review"] .result-hero .result-hero__lede,
.estimate-result[data-result-state="quote_only"] .result-hero .result-hero__lede,
.estimate-result[data-result-state="review"] .result-hero .result-hero__terms,
.estimate-result[data-result-state="review"] .result-hero .result-duration {
  color: var(--color-muted);
}
/* The review chip: status, not alarm. Scoped to the result card so admin and
   portal badges keep their own meaning. */
.estimate-result .badge-warning {
  justify-self: start;
  margin: var(--space-2) 0 0;
  padding: 0.3rem 0.8rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Body plane: sections separate by rules and space, never nested boxes. */
.result-body {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
}
.result-body > * + * {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-5);
}
.result-section { display: grid; gap: var(--space-3); margin: 0; }
.result-section__label {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Line items: the evidence for the number, closing on a reconciled Total. */
.result-lines .components { margin: 0; }
.estimate-result .result-lines .components li { padding: var(--space-2) 0; }
.estimate-result .components li.components__total {
  border-bottom: 0;
  border-top: 1px solid var(--color-rule-strong);
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* "What happens next": the marketing step-flow, sized down for the card. */
.result-next__flow { gap: var(--space-4); }
.result-next__flow .step-flow__item { padding-left: calc(34px + var(--space-4)); }
.result-next__flow .step-flow__item::before {
  width: 34px;
  height: 34px;
  font-size: var(--fs-xs);
}
.result-next__flow .step-flow__item:not(:last-child)::after {
  left: 16.5px;
  top: 38px;
  bottom: calc(-1 * var(--space-4));
}
.result-next__flow .step-flow__item p { margin: 0; font-size: var(--fs-sm); }
.result-next .estimate-accept-line { margin: 0; }

/* Delivery: quiet reassurance in the footer; the phone-only variant is the
   one loud exception, because that link is the customer's only way back. */
.estimate-delivery { display: grid; gap: var(--space-1); margin: 0; }
.estimate-delivery__title { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--color-text); }
.estimate-delivery__line { margin: 0; font-size: var(--fs-sm); color: var(--color-muted); }
.estimate-delivery__line strong { color: var(--color-text); font-weight: 600; }
.estimate-delivery__link { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-1); }
.estimate-delivery__copied { font-size: var(--fs-sm); font-weight: 700; color: var(--color-success); }
.estimate-delivery__copied.is-link { font-weight: 400; word-break: break-all; color: var(--color-text); }
.estimate-delivery .hint { margin: 0; font-size: var(--fs-xs); }
.estimate-delivery[data-delivery-critical] {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
}
.estimate-delivery[data-delivery-critical] .estimate-delivery__title,
.estimate-delivery[data-delivery-critical] .estimate-delivery__line { color: var(--color-warning-text); }
.estimate-delivery[data-delivery-critical] .estimate-delivery__line strong { color: var(--color-warning-text); }

/* Booking state strip: full-bleed between hero and body. */
.estimate-booked {
  margin: 0;
  padding: var(--space-3) var(--space-6);
  background: var(--color-success-bg);
  color: var(--color-success-text);
  font-size: var(--fs-sm);
}

/* The current appointment: confirmed state, spoken in typography. */
.appointment-current { display: grid; gap: 2px; margin: 0; }
/* The section already labels this zone "Your appointment"; the inner eyebrow
   stays for assistive tech and tests but does not repeat on screen. */
.appointment-current__eyebrow {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.appointment-current__date {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--color-navy-900);
}
.appointment-current__time {
  margin: 0;
  font-weight: 600;
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.appointment-current__note { margin: var(--space-1) 0 0; font-size: var(--fs-xs); color: var(--color-muted); }
.appointment-current__change {
  justify-self: start;
  margin-top: var(--space-2);
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}
.appointment-current__change:hover { background: var(--color-primary-light); }
.estimate-result .race-recovery { border: 0; }

/* Booking zone: a checkout, not a wizard step. */
.result-booking .field--booking-start { display: grid; gap: var(--space-2); margin: 0; }
.booking-address {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.booking-address legend { padding: 0; }
.booking-address__hint { margin: var(--space-1) 0 var(--space-2); font-size: var(--fs-xs); }
/* Compact address: labeled fields stack label-over-input at full width, and
   city / state / ZIP share one row so the block reads as an address, not a
   page of form. */
.booking-address .field {
  display: grid;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
}
.booking-address .field > span { font-size: var(--fs-sm); font-weight: 600; }
.booking-address .field input { width: 100%; min-width: 0; }
.booking-address .field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem 7.5rem;
  gap: var(--space-3);
}
.booking-address .field-row .field { margin: 0; }
@media (max-width: 540px) {
  .booking-address .field-row { grid-template-columns: minmax(0, 1fr) 4.5rem 6.5rem; gap: var(--space-2); }
}
/* Getting in: entry arrangement + optional encrypted code + arrival notes.
   Same quiet fieldset language as the address block above it. */
.booking-access {
  border: 0;
  padding: 0;
  margin: var(--space-4) 0 0;
  min-width: 0;
}
.booking-access legend { padding: 0; }
.booking-access__hint { margin: var(--space-1) 0 var(--space-2); font-size: var(--fs-xs); }
.booking-access .field {
  display: grid;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
}
.booking-access .field > span { font-size: var(--fs-sm); font-weight: 600; }
.booking-access .field select,
.booking-access .field input {
  width: 100%;
  min-width: 0;
}
.booking-access .field textarea {
  width: 100%;
  min-width: 0;
  min-height: 4.25rem;
}
.booking-access .field .hint { margin: 0; font-size: var(--fs-xs); font-weight: 400; }
.booking-access .field--access-details[hidden] { display: none; }
.result-booking__go { display: grid; gap: var(--space-2); justify-items: start; margin-top: var(--space-2); }
.result-booking [data-book-now] { width: 100%; max-width: 26rem; }
.result-booking__assure { margin: 0; max-width: 34rem; font-size: var(--fs-sm); color: var(--color-muted); }
.result-booking [data-book-status]:empty { display: none; }
.result-booking [data-book-status] { margin: 0; }

/* "Your clean": the personalized order summary — typographic, no chrome. */
.quote-summary__rows { display: grid; gap: var(--space-3); }
.quote-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0;
}
.quote-summary__label {
  margin: 0 0 2px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.quote-summary__value {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text);
}
.quote-summary__meta { color: var(--color-muted); font-weight: 500; }
.quote-summary__edit {
  flex: none;
  min-height: 2.25rem;
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Manual-review reasons: gold-dot feature list, matching the marketing voice. */
.result-checks .manual-review { margin: 0; display: grid; gap: var(--space-2); }
.result-checks .manual-review li {
  position: relative;
  padding: 0 0 0 var(--space-4);
  border: 0;
  font-size: var(--fs-sm);
}
.result-checks .manual-review li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

/* Footer fine print. */
.result-meta { gap: var(--space-2); }
.result-meta__trust { margin: 0; font-size: var(--fs-xs); color: var(--color-muted); }
.result-meta__trust a { color: inherit; }

@media (max-width: 540px) {
  .result-hero { padding: var(--space-6) var(--space-4) var(--space-5); }
  .result-body { padding: var(--space-5) var(--space-4); }
  .estimate-booked { padding: var(--space-3) var(--space-4); }
  .result-booking [data-book-now] { max-width: none; }
}

/* ---- Booking confirmation record (post-payment takeover) ---------------- */

/* Money block: the record must reconcile at a glance. */
.confirm-money__rows {
  display: grid;
  gap: var(--space-2);
  max-width: 24rem;
}
.confirm-money__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-rule);
}
.confirm-money__row:last-child {
  border-bottom: 0;
  font-weight: 700;
}
.confirm-money__label { color: var(--color-muted); font-size: var(--fs-sm); }
.confirm-money__value { font-variant-numeric: tabular-nums; }

/* References: quiet, monospace-adjacent, lookup-friendly. */
.confirm-refs__rows { display: grid; gap: var(--space-1); }
.confirm-refs__row {
  display: flex;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-muted);
}
.confirm-refs__label { min-width: 9.5rem; }
.confirm-refs__value {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

/* Action row: signed copy + print. */
.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.confirm-actions .hint { margin: 0; }
.confirm-doc { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Inline account setup: the continuation of the purchase, one field deep. */
.confirm-account__lede { margin: 0 0 var(--space-3); color: var(--color-muted); max-width: 46ch; }
.confirm-account__form { display: grid; gap: var(--space-3); max-width: 22rem; }
.confirm-account__form .field { margin: 0; }
.confirm-account__status { margin: 0; font-size: var(--fs-sm); color: var(--color-muted); min-height: 1.2em; }
.confirm-account__ready { margin: 0 0 var(--space-2); font-weight: 700; }
.confirm-account__ready::before { content: '\2713\0020'; color: var(--color-success-text, #1a7f4b); }
.confirm-account__note { margin: 0; color: var(--color-muted); }

/* ---- Print: a clean appointment confirmation, not a website screenshot -- */
@media print {
  .site-header,
  .site-footer,
  .tr-bristle-panel,
  .estimate-aside,
  .skip-link,
  [data-account-setup],
  .confirm-actions,
  .result-next,
  .estimate-form,
  .estimate-progress {
    display: none !important;
  }
  body { background: #fff !important; }
  .page-hero {
    background: none !important;
    color: #000 !important;
    padding: 0 0 0.5rem !important;
  }
  .page-hero .section__eyebrow { color: #000 !important; }
  .page-hero .section__eyebrow::after { background: #000 !important; }
  .page-hero h1, .page-hero .accent-word { color: #000 !important; }
  .page-hero .lede { display: none !important; }
  .estimate-layout { display: block !important; }
  .estimate-result.booking-confirmation {
    box-shadow: none !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
  }
  .estimate-result.booking-confirmation .result-hero {
    background: none !important;
    color: #000 !important;
    border-bottom: 2px solid #000;
  }
  .estimate-result.booking-confirmation .result-hero * { color: #000 !important; }
  .estimate-result.booking-confirmation .alert {
    border: 1px solid #000 !important;
    background: none !important;
    color: #000 !important;
  }
  .confirm-money__row, .result-section { break-inside: avoid; }
  .result-meta__trust { color: #000 !important; }
  a { text-decoration: none; color: #000 !important; }
}

/* Confirmation-body rhythm: every record section separated by one rule. */
.booking-confirmation [data-confirm-body] > .result-section {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule);
}
.booking-confirmation [data-confirm-body] > .result-section:first-of-type {
  margin-top: var(--space-4);
}

/* Print-only letterhead line; screen chrome carries the brand already. */
.confirm-print-brand { display: none; }
@media print {
  .confirm-print-brand {
    display: block;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 0.5rem;
    color: #000 !important;
  }
  .tr-bristle,
  .tr-bristle-probe,
  .tr-bristle-panel { display: none !important; }
}