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

.koje6fb { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.koje6fb > table { min-width: max-content; }
@media (max-width: 48rem) {
   .koje6fb > 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. */
.koje6fb > table,
.koje6fb > table > thead, .koje6fb > table > tbody,
.koje6fb > table > tfoot, .koje6fb > table tr,
.koje6fb > table th, .koje6fb > table td { display: revert; }

.koje6fb > table th, .koje6fb > table td {
   inline-size:auto;
   min-inline-size:0;
}

@media (max-width: 30rem) {

   :root {
      --rubi-afc:clamp(2.2rem, 9vw, 3rem);
      --rubi-8a8:clamp(2rem, 8vw, 2.7rem);
      --rubi-426:clamp(1.8rem, 7vw, 2.4rem);
      --rubi-31e:clamp(1.55rem, 6vw, 2.05rem);
      --rubi-2d2:clamp(1.35rem, 5vw, 1.8rem);
   }
}
@media (min-width: 30.01rem) and (max-width: 48rem) {
   :root {
      --rubi-afc:clamp(2.8rem, 8vw, 4.6rem);
      --rubi-8a8:clamp(2.5rem, 7vw, 4rem);
      --rubi-426: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; }
}