/* =====================================================================
   HIPAA LINK — Mobile refinements
   Loaded LAST on every page so it wins the cascade. Fixes product-mockup
   sizing and horizontal bleed on small screens. Layout-only; no color
   or content changes.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) Grid blow-out guard.
   The alternating "spotlight" rows collapse to a single column at 1024px.
   Grid items default to min-width:auto (their content's intrinsic width),
   so a wide product mockup forces its track — and the whole page — wider
   than the viewport. Allowing the item to shrink keeps everything within
   the screen; wide mockup internals are handled case-by-case below.
   --------------------------------------------------------------------- */
@media (max-width:1024px){
  .spot > *{ min-width:0; }
  .spot .appwin,
  .spot-media,
  .spot-media > *{ max-width:100%; }
}

/* ---------------------------------------------------------------------
   2) Home hero — mobile presentation.
   Hide the "Prefer an app?" store-badge block and the client phone mock;
   show the provider call window full-width and close the dark gap between
   the session image and the control dock.
   --------------------------------------------------------------------- */
@media (max-width:680px){
  body[data-page="home"] .app-cta{ display:none; }
  body[data-page="home"] .hero-mobilecall{ display:none; }
  body[data-page="home"] .hero-visual{ margin-bottom:0; }
  body[data-page="home"] .hero-visual .provider{ width:100%; }
}
/* Home hero: on mobile put the session image ABOVE the CTA buttons.
   display:contents dissolves the text wrapper so its children + the visual
   become one flex column we can reorder (desktop layout untouched). */
@media (max-width:680px){
  body[data-page="home"] .hero-grid{ display:flex; flex-direction:column; gap:0; align-items:stretch; }
  body[data-page="home"] .hero-grid > div:first-child{ display:contents; }
  body[data-page="home"] .hero-grid .pill{ order:1; align-self:flex-start; }
  body[data-page="home"] .hero-grid h1{ order:2; }
  body[data-page="home"] .hero-grid .lead{ order:3; }
  body[data-page="home"] .hero-grid .hero-visual{ order:4; margin:24px 0 4px; }
  body[data-page="home"] .hero-grid .hero-cta{ order:5; }
  body[data-page="home"] .hero-grid .hero-trust{ order:6; }
  body[data-page="home"] .hero-grid .app-cta{ order:7; }
}
/* Smaller self ("You") preview on call-UI mocks (Secure Video, Audio-only, etc.) */
@media (max-width:680px){
  .callui .self{ width:84px; }
}

/* Chat mock: shared-file row — remove the stray line break that opened a big
   gap between the file name and its size (applies at all widths). */
.chatmock .msg .file br{ display:none; }

