/* Mobile overflow fixes (2026-07-02). Hand-written chrome; loaded after all
   design-system sheets on every page. Each block targets a measured defect
   from the 390px WebKit/Chromium pass. Keep fixes here, not in the exported
   design CSS, so a Claude Design re-export cannot wipe them. */

/* ==================== MOBILE ROUND (2026-07-23) ====================
   Doctrine: every rule in this round lives under a <=1024px query so desktop
   is untouchable by construction. Desktop pixel-diff baseline frozen before
   the round; JS branches key off the same 1024px boundary. */

/* --- Home hero rebuilt for phones (Brian 7/23, fix #1): the video PLAYS as
   its own band at the top of the frame; the copy sits on the white canvas at
   the bottom (the old treatment showed a frozen poster as a faint backdrop
   and the light subtext washed out on top of it). --- */
@media (max-width:1024px){
  /* fill exactly the first screen: 100svh minus the nav (tracked by --navH)
     and the dismissible topbar (~58px), so the CTA row lands above the fold */
  .dt-hero{background:var(--bg);min-height:calc(100svh - var(--navH,72px) - 58px);align-items:flex-end}
  .dt-hero-bg,.dt-hero-scrim{display:none}
  .dt-hero-video{position:absolute;top:0;left:0;width:100%;height:36svh;opacity:1;object-fit:cover;
    -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 82%,transparent 100%)}
  .dt-hero-inner{margin-top:37svh;padding:12px var(--gutter) max(3.5svh,24px)}
  .dt-hero-h1{font-size:clamp(30px,8.2vw,40px);margin:12px 0;max-width:none}
  .dt-hero-sub{font-weight:400;font-size:15.5px;line-height:1.45;color:var(--fg1);max-width:34ch}
  .dt-hero-cta{justify-content:center;gap:10px;margin-top:20px;flex-wrap:nowrap}
  .dt-hero-cta .dt-btn{font-size:14.5px;padding:12px 20px;white-space:nowrap}
  .dt-hero-cta .dt-textlink{font-size:14.5px;white-space:nowrap}
}

/* --- Roadmap stage on phones (fix #2): the pinned 100svh frame can't hold
   the stacked mobile content (title + 7 items + voxel logo ≈ 2 screens), so
   the centered overflow shoved the title up behind the nav. On phones the
   stage UNPINS and flows naturally — the scroll driver computes progress
   from section geometry, so the typewriter, theme inversion, and staggered
   reveals all still fire. Items hold ONE line beside their icon (desktop
   flex-wrap dropped the text under the icon at phone widths). --- */
@media (max-width:1024px){
  .dt-space-section{height:auto}
  .dt-stage{position:static;height:auto;overflow:visible;padding:64px 0 48px}
  .dt-rline{flex-wrap:nowrap;gap:10px;font-size:clamp(14px,4.3vw,17px)}
  #roadmap .dt-rtext{white-space:nowrap}
  .dt-ri-ic{width:22px;height:22px}
}

/* --- MDU band on phones (fix #3, Brian 7/23): the absolute two-zone
   composition becomes a two-card swipe pager (dr-triage.js builds it):
   card 1 "On site" = intro + cart + the callouts as a spec list (no floating
   pointers), card 2 "On screen · 24/7" = the live laptop + oversight text.
   The swipe IS the site-to-screen handoff. --- */
@media (max-width:1024px){
  #mdu .dt-mdu-fig{aspect-ratio:auto;min-height:0;max-height:none;height:auto}
  #mdu .dt-mdu-lines,#mdu .dt-mdu-dot,#mdu .dt-mdu-screenglow{display:none}
  #mdu .dt-mdu-head .dt-h2{text-align:center}
  #mdu .dt-mdu-cartwrap{position:static;transform:none;height:auto;width:auto;
    display:flex;justify-content:center;margin:4px auto 6px}
  /* NO filter on phones: the cart's drop-shadow compositing layer strands as
     a black box when the pager slides (WebKit); the ::after ground glow
     carries the depth instead */
  #mdu .dt-mdu-cart{height:min(38svh,360px);width:auto;max-width:100%;filter:none}
  /* callouts are desktop-only detail (Brian 7/23: cut from the mobile card) */
  #mdu .dt-callout{display:none}
  #mdu .dt-laptop{position:static;width:min(100%,420px);margin:6px auto 0;will-change:auto;perspective:none}
  #mdu .dt-laptop-3d{transform-style:flat} /* no 3D context in the pager: the lid is flat on phones and the 3D layer strands black boxes when the slide scrolls (WebKit) */
  #mdu .dt-emr-bubble{position:static;width:auto;margin:16px 0 0}
  #mdu .dt-mdu-intro-card{margin:16px 0 0}
  #mdu .dt-mdu-cartwrap{margin-top:4px}
  .dt-mduswipe{display:flex;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;margin-top:12px}
  .dt-mduswipe::-webkit-scrollbar{display:none}
  .dt-mduswipe-slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;border-radius:20px;
    padding:18px 16px;background:rgba(255,255,255,.045);border:1px solid rgba(201,166,143,.16)}
  .dt-mduswipe-tabs{display:flex;gap:8px;margin:6px 0 0;justify-content:center}
  .dt-mduswipe-tabs button{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
    text-transform:uppercase;color:rgba(255,255,255,.55);background:none;
    border:1px solid rgba(201,166,143,.25);border-radius:999px;padding:8px 14px}
  .dt-mduswipe-tabs button.on{color:#070B09;background:var(--tan);border-color:var(--tan)}
}

