/* Canterbury Cleaners final premium visual layer - 02 Sep 2026 */
:root {
  --cc-ink: #082744;
  --cc-ink-deep: #041b31;
  --cc-green: #35c95f;
  --cc-green-dark: #159447;
  --cc-blue: #0d87da;
  --cc-paper: #ffffff;
  --cc-soft: #f2f8f5;
  --cc-shadow: 0 24px 70px rgba(4, 27, 49, .16);
}

html {
  scroll-behavior: smooth;
}

body,
button,
input,
select,
textarea {
  font-family: "Poppins", Arial, Helvetica, sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.button,
.eyebrow,
.text-link,
.cc-desktop-nav,
.cc-mobile-menu {
  font-family: "Poppins", Arial, Helvetica, sans-serif !important;
}

body .cc-final-header .cc-quote-link {
  min-height: 44px !important;
  padding: 0 17px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--cc-green), var(--cc-green-dark)) !important;
  border: 1px solid rgba(16, 150, 74, .26) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(21, 148, 71, .2) !important;
}

body .cc-final-header .cc-quote-link:hover {
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(21, 148, 71, .28) !important;
}

body .hero.premium-hero {
  min-height: clamp(720px, 79vh, 850px) !important;
  isolation: isolate !important;
  background-color: var(--cc-ink-deep) !important;
  background-image:
    linear-gradient(90deg, rgba(4, 27, 49, .98) 0%, rgba(4, 27, 49, .94) 34%, rgba(4, 27, 49, .76) 50%, rgba(4, 27, 49, .28) 69%, rgba(4, 27, 49, .05) 100%),
    url("images/canterbury-cleaners-hero-team-20260907-v2.webp") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

body .hero.premium-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(1, 14, 27, .12), transparent 28%, rgba(1, 14, 27, .24)),
    radial-gradient(circle at 14% 30%, rgba(13, 135, 218, .18), transparent 33%) !important;
}

body .hero.premium-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: auto auto -180px -120px !important;
  width: 470px !important;
  height: 470px !important;
  z-index: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(53, 201, 95, .18), transparent 68%) !important;
  pointer-events: none !important;
}

body .premium-hero .hero-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 760px !important;
}

body .premium-hero .eyebrow {
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, .1) !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1) !important;
  backdrop-filter: blur(10px) !important;
  font-size: clamp(.73rem, .7vw, .82rem) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
}

body .premium-hero h1,
body #hero-title {
  max-width: 760px !important;
  margin: 22px 0 18px !important;
  color: #ffffff !important;
  font-size: clamp(3.1rem, 5.35vw, 5rem) !important;
  font-weight: 800 !important;
  line-height: .98 !important;
  letter-spacing: -.052em !important;
  text-wrap: balance !important;
  text-shadow: 0 10px 36px rgba(0, 0, 0, .24) !important;
}

body .premium-hero h1 > span {
  display: inline-block !important;
}

body .premium-hero h1 .hero-green {
  margin-top: 7px !important;
  color: #46d26d !important;
  text-shadow: 0 10px 30px rgba(17, 112, 53, .2) !important;
}

body .premium-hero .hero-copy {
  max-width: 650px !important;
  margin: 0 0 23px !important;
  color: rgba(255, 255, 255, .9) !important;
  font-size: clamp(1rem, 1.18vw, 1.16rem) !important;
  font-weight: 400 !important;
  line-height: 1.72 !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .2) !important;
}

body .premium-hero .hero-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 0 25px !important;
}

body .premium-hero .hero-badges span {
  min-height: 35px !important;
  padding: 8px 12px 8px 31px !important;
  color: rgba(255, 255, 255, .93) !important;
  background: rgba(255, 255, 255, .09) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 999px !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  backdrop-filter: blur(8px) !important;
}

body .premium-hero .hero-badges span::before {
  left: 11px !important;
  color: #4ae073 !important;
}

body .premium-hero .hero-actions .button {
  min-height: 56px !important;
  padding: 0 22px !important;
  border-radius: 16px !important;
  font-size: .94rem !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

body .premium-hero .hero-actions .button.primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, #38cf63, #149348) !important;
  border: 1px solid rgba(103, 235, 139, .52) !important;
  box-shadow: 0 16px 34px rgba(14, 122, 57, .34) !important;
}

body .premium-hero .hero-actions .button.secondary {
  color: var(--cc-ink) !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(255, 255, 255, .76) !important;
  box-shadow: 0 15px 34px rgba(1, 14, 27, .2) !important;
}

body .premium-hero .hero-actions .button:hover {
  transform: translateY(-3px) !important;
}

body .packages-section .package-card {
  overflow: hidden !important;
  border: 1px solid rgba(8, 39, 68, .1) !important;
  box-shadow: 0 18px 48px rgba(8, 39, 68, .1) !important;
}

