/* Production cascade corrections for the mockup-fidelity layer. */

.page-reports .report-entry-hero,
.page-reports .report-entry-paper,
.page-reports .report-entry-trust {
  grid-column: 1 / -1;
  grid-row: auto;
}

/* Flat consumer UI pass — keep this after every mockup rule.
   The generated illustrations remain, while controls and surfaces use solid
   color, borders, and spacing instead of simulated depth. */

.page-reports,
.page-report-packages {
  background-color: var(--mockup-cream);
  background-image: none;
}

.page-reports *,
.page-report-packages * {
  background-image: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

.page-reports .consumer-art-house-search,
.page-report-packages .consumer-art-house-search {
  background-image: var(--consumer-art-house-search) !important;
}

.page-reports .consumer-art-property-verified,
.page-report-packages .consumer-art-property-verified {
  background-image: var(--consumer-art-property-verified) !important;
}

.page-reports .consumer-art-appeal-documents,
.page-report-packages .consumer-art-appeal-documents {
  background-image: var(--consumer-art-appeal-documents) !important;
}

.page-reports .site-header,
.page-report-packages .site-header {
  background-color: var(--mockup-paper);
  backdrop-filter: none;
}

.page-reports .report-entry,
.page-reports .report-entry-paper,
.page-reports .report-entry-trust,
.page-reports .processing-property-strip,
.page-reports .processing-sales-scene,
.page-reports .eligible-property-chip,
.page-reports .eligible-value-comparison,
.page-reports .report-paper,
.page-report-packages .package-checkout-paper,
.page-report-packages .comparable-choice,
.page-report-packages .package-form-summary,
.page-report-packages .package-owner-fields,
.page-report-packages .package-download-card {
  background-color: var(--mockup-paper);
  background-image: none;
}

.page-reports .estimate-ready,
.page-report-packages .comparable-choice-heading em,
.page-report-packages .comparable-selection-status {
  background-color: var(--mockup-mint);
  background-image: none;
}

.page-report-packages .package-support {
  background-color: #eaf8f2;
  background-image: none;
}

/* One action style throughout the consumer flow. */
.page-reports main .button,
.page-report-packages main .button,
.page-reports .report-address-submit,
.page-report-packages .package-details-form button[type="submit"],
.page-report-packages #download-package {
  display: inline-flex;
  min-height: 60px;
  padding: 14px 24px;
  color: #fff !important;
  background-color: var(--mockup-blue) !important;
  background-image: none !important;
  border: 1px solid var(--mockup-blue) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transform: none !important;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.page-reports main .button:hover,
.page-report-packages main .button:hover,
.page-reports .report-address-submit:hover,
.page-report-packages .package-details-form button[type="submit"]:hover,
.page-report-packages #download-package:hover {
  color: #fff !important;
  background-color: var(--mockup-blue-dark) !important;
  border-color: var(--mockup-blue-dark) !important;
  transform: none !important;
}

.page-reports main .button:disabled,
.page-report-packages main .button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.page-reports :is(a, button, input, summary):focus-visible,
.page-report-packages :is(a, button, input, summary):focus-visible {
  outline: 3px solid rgba(7, 95, 244, .32);
  outline-offset: 2px;
}

/* Safari occasionally skips the inherited custom-property image on the ready
   Turbo frame. Bind the generated document art directly to that element. */
