/* Responsive safety net — generated, loaded last. Guarantees no horizontal
   overflow and readable, wrapping headings on every device from 320px up,
   without overriding the design on wider screens. */

/* No element may create a horizontal scrollbar. overflow-x: clip (not hidden)
   keeps position: sticky and off-canvas drawers working. */
html, body { max-width: 100%; overflow-x: clip; }

/* Media and embeds never exceed their container. */
img, svg, video, canvas, iframe, embed, object, figure, picture {
  max-width: 100%;
}
img, video, canvas { height: auto; }
pre, code, kbd, samp { overflow-x: auto; max-width: 100%; }

/* Headings and display lockups wrap instead of running off-screen. A
   white-space: nowrap that would push a headline off the edge is overridden;
   on wide screens the line still fits, so nothing wraps unnecessarily. */
h1, h2, h3, h4, h5, h6,
[class*="lockup"], [class*="display"], [class*="headline"], [class*="title"],
[class*="hero"] h1, [class*="hero"] h2 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
[class*="lockup"], [class*="lockup"] > * { white-space: normal !important; }

/* Long unbroken strings (URLs, emails, ids) wrap rather than overflow. */
p, li, dd, dt, blockquote, figcaption, address, a, span, td, th {
  overflow-wrap: break-word;
}

/* Grid and flex children may shrink below their content so a single wide
   child cannot force the whole track past the viewport. */
[class*="grid"] > *, [class*="row"] > *, [class*="flex"] > *,
[class*="cols"] > *, [class*="columns"] > * { min-width: 0; }

/* A GRID WITH MORE COLUMNS THAN CHILDREN.
   The stylesheet and the markup are written by different agents in different
   conversations, and they can disagree about how many things are in a row.
   Measured on a delivered site: `.process-step` was `display: grid` with
   `grid-template-columns: 64px 1fr` — a narrow column for the step number and
   a wide one for the copy — and the markup had no number in it. The only
   child, holding the heading and the whole paragraph, was auto-placed into
   the 64px column. The heading came out 64 pixels wide over ten lines at
   under three characters a line, and the paragraph over twenty-six. Text
   falling down a chimney.
   Nothing else caught it: nothing overlapped, nothing overflowed, and a
   screenshot of it looks like a deliberate narrow column.
   An only child takes the whole row. `grid-column` is ignored outright when
   the parent is not a grid, so this cannot touch a flex row or a block, and
   where the grid has one column `1 / -1` is what it already was. Media is
   left out: an image told to span two columns stretches. */
:not(img):not(picture):not(svg):not(video):not(canvas):only-child {
  grid-column: 1 / -1;
}

/* Wide data tables scroll inside their own box instead of dragging the whole
   page sideways. The box is a wrapper this build adds around every table,
   because the other way — `table { display: block; overflow-x: auto }` — is
   not a scroll container at all: it takes the table out of table layout, the
   cells become blocks, and on a real cookie table at 390px the header cell
   came out 40px wide and 300px tall with the rows stacked on top of each
   other. Forty "text is painted over" defects on one page came from this
   rule, and the repair rounds were paid to chase them. */
/* One page becomes the next instead of blinking into it. A cross-document
   view transition is three lines and needs no script: the browser holds the
   old page's pixels, paints the new ones underneath and crossfades. Where it
   is not supported nothing at all happens, which is why it can be stamped on
   every site rather than asked for. Motion is a preference, so a visitor who
   has turned it down gets the plain navigation they asked for. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .28s;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

.pepub2a { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pepub2a > table { min-width: max-content; }
@media (max-width: 48rem) {
  .pepub2a > table { font-size: .94em; }
}
/* Inside the box, a table is a table. The design agent writes the same
   stacking trick for narrow screens — `table, tr, th, td { display: block }`
   — and writes it without the data-label pseudo-elements that make stacking
   readable, so the cookie table came out as 40-pixel columns three hundred
   pixels tall with the rows drawn over each other. Stacking has no job here
   anyway: the wrapper scrolls, so the table can keep its own shape. */
.pepub2a > table,
.pepub2a > table > thead, .pepub2a > table > tbody,
.pepub2a > table > tfoot, .pepub2a > table tr,
.pepub2a > table th, .pepub2a > table td { display: revert; }

/* Cap the display scale on phones so no headline is bigger than the screen.
   These override the modular scale only where it is too large to fit. */
@media (max-width: 30rem) {
  :root {
    --neta-ced: clamp(2.2rem, 9vw, 3rem);
    --neta-e4c: clamp(2rem, 8vw, 2.7rem);
    --neta-1d2: clamp(1.8rem, 7vw, 2.4rem);
    --neta-44e: clamp(1.55rem, 6vw, 2.05rem);
    --neta-07f: clamp(1.35rem, 5vw, 1.8rem);
  }
}
@media (min-width: 30.01rem) and (max-width: 48rem) {
  :root {
    --neta-ced: clamp(2.8rem, 8vw, 4.6rem);
    --neta-e4c: clamp(2.5rem, 7vw, 4rem);
    --neta-1d2: clamp(2.2rem, 6vw, 3.4rem);
  }
}

/* Touch targets stay usable. */
@media (pointer: coarse) {
  a.btn, button, [role="button"], .btn,
  input[type="submit"], input[type="button"] { min-height: 44px; }
}


/* Consent bar — bounded so it cannot cover the headline. */
.cookie-banner {
  max-height: 20vh;
  overflow: auto;
  top: auto;
  bottom: 0;
}
@media (max-width: 30rem) {
  .cookie-banner { max-height: 38vh; }
}