body .packages-section .package-photo.show-full-image {
  display: block !important;
  width: calc(100% + 48px) !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  margin: 0 -24px 24px !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: linear-gradient(145deg, #e8f2ed, #f7fbf9) !important;
  border-bottom: 1px solid rgba(8, 39, 68, .08) !important;
  transform: none !important;
}

body .packages-section .package-card:hover .package-photo.show-full-image {
  transform: none !important;
}

body .service-card,
body .package-card,
body .premium-why-card,
body .google-style-review-card {
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
}

body .google-reviews-action {
  display: flex !important;
  justify-content: center !important;
  margin-top: 30px !important;
}

body .google-reviews-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 0 24px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #168b4a, #0b6e44) !important;
  border: 1px solid rgba(11, 110, 68, .34) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 30px rgba(11, 110, 68, .22) !important;
  font-size: .94rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

body .google-reviews-link:hover {
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 36px rgba(11, 110, 68, .29) !important;
}

body :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(13, 135, 218, .42) !important;
  outline-offset: 3px !important;
}

@media (max-width: 1080px) {
  body .hero.premium-hero {
    min-height: 720px !important;
    background-image:
      linear-gradient(90deg, rgba(4, 27, 49, .97) 0%, rgba(4, 27, 49, .9) 48%, rgba(4, 27, 49, .52) 74%, rgba(4, 27, 49, .16) 100%),
      url("images/canterbury-cleaners-hero-team-20260907-v2.webp") !important;
    background-position: 62% center !important;
  }
}

@media (max-width: 720px) {
  body .hero.premium-hero {
    min-height: 690px !important;
    padding: 56px 20px 60px !important;
    background-image:
      linear-gradient(90deg, rgba(4, 27, 49, .97) 0%, rgba(4, 27, 49, .92) 58%, rgba(4, 27, 49, .62) 100%),
      url("images/canterbury-cleaners-hero-team-20260907-v2.webp") !important;
    background-position: 71% center !important;
  }

  body .premium-hero .hero-content {
    max-width: 100% !important;
  }

  body .premium-hero h1,
  body #hero-title {
    margin: 18px 0 15px !important;
    font-size: clamp(2.55rem, 12vw, 3.7rem) !important;
    line-height: 1.01 !important;
  }

  body .premium-hero .hero-copy {
    max-width: 95% !important;
    font-size: .96rem !important;
    line-height: 1.62 !important;
  }

  body .premium-hero .hero-badges {
    gap: 7px !important;
  }

  body .premium-hero .hero-badges span {
    min-height: 32px !important;
    padding: 7px 10px 7px 28px !important;
    font-size: .7rem !important;
  }

  body .packages-section .package-photo.show-full-image {
    width: calc(100% + 36px) !important;
    margin: 0 -18px 20px !important;
  }

  body .google-reviews-action {
    margin-top: 24px !important;
  }

  body .google-reviews-link {
    width: 100% !important;
    max-width: 320px !important;
  }
}

