/* Mobile questionnaire authority. Keep sizing tied to the actual containing
   block; never translate the page to compensate for viewer chrome. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 900px) {
  body.proposal-active .proposal-title-block,
  body.proposal-active .proposal-screen__rail,
  body.questionnaire-active .request-rail {
    display: none !important;
  }

  body.proposal-active,
  body.questionnaire-active {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.proposal-active > div,
  body.questionnaire-active > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.proposal-active .proposal-screen,
  body.questionnaire-active .questionnaire {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  body.proposal-active .proposal-screen {
    min-height: 100svh !important;
    background: var(--warm-cream, #fbf6ee) !important;
  }

  body.proposal-active .proposal-screen__main,
  body.questionnaire-active .questionnaire__inner {
    width: min(calc(100% - 32px), 760px) !important;
    max-width: 760px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  body.proposal-active .proposal-screen__main {
    padding: 20px 0 32px !important;
  }

  body.proposal-active .proposal-two-column {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.proposal-active .proposal-address-grid,
  body.proposal-active .proposal-address-row,
  body.proposal-active .proposal-address-row input,
  body.questionnaire-active :is(
    .interview,
    .transcript,
    .active-question,
    .review-panel,
    .process-stage,
    .details-stage,
    .summary,
    .confirmation
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.proposal-active .proposal-address-row--top {
    grid-template-columns: minmax(0, 1fr) 88px !important;
  }

  body.proposal-active .proposal-address-row--bottom {
    grid-template-columns: minmax(0, 1fr) 58px 86px !important;
  }

  body.proposal-active .proposal-card footer {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body.proposal-active #proposal-next {
    transform: none !important;
  }
}

/* Phone readability authority. Keep the established composition, but prevent
   the compact desktop sizing from carrying into the touch experience. */
@media (max-width: 520px) {
  .landing .hero-narrative__opening span {
    display: block;
  }

  /* Target the elements that set their own type size. The earlier rule on the
     outer section could not enlarge these descendants because style.css gives
     the script its own .94rem phone size. */
  .landing .hero-narrative__script {
    font-size: 1.0625rem !important;
    line-height: 1.52 !important;
  }

  .landing :is(
    .hero-narrative,
    .deductions,
    .landing__difference,
    .landing__promise,
    .landing__prompt
  ),
  .referral-landing :is(
    .referral-landing__lead,
    .referral-landing__details,
    .referral-landing__promise span
  ) {
    font-size: 1.0625rem !important;
    line-height: 1.52 !important;
  }

  .landing .begin-button,
  .referral-landing .begin-button {
    min-height: 46px !important;
    padding: 11px 18px !important;
    font-size: .98rem !important;
    line-height: 1.25 !important;
  }

  body.proposal-active .proposal-card :is(label > b, legend),
  body.questionnaire-active :is(
    .question-row > label,
    .question-row > legend,
    .field-wrap > label,
    .answer-area > label,
    .details-form-field > label,
    .summary-list dt,
    .summary-list dd
  ) {
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }

  body.proposal-active :is(input, select, textarea),
  body.questionnaire-active :is(input, select, textarea) {
    min-height: 44px !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }

  body.proposal-active :is(
    .proposal-choices button,
    .proposal-card footer button
  ),
  body.questionnaire-active :is(
    .choice-button,
    .field-next,
    .primary-button,
    #submit-button,
    .confirmation-finish,
    .share-options button
  ) {
    min-height: 44px !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }

  body.proposal-active :is(
    .proposal-guidance,
    .proposal-guidance p,
    .proposal-receipts > p,
    .proposal-disclaimer p
  ),
  body.questionnaire-active :is(
    .request-intro,
    .details-form-context,
    .field-note,
    .process-steps p,
    .process-note,
    .recovery-heading,
    .confirmation-copy,
    .confirmation-delivery
  ) {
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }

  body.questionnaire-active .disclaimer,
  body.questionnaire-active .proposal-disclaimer {
    font-size: .98rem !important;
    line-height: 1.45 !important;
  }
}

/* The first intake is a full-width mobile surface. Its reading column stays
   centered at every point in the form; no selection may change that column. */
