/* public/css/responsive.css — stop things falling off the side of a phone.
 *
 * WHY THIS FILE EXISTS
 * ---------------------------------------------------------------------------
 * marketing.css sets `html,body{max-width:100%;overflow-x:hidden}`. That stops the page
 * scrolling sideways, which makes an overflow LOOK fixed — but the content is still too
 * wide, it is simply being cut off at the right edge with no scrollbar to reveal it.
 * Measured on the landing hero at 390px: the grid track was 382px inside a 354px content
 * box, so the headline, the lead paragraph and BOTH call-to-action buttons were clipped
 * by 10px. Nothing looked broken enough to report, and the buttons still worked, so it
 * had simply never been noticed.
 *
 * The cause was one fixed width. `.aw-multi` (the rotating chat demo) is `width:332px`,
 * and `.hero-visual` wraps it in 24px of padding and a 1px border: 332+48+2 = 382. A
 * `1fr` grid track is really `minmax(auto,1fr)`, and that `auto` floor is the item's
 * min-content — so the track could not shrink below 382 no matter how narrow the screen,
 * and it pushed the whole column out. `max-width:100%` on the inner widget did not help,
 * because a declared `width` still contributes its full size to min-content.
 */

/* --- 1. no grid item may dictate the width of the page --------------------
   `min-width:0` on the ITEM releases the `auto` floor so the track can shrink to the
   space that actually exists. This is the general fix: it means a single wide child
   can never again blow out a layout, whichever child that turns out to be. */
.split > *, .grid > *, .cols > *, .tiers > *, .tier-lite > *,
.suite-grid > *, .ind-grid > *, .statband > *, .cx-grid > *, .posts > *{min-width:0}

/* --- 2. the hero demo, which was the actual culprit ----------------------- */
@media (max-width:860px){
  .hero-visual{padding:14px}
  .aw-multi{width:100%}
}

/* --- 3. nothing unbreakable pushes a column open -------------------------
   A long word, an email address or a URL in translated copy has the same effect as a
   fixed width. Thirteen languages make this a when, not an if — German compounds and
   untranslated product names are both routinely longer than a phone is wide. */
h1,h2,h3,h4,p,li,td,th,dd,dt,summary,figcaption,blockquote{overflow-wrap:break-word}
a[href^="mailto:"],a[href^="http"],code,kbd,samp{overflow-wrap:anywhere}

/* --- 4. things that are legitimately wide scroll INSIDE themselves --------
   A table or a code sample may exceed the screen; what it may not do is take the page
   with it. `-webkit-overflow-scrolling` keeps the momentum feel on iOS. */
pre,table,.hd-tbl,.tbl-scroll{max-width:100%}
pre,.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
img,svg,video,canvas,iframe{max-width:100%}
/* `height:auto` keeps a scaled-down image's aspect ratio — but ONLY apply it where the
   markup declares intrinsic dimensions. The first version of this rule was
   `img:not([width]):not([height])`, which is the exact opposite set, and since this
   stylesheet loads last it quietly beat `.brand .bword{height:22px}` in marketing.css:
   the header wordmark jumped from 110x22 to 181x36 on every page and crowded the nav.
   Brand and icon images are sized in CSS and carry no width/height attributes, so
   keying off their presence excludes them by construction. */
img[width][height]{height:auto}

/* --- 5. touch targets ----------------------------------------------------
   Anything you are meant to tap should be tappable. 44px is the figure both Apple and
   the WCAG target-size guidance land on; several of our pills and small links were
   nearer 28px, which is a miss-and-try-again on a moving train. */
@media (hover:none) and (pointer:coarse){
  .btn,.menu-btn,.signin,.nav-link,.nav-trigger,.bl-cat,.toggle button,
  .faq-lite summary,.faq summary{min-height:44px}
  .btn{padding-top:12px;padding-bottom:12px}
  .foot .cols a,.links a{display:inline-block;padding:7px 0}
}

/* --- 6. small-screen breathing room --------------------------------------
   Below ~400px the 18px gutter plus a 22px card pad leaves very little line length.
   Trimming both keeps roughly 8 more characters per line, which is the difference
   between a heading breaking over two lines and over four. */
@media (max-width:400px){
  .wrap{padding-left:14px;padding-right:14px}
  .card,.cx-card,.suite-card{padding:18px}
  .ind-body{padding-left:16px;padding-right:16px}
  .statbox{padding:18px 12px}
  .statbox b{font-size:32px}
  .h1{line-height:1.12}
}

/* --- 7. the 3D tilt is a pointer affordance, so it stays off a touch screen.
   card3d.js already declines to bind; this makes sure no stale inline custom property
   can leave a card tilted if a device reports a fine pointer and then loses it. */
@media (hover:none),(pointer:coarse){
  .card,.cx-card,.tier,.tcard,.feature-card,.suite-card,.ind-card{--rx:0deg;--ry:0deg;--lift:0px;--pop:1}
}

/* --- 8. a button must never be wider than the screen ---------------------
   `.btn{white-space:nowrap}` is right on a desktop toolbar and wrong for a full-width
   call to action: on /pricing the closing button ran 7px past a 390px viewport, and the
   longest label in the thirteen translations is a good deal longer than the English one
   it was measured against. Below the tablet breakpoint the label wraps instead. */
@media (max-width:640px){
  .btn-lg,.cta-band .btn,.tier .btn,.tier-lite .btn{
    white-space:normal;max-width:100%;text-align:center;line-height:1.3;
  }
}

/* --- 9. decorative bleed stays decorative --------------------------------
   The gradient blobs behind the closing call to action, and the integrations marquee,
   are DELIBERATELY wider than the viewport. They are clipped by an ancestor rather than
   scrolling the page, which is correct — this just states it, so the next person to run
   an overflow audit does not "fix" them. */
.cta-band{overflow:hidden}
.fw-marq{overflow:hidden}

/* --- 10. the add-on rows on /pricing -------------------------------------
   `.addon` is one flex row: icon, description, price, Subscribe. `.grow{flex:1}` gives
   the description all the slack, but flex items still refuse to shrink below their
   min-content, so on a 390px screen the row stayed wider than the page and pushed the
   Subscribe button 7px off the right edge — the one control on the row that has to be
   tappable. It wraps below the tablet breakpoint: description on its own line, price and
   button on the next. */
@media (max-width:640px){
  .addon{flex-wrap:wrap;gap:10px 14px}
  .addon .grow{flex:1 1 100%;min-width:0}
  .addon .price{margin-left:auto}
}