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%; }


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; }


:not(img):not(picture):not(svg):not(video):not(canvas):only-child {
  grid-column: 1 / -1;
}


@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; }
}


.pidaca8 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pidaca8 > table { min-width: max-content; }
@media (max-width: 48rem) {
  .pidaca8 > table { font-size: .94em; }
}
  The cell widths go back with the display. A stacking rule sets
  `width: 100%` on the cells along with `display: block`, which is right
  for a block and ruinous for a cell: a table is as wide as its cells ask
  to be, so every cell asking for the whole table makes the table ask for
  the whole table again. Taking back only the display left a two-column
  table on a vet's site a million pixels wide, with the row headings on
  the phone and every value scrolled off the side of it. */
.pidaca8 > table,
.pidaca8 > table > thead, .pidaca8 > table > tbody,
.pidaca8 > table > tfoot, .pidaca8 > table tr,
.pidaca8 > table th, .pidaca8 > table td { display: revert; }
.pidaca8 > table th, .pidaca8 > table td {
  inline-size: auto;
  min-inline-size: 0;
}


@media (max-width: 30rem) {
  :root {
    --niju-f73: clamp(2.2rem, 9vw, 3rem);
    --niju-d6f: clamp(2rem, 8vw, 2.7rem);
    --niju-4c2: clamp(1.8rem, 7vw, 2.4rem);
    --niju-57d: clamp(1.55rem, 6vw, 2.05rem);
    --niju-434: clamp(1.35rem, 5vw, 1.8rem);
  }

}
@media (min-width: 30.01rem) and (max-width: 48rem) {

  :root {
    --niju-f73: clamp(2.8rem, 8vw, 4.6rem);
    --niju-d6f: clamp(2.5rem, 7vw, 4rem);
    --niju-4c2: 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; }
}



.cookie-banner {
  max-height: 20vh;
  overflow: auto;
  top: auto;
  bottom: 0;
}
@media (max-width: 30rem) {
  .cookie-banner { max-height: 38vh; }
}