.page-report-packages .package-document-art > .package-document-artwork {
  background-image: var(--consumer-art-appeal-documents) !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Make the optional rebuild area an intentional, bounded section. */
.page-report-packages .package-update-details {
  width: 100%;
  padding: 18px;
  margin-top: 24px;
  background-color: var(--mockup-paper);
  border: 2px solid #d6d0c5;
  border-radius: 18px;
}

.page-report-packages .package-update-details > summary {
  color: var(--mockup-ink);
  font-size: 14px;
}

/* Use an ordinary text control for the purchase date. Native iOS date inputs
   repaint their own segmented UI after navigation and ignore parts of the
   element's box geometry. The explicit format keeps this field predictable. */
.page-report-packages .purchase-date-input {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 52px;
  padding: 0 14px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #cec9c0;
  border-radius: 9px;
  line-height: 1.2;
  text-align: left;
}

/* Keep the real checkbox available to forms and assistive technology while a
   fixed SVG supplies identical circle/check geometry in every browser. */
.page-report-packages .package-details-form .comparable-choice input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.page-report-packages .comparable-choice-check {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  box-sizing: border-box;
  color: transparent;
  background-color: #fff;
  border: 2px solid #c9c6bf;
  border-radius: 50%;
  place-items: center;
}

.page-report-packages .comparable-choice-check svg {
  display: block;
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.25;
}

.page-report-packages .comparable-choice input[type="checkbox"]:checked + .comparable-choice-check {
  color: #fff;
  background-color: var(--mockup-green);
  border-color: var(--mockup-green);
}

.page-report-packages .comparable-choice input[type="checkbox"]:focus-visible + .comparable-choice-check {
  outline: 3px solid rgba(7, 95, 244, .32);
  outline-offset: 2px;
}

.page-reports .report-calculation-details > summary {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.page-reports .report-calculation-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.page-reports .report-calculation-icon path {
  fill: currentColor;
  stroke: none;
}

@media (max-width: 760px) {
  /* Use the normal mobile gutter without the oversized result-page interval. */
  .page-reports .report-outcome-eligible {
    padding-top: 10px;
  }

  .page-reports .eligible-result-copy {
    width: 100%;
  }

  .page-reports .eligible-property-chip {
    width: 100%;
    box-sizing: border-box;
  }

  /* Put the house in a reserved top-right cell so it can never cover text. */
  .page-reports .report-entry-hero {
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 8px;
    align-items: start;
  }

  .page-reports .report-entry-copy {
    display: contents;
  }

  .page-reports .report-entry-copy h1 {
    min-width: 0;
    margin: 0;
    grid-column: 1;
    grid-row: 1;
  }

  .page-reports .report-entry-copy > p {
    margin-top: 8px;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .page-reports .report-entry-illustration {
    width: 88px;
    max-width: 100%;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
  }

  /* The decorative route depended on background images that flat mode removes.
     Use the sale cards and real progress stages as the waiting state instead. */
  .page-reports .processing-sales-scene {
    min-height: 0;
    padding-bottom: 18px;
    overflow: visible;
  }

  .page-reports .processing-sale-cards > span,
  .page-reports .processing-sale-cards > span.is-active {
    transform: none !important;
    animation: none;
  }

  /* Keep About, the amount, and /year together on one compact baseline. */
  .page-reports .eligible-savings-amount {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 6px;
    align-items: baseline;
    justify-content: flex-start;
  }

  .page-reports .eligible-savings-amount > span {
    flex: 0 0 auto;
    margin: 0 4px 0 0;
  }

  .page-reports .eligible-savings-amount > strong {
    flex: 0 1 auto;
    min-width: 0;
    font-size: clamp(48px, 14vw, 62px);
    letter-spacing: -.065em;
    white-space: nowrap;
  }

  .page-reports .eligible-savings-amount > b {
    flex: 0 0 auto;
    margin: 0;
    font-size: 16px;
    white-space: nowrap;
  }

  /* Mobile previously hid living and lot area. Show the complete six-metric
     grid, including the lot size the homeowner needs to compare. */
  .page-report-packages .comparable-choice-metrics > span:nth-child(4),
  .page-report-packages .comparable-choice-metrics > span:nth-child(5) {
    display: flex;
  }

  .page-report-packages .comparable-choice-metrics small {
    font-size: 8px;
  }

  .page-report-packages .comparable-choice-metrics strong {
    font-size: 11px;
  }

  .page-report-packages .package-document-art {
    height: 220px;
  }

  .page-report-packages .package-field-grid-two,
  .page-report-packages .package-field-grid-two > .field {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .page-report-packages .package-update-details {
    padding: 16px 12px;
    margin-top: 18px;
  }
}

/* Colorful structure pass.
   Keep the simplified flow and flat controls, but restore the original
   FileProp8 palette through strong, solid color blocks and illustrations. */

.page-reports,
.page-report-packages {
  --colorful-navy: #0a2552;
  --colorful-navy-deep: #061c42;
  --colorful-blue: #1261e8;
  --colorful-blue-pale: #e7efff;
  --colorful-mint: #b8f0d7;
  --colorful-mint-pale: #eaf9f2;
  --colorful-coral: #ff735f;
  --colorful-coral-pale: #fff0eb;
  --colorful-yellow: #ffd66b;
  --colorful-paper: #fffdf7;
  --colorful-line: #cfdae9;
  background-color: #f7f1e6;
}

.page-reports .site-header,
.page-report-packages .site-header {
  color: #fff;
  background-color: var(--colorful-navy-deep);
  border-bottom: 4px solid var(--colorful-coral);
}

.page-reports .site-header :is(.brand, .desktop-nav a, .locale-menu summary),
.page-report-packages .site-header :is(.brand, .desktop-nav a, .locale-menu summary) {
  color: #fff;
}

.page-reports .site-header .brand > span > span,
.page-report-packages .site-header .brand > span > span {
  color: var(--colorful-coral);
}

.page-reports .site-header .locale-menu summary,
.page-report-packages .site-header .locale-menu summary {
  border-color: rgba(255, 255, 255, .55);
}

.page-reports .consumer-flow-shell,
.page-report-packages .package-preview-page {
  background-color: #f7f1e6;
}

/* Address entry */
.page-reports .report-entry-hero {
  padding: clamp(22px, 4vw, 48px);
  color: #fff;
  background-color: var(--colorful-navy);
  border: 3px solid var(--colorful-navy-deep);
  border-radius: 28px;
}

.page-reports .report-entry-copy h1 {
  color: #fff;
}

.page-reports .report-entry-copy > p {
  color: var(--colorful-mint);
}

.page-reports .report-entry-paper {
  border: 3px solid var(--colorful-blue);
}

.page-reports .report-address-control > input {
  background-color: #fff;
  border-color: var(--colorful-blue);
}

.page-reports .report-entry-trust {
  padding: 0;
  background-color: transparent;
  border: 0;
  gap: 12px;
}

.page-reports .report-entry-trust > span {
  min-height: 74px;
  padding: 12px 16px;
  background-color: var(--colorful-paper);
  border: 2px solid var(--colorful-line);
  border-left: 2px solid var(--colorful-line);
  border-radius: 18px;
}

.page-reports .report-entry-trust > span:nth-child(1) {
  background-color: var(--colorful-mint-pale);
  border-color: #80d5b3;
}

.page-reports .report-entry-trust > span:nth-child(2) {
  background-color: var(--colorful-blue-pale);
  border-color: #9ebcf7;
}

.page-reports .report-entry-trust > span:nth-child(3) {
  background-color: var(--colorful-coral-pale);
  border-color: #f2ae9f;
}

.page-reports .report-entry-trust i {
  color: var(--colorful-navy);
  background-color: var(--colorful-yellow);
}

/* Analysis */
.page-reports .report-processing > h1 {
  color: var(--colorful-navy);
}

.page-reports .processing-property-strip {
  background-color: var(--colorful-blue-pale);
  border: 3px solid var(--colorful-blue);
}

.page-reports .processing-sales-scene {
  background-color: var(--colorful-navy);
  border: 3px solid var(--colorful-navy-deep);
}

.page-reports .processing-sales-scene header h2 {
  color: #fff;
}

.page-reports .processing-sales-scene header p {
  color: var(--colorful-mint);
}

.page-reports .processing-sale-cards > span {
  background-color: var(--colorful-paper);
  border-color: var(--colorful-coral);
}

.page-reports .processing-route {
  display: none;
}

.page-reports .processing-progress {
  position: static;
  margin-top: 30px;
  background-color: var(--colorful-mint-pale);
  border: 2px solid #80d5b3;
}

/* Savings result */
.page-reports .eligible-result-hero {
  padding: clamp(22px, 4vw, 44px);
  color: #fff;
  background-color: var(--colorful-navy);
  border: 3px solid var(--colorful-navy-deep);
  border-radius: 28px;
}

.page-reports .eligible-result-copy :is(h1, h2),
.page-reports .eligible-result-copy > p {
  color: #fff;
}

.page-reports .estimate-ready {
  color: var(--colorful-navy);
  background-color: var(--colorful-mint);
  border: 2px solid #70cca8;
}

.page-reports .eligible-savings-amount {
  color: var(--colorful-yellow);
}

.page-reports .eligible-property-chip {
  background-color: var(--colorful-paper);
  border: 2px solid var(--colorful-coral);
}

.page-reports .eligible-property-chip i {
  background-color: var(--colorful-mint);
}

.page-reports .eligible-property-visual > .eligible-value-tag {
  background-color: var(--colorful-paper);
  border: 3px solid var(--colorful-coral);
}

.page-reports .eligible-value-comparison {
  background-color: var(--colorful-blue-pale);
  border: 3px solid var(--colorful-blue);
}

.page-reports .eligible-value-comparison > i {
  background-color: var(--colorful-yellow);
}

/* Comparable review */
.page-report-packages .package-builder-heading {
  padding: 24px 28px;
  color: #fff;
  background-color: var(--colorful-navy);
  border: 3px solid var(--colorful-navy-deep);
  border-radius: 24px;
}

.page-report-packages .package-builder-heading :is(h1, p) {
  color: #fff;
}

.page-report-packages .package-builder-heading > span,
.page-report-packages .comparable-selection-status {
  color: var(--colorful-navy);
  background-color: var(--colorful-mint);
  border: 2px solid #70cca8;
}

.page-report-packages .comparable-choice {
  background-color: var(--colorful-paper);
  border: 2px solid var(--colorful-line);
}

.page-report-packages .comparable-choice:has(input:checked) {
  background-color: var(--colorful-mint-pale);
  border-color: var(--colorful-blue);
}

.page-report-packages .comparable-choice-heading strong {
  color: var(--colorful-blue);
}

.page-report-packages .package-owner-fields {
  padding: 24px;
  background-color: var(--colorful-coral-pale);
  border: 3px solid var(--colorful-coral);
}

.page-report-packages .package-owner-fields h3 {
  color: var(--colorful-navy);
}

.page-report-packages .package-details-form input {
  background-color: #fff;
  border: 2px solid #c8d3e4;
}

/* Preparation and download */
.page-report-packages .form-preparation {
  padding: clamp(22px, 4vw, 44px);
  color: #fff;
  background-color: var(--colorful-navy);
  border: 3px solid var(--colorful-navy-deep);
  border-radius: 28px;
}

.page-report-packages .form-preparation-heading :is(h3, p) {
  color: #fff;
}

.page-report-packages .form-preparation ol {
  background-color: var(--colorful-paper);
  border: 3px solid var(--colorful-coral);
}

.page-report-packages .package-ready-heading {
  padding: 22px 26px;
  color: #fff;
  background-color: var(--colorful-navy);
  border: 3px solid var(--colorful-navy-deep);
  border-radius: 24px;
}

.page-report-packages .package-ready-heading h1,
.page-report-packages .package-ready-heading p {
  color: #fff;
}

.page-report-packages .package-ready-heading > span,
.page-report-packages .package-ready-heading em {
  color: var(--colorful-navy);
  background-color: var(--colorful-mint);
  border-color: #70cca8;
}

.page-report-packages .package-download-card {
  background-color: var(--colorful-blue-pale);
  border: 3px solid var(--colorful-blue);
}

.page-report-packages .package-support {
  background-color: var(--colorful-mint-pale);
  border: 3px solid #70cca8;
}

.page-report-packages .package-update-details {
  background-color: var(--colorful-paper);
  border-color: var(--colorful-navy);
}

@media (max-width: 760px) {
  .page-reports .site-header,
  .page-report-packages .site-header {
    border-bottom-width: 3px;
  }

  .page-reports .report-entry-hero {
    padding: 20px 18px;
    grid-template-columns: minmax(0, 1fr) 82px;
  }

  .page-reports .report-entry-illustration {
    width: 82px;
  }

  .page-reports .report-entry-trust {
    gap: 8px;
  }

  .page-reports .report-entry-trust > span {
    min-height: 58px;
    padding: 8px;
  }

  .page-reports .eligible-result-hero,
  .page-report-packages .form-preparation {
    padding: 20px 16px;
    border-radius: 22px;
  }

  .page-report-packages .package-builder-heading,
  .page-report-packages .package-ready-heading {
    padding: 18px;
    border-radius: 20px;
  }

  .page-report-packages .package-owner-fields {
    padding: 18px 14px;
  }
}

/* Front-page palette alignment and mobile form cleanup.
   Keep cobalt for structure, then use the marketing page's red actions and
   green feedback so the guided flow feels like the same product. */

.page-reports,
.page-report-packages {
  --flow-red: #f0442d;
  --flow-red-dark: #d93620;
  --flow-green: #149878;
  --flow-green-dark: #0e765d;
  --flow-green-pale: #e3f7ef;
  --flow-cream: #f8f0dc;
  --flow-ink: #111a25;
}

.page-reports .site-header,
.page-report-packages .site-header {
  color: var(--flow-ink);
  background-color: var(--flow-cream);
  border-bottom-color: var(--flow-red);
}

.page-reports .site-header :is(.brand, .desktop-nav a, .locale-menu summary),
.page-report-packages .site-header :is(.brand, .desktop-nav a, .locale-menu summary) {
  color: var(--flow-ink);
}

.page-reports .site-header .brand > span > span,
.page-report-packages .site-header .brand > span > span {
  color: var(--flow-red);
}

.page-reports .site-header .locale-menu summary,
.page-report-packages .site-header .locale-menu summary {
  border-color: var(--flow-ink);
}

.page-reports main .button,
.page-report-packages main .button,
.page-reports .report-address-submit,
.page-report-packages .package-details-form button[type="submit"],
.page-report-packages #download-package {
  background-color: var(--flow-red) !important;
  border: 2px solid var(--flow-ink) !important;
}

.page-reports main .button:hover,
.page-report-packages main .button:hover,
.page-reports .report-address-submit:hover,
.page-report-packages .package-details-form button[type="submit"]:hover,
.page-report-packages #download-package:hover {
  background-color: var(--flow-red-dark) !important;
  border-color: var(--flow-ink) !important;
}

.page-reports .estimate-ready,
.page-report-packages .package-builder-heading > span,
.page-report-packages .package-ready-heading > span,
.page-report-packages .package-ready-heading em,
.page-report-packages .comparable-selection-status {
  color: var(--flow-ink);
  background-color: var(--flow-green-pale);
  border-color: var(--flow-green);
}

.page-reports .report-entry-paper,
.page-reports .processing-property-strip,
.page-reports .eligible-value-comparison,
.page-report-packages .package-download-card {
  border-color: var(--flow-red);
}

.page-reports .report-entry-trust > span:nth-child(1),
.page-reports .processing-progress,
.page-report-packages .package-support {
  background-color: var(--flow-green-pale);
  border-color: var(--flow-green);
}

.page-reports .report-entry-trust i,
.page-reports .eligible-property-chip i,
.page-report-packages .comparable-choice input[type="checkbox"]:checked + .comparable-choice-check {
  color: #fff;
  background-color: var(--flow-green);
  border-color: var(--flow-green);
}

.page-report-packages .comparable-choice:has(input:checked) {
  background-color: var(--flow-green-pale);
  border-color: var(--flow-green);
}

.page-report-packages .package-owner-fields {
  background-color: var(--flow-green-pale);
  border-color: var(--flow-green);
}

/* The old 13px input rule made Mobile Safari zoom the page whenever a field
   received focus. Own the complete control geometry here so every field,
   including purchase date, stays fixed in place while typing. */
.page-report-packages .package-details-form input,
.page-report-packages .purchase-date-input {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 56px;
  min-height: 56px;
  padding: 0 14px;
  box-sizing: border-box;
  color: var(--flow-ink);
  background-color: #fff;
  border: 2px solid #aebdca;
  border-radius: 10px;
  outline: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

.page-report-packages .package-details-form input:focus,
.page-report-packages .package-details-form input:focus-visible,
.page-report-packages .purchase-date-input:focus,
.page-report-packages .purchase-date-input:focus-visible {
  border-color: var(--flow-green);
  outline: 3px solid rgba(20, 152, 120, .24);
  outline-offset: 1px;
}

@media (max-width: 760px) {
  .page-report-packages .package-owner-fields,
  .page-report-packages .package-field-grid-two,
  .page-report-packages .package-field-grid-two > .field {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .page-report-packages .package-owner-fields {
    overflow: visible;
  }
}

/* Match the desktop submit button to the address field's 88px control box.
   Mobile keeps the existing compact 60px stacked button below. */
@media (min-width: 761px) {
  .page-reports .report-address-submit {
    height: 88px;
    min-height: 88px;
  }
}

/* Landing address-screen detail polish. */
/* The original trust-row divider rule removed the first card's left edge.
   Restore a complete border so all three expectation cards use the same box
   geometry. */
.page-reports .report-entry-trust > span:first-child {
  border-left: 2px solid var(--flow-green);
}

/* Enlarge the house within its transparent illustration canvas. */
.page-reports .report-entry-illustration {
  background-position: center;
  background-size: 128% auto;
}

@media (max-width: 760px) {
  /* Reserve more room for the artwork instead of letting it overlap the title. */
  .page-reports .report-entry-hero {
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 6px;
  }

  .page-reports .report-entry-illustration {
    width: 132px;
    max-width: none;
    align-self: start;
  }
}

/* Compact analysis status.
   The active message carries the hierarchy; the rail only shows orientation,
   keeping the loading state short and collision-proof on narrow screens. */
.page-reports .processing-status-card {
  width: 100%;
  padding: 16px 18px 14px;
  margin-top: 24px;
  box-sizing: border-box;
  color: var(--flow-ink);
  background-color: var(--flow-green-pale);
  border: 2px solid var(--flow-green);
  border-radius: 18px;
}

.page-reports .processing-status-heading {
  display: flex;
  gap: 12px;
  align-items: center;
}

.page-reports .processing-status-heading > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.page-reports .processing-status-heading strong,
.page-reports .processing-status-heading small {
  display: block;
}

.page-reports .processing-status-heading strong {
  color: var(--flow-ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.page-reports .processing-status-heading small {
  color: #4f625b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.page-reports .processing-status-pulse {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  background-color: var(--flow-red);
  border-radius: 50%;
}

.page-reports .processing-status-pulse::after {
  position: absolute;
  inset: -5px;
  border: 2px solid var(--flow-red);
  border-radius: 50%;
  content: "";
  animation: processingStepRing 1.35s ease-out infinite;
}

.page-reports .processing-progress {
  position: relative;
  display: grid;
  min-height: 0;
  padding: 0;
  margin: 16px 0 0;
  box-sizing: border-box;
  overflow: visible;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-reports .processing-progress::before,
.page-reports .processing-progress::after {
  position: absolute;
  top: 5px;
  left: 16.666%;
  height: 3px;
  border-radius: 999px;
  content: "";
}

.page-reports .processing-progress::before {
  right: 16.666%;
  background-color: #b8c9c2;
}

.page-reports .processing-progress::after {
  width: 33.333%;
  background-color: var(--flow-green);
}

.page-reports .processing-progress li {
  position: relative;
  z-index: 1;
  display: flex !important;
  min-width: 0;
  min-height: 30px;
  padding: 0 2px;
  color: #66766f;
  background-color: transparent;
  border: 0;
  gap: 7px;
  flex-direction: column !important;
  align-items: center;
  justify-content: flex-start;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

/* Retire the large circles generated by the original tracker. The compact
   rail owns its markers explicitly in the markup. */
.page-reports .processing-progress li::before,
.page-reports .processing-progress li::after {
  display: none !important;
  content: none !important;
}

.page-reports .processing-progress-marker {
  position: relative;
  display: grid;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  box-sizing: border-box;
  color: transparent;
  background-color: var(--colorful-paper);
  border: 2px solid #9aaca5;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  place-items: center;
}

.page-reports .processing-progress-label {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.page-reports .processing-progress li.is-complete {
  color: var(--flow-green-dark);
}

.page-reports .processing-progress li.is-complete .processing-progress-marker {
  color: #fff;
  background-color: var(--flow-green);
  border-color: var(--flow-green);
}

.page-reports .processing-progress li.is-active {
  color: var(--flow-ink);
}

.page-reports .processing-progress li.is-active .processing-progress-marker {
  background-color: var(--flow-red);
  border-color: var(--flow-red);
}

.page-reports .processing-progress li.is-active .processing-progress-marker::after {
  position: absolute;
  inset: -4px;
  box-sizing: border-box;
  border: 1.5px solid var(--flow-red);
  border-radius: 50%;
  content: "";
  animation: processingStepRing 1.35s ease-out infinite;
}

.page-reports .processing-sale-cards > span.is-active {
  animation: processingCardScan 1.6s ease-in-out infinite !important;
}

@keyframes processingStepRing {
  from {
    opacity: .68;
    transform: scale(.75);
  }

  to {
    opacity: 0;
    transform: scale(1.35);
  }
}

@keyframes processingCardScan {
  0%,
  100% {
    border-color: var(--colorful-coral);
    opacity: .82;
  }

  50% {
    border-color: var(--flow-green);
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .page-reports .processing-status-card {
    padding: 15px 14px 13px;
    margin-top: 20px;
  }

  .page-reports .processing-progress {
    margin-top: 14px;
  }

  .page-reports .processing-progress li {
    gap: 6px;
    font-size: 9.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-reports .processing-status-pulse::after,
  .page-reports .processing-progress li.is-active .processing-progress-marker::after,
  .page-reports .processing-sale-cards > span.is-active {
    animation: none !important;
  }
}

/* Growth outcome artwork.
   Replace the platform-dependent arrow glyph with a real, generated property
   illustration and give it a stable row so the label can never collide with
   the artwork at mobile widths. */
.page-reports .report-growth-paper {
  overflow: hidden;
}

.page-reports .growth-result-header {
  display: grid;
  min-height: 132px;
  margin: -20px -10px 2px 0;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 220px);
  align-items: start;
}

.page-reports .growth-result-label {
  display: block;
  margin-top: 22px;
  color: var(--flow-green-dark);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.page-reports .growth-result-illustration {
  display: block;
  width: 100%;
  height: auto;
  align-self: end;
}

@media (max-width: 760px) {
  .page-reports .report-growth-paper {
    padding-top: 28px;
  }

  .page-reports .growth-result-header {
    min-height: 112px;
    margin: -14px -8px 0 0;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(126px, 46%);
  }

  .page-reports .growth-result-label {
    margin-top: 18px;
  }
}

/* Keep the package flow on one continuous paper surface. The previous cream
   wrapper remained visible as narrow mobile gutters around the checkout sheet. */
.page-report-packages.action-show .package-preview-page {
  background-color: var(--mockup-paper);
}

/* Coordinated editorial artwork pass.
   Keep workflow imagery in the same hand-inked, paper-textured family as the
   landing page and render utility symbols as deterministic SVGs. */
.page-reports .report-entry-illustration {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.page-reports .report-entry-trust i svg,
.page-reports .eligible-property-chip-icon,
.page-reports .eligible-value-comparison > svg,
.page-report-packages .consumer-action-icon,
.page-report-packages .package-support-thanks > span svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.page-reports .report-entry-trust i svg {
  width: 25px;
  height: 25px;
}

.page-reports .processing-sale-house {
  width: 100%;
  height: 94px;
  object-fit: contain;
}

.page-reports .processing-property-artwork,
.page-report-packages .comparable-choice-house {
  object-fit: contain;
}

.page-reports .eligible-property-chip {
  grid-template-columns: 46px minmax(0, 1fr) 34px;
}

.page-reports .eligible-property-chip-icon {
  width: 34px;
  height: 34px;
  padding: 5px;
  color: var(--mockup-ink);
  background-color: var(--mockup-mint);
  border-radius: 11px;
  box-sizing: content-box;
  justify-self: center;
}

.page-reports .eligible-property-visual {
  min-height: 470px;
}

.page-reports .eligible-property-visual-art {
  right: 20px;
  bottom: 0;
  width: min(100%, 430px);
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

.page-reports .eligible-value-comparison > svg {
  width: 42px;
  height: 42px;
  color: var(--mockup-coral);
  justify-self: center;
}

.page-report-packages .package-document-art > .package-document-artwork {
  object-fit: contain;
}

.page-report-packages .consumer-action-icon {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  stroke-width: 2.2;
}

.page-report-packages .package-support-thanks > span svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
  stroke-width: 1.5;
}

@media (max-width: 760px) {
  .page-reports .eligible-property-visual {
    min-height: 310px;
  }

  .page-reports .eligible-property-visual-art {
    right: 0;
    width: min(100%, 330px);
  }
}