/* Check-in mock: US flag image in the provider-row dropdown */
.ci2-flag .ci2-flagimg{ width:20px; height:auto; border-radius:2px; display:inline-block;
  vertical-align:middle; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
/* Hide the ", LCSW" credential on mobile so the provider name isn't truncated */
@media (max-width:680px){
  body[data-page="home"] .ci2-prov .ci2-cred{ display:none; }
}

/* Waiting Room queue mock: drop the word "call" from "Start call" on mobile. */
@media (max-width:680px){
  .qc-start .wr-word{ display:none; }
}

/* EMDR mock: centre the moving object vertically in the lower stage. */
@media (max-width:680px){
  .emdrui .em-stage .em-dot{ top:50% !important; transform:translateY(-50%); }
}
/* EMDR hero orb: smaller moving object on mobile. */
@media (max-width:680px){
  .ehb-orb{ width:40px; height:40px; box-shadow:0 0 30px 4px rgba(66,226,255,.45); }
}
/* Contact page: give the Zoho iframe a taller floor on mobile so the form's
   "Send message" button isn't cut off before Zoho's postMessage height fires. */
@media (max-width:680px){
  #zfContactIframe{ min-height:1180px; }
}
/* Pricing page: reorder plan cards on mobile — Unlimited, then 14-day trial,
   then Free (DOM order is Free, trial, Unlimited). Matches the 1024px point
   where .pgrid collapses to a single column. */
@media (max-width:1024px){
  .pgrid > .pcard:nth-child(1){ order:3; }  /* Free */
  .pgrid > .pcard:nth-child(2){ order:2; }  /* 14-day trial */
  .pgrid > .pcard:nth-child(3){ order:1; }  /* Unlimited */
}
/* Hero CTAs sit side-by-side on mobile using a shorter primary label (all hero types) */
.hero-cta .cta-short{ display:none; }
@media (max-width:560px){
  .hero-cta{ flex-wrap:nowrap; gap:10px; }
  .hero-cta .btn{ flex:1; padding-left:14px; padding-right:14px; font-size:16px; }
  .hero-cta .cta-long{ display:none; }
  .hero-cta .cta-short{ display:inline; }
}

/* Sticky mobile CTA bar — hidden until the hero scrolls out of view (JS adds .show) */
@media (max-width:680px){
  .sticky-cta{ transform:translateY(130%); opacity:0; pointer-events:none;
    transition:transform .3s ease, opacity .3s ease; }
  .sticky-cta.show{ transform:none; opacity:1; pointer-events:auto; }
}

/* ---------------------------------------------------------------------
   3) Desktop call-UI dock bar — a touch more breathing room so the
   control row never crowds the frame edges on narrow phones, and keep
   the session image sitting right on top of the dock (no dark gap).
   --------------------------------------------------------------------- */
@media (max-width:680px){
  .callui .stage-img{ bottom:57px; }
}
@media (max-width:520px){
  .callui .dockbar{ padding:8px 10px 10px; }
  .callui .dockgroup{ gap:9px; }
  .callui .dockgroup.center{ gap:11px; }
  .cui-btn .cc{ width:32px; height:32px; }
  .cui-btn .cc .ic{ width:15px; height:15px; }
  .callui .leftcount .cc{ width:28px; height:28px; }
  .cui-btn.timer .cc{ padding:0 8px; }
  .callui .stage-img{ bottom:51px; }
}

/* ---------------------------------------------------------------------
   4) Assessments GAD-7 matrix — shrink type/padding so all five columns
   fit within the card instead of the last column being clipped.
   --------------------------------------------------------------------- */
@media (max-width:680px){
  .asmt-prev .ap-head,
  .asmt-prev .ap-steps,
  .asmt-prev .ap-foot{ padding-left:13px; padding-right:13px; }
  .asmt-prev .ap-body{ padding:14px 11px 16px; }
  .asmt-matrix th{ font-size:8.5px; padding:6px 2px; }
  .asmt-matrix td{ font-size:10px; padding:8px 2px; }
  .asmt-matrix td.q{ padding-right:5px; font-size:10.5px; }
  .asmt-matrix .rad{ width:13px; height:13px; }
}

/* ---------------------------------------------------------------------
   5) For-Clinics staff table — let it scroll horizontally within the
   dashboard mock rather than being clipped off the right edge.
   --------------------------------------------------------------------- */
@media (max-width:680px){
  .admin-win .staffui{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .admin-win .staffui > table{ min-width:430px; }
}

/* ---------------------------------------------------------------------
   6) Whiteboard mock toolbar — scale the floating toolbar down so it fits
   inside the board frame instead of overflowing its right edge.
   --------------------------------------------------------------------- */
@media (max-width:680px){
  .wbmock .wb-toolbar{ gap:2px; padding:4px; }
  .wbmock .wb-tool{ width:28px; height:28px; }
  .wbmock .wb-tool .ic{ width:15px; height:15px; }
  .wbmock .wb-sw{ width:16px; height:16px; }
  .wbmock .wb-sep{ height:18px; margin:0 1px; }
}

/* ---------------------------------------------------------------------
   7) Secure-fax mock table (home) — tighten cell padding so all columns
   fit the card instead of the right column being clipped.
   --------------------------------------------------------------------- */
@media (max-width:680px){
  .faxui-tabs{ padding-left:12px; padding-right:12px; }
  .faxui-numrow,
  .faxui-sec,
  .faxui-foot{ padding-left:12px; padding-right:12px; }
  .faxui-table th,
  .faxui-table td{ padding-left:10px; padding-right:10px; }
  .faxui-table .mono{ font-size:10px; }
}

/* ---------------------------------------------------------------------
   8) Teleconsent live-signing step strip — tighten so the active step
   isn't sliced by the frame edge.
   --------------------------------------------------------------------- */
@media (max-width:680px){
  .tcsign-steps{ gap:10px; padding-left:14px; padding-right:14px; justify-content:flex-end; }
  .tcsign-steps span{ font-size:10px; }
  .tcsign-steps span .ic{ width:12px; height:12px; }
}

/* ---------------------------------------------------------------------
   9) Trust band (Trustpilot + "As seen in") — stack and center on mobile
   with room to breathe; enlarge the Trustpilot logo.
   --------------------------------------------------------------------- */
@media (max-width:760px){
  .trustband-inner{ flex-direction:column; gap:24px; padding:38px 0; }
  .tp-img{ height:58px; }
  .seenin-group{ flex-direction:column; gap:18px; }
  .seenin-logo.pt{ height:30px; }
  .seenin-logo.swt{ height:54px; }
}

/* ---------------------------------------------------------------------
   10) Final safety net — prevent a stray element from creating a
   horizontal scrollbar on the document. `clip` (not `hidden`) is used so
   it does NOT establish a scroll container, which would break the
   sticky header.
   --------------------------------------------------------------------- */
@media (max-width:680px){
  html, body{ overflow-x:clip; }
}