/* Tap & Talk banner. Her art is 1823x863 = 2.11:1, which renders 682px at 1440.
   The previous banner was 2:1 / 720px, so this is already slightly shorter and no
   crop is applied — the type sits close to both edges anyway (11.1% clear above,
   6.7% below), leaving only ~13% of centred crop before it would clip. */
#page-voice .hu-page-hero img{ display:block; width:100%; height:auto; }
/* NEW ARTWORK, Aug 2026 — 1536x1024 (1.50), replacing the 2.11 banner.
   It is NOT cropped: its type sits 11.7% from the top and 10.2% from the bottom, so
   trimming it to the old 2.11 shape would clip the heading and the four benefit
   icons. Instead it is held to a contained width, which lands it at roughly the same
   height on screen as the banner it replaces while showing the whole composition. */
#page-voice > .hu-page-hero.hu-hero--bleed{
  background:#FFFFFF;
  padding:0 clamp(0px,3vw,40px);
}
#page-voice > .hu-page-hero.hu-hero--bleed img{
  max-width:1080px;
  margin:0 auto;
  border-radius:0 0 26px 26px;
}
@media (max-width:900px){
  #page-voice > .hu-page-hero.hu-hero--bleed{ padding:0; }
  #page-voice > .hu-page-hero.hu-hero--bleed img{ border-radius:0; }
}

/* PRE-EXISTING, not caused by the banner: .hv-planner-layout is a fixed two-column
   grid with no mobile breakpoint, so it pushed the page 13px wider than a 360px
   screen. Stacked below 760px. */
@media (max-width:760px){
  /* `1fr` alone is not enough: grid items default to min-width:auto, so the column
     is sized by its content's min-content width (341px here) and blows past the
     296px container. minmax(0,1fr) plus min-width:0 on the children is the fix. */
  #page-voice .hv-planner-layout{
    grid-template-columns:minmax(0,1fr) !important;
    gap:18px !important;
  }
  #page-voice .hv-planner-layout > *{ min-width:0 !important; }
  #page-voice .hv-planner-mic-bar,
  #page-voice .hv-planner-cmd-display{ min-width:0 !important; }
}