/* ===========================================================
   MOBILE LAYER
   Loaded after style.css on every page. Desktop is untouched: every
   rule sits inside a max-width media query.

   Why !important: style.css ends with desktop layout overrides that use
   !important (the "UNIFIED LAYOUT" block and friends), which beat the
   earlier mobile media queries. This file restores the mobile layout.
   =========================================================== */

@media (max-width: 980px) {
  /* Grid columns may shrink below their content's min-content width,
     so a long word or a nowrap line can't push the page sideways. */
  .hero4_grid,
  .hero_devices { grid-template-columns: minmax(0, 1fr) !important; }

  /* Text + visual feature sections: one column, text first */
  .dana_inbox_section .dcrm_grid,
  .dana_crm_section .dcrm_grid,
  .dcrm_grid,
  .dana_gx_section .dgx_grid,
  .dgx_grid,
  .dana_kb_section .dkb_inner,
  .dkb_inner,
  .dmgmt_inner,
  .dus_grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }
  .dana_inbox_section .dcrm_grid > .dinb_text,
  .dana_gx_section .dgx_grid > .dgx_text,
  .dana_kb_section .dkb_inner > .dkb_text { order: -1 !important; }

  /* Visuals never wider than their column */
  .dmgmt_visual, .dcrm_visual, .dkb_visual, .dgx_flow, .dus_visual,
  .dmgmt_text, .dcrm_text, .dinb_text, .dgx_text, .dkb_text {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* "Dana works like a person" cards */
  .db_v2_caps { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 640px) {
  /* Hero: the bold control line may wrap */
  .hero4_sub strong {
    white-space: normal !important;
    width: auto !important;
    left: auto !important;
    transform: none !important;
  }
  .hero4_center {
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }
  .hero4_center h1 { overflow-wrap: anywhere; }

  /* Hero devices: the two-column tablet mock is unreadable at phone
     width; the phone mock next to it tells the same story */
  .hero_tablet { display: none !important; }
  .hero_phone { width: min(320px, 100%) !important; }

  /* Dashboard showcase: the floating "Book a demo" pill covered the
     mock, so it sits under the frame instead */
  .dds_cta_wrap {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 16px !important;
  }

  /* CRM tiers: 2 x 2 instead of 4 squeezed columns */
  .dcrm_tiers_row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Feature CTAs: full width, text wraps instead of a tall oval */
  .dmgmt_link, .dkb_link, .dus_link, .dgx_link, .dcrm_link, .dinb_link {
    width: 100% !important;
    justify-content: space-between !important;
    white-space: normal !important;
  }

  /* host.html */
  .stage_features,
  .flow_msgs { grid-template-columns: minmax(0, 1fr) !important; }
  .stage_left, .stage_visual { min-width: 0 !important; max-width: 100% !important; }
}

@media (max-width: 640px) {
  /* Mid-page CTA titles: wrap inside the card */
  .mid_cta_title {
    white-space: normal !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
  .mid_cta_title br { display: none; }
}

@media (max-width: 640px) {
  /* Value calculator section: the column may shrink to the screen */
  .dmv2_inner { grid-template-columns: minmax(0, 1fr) !important; }
  .dmv2_pitch, .dmv2_calc { min-width: 0 !important; }

  /* Executive overview: the revenue sparkline drops under the figure */
  .dmgmt_hero_v2 { flex-wrap: wrap !important; }
  .dmgmt_sparkline { max-width: 100% !important; }
}

@media (max-width: 640px) {
  /* The demo pill itself is absolutely placed too (bottom/right) */
  .dds_cta { position: static !important; }

  /* Executive overview mock: show the whole card, not a fixed 420px slice */
  .dmgmt_visual, .dmgmt_mock_wrap, .dmgmt_mock_wrap .dm_body { height: auto !important; max-height: none !important; }

  /* Role cards: centered like desktop (an older phone rule right-aligned them) */
  .dana_team_card, .dana_team_card p { text-align: center !important; }
}

@media (max-width: 980px) {
  /* Integrations logo strips: keep them scrolling sideways (a broad phone
     rule in style.css stacked them into a tall column) */
  .int_wall .int_row,
  .int_wall .int_row .int_row_track {
    flex-direction: row !important;
    align-items: center !important;
  }
  .int_wall .int_row .int_row_track { width: max-content !important; }
}

@media (max-width: 640px) {
  /* Value section stat cards: three equal columns that fit small phones */
  .dmv2_proofs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .dmv2_proof { min-width: 0 !important; }
}