/* ------------------------------------------------------------------
   Unique Press — responsive layer.
   The page markup uses inline styles (imported from the Claude design).
   This file only holds the media-query overrides that make those
   fixed desktop grids collapse cleanly on tablets and phones.
   Hover/focus states are handled by /assets/js/main.js.
   ------------------------------------------------------------------ */

/* Brand reel — make mismatched brand logos read as one uniform muted strip
   (consistent height, greyscale + low opacity), full colour when the reel
   is hovered (it also pauses on hover). */
#up-reel img {
  height: 30px;   /* uniform height across all brand logos (full colour) */
  width: auto;
  display: block;
}

/* Tablet — drop dense grids down a column */
@media (max-width: 900px) {
  .u-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .u-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Small tablet / large phone — collapse the two-up layouts */
@media (max-width: 820px) {
  .u-2      { grid-template-columns: 1fr !important; gap: 36px !important; }
  .u-footer { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .u-nav    { display: none !important; }
  .u-hide-sm { display: none !important; }

  /* Tighten section side padding so nothing hugs the screen edge */
  section,
  header > div,
  footer > div { padding-left: 20px !important; padding-right: 20px !important; }

  header > div { flex-wrap: wrap; }
}

/* Phone — single column everywhere, smaller headline */
@media (max-width: 600px) {
  .u-3, .u-4, .u-footer { grid-template-columns: 1fr !important; }

  h1 { font-size: 38px !important; }
  h2 { font-size: 30px !important; }

  section { padding-top: 52px !important; padding-bottom: 8px !important; }
  #home   { padding-top: 44px !important; }

  /* Fair-pricing banner: stack text above the button, tighten padding */
  .u-price { padding: 32px 24px !important; }
}