@media (max-width: 420px) {
  body .hero.premium-hero {
    min-height: 650px !important;
    padding: 48px 16px 54px !important;
    background-image:
      linear-gradient(90deg, rgba(4, 27, 49, .98) 0%, rgba(4, 27, 49, .95) 65%, rgba(4, 27, 49, .72) 100%),
      url("images/canterbury-cleaners-hero-team-20260907-v2.webp") !important;
    background-position: 69% center !important;
  }

  body .premium-hero .eyebrow {
    padding: 8px 11px !important;
    font-size: .64rem !important;
    letter-spacing: .055em !important;
  }

  body .premium-hero h1,
  body #hero-title {
    font-size: clamp(2.15rem, 11.6vw, 3rem) !important;
  }

  body .premium-hero .hero-actions .button {
    min-height: 51px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body *,
  body *::before,
  body *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 2026-09-03 mobile viewport hardening
   Final phone-only normalization. This layer intentionally comes last so the
   older inline responsive experiments cannot fight with the current layout. */
@media (max-width: 720px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body *,
  body *::before,
  body *::after {
    box-sizing: border-box !important;
  }

  body img,
  body picture,
  body video,
  body svg {
    max-width: 100% !important;
  }

  /* Keep fixed promotional UI from sitting over page content on phones. */
  body .side-offer-tab {
    display: none !important;
  }

  body .floating-contact-buttons {
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 10px !important;
    z-index: 8000 !important;
  }

  body .floating-contact-buttons .floating-facebook {
    display: inline-flex !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  body .floating-contact-buttons .floating-whatsapp {
    display: inline-flex !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  /* Compact sticky header with a reliable, scrollable mobile menu. */
  body .top-strip {
    min-height: 34px !important;
    padding: 7px 10px !important;
    font-size: .68rem !important;
    line-height: 1.25 !important;
  }

  body .site-header.cc-final-header,
  body .cc-final-header {
    width: 100% !important;
    max-width: none !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    gap: 10px !important;
    border-radius: 0 0 18px 18px !important;
    overflow: visible !important;
  }

  body .cc-final-header .cc-logo,
  body .cc-final-header .premium-header-brand,
  body .cc-final-header .brand {
    width: min(228px, calc(100vw - 82px)) !important;
    max-width: min(228px, calc(100vw - 82px)) !important;
    min-width: 0 !important;
    padding: 2px 4px !important;
    overflow: hidden !important;
  }

  body .cc-final-header .cc-logo img,
  body .cc-final-header .premium-header-brand img,
  body .cc-final-header .brand img {
    width: 100% !important;
    height: auto !important;
    max-height: 58px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  body .cc-final-header .cc-mobile-menu-toggle {
    display: inline-flex !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border-radius: 14px !important;
  }

  body .cc-final-header .cc-mobile-menu {
    left: 10px !important;
    right: 10px !important;
    top: calc(100% + 8px) !important;
    width: auto !important;
    max-height: calc(100dvh - 118px) !important;
    padding: 12px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border-radius: 18px !important;
  }

  body .cc-final-header .cc-mobile-menu a {
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: .95rem !important;
    line-height: 1.25 !important;
  }

  /* Hero: keep the cleaner visible without sacrificing text readability. */
  body .hero.premium-hero {
    min-height: 0 !important;
    height: auto !important;
    padding: 38px 16px 44px !important;
    align-items: flex-start !important;
    background-image:
      linear-gradient(90deg, rgba(4, 27, 49, .98) 0%, rgba(4, 27, 49, .94) 55%, rgba(4, 27, 49, .68) 100%),
      url("images/canterbury-cleaners-hero-team-20260907-v2.webp") !important;
    background-position: 72% center !important;
    background-size: cover !important;
  }

  body .premium-hero .hero-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  body .premium-hero .eyebrow {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    padding: 8px 11px !important;
    font-size: .7rem !important;
    line-height: 1.35 !important;
    letter-spacing: .055em !important;
    white-space: normal !important;
  }

  body .premium-hero .eyebrow::after {
    content: none !important;
  }

  body .premium-hero h1,
  body #hero-title {
    max-width: 100% !important;
    margin: 0 0 14px !important;
    font-size: clamp(2.2rem, 10.8vw, 3rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.042em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body .premium-hero h1 > span {
    display: inline !important;
  }

  body .premium-hero h1 .hero-green {
    display: inline-block !important;
    margin-top: 5px !important;
  }

  body .premium-hero .hero-copy {
    max-width: 100% !important;
    margin: 0 0 18px !important;
    font-size: .94rem !important;
    line-height: 1.56 !important;
  }

  body .premium-hero .hero-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 7px !important;
    margin: 0 0 18px !important;
  }

  body .premium-hero .hero-badges span,
  body .premium-hero .hero-badges span:nth-child(2) {
    width: auto !important;
    min-height: 34px !important;
    padding: 7px 10px 7px 28px !important;
    font-size: .69rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  body .premium-hero .hero-badges span:nth-child(2)::after {
    content: none !important;
  }

  body .premium-hero .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 9px !important;
  }

  body .premium-hero .hero-actions .button {
    width: 100% !important;
    min-height: 50px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    font-size: .9rem !important;
  }

  body .premium-hero .hero-trust-line {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 14px 0 0 !important;
    font-size: .76rem !important;
    line-height: 1.4 !important;
  }

  body .premium-hero .hero-trust-line span:not(.hero-stars) {
    font-size: .76rem !important;
  }

  body .premium-hero .hero-trust-line span:not(.hero-stars)::after {
    content: none !important;
  }

  body .premium-hero .hero-proof-card,
  body .trust-band {
    display: none !important;
  }

  /* Consistent phone spacing and type scale across all homepage sections. */
  body .premium-why-section,
  body .services-section,
  body .packages-section,
  body .google-reviews-section,
  body .signature-section,
  body .process-section,
  body .areas-section,
  body .faq-section,
  body .contact-section {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  body .services-section,
  body .packages-section,
  body .google-reviews-section,
  body .signature-section,
  body .process-section,
  body .areas-section,
  body .faq-section,
  body .contact-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body .section-heading {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 26px !important;
  }

  body .section-heading h2,
  body #services-title,
  body #packages-title,
  body #google-reviews-title,
  body #signature-title,
  body #process-title,
  body #areas-title,
  body #faq-title,
  body #contact-title,
  body #premium-why-title,
  body #eco-title {
    max-width: 100% !important;
    font-size: clamp(1.9rem, 8.5vw, 2.45rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: break-word !important;
  }

  body .section-heading > p:not(.eyebrow),
  body .why-intro,
  body .eco-lede {
    font-size: .94rem !important;
    line-height: 1.6 !important;
  }

  /* Why choose */
  body .premium-why-section.premium-why-upgraded {
    grid-template-columns: 1fr !important;
  }

  body .premium-why-upgraded .premium-why-image-wrap,
  body .premium-why-upgraded .premium-why-image {
    min-height: 280px !important;
  }

  body .premium-why-upgraded .premium-why-content {
    padding: 36px 16px 46px !important;
  }

  body .premium-why-upgraded .premium-why-grid,
  body .premium-why-upgraded .premium-why-grid.why-six-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body .premium-why-upgraded .premium-why-card {
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 16px !important;
  }

  body .premium-why-upgraded .premium-why-proof {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Services and packages */
  body .services-section .service-grid,
  body .packages-section .package-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body .services-section .service-card,
  body .packages-section .package-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 20px 18px !important;
    border-radius: 18px !important;
  }

  body .packages-section .package-photo.show-full-image {
    width: calc(100% + 36px) !important;
    max-width: none !important;
    margin: -20px -18px 18px !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
  }

  /* Eco section */
  body .eco-section.eco-premium-final {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    padding: 48px 16px !important;
    gap: 28px !important;
  }

  body .eco-benefits {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body .eco-visual {
    min-height: 300px !important;
  }

  /* Reviews */
  body .reviews-shell,
  body .reviews-trust-row,
  body .premium-review-highlights,
  body .manual-review-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  body .reviews-trust-row,
  body .premium-review-highlights,
  body .manual-review-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body .manual-review-card.google-style-review-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 18px !important;
    border-radius: 16px !important;
  }

  body .review-card-top,
  body .review-rating-row {
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  body .review-copy,
  body .reviewer-details,
  body .review-meta {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  body .google-reviews-link {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 50px !important;
    padding: 12px 16px !important;
    text-align: center !important;
  }

  /* Difference / process / locations / FAQ */
  body .signature-section .signature-grid,
  body .process-section .process-list,
  body .locations-cover-card,
  body .faq-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 12px !important;
  }

  body .signature-card,
  body .locations-cover-card .location-group,
  body .faq-grid details {
    min-width: 0 !important;
  }

  body .location-help-note {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Calculator */
  body #quote.quote-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 48px 12px !important;
  }

  body #quote .quote-layout,
  body #quote .quote-form,
  body #quote .cc-pricing-snapshot,
  body #quote .cc-addon-grid,
  body #quote .split-fields {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body #quote .quote-form,
  body #quote .estimate-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 20px !important;
  }

  body #quote .quote-form fieldset,
  body #quote .estimate-panel {
    width: 100% !important;
    min-width: 0 !important;
    padding: 20px 16px !important;
  }

  body #quote .cc-snapshot-card,
  body #quote .check-row,
  body #quote .included-note,
  body #quote .cc-promo-block,
  body #quote .cc-tailored-quote-note {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  body #quote input,
  body #quote select,
  body #quote textarea,
  body .contact-section input,
  body .contact-section select,
  body .contact-section textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  body #quote textarea,
  body .contact-section textarea {
    min-height: 112px !important;
  }

  body #quote .estimate-panel .button.full-width,
  body .contact-section .button.full-width {
    width: 100% !important;
    min-height: 50px !important;
  }

  body #quote #visit-price {
    max-width: 100% !important;
    font-size: clamp(3.2rem, 16vw, 4.25rem) !important;
    overflow-wrap: anywhere !important;
  }

  /* Contact and footer */
  body .contact-section {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  body .contact-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body .contact-options a,
  body .hours-row,
  body .site-footer,
  body .site-footer a,
  body .footer-legal-links {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  body .hours-row {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  body .site-footer {
    padding: 34px 16px calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    text-align: center !important;
  }

  body .site-footer .footer-legal-links {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
  }

  body a,
  body button,
  body input,
  body select,
  body textarea,
  body summary {
    -webkit-tap-highlight-color: rgba(13, 135, 218, .14) !important;
  }
}

@media (max-width: 420px) {
  body .top-strip::after {
    white-space: normal !important;
  }

  body .site-header.cc-final-header,
  body .cc-final-header {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body .cc-final-header .cc-logo,
  body .cc-final-header .premium-header-brand,
  body .cc-final-header .brand {
    width: min(212px, calc(100vw - 78px)) !important;
    max-width: min(212px, calc(100vw - 78px)) !important;
  }

  body .hero.premium-hero {
    padding: 34px 14px 40px !important;
  }

  body .premium-hero h1,
  body #hero-title {
    font-size: clamp(2.05rem, 10.6vw, 2.65rem) !important;
  }

  body .premium-why-upgraded .premium-why-proof {
    grid-template-columns: 1fr !important;
  }
}