/* Workflow page overrides
   Purpose: final, page-scoped rules that intentionally outrank broad rules in
   the main stylesheet. These are short-term page-specific fixes that will be
   consolidated into the central site stylesheet over time.
*/

@media (min-width: 481px) and (max-width: 1024px) {
  /* make selector more specific to outrank earlier rules */
  body #workflow .tablet-container {
    display: inline-block !important;
    width: auto !important;
    max-width: 820px !important;
    padding: 8px !important;
    margin: 8px auto !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15) !important;
    border: 1px solid #dadada !important;
    vertical-align: top !important;
  }

  body #benefits .relaxed-container {
    display: inline-block !important;
    width: auto !important;
    max-width: 720px !important;
    padding: 8px !important;
    margin: 8px auto !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15) !important;
    border: 1px solid #dadada !important;
    vertical-align: top !important;
  }

  /* Ensure images fill the inner area (so side padding visually equals top/bottom) */
  body #workflow .tablet-container img,
  body #benefits .relaxed-container img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
  }

  /* Keep surrounding text left-aligned */
  body #workflow .container p,
  body #benefits .container p {
    text-align: left !important;
  }
}