/* Site layout fixes (IT-4011, 2026-10-02). Loaded after the HubSpot-export stylesheets. */

/* Ratings strip: the "ratings correct as of" note sits under the image as an overlay,
   so the strip keeps the same alignment with the other logos as before. */
.it-ratings-wrap { position: relative; display: inline-block; max-width: 100%; }
.it-ratings-asof { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; font-family: Gibson, arial, sans-serif; font-size: 12px; line-height: 1.35; color: #5f6368; text-align: center; }
.it-ratings-asof a { color: inherit; text-decoration: underline; }

/* Section background layer: below 1024px the shared stylesheet swaps in a 375x812 phone image,
   but the layer's size stays "auto", leaving a narrow stripe on tablets. Make it fill the section. */
@media (max-width: 1023px) { .gb-background-image { background-size: cover !important; } }

/* Comparison tables on phones: keep columns readable and scroll sideways, with a cue. */
@media (max-width: 767px) {
  .gb-module-table-1-module__body { overflow-x: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .gb-module-table-1-module__body > * { min-width: 640px; }
  .gb-module-table-1-module__body::before { content: "Swipe to compare \2192"; position: sticky; left: 0; display: block; padding: 0 2px 8px; font-family: Gibson, arial, sans-serif; font-size: 13px; color: #5f6368; }
}

/* About: team cards get bottom padding so the longest bios don't touch the card edge. */
#hs_cos_wrapper_module_17393948939825 .gb-module-item { padding-bottom: 28px !important; }

/* White multimedia cards on tablet and phone (stacked layout). The image keeps a thin 4px frame
   (normalized; two cards had 8px). Text blocks had 8px side padding and the button block none, so the
   button touched the card edge and didn't line up with the text, and the last element sat on the bottom
   edge. Every content block now shares one inset from the card edge (24px tablet, 20px phone), with
   matching bottom space. :not(#..) x2 outranks the module-scoped #id padding rules. */
@media (max-width: 1023px) {
  .gb-module-multimedia-1-module__body[style*="background-color: rgba(255, 255, 255"]:not(#it-a):not(#it-b) { padding: 4px 4px 24px !important; }
  .gb-module-multimedia-1-module__body[style*="background-color: rgba(255, 255, 255"] :is(.gb-inner-module:not(.gb-module-image), .gb-module-multimedia-1-content):not(#it-a):not(#it-b) { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 767px) {
  .gb-module-multimedia-1-module__body[style*="background-color: rgba(255, 255, 255"]:not(#it-a):not(#it-b) { padding-bottom: 20px !important; }
  .gb-module-multimedia-1-module__body[style*="background-color: rgba(255, 255, 255"] :is(.gb-inner-module:not(.gb-module-image), .gb-module-multimedia-1-content):not(#it-a):not(#it-b) { padding-left: 16px !important; padding-right: 16px !important; }
}