@media (max-width: 900px) {
  body.proposal-active .landing,
  body.proposal-active .proposal-screen,
  body.proposal-active .proposal-screen__main,
  body.proposal-active .scenario-layout,
  body.proposal-active .scenario-content,
  body.proposal-active .proposal-card {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.proposal-active .proposal-screen {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  body.proposal-active .proposal-screen__main {
    width: min(calc(100% - 32px), 680px) !important;
    max-width: 680px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  body.proposal-active .proposal-card,
  body.proposal-active .proposal-questionnaire,
  body.proposal-active .proposal-choices,
  body.proposal-active .proposal-choices button {
    max-width: 100% !important;
  }
}

@media (max-width: 520px) {
  /* Keep protected product terms intact, but make the whole term an atomic
     wrap unit so it moves to the next line instead of overflowing the phone. */
  .no-break-term {
    display: inline-block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  body.proposal-active .proposal-screen__main,
  body.questionnaire-active .questionnaire__inner {
    width: calc(100% - 24px) !important;
  }

  /* The result is a clean mobile page. Its top spacing clears the Sites app
     controls, while its width remains centered inside the real viewport. */
  body.review-active,
  body.review-active > div,
  body.review-active .questionnaire {
    min-height: 100dvh !important;
    background: #fbfaf8 !important;
  }

  body.review-active .questionnaire {
    width: 100% !important;
    padding: 0 12px 32px !important;
  }

  body.review-active .questionnaire__inner {
    width: 100% !important;
    max-width: 390px !important;
    min-height: 100dvh !important;
    margin-inline: auto !important;
    padding: 38px 0 30px !important;
  }

  body.review-active .questionnaire__inner {
    padding-top: 128px !important;
  }

  body.review-active .interview,
  body.review-active #first-review.review-panel:not([hidden]) {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    overflow: visible !important;
  }

  body.review-active #first-review .claim-result,
  body.review-active #first-review .reality-statement,
  body.review-active #first-review .stage-actions {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  body.review-active #first-review .claim-result {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    padding: 44px 16px 22px !important;
    border-radius: 16px !important;
  }

  body.review-active #first-review .claim-emblem {
    width: 58px !important;
    height: 58px !important;
  }

  body.review-active #first-review .claim-emblem img {
    width: 50px !important;
    height: 50px !important;
  }

  body.review-active #first-review .claim-result h2 {
    width: 100% !important;
    max-width: 275px !important;
    margin-inline: auto !important;
    font-size: clamp(1.1rem, 5.1vw, 1.28rem) !important;
    line-height: 1.2 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  body.review-active #first-review .claim-kicker {
    margin-bottom: 8px !important;
  }

  body.review-active #first-review .claim-promise {
    margin-top: 14px !important;
    font-size: .98rem !important;
    line-height: 1.38 !important;
  }

  body.review-active #first-review .reality-statement {
    margin-bottom: 0 !important;
    padding: 14px 15px !important;
    border-radius: 10px !important;
  }

  body.review-active #first-review .reality-statement p {
    max-width: 290px !important;
    margin-inline: auto !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  body.review-active #first-review .stage-actions {
    margin-top: 18px !important;
  }

  /* The iOS Sites view can be top-level rather than an iframe, so embedded
     detection is unreliable. Keep every phone questionnaire stage inside a
     deliberately narrow, left-anchored working column. */
  body.questionnaire-active .questionnaire {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  body.questionnaire-active .questionnaire__inner {
    width: min(calc(100% - 96px), 320px) !important;
    max-width: 320px !important;
    margin-right: 0 !important;
    margin-left: 12px !important;
  }

  /* The process explanation contains the longest copy in the flow. Give it a
     larger protected right gutter so viewer controls cannot crop the column. */
  body.process-active .questionnaire__inner {
    width: min(calc(100% - 48px), 300px) !important;
    max-width: 300px !important;
    margin-right: auto !important;
    margin-left: 12px !important;
  }

  body.process-active :is(
    .interview,
    .process-stage,
    .process-steps,
    .process-steps article,
    .process-steps article > div,
    .service-fee,
    .recovery-example,
    .stage-actions
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.process-active :is(.process-steps p, .process-steps h3, .process-note, .recovery-heading) {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  body.process-active .recovery-example {
    grid-template-columns: 1fr !important;
  }

  body.process-active .recovery-example > b {
    transform: none !important;
  }

  /* The final review must remain readable in the narrow Sites phone view.
     Stack each answer below its label so long labels can never collide with
     values such as the Security Deposit amount. */
  body.summary-active .summary-list {
    width: 100% !important;
    gap: 0 !important;
  }

  body.summary-active .summary-list > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    width: 100% !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgb(75 36 88 / 16%) !important;
  }

  body.summary-active .summary-list dt,
  body.summary-active .summary-list dd,
  body.summary-active .summary-list dd button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}

/* Give each numbered prompt enough breathing room to read as a separate
   question without making the questionnaire feel long or disconnected. */
body.proposal-active .proposal-card {
  gap: 16px !important;
}

body.proposal-active .proposal-card :is(label, fieldset) {
  row-gap: 8px !important;
}

body.proposal-active .proposal-two-column {
  row-gap: 14px !important;
  padding-block: 8px !important;
}

body.proposal-active .proposal-two-column > fieldset {
  padding-top: 14px !important;
}

/* Keep the verification action in the expected reading order after a code is
   sent: contact, code, then Verify. */
.return-entry > #return-contact {
  order: 1;
}

