/* ==========================================================================
   Sealed Energy mobile corrections
   Only defects observed in a real render are corrected here. Each rule
   records the width it was measured at and what was measured.
   Loaded last, and every selector is prefixed with html body so it wins on
   specificity rather than on link order.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Start Sealing route grid
   Measured at 390: grid-template-columns resolved to 155px 155px, and the
   card copy carries white-space: pre at clamp(30px, 2.4vw, 46px), so the
   authored line breaks cannot reflow inside a 155px column.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  html body .seal-start-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  html body .seal-start-card {
    min-height: 168px !important;
  }
  html body .seal-start-card .seal-start-copy strong {
    white-space: normal !important;
    font-size: clamp(26px, 7.4vw, 34px) !important;
  }
}

@media (min-width: 701px) and (max-width: 980px) {
  html body .seal-start-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --------------------------------------------------------------------------
   Home grids
   Measured at 390:
     .product-route-grid resolved to three 111px tracks
     .integrate-grid     resolved to 527px 0px inside a 358px box
     .conversion-grid    resolved to 0px 340px, first track fully collapsed
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  html body .product-route-grid,
  html body .integrate-grid,
  html body .conversion-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body .conversion-grid {
    gap: clamp(24px, 5vw, 40px) !important;
  }
  html body .integrate-grid {
    gap: clamp(20px, 4vw, 32px) !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  html body .product-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* The campaign headline and the integrate headline are both sized with
   width: max-content and white-space: nowrap, which cannot wrap on a phone. */
@media (max-width: 900px) {
  html body .bank-campaign-copy h1,
  html body .bank-campaign-copy h1 span,
  html body .bank-campaign-copy h1 em,
  html body .integrate-copy h2 {
    white-space: normal !important;
    width: auto !important;
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   Profile causal time tiles
   Measured at 390: three tracks of 119px, 119px, 140px, each tile carrying
   20px 22px padding and a clamp(22px, 2vw, 30px) numeral.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  html body .pf-time {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 721px) and (max-width: 980px) {
  html body .pf-time {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --------------------------------------------------------------------------
   Footer columns
   Three equal tracks with no single column step below 900.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  html body .footer-v2-cols {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px !important;
  }
}

/* --------------------------------------------------------------------------
   Touch targets
   Measured on a coarse pointer at 390: markets carried six controls under
   44px (40px category and toggle buttons), home carried twelve (17px and
   20px footer links). Scoped to coarse pointers so the desktop scale of the
   editorial surface is untouched.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  html body .dm-head .dm-controls button,
  html body .dm-toggle button,
  html body .market-category-bar button,
  html body .view-exchange .market-category-bar button,
  html body .library-tools .filters button,
  html body .cn-chip,
  html body .cn-layer,
  html body .amount-presets button,
  html body .pf-theme,
  html body .draft-actions button,
  html body .class-tab {
    min-height: 44px !important;
  }

  html body .footer-v2-cols a,
  html body .footer-v2-cols button {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }

  html body .spl-invoice .invoice-field input,
  html body .spl-invoice .commitment-class-control select,
  html body .spl-invoice .invoice-issuer .invoice-field input,
  html body .app-shell input[type="range"],
  html body .app-shell input[type="file"]::file-selector-button {
    min-height: 44px !important;
  }
}

/* --------------------------------------------------------------------------
   Seal invoice totals
   min-width: 300px plus a 48px gap inside a container already inset by
   clamp(24px, 4vw, 64px) on both sides.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  html body .view-seal .invoice-totals {
    width: auto !important;
    min-width: 0 !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
  }
  html body .view-seal .invoice-totals > span {
    min-width: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Library actions
   min-width: 420px on a surface that reaches 342px of usable width.
   -------------------------------------------------------------------------- */

@media (max-width: 520px) {
  html body .library-actions {
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }
}

/* --------------------------------------------------------------------------
   Witness phone mock
   Fixed 330px with no shrink, inside a 6 percent gutter.
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
  html body .witness-phone {
    width: 100% !important;
    max-width: 320px !important;
  }
}