/* type-safe.css — text is never clipped and never forced to overflow.
 *
 * Two failures this fixes, both visible on the display face:
 *
 * 1. CLIPPED DESCENDERS. Soiren sits low in its em box, and the headings here
 *    run at line-height .88-.98 for tight display setting. A line box shorter
 *    than the glyphs crops the tail of y/g/p/j — and on gradient headings it is
 *    guaranteed, because `background-clip: text` paints into the line box and
 *    crops to it. The fix extends the paint box downward and pulls the same
 *    amount back as negative margin, so glyphs are whole and layout is
 *    unchanged (no reflow, no shifted rhythm).
 *
 * 2. TEXT SPILLING ITS CONTAINER. Long unbroken strings (URLs, compound
 *    product names) and `white-space: nowrap` carried down to phone widths push
 *    past the gutter instead of reflowing.
 *
 * Load LAST so it settles over the page's own rules. Layout-neutral by design:
 * it changes no font size, weight, colour, or spacing.
 */

/* ── 1 · descenders ─────────────────────────────────────────────────────── */
/* Gradient / clipped-paint text: the common, always-visible case. */
.grad, .ga, .title, .hx-h1, .wordmark, .brand,
[class*="-grad"], [class*="grad-"] {
  padding-block-end: .14em;
  margin-block-end: -.14em;
}
/* Display headings generally: a smaller allowance, same trick. */
:where(h1, h2, h3, .big, .t, [class*="-h1"], [class*="-h2"], [class*="-h3"]) {
  padding-block-end: .06em;
  margin-block-end: -.06em;
}
/* A decorative wrapper must never crop the words inside it. Scoped to text
   elements so cards, rails, and masked art keep their own clipping. */
:where(h1, h2, h3, h4, h5, h6, p, li, summary, figcaption, blockquote, dt, dd, label) {
  overflow: visible;
}

/* ── 2 · overflow ───────────────────────────────────────────────────────── */
:where(h1, h2, h3, h4, h5, h6, p, li, summary, figcaption, blockquote, dt, dd, label, td, th) {
  overflow-wrap: normal;
  word-break: normal;
  min-width: 0;
}
/* Headings hold their shape better balanced; body copy avoids orphans. */
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li, dd, figcaption) { text-wrap: pretty; }

/* ── 3 · phone widths ───────────────────────────────────────────────────── */
/* Release nowrap on prose at phone widths, but leave the UI vocabulary alone:
   chips, pills, badges, buttons, tabs and numerals are meant to stay on one
   line and are sized to fit. */
@media (max-width: 760px) {
  :where(h1, h2, h3, h4, h5, h6, p, li, summary, blockquote, dd, dt):not([class*="chip"]):not([class*="pill"]):not([class*="badge"]):not([class*="btn"]):not([class*="tab"]) {
    white-space: normal;
  }
  /* Words wrap only between words — never mid-word. Display type scales down instead. */
  :where(h1) { font-size: min(1em, 11vw); }
  :where(h2) { font-size: min(1em, 8.5vw); }
}

/* Legibility floor: no label below 11px on any page (WCAG / Apple HIG). */
.eb,.cm-eb,.tm-k,.tm-eb,.cx2-sub,.cx2-pill,.ia-tile-soon,.ia-trust-h,.cue-k,.st-dist-eb,.st-verts-k,.os-ip-k,.ap2-k,.os-fact .k,.presenter,.hww-fee,.dist-eb,.seat-s,.t-role-eb{font-size:max(11px,1em)!important}
.eb,.cm-eb,.tm-eb,.cx2-sub,.cx2-pill,.ia-tile-soon,.st-verts-k,.os-ip-k,.os-fact .k,.presenter{font-size:11px!important}
/* Grids never force the page wider than the screen. */
.cm-nav-grid,.os-facts,.hww-models,.tm-grid,.cx2-cards,.ways{min-width:0}
.cm-nav-grid>*,.os-facts>*,.hww-models>*,.tm-grid>*,.ways>*{min-width:0}

/* ── 4 · mobile gutters ─────────────────────────────────────────────────
   Nothing readable touches the screen edge on phones: a 20px side margin
   (plus the notch safe area) on every section's content. Decorative bleeds
   (marquee, glyph art, hero imagery) are left alone on purpose. */
@media (max-width:680px){
  body>section>:is(h1,h2,h3,h4,p,ul,ol,.btn,a),
  main>section>:is(h1,h2,h3,h4,p,ul,ol,.btn,a){padding-left:max(20px,env(safe-area-inset-left))!important;padding-right:max(20px,env(safe-area-inset-right))!important;box-sizing:border-box}
  .x2-in,.st-close,.close-cta .in,.ap-wrap,.x2-close,body>div.back{padding-left:max(20px,env(safe-area-inset-left))!important;padding-right:max(20px,env(safe-area-inset-right))!important;box-sizing:border-box}
  .st-close>*,.x2-close>*{padding-left:0!important;padding-right:0!important}
  .x2-in>*,.x2-ctas{max-width:100%}
  .x2-ctas{flex-wrap:wrap}
  .ap-studios{flex-wrap:wrap!important;justify-content:center;row-gap:10px}
  .tt-hero-ic{max-width:calc(100vw - 40px)}
  .tt-hero-ic img{max-width:100%;height:auto}
  table:has(.metric){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}