.return-entry > .verification-code-wrap {
  order: 2;
}

.return-entry > #return-submit {
  order: 3;
}

/* The all-in-one intake must never make a phone page wider as a visitor
   selects answers. Keep the working column genuinely centered and stack the
   long receipt choices rather than allowing a three-button row to overflow. */
@media (max-width: 520px) {
  body.proposal-active .proposal-screen__main,
  body.proposal-active .scenario-layout,
  body.proposal-active .scenario-content,
  body.proposal-active .proposal-card,
  body.proposal-active .proposal-questionnaire,
  body.proposal-active .proposal-receipts {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.proposal-active .proposal-screen__main {
    width: calc(100% - 24px) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  body.proposal-active .proposal-card {
    overflow: hidden !important;
  }

  body.proposal-active .proposal-choices,
  body.proposal-active .proposal-receipts .proposal-choices {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  body.proposal-active .proposal-choices button {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* Keep autofill useful without treating the tenant's phone field as a warning. */
.details-form-field--tenantMobile input,
.details-form-field--tenantMobile input:-webkit-autofill,
.details-form-field--tenantMobile input:-webkit-autofill:hover,
.details-form-field--tenantMobile input:-webkit-autofill:focus {
  background: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  color: #1b183e !important;
  -webkit-text-fill-color: #1b183e !important;
}

/* The result must sit on the page centerline. The earlier narrow gutter was
   useful for a dense question column, but makes this destination feel lopsided. */
@media (max-width: 520px) {
  body.review-active .questionnaire__inner {
    width: calc(100% - 24px) !important;
    max-width: 700px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  body.review-active #first-review.review-panel,
  body.review-active #first-review .claim-result,
  body.review-active #first-review .reality-statement,
  body.review-active #first-review .stage-actions {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }
}

/* The consent summary is also a destination screen, not a narrow question
   column. Keep the white sheet equally inset from both aubergine edges. */
@media (max-width: 520px) {
  body.summary-active .questionnaire__inner {
    width: calc(100% - 24px) !important;
    max-width: 700px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  body.summary-active .summary,
  body.summary-active .summary-list,
  body.summary-active .summary-actions {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }
}

/* The "What happens next" page is a destination screen. It must share one
   true centerline on a phone instead of inheriting the old left-anchored
   questionnaire column. */
@media (max-width: 520px) {
  body.process-active .questionnaire {
    padding-inline: 0 !important;
  }

  body.process-active .questionnaire__inner {
    width: calc(100% - 32px) !important;
    max-width: 700px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  body.process-active :is(
    .interview,
    .process-stage,
    .recovery-path,
    .request-editorial,
    .process-steps,
    .process-worth,
    .stage-actions
  ) {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }
}

/* The working form is a centered sheet on phones.  Do not reserve a false
   right-hand rail: it makes the aubergine background look accidental and
   leaves the actual form cramped against the left edge. */
@media (max-width: 900px) {
  body.questionnaire-active:not(.process-active):not(.review-active):not(.summary-active) .questionnaire__inner {
    width: calc(100% - 32px) !important;
    max-width: 760px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }
}