/* A single mobile layout layer. Short steps keep a stable shell; only their
   choices/form panel scrolls. Landing pages and long legal copy remain readable.
   No content, consent, financial state or animation is removed to make it fit. */
@media (max-width: 900px), (max-height: 500px) and (pointer: coarse) {
  html[data-wise-mobile-layout] {
    --mobile-gutter: max(12px, env(safe-area-inset-left), env(safe-area-inset-right));
    --mobile-top: env(safe-area-inset-top, 0px);
    --mobile-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-screen: var(--wise-screen-height, 100dvh);
    min-width: 0 !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  html[data-wise-mobile-layout] body { min-width: 0 !important; }
  html[data-wise-mobile-layout] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) { font-size: 16px !important; }
  html[data-wise-mobile-layout] :is(input, select, textarea, button, a) { -webkit-tap-highlight-color: transparent; }

  /* Questionnaire: the header, progress and CTA are siblings of the scrolling
     choice region, so address bars, rotation and selection cannot move them. */
  html[data-wise-mobile-layout]:has(body.flow-step-ui:is([data-demo-route="/2.html"], [data-demo-route="/3.html"], [data-demo-route="/4.html"], [data-demo-route="/5.html"], [data-demo-route="/6.html"], [data-demo-route="/7.html"])) {
    height: 100% !important;
    overflow: hidden !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui:is([data-demo-route="/2.html"], [data-demo-route="/3.html"], [data-demo-route="/4.html"], [data-demo-route="/5.html"], [data-demo-route="/6.html"], [data-demo-route="/7.html"]) {
    display: flex !important;
    flex-direction: column !important;
    height: var(--mobile-screen) !important;
    min-height: 0 !important;
    max-height: var(--mobile-screen) !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui:is([data-demo-route="/2.html"], [data-demo-route="/3.html"], [data-demo-route="/4.html"], [data-demo-route="/5.html"], [data-demo-route="/6.html"], [data-demo-route="/7.html"]) > .header {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: var(--mobile-top) !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui .header .header-content { box-sizing: border-box; min-height: 54px !important; height: 54px !important; padding: 7px var(--mobile-gutter) !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .flow-progress-shell { flex: 0 0 auto !important; width: calc(100% - 24px) !important; max-width: 560px !important; margin: 5px auto !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .container {
    flex: 1 1 0 !important; display: flex !important; min-height: 0 !important; height: auto !important;
    padding: 0 var(--mobile-gutter) 8px !important; overflow: hidden !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .container > .card {
    display: flex !important; flex-direction: column !important; flex: 1 1 0 !important;
    width: 100% !important; max-width: 560px !important; min-height: 0 !important; height: auto !important; overflow: hidden !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) .card :is(h1.title, h1),
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) .step-header h1 { flex: 0 0 auto; font-size: clamp(26px, 7vw, 34px) !important; line-height: 1.12 !important; margin: 6px 0 0 !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) .card :is(p.subtitle, .lead) { flex: 0 0 auto; font-size: 16px !important; line-height: 22px !important; margin: 6px 0 12px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) .card :is(.section-label, .flow-option-label) { margin: 0 0 7px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) .card > :is(.grid, .list) {
    flex: 1 1 0 !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important;
    align-content: start !important; margin-top: 0 !important; padding: 2px !important; gap: 7px !important;
    overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) .card .grid > .opt { min-height: 100px !important; padding: 12px !important; gap: 10px !important; border-radius: 20px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) .card .grid > .opt > svg { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; flex-basis: 40px !important; padding: 9px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) .card .grid > .opt > span { font: 500 16px/21px var(--wise-font-ui) !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge):is([data-demo-route="/4.html"], [data-demo-route="/6.html"]) .card .list { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge):is([data-demo-route="/4.html"], [data-demo-route="/6.html"]) .card .list > .opt { min-height: 48px !important; height: auto !important; padding: 6px 10px !important; gap: 9px !important; border-radius: 16px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge):is([data-demo-route="/4.html"], [data-demo-route="/6.html"]) .card .list > .opt > svg { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; padding: 7px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge):is([data-demo-route="/4.html"], [data-demo-route="/6.html"]) .card .list > .opt > span { font: 500 16px/21px var(--wise-font-ui) !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge)[data-demo-route="/7.html"] .card > .list.wq-credit { gap: 8px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge)[data-demo-route="/7.html"] .card > .list.wq-credit > .opt { height: auto !important; min-height: 92px !important; padding: 12px !important; gap: 12px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge)[data-demo-route="/7.html"] .card > .list.wq-credit :is(.opt-title, .opt-desc) { font-size: 15px !important; line-height: 20px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge)[data-demo-route="/7.html"] .card > .list.wq-credit .opt-desc { font-size: 14px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .actions {
    position: relative !important; inset: auto !important; flex: 0 0 auto !important; margin: 0 !important;
    padding: 7px max(var(--mobile-gutter), calc((100% - 560px) / 2)) calc(7px + var(--mobile-bottom)) !important;
    gap: 5px 8px !important; backdrop-filter: none !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .actions :is(.btn-next, .btn-voltar) { min-height: 48px !important; height: auto !important; padding: 10px 16px !important; font-size: 17px !important; line-height: 22px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .actions .btn-next { flex: 1 1 140px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .actions .flow-privacy-note { font-size: 11px !important; line-height: 15px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge)[data-demo-route="/5.html"] .card { overflow-y: auto !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge)[data-demo-route="/5.html"] .card .field-group { margin-top: 14px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge)[data-demo-route="/5.html"] .card .field-header { min-height: 34px !important; margin-bottom: 6px !important; gap: 10px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge)[data-demo-route="/5.html"] .card :is(.select-display, #dayInput) { min-height: 52px !important; padding: 12px !important; border-radius: 18px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge)[data-demo-route="/5.html"] #rendaOptions {
    max-height: min(432px, calc(var(--mobile-screen) - 400px)) !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
  }

  /* Identity and contact: scrolling belongs to the form, never a clipped page. */
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/2.html"] > .container { flex: 1 1 0 !important; min-height: 0 !important; padding: 10px var(--mobile-gutter) calc(10px + var(--mobile-bottom)) !important; overflow-y: auto !important; justify-content: safe center !important; }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/2.html"] .container > .card { overflow: visible !important; }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/8.html"] { height: var(--mobile-screen) !important; min-height: 0 !important; overflow: hidden !important; padding: 0 !important; }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/8.html"] .wrap { display: flex !important; flex-direction: column !important; height: var(--mobile-screen) !important; min-height: 0 !important; box-sizing: border-box !important; padding: 28px 0 0 !important; overflow: hidden !important; }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/8.html"] .header { position: relative !important; inset: auto !important; flex: 0 0 auto; padding-top: var(--mobile-top); }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/8.html"] .wrap > .card { flex: 1 1 0 !important; min-height: 0 !important; overflow-y: auto !important; width: 100% !important; margin: 0 !important; padding: 10px var(--mobile-gutter) calc(12px + var(--mobile-bottom)) !important; }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/8.html"] .wrap > .card { display: flex !important; flex-direction: column !important; }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/8.html"] #contactForm { display: flex !important; flex-direction: column !important; flex: 1 0 auto !important; min-height: 0 !important; }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/8.html"] #submitBtn { margin-top: auto !important; }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/8.html"] .card h1 { font-size: 26px !important; line-height: 30px !important; margin: 0 0 8px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/8.html"] :is(.lead, .info-list) { font-size: 14px !important; line-height: 20px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/8.html"] .info-box { margin: 12px 0 !important; padding: 12px !important; box-shadow: 0 12px 26px rgba(8,52,0,.13), 0 3px 8px rgba(8,52,0,.07) !important; }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/8.html"] .form-group { margin-bottom: 12px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/8.html"] :is(.form-input, .btn-submit) { min-height: 50px !important; padding-block: 10px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/8.html"] > .cf-foot { display: none !important; }

  /* The three-step quiz keeps the legal note and actions outside its choices. */
  html[data-wise-mobile-layout]:has(body.prequiz-page) { height: 100%; overflow: hidden; }
  html[data-wise-mobile-layout] body.prequiz-page { height: var(--mobile-screen); min-height: 0; overflow: hidden; }
  html[data-wise-mobile-layout] .pq-header { flex: 0 0 auto; padding: calc(10px + var(--mobile-top)) var(--mobile-gutter) 10px; }
  html[data-wise-mobile-layout] .pq-brand img { height: 26px; }
  html[data-wise-mobile-layout] .pq-main { flex: 1 1 0; min-height: 0; padding: 4px var(--mobile-gutter) calc(10px + var(--mobile-bottom)); }
  html[data-wise-mobile-layout] .pq-card { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 18px 16px; border-radius: 24px; }
  html[data-wise-mobile-layout] .pq-progress { flex: 0 0 auto; margin-bottom: 12px; }
  html[data-wise-mobile-layout] .pq-counter { flex: 0 0 auto; margin-bottom: 8px; }
  html[data-wise-mobile-layout] .pq-steps { display: flex; flex: 1 1 0; min-height: 0; }
  html[data-wise-mobile-layout] .pq-step:not([hidden]) { display: flex; flex-direction: column; width: 100%; min-height: 0; }
  html[data-wise-mobile-layout] .pq-step h1 { flex: 0 0 auto; font-size: clamp(25px, 7vw, 32px); }
  html[data-wise-mobile-layout] .pq-subtitle { flex: 0 0 auto; margin: 6px 0 12px; font-size: 15px; line-height: 21px; }
  html[data-wise-mobile-layout] .pq-options { flex: 1 1 0; min-height: 0; align-content: start; gap: 8px; padding: 2px; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; }
  html[data-wise-mobile-layout] .pq-opt { min-height: 48px; padding: 11px 13px; font-size: 16px; border-radius: 16px; }
  html[data-wise-mobile-layout] .pq-note { flex: 0 0 auto; margin: 10px 0 0; font-size: 12px; line-height: 17px; }
  html[data-wise-mobile-layout] .pq-actions { flex: 0 0 auto; margin-top: 10px; gap: 8px; }
  html[data-wise-mobile-layout] :is(.pq-next, .pq-back) { min-height: 48px; padding: 10px 18px; }

  /* Creditea: compact header/footer, a stable action row and a scrollable set
     of fields/options. Long addresses and review data are not cut or hidden. */
  html[data-wise-mobile-layout]:has(body.ca-body) { height: 100%; overflow: hidden; }
  html[data-wise-mobile-layout] body.ca-body { height: var(--mobile-screen); min-height: 0; overflow: hidden; }
  html[data-wise-mobile-layout] .ca-header { flex: 0 0 auto; height: calc(54px + var(--mobile-top)); padding: calc(8px + var(--mobile-top)) 0 8px; }
  html[data-wise-mobile-layout] .ca-header-inner { padding-inline: var(--mobile-gutter); }
  html[data-wise-mobile-layout] .ca-main { flex: 1 1 0; min-height: 0; }
  html[data-wise-mobile-layout] .ca-progress { width: calc(100% - 24px); max-width: 600px; flex: 0 0 auto; margin: 8px auto 0; }
  html[data-wise-mobile-layout] .ca-stage:is(.ca-stage-contained, .ca-stage-compact),
  html[data-wise-mobile-layout] .ca-stage { display: flex; flex-direction: column; width: calc(100% - 24px); max-width: 600px; flex: 1 1 0; min-height: 0; overflow: hidden; }
  html[data-wise-mobile-layout] .ca-stage .ca-heading { flex: 0 0 auto; margin: 12px 0; font-size: 25px; line-height: 30px; transform: none; }
  html[data-wise-mobile-layout] .ca-stage .ca-lede { flex: 0 0 auto; margin: 0 0 12px; font-size: 14px; line-height: 20px; }
  html[data-wise-mobile-layout] .ca-form { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
  html[data-wise-mobile-layout] .ca-grid, html[data-wise-mobile-layout] .ca-summary { flex: 1 1 0; min-height: 0; padding: 2px; overflow-x: hidden; overflow-y: auto; align-content: start; gap: 10px; overscroll-behavior-y: contain; }
  html[data-wise-mobile-layout] .ca-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-wise-mobile-layout] .ca-field input, html[data-wise-mobile-layout] .ca-field select { height: 54px; border-radius: 10px; padding: 17px 14px 0; }
  html[data-wise-mobile-layout] .ca-field label:not(.ca-choice) { height: 54px; padding: 8px 14px; font-size: 14px; line-height: 19px; }
  html[data-wise-mobile-layout] .ca-field input:not(:placeholder-shown) + label,
  html[data-wise-mobile-layout] .ca-field input:focus + label,
  html[data-wise-mobile-layout] .ca-field select + label { height: 26px; padding-top: 4px; font-size: 11px; line-height: 14px; }
  html[data-wise-mobile-layout] .ca-field select { background-position: calc(100% - 22px) 25px, calc(100% - 16px) 25px; }
  html[data-wise-mobile-layout] .ca-stage[data-step="2"] .ca-grid > .ca-field { transform: none; }
  html[data-wise-mobile-layout] .ca-choice-group { gap: 8px; }
  html[data-wise-mobile-layout] .ca-field label.ca-choice { min-height: 48px; padding: 10px; font-size: 15px; line-height: 20px; }
  html[data-wise-mobile-layout] .ca-actions, html[data-wise-mobile-layout] .ca-stage[data-step="2"] .ca-actions { flex: 0 0 auto; flex-direction: row; gap: 8px; margin: 10px 0 4px; }
  html[data-wise-mobile-layout] :is(.ca-primary, .ca-secondary), html[data-wise-mobile-layout] .ca-stage[data-step="2"] .ca-secondary { min-width: 0; min-height: 48px; padding: 11px 14px; }
  html[data-wise-mobile-layout] .ca-actions .ca-primary { flex: 1 1 auto; width: auto; }
  html[data-wise-mobile-layout] .ca-check-row { flex: 0 0 auto; gap: 10px; margin: 10px 0; font-size: 13px; line-height: 19px; }
  html[data-wise-mobile-layout] .ca-review-box { flex: 0 0 auto; margin-top: 8px; padding: 10px; }
  html[data-wise-mobile-layout] .ca-review-box .ca-check-row { margin: 0; }
  html[data-wise-mobile-layout] .ca-amount-note { flex: 0 0 auto; margin: 0 0 8px; }
  html[data-wise-mobile-layout] .ca-summary-row { padding: 8px 10px; font-size: 13px; gap: 10px; }
  html[data-wise-mobile-layout] .ca-footer, html[data-wise-mobile-layout] .ca-body:not([data-ca-step="1"]) .ca-footer,
  html[data-wise-mobile-layout] .ca-body[data-ca-step="1"] .ca-footer { height: auto; flex: 0 0 auto; padding: 4px var(--mobile-gutter) calc(4px + var(--mobile-bottom)); }
  html[data-wise-mobile-layout] .ca-footer-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; height: auto; padding: 0; }
  html[data-wise-mobile-layout] .ca-footer-company, html[data-wise-mobile-layout] .ca-footer-links { position: static; font-size: 11px; line-height: 16px; }
  html[data-wise-mobile-layout] .ca-footer-links { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  html[data-wise-mobile-layout] .ca-footer a { min-height: 28px; gap: 6px; font-size: 12px; line-height: 18px; }
  html[data-wise-mobile-layout] .ca-footer a svg { width: 16px; height: 16px; }
  html[data-wise-mobile-layout] .ca-footer-help { position: static; width: auto; height: auto; min-height: 32px; padding: 2px 10px; font-size: 12px; border-width: 2px; }
  html[data-wise-mobile-layout] .ca-suggestions { top: calc(8px + var(--mobile-top)); right: 12px; width: 40px; height: 38px; border-radius: 10px; padding: 6px; }
  html[data-wise-mobile-layout] .ca-suggestions span { display: none; }

  /* Financial screens: short states fit; a long contract/terms panel scrolls
     inside its card rather than moving the outer page or hiding disclosures. */
  html[data-wise-mobile-layout]:has(body.upsell-operational-page),
  html[data-wise-mobile-layout]:has(body.contract-preview-page),
  html[data-wise-mobile-layout]:has(body.application-flow-ui.is-approval-summary) { height: 100% !important; overflow: hidden !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page { height: var(--mobile-screen) !important; min-height: 0 !important; overflow: hidden !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .wrap { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: 640px !important; margin: 0 auto !important; padding: 0 var(--mobile-gutter) calc(8px + var(--mobile-bottom)) !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .wrap > .topbar { flex: 0 0 auto !important; min-height: 54px !important; height: auto !important; margin: 0 !important; width: 100% !important; padding: calc(8px + var(--mobile-top)) 0 8px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .upsell-operational-card { display: block !important; flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; margin: 4px 0 0 !important; padding: 16px !important; border-radius: 22px !important; overflow-x: hidden !important; overflow-y: auto !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .upsell-operational-progress { margin-bottom: 12px !important; font-size: 11px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .upsell-operational-icon { width: 44px !important; height: 44px !important; margin: 8px auto 14px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .upsell-operational-title { margin: 0 0 12px !important; font-size: clamp(25px, 6vw, 30px) !important; line-height: 1.1 !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .upsell-operational-lead { margin: 8px 0 12px !important; font-size: 14px !important; line-height: 20px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page :is(.upsell-operational-amount, .upsell-operational-account, .upsell-operational-terms, .upsell-operational-status, .upsell-operational-details) { margin-bottom: 10px !important; padding: 12px !important; border-radius: 16px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .upsell-operational-amount strong { font-size: 28px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page :is(.upsell-operational-status, .upsell-operational-terms p, .upsell-operational-muted) { font-size: 14px !important; line-height: 20px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .upsell-operational-button { min-height: 48px !important; height: auto !important; margin: 6px 0 0 !important; padding: 12px !important; font-size: 16px !important; line-height: 21px !important; }
  html[data-wise-mobile-layout] body.contract-preview-page { height: var(--mobile-screen) !important; min-height: 0 !important; overflow: hidden !important; }
  html[data-wise-mobile-layout] body.contract-preview-page .contract-shell { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: 640px !important; padding: calc(10px + var(--mobile-top)) var(--mobile-gutter) calc(10px + var(--mobile-bottom)) !important; overflow: hidden !important; }
  html[data-wise-mobile-layout] body.contract-preview-page .contract-brand { flex: 0 0 auto; margin-bottom: 12px !important; }
  html[data-wise-mobile-layout] body.contract-preview-page .contract-card { flex: 1 1 0; min-height: 0; padding: 16px !important; overflow-x: hidden; overflow-y: auto; }
  html[data-wise-mobile-layout] body.contract-preview-page .contract-progress { margin-bottom: 16px !important; }
  html[data-wise-mobile-layout] body.contract-preview-page .contract-copy { margin: 10px 0 14px !important; }
  html[data-wise-mobile-layout] body.contract-preview-page .contract-next { min-height: 48px !important; margin-top: 12px !important; }

  html[data-wise-mobile-layout] body.application-flow-ui.is-approval-summary { display: flex !important; flex-direction: column !important; height: var(--mobile-screen) !important; min-height: 0 !important; padding-bottom: 0 !important; overflow: hidden !important; }
  html[data-wise-mobile-layout] body.application-flow-ui.is-approval-summary > .wrap { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; padding: 0 !important; overflow: hidden !important; }
  html[data-wise-mobile-layout] body.application-flow-ui.is-approval-summary .topbar { flex: 0 0 auto; height: auto; min-height: 54px; padding: calc(8px + var(--mobile-top)) var(--mobile-gutter) 8px; }
  html[data-wise-mobile-layout] body.application-flow-ui.is-approval-summary .flow-status-page { flex: 1 1 0; min-height: 0; padding: 6px var(--mobile-gutter) 10px !important; overflow-y: auto; }
  html[data-wise-mobile-layout] body.application-flow-ui.is-approval-summary .application-status-art { width: 104px !important; height: 104px !important; margin: 0 auto 4px !important; }
  html[data-wise-mobile-layout] body.application-flow-ui.is-approval-summary .approval-amount-card { margin-top: 12px; padding: 14px; }
  html[data-wise-mobile-layout] body.application-flow-ui.is-approval-summary .approval-stats > section { padding: 12px; }
  html[data-wise-mobile-layout] body.application-flow-ui.is-approval-summary .approval-first-payment { margin-top: 10px; padding: 12px; }
  html[data-wise-mobile-layout] body.application-flow-ui.is-approval-summary .approval-actions { position: relative; inset: auto; flex: 0 0 auto; padding: 8px var(--mobile-gutter) calc(8px + var(--mobile-bottom)); }
  html[data-wise-mobile-layout] body.application-flow-ui.is-approval-summary .approval-actions button { min-height: 48px !important; padding: 10px 16px !important; }
  html[data-wise-mobile-layout] body.application-flow-ui.is-approval-summary .approval-actions p { margin-top: 6px; }
  html[data-wise-mobile-layout] #identitySheet { max-height: calc(var(--mobile-screen) - 12px) !important; overflow-y: auto !important; padding-bottom: max(16px, var(--mobile-bottom)); }
  html[data-wise-mobile-layout] body.guided-chat { height: var(--mobile-screen) !important; min-height: 0 !important; }
  html[data-wise-mobile-layout] body.guided-chat .chat-card { height: var(--mobile-screen) !important; min-height: 0 !important; }
  html[data-wise-mobile-layout] :is(.flow-route-loading, .ca-finish-loading) { box-sizing: border-box; padding-top: max(20px, var(--mobile-top)); padding-bottom: max(20px, var(--mobile-bottom)); }
}

/* In landscape the available height is smaller, so keep all income bands
   reachable inside the list without pushing the action bar out of view. */
@media (max-width: 900px) and (max-height: 500px) {
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge)[data-demo-route="/5.html"] #rendaOptions {
    max-height: min(432px, calc(var(--mobile-screen) - 170px)) !important;
  }
}

/* App shell for the five selection questions: the action row owns the bottom
   safe area and the answer collection is the only flexible scroll region. */
@media (max-width: 900px) {
  html[data-wise-mobile-layout]:has(body.flow-step-ui.wq-page:not(.wq-bridge)) {
    height: 100% !important;
    overflow: hidden !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) {
    display: flex !important;
    flex-direction: column !important;
    height: var(--mobile-screen) !important;
    min-height: 0 !important;
    max-height: var(--mobile-screen) !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .header {
    flex: 0 0 auto !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .flow-progress-shell {
    flex: 0 0 auto !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .container {
    display: flex !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .container > .card {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) .card > :is(.grid, .list) {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    align-content: start !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .actions {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 7px var(--mobile-gutter) calc(7px + var(--mobile-bottom)) !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .cf-foot {
    display: none !important;
  }
}

/* Higher specificity than the legacy desktop fixed-track rule, which is
   loaded before this layer and otherwise crosses the progress label. */
@media (max-width: 900px), (max-height: 500px) and (pointer: coarse) {
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page .flow-progress-track,
  html[data-wise-mobile-layout] body.flow-step-ui.funnel-ca .flow-progress-track {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin-top: 6px !important;
  }
}

/* Keep the step label and progress track in normal flow on small screens.
   The legacy fixed track at top:65px crossed the “Paso X de 8” label when the
   compact header was 55px high. */
@media (max-width: 900px), (max-height: 500px) and (pointer: coarse) {
  html[data-wise-mobile-layout] body.flow-step-ui .flow-progress-shell {
    position: relative !important;
    width: calc(100% - 24px) !important;
    margin: 5px auto 8px !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui .flow-progress-track {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-top: 6px !important;
  }
}

/* Extra-small portrait devices: keep the complete choice set above the
   action bar instead of creating a clipped/partially hidden grid. */
@media (max-width: 340px) and (min-height: 500px) {
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) {
    padding-bottom: 0 !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .actions {
    margin-top: 6px !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .actions {
    padding: 5px 8px calc(4px + var(--mobile-bottom)) !important;
    gap: 4px !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .actions :is(.btn-next, .btn-voltar) {
    min-height: 44px !important;
    padding-block: 8px !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .actions .flow-privacy-note {
    font-size: 10px !important;
    line-height: 14px !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) .card > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) .card .grid > .opt {
    min-height: 62px !important;
    height: auto !important;
    padding: 8px !important;
    gap: 6px !important;
    border-radius: 16px !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) .card .grid > .opt > svg {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    flex-basis: 30px !important;
    padding: 6px !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) .card .grid > .opt > span {
    font-size: 13px !important;
    line-height: 17px !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge):is([data-demo-route="/4.html"], [data-demo-route="/6.html"]) .card .list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge):is([data-demo-route="/4.html"], [data-demo-route="/6.html"]) .card .list > .opt {
    min-height: 48px !important;
    padding: 7px !important;
    border-radius: 14px !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge)[data-demo-route="/7.html"] .card > .list.wq-credit {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge)[data-demo-route="/7.html"] .card > .list.wq-credit > .opt {
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
    padding: 8px !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge)[data-demo-route="/7.html"] .card > .list.wq-credit {
    align-content: start !important;
    grid-auto-rows: 84px !important;
  }
}

/* Landscape uses useful columns, not a scaled-down portrait page. */
@media (max-width: 900px) and (max-height: 500px) {
  html[data-wise-mobile-layout] body.flow-step-ui .header .header-content { height: 44px !important; min-height: 44px !important; padding-block: 4px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) .card :is(h1.title, h1) { font-size: 24px !important; margin-top: 2px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) .card p.subtitle { margin: 3px 0 7px !important; font-size: 14px !important; line-height: 19px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) .card .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) .card .grid > .opt { min-height: 76px !important; padding: 9px !important; gap: 7px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge):is([data-demo-route="/4.html"], [data-demo-route="/6.html"]) .card .list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge)[data-demo-route="/7.html"] .card > .list.wq-credit { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge)[data-demo-route="/7.html"] .card > .list.wq-credit > .opt { flex-direction: column !important; align-items: flex-start !important; min-height: 130px !important; gap: 6px !important; padding: 10px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .actions { padding-block: 5px !important; }
  html[data-wise-mobile-layout] body.flow-step-ui.wq-page:not(.wq-bridge) > .actions :is(.btn-next, .btn-voltar) { min-height: 44px !important; }
  html[data-wise-mobile-layout] .pq-header { padding-block: 6px; }
  html[data-wise-mobile-layout] .pq-card { padding: 12px; }
  html[data-wise-mobile-layout] .pq-progress { margin-bottom: 6px; }
  html[data-wise-mobile-layout] .pq-counter { margin-bottom: 5px; font-size: 11px; }
  html[data-wise-mobile-layout] .pq-step:not([hidden]) { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: min-content 1fr; column-gap: 16px; }
  html[data-wise-mobile-layout] .pq-step h1 { grid-column: 1; font-size: 24px; }
  html[data-wise-mobile-layout] .pq-subtitle { grid-column: 1; margin: 6px 0; font-size: 14px; }
  html[data-wise-mobile-layout] .pq-options { grid-column: 2; grid-row: 1 / 3; }
  html[data-wise-mobile-layout] .pq-note { font-size: 11px; line-height: 15px; margin-top: 6px; }
  html[data-wise-mobile-layout] .pq-actions { margin-top: 6px; }
  html[data-wise-mobile-layout] :is(.pq-next, .pq-back) { min-height: 44px; padding-block: 8px; }
  html[data-wise-mobile-layout] .ca-stage .ca-heading { margin: 6px 0; font-size: 22px; line-height: 26px; }
  html[data-wise-mobile-layout] .ca-stage .ca-lede { margin-bottom: 6px; }
  html[data-wise-mobile-layout] .ca-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-wise-mobile-layout] .ca-footer-links { grid-column: auto; }
  html[data-wise-mobile-layout] .ca-actions { margin-top: 6px; }
  html[data-wise-mobile-layout] body.application-flow-ui.is-approval-summary .application-status-art { width: 64px !important; height: 64px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .wrap > .topbar { min-height: 32px !important; padding-block: 3px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .wrap > .topbar img { height: 20px !important; max-width: 86px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .upsell-operational-card { margin-top: 2px !important; padding: 11px 13px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .upsell-operational-icon { width: 36px !important; height: 36px !important; margin: 0 auto 5px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .upsell-operational-icon svg { width: 20px !important; height: 20px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .upsell-operational-title { margin-bottom: 4px !important; font-size: 21px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .upsell-operational-state { margin-top: 3px !important; font-size: 10px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page :is(.upsell-operational-lead, .upsell-operational-explanation) { margin-block: 5px 7px !important; font-size: 11px !important; line-height: 15px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page :is(.upsell-operational-amount, .upsell-operational-terms, .upsell-operational-status, .upsell-operational-details) { margin-bottom: 7px !important; padding: 8px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .upsell-operational-amount strong { font-size: 24px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .upsell-operational-account { margin-bottom: 7px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page :is(.upsell-operational-terms p, .upsell-operational-consent, .upsell-operational-status, .upsell-operational-muted) { font-size: 11.5px !important; line-height: 15px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .contract-opening-fee-meta > div { padding-block: 3px !important; }
  html[data-wise-mobile-layout] body.upsell-operational-page .upsell-operational-button { min-height: 42px !important; padding: 8px 12px !important; font-size: 12px !important; line-height: 16px !important; }
}

/* Identity step: do not vertically center the whole card on a phone. The
   header/progress stay near the top and the form owns the remaining space,
   avoiding the large blank band seen between “Paso 1” and the indicators. */
@media (max-width: 900px), (max-height: 500px) and (pointer: coarse) {
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/2.html"] > .container {
    justify-content: flex-start !important;
    padding-top: 10px !important;
    padding-bottom: calc(12px + var(--mobile-bottom)) !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/2.html"] .container > .card {
    margin-top: 0 !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/2.html"] .step-indicators {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/2.html"] .progress-bar {
    margin-top: 4px !important;
    margin-bottom: 18px !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/2.html"] .step-header {
    margin-bottom: 8px !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/2.html"] .step-subtitle {
    margin: 6px 0 14px !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/2.html"] > .container > .card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/2.html"] > .container > .card > .step[style*="display: block"] {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  html[data-wise-mobile-layout] body.flow-step-ui[data-demo-route="/2.html"] > .container > .card > .step[style*="display: block"] .trust-bar {
    margin-top: auto !important;
  }
}