/* --- ROI -> roadmap seam on phones (Brian 7/23): the fixed 24vh fade started
   on top of the ROI Calculator button (the mobile section is short). Shorter
   fade + dedicated empty runway below the button so the black lands past it. --- */
@media (max-width:1024px){
  #roi{padding-bottom:170px} /* #roi: the head CSS sizes it with an ID selector */
  .dt-roi .dt-roi-fadeout{height:120px}
}

/* --- Content-page heroes on phones (Brian 7/23): the home-hero template for
   every page — the hero media (video OR image) becomes its own full-strength
   band at the top and the copy sits below it on the clean canvas. Replaces
   the old treatment (media at .16 opacity as a wash UNDER the text).
   Text-only heroes (no media) are untouched. 1023px matches the content-page
   hero breakpoint. --- */
@media (max-width:1023px){
  .dtp-main .dtp-hero:has(.dtp-hero-media){padding-top:0}
  /* the media lives INSIDE .pg-inner, so the reorder happens there */
  .dtp-main .dtp-hero:has(.dtp-hero-media) .pg-inner{display:flex;flex-direction:column}
  /* first selector ties the reveal-system wash re-assert (0,4,0); later file wins */
  .dtp-main .dtp-hero-media.dtp-rv.dtp-in,
  .dtp-main .dtp-hero .dtp-hero-media{position:static;order:-1;height:32svh;
    opacity:1;width:auto;margin:0 calc(-1 * var(--gutter)) 14px; /* full-bleed band */
    -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 84%,transparent 100%)}
  .dtp-main .dtp-hero .dtp-hero-media img,
  .dtp-main .dtp-hero .dtp-hero-media video{width:100%;height:100%;object-fit:cover}
  .dtp-main .dtp-hero .dtp-hero-media::after{display:none}
  .dtp-main .dtp-hero:has(.dtp-hero-media) .pg-inner{padding-top:10px}
  .dtp-main .dtp-hero:has(.dtp-hero-media) .pg-inner > :is(.dtp-lead,h1){max-width:none}
}

/* --- MDU carousel on phones (Brian 7/24): pagination view — one cart at a
   time (JS hides the rest), section condensed toward one screen, headroom
   under the nav, and a sage "powered-on" aura behind the active cart in
   place of the tan halo (matches the MDU band's screen-glow language). --- */
@media (max-width:760px){
  #walkthrough{padding-top:22px}
  .dt-mc-head{margin-bottom:18px} /* air between the title and the cart */
  .dt-mc-title .dt-mc-accent{display:block} /* "Today's MDU," / "four generations." on clean lines */
  .dt-mc-stage{height:42svh;min-height:300px} /* bigger cart */
  .dt-mc-item{width:78vw;margin-left:-39vw}
  /* info block locked so the timeline + arrows never move while paging:
     158px = the tallest of the four versions (V4: 2-line tag + 3-line desc),
     measured — keeps the freeze without dead air above the timeline */
  .dt-mc-info{min-height:158px}
}

/* --- CTA buttons at true mobile scale (Brian 7/24): the desktop treatment
   (min-width 340px/78vw + 18px type + 22/54 padding) rendered near-full-width
   slabs on phones — corrections and rural overflowed the card and the swept
   corners clipped. Phones: auto width around the label, 16px, centered. --- */
@media (max-width:1023px){
  .dtp-main .dtp-cta .wp-block-button__link{min-width:0;width:auto;max-width:100%;
    font-size:16px;padding:14px 28px;white-space:nowrap}
}

/* Long-label buttons ("See more case studies and validated deployments")
   were nowrap and pushed the page wider than the phone. */
@media (max-width: 640px) {
  .dt-btn { max-width: 100%; white-space: normal; }
}

/* The designed pages carry inline-styled multi-column grids that cannot
   shrink below their content (measured on /mdu and /overview). Inline styles
   outrank stylesheets, so these need !important. Stack them on small screens. */
@media (max-width: 860px) {
  main [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
  main [style*="grid-template-columns:repeat(2"] { grid-template-columns: 1fr !important; }
  main [style*="grid-template-columns:1.05fr"] { grid-template-columns: 1fr !important; }
}

/* /skilled-nursing step 1: the cart cutout's intrinsic width (644px with
   padding) set the min-content of its flex figure and blew the grid track
   past the phone. Let it scale inside the 4/3 box instead. */
@media (max-width: 860px) {
  .snf-flowfig--device img { width: 100%; height: 100%; object-fit: contain; }
}

/* /overview subscribe card: the email input's default min-content (~220px)
   plus the nowrap Subscribe button forced the card past the phone width. */
@media (max-width: 640px) {
  .ov-subscribe { flex-wrap: wrap; }
  .ov-subscribe input { min-width: 0; flex: 1 1 160px; }
}

/* Decorative hero glow on /overview measured wider than the viewport.
   Clip horizontally at the section; x-only so no sticky descendant breaks
   in Safari (overflow on an ancestor un-sticks position:sticky there). */
@media (max-width: 860px) {
  .ov-hero { overflow-x: clip; }
}