/*
  Clear Bay first-screen contract
  One intentional vertical route only:
  sticky header → full Hero → cream wave → four quick links → small breath → Footer.
  This file is loaded last so legacy storefront sections cannot create a second
  transition or an empty layer before the shared Footer.
*/

@media (min-width: 901px) {
  .home-page #top > :not(.clear-bay-stage) {
    display: none !important;
  }

  .home-page .clear-bay-stage {
    background: #fffaf1 !important;
  }

  .home-page .hero {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 8 / 3 !important;
    overflow: hidden !important;
  }

  .home-page .hero-media {
    background-image: none !important;
    background-position: center center !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
  }

  .home-page .hero-media .hero-image {
    object-fit: cover !important;
    opacity: 1 !important;
  }

  .home-page .hero-copy {
    /* One shared axis: headline, supporting copy and the two CTAs all centre on it. */
    box-sizing: border-box !important;
    width: min(590px, 48%) !important;
    height: 100% !important;
    margin-left: 10% !important;
    padding: clamp(70px, 7.5vw, 116px) 0 0 !important;
    text-align: center !important;
  }

  .home-page #hero-title {
    position: relative !important;
    width: 100% !important;
    font-size: clamp(46px, 4.1vw, 62px) !important;
    line-height: 1.04 !important;
    text-align: center !important;
  }

  .home-page #hero-title::before,
  .home-page #hero-title::after {
    position: absolute !important;
    display: block !important;
    width: 29px !important;
    height: 29px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    content: "" !important;
  }

  .home-page #hero-title::before {
    top: -20px !important;
    left: -43px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23f5bf31' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25'%3E%3Cpath d='M17 5c-2 5-4 7-9 8 5 1 7 3 8 9 2-5 4-7 10-8-5-1-7-3-9-9Z'/%3E%3Cpath d='m7 8 2 2M24 21l2 2'/%3E%3C/svg%3E") !important;
  }

  .home-page #hero-title::after {
    right: -39px !important;
    bottom: 1px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23ff8179' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'%3E%3Cpath d='M16 26S4 19 4 11c0-3 2.5-5 5.5-5 2.4 0 4.5 1.5 6.5 4 2-2.5 4.1-4 6.5-4C25.5 6 28 8 28 11c0 8-12 15-12 15Z'/%3E%3C/svg%3E") !important;
  }

  .home-page .hero p.hero-support {
    width: 100% !important;
    max-width: 100% !important;
    margin: clamp(18px, 2vw, 26px) 0 0 !important;
    color: #174f6d !important;
    font-size: clamp(16px, 1.15vw, 18px) !important;
    font-weight: 650 !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }

  .home-page .hero-launch-note,
  .home-page .hero-question-note {
    display: block !important;
  }

  .home-page .hero-question-note {
    position: relative !important;
    margin-top: 12px !important;
  }

  .home-page .hero-question-note::before {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 7px -3px 0 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8179' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 5.5h14v10H10l-4 3v-3H5z'/%3E%3Cpath d='M11 10.7c0-1.1 1.8-2.2 2.8-.7 1-1.5 2.8-.4 2.8.7 0 1.6-2.8 3-2.8 3s-2.8-1.4-2.8-3Z' fill='%23ff8179' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat !important;
    content: "" !important;
  }

  .home-page .hero-actions {
    width: min(430px, 100%) !important;
    margin: 26px auto 0 !important;
  }

  .home-page .hero-wave {
    height: 154px !important;
    margin-top: -154px !important;
    background: url("../brand/clear-bay-home-main-wave.svg") center bottom / 100% 100% no-repeat !important;
  }

  .home-page .trust-strip {
    height: calc(100dvh - 108px - 37.5vw + 8px) !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    /* The visible icon + title + subtitle group is centered between the wave trough and Footer edge. */
    padding: calc(50dvh - 18.75vw - 105.77px) 11.3% 0 !important;
  }

  .home-page .trust-icon {
    flex-basis: 60px !important;
    width: 60px !important;
    height: 60px !important;
  }

  .home-page .trust-item {
    position: relative !important;
    z-index: 1 !important;
    gap: 6px !important;
  }

  .home-page .trust-item strong {
    font-size: 18px !important;
  }

  .home-page .trust-item small {
    font-size: 14px !important;
  }

  /* Board-scale decorations occupy only unused cream space. */
  .home-page .trust-strip::before {
    z-index: 0 !important;
    top: auto !important;
    bottom: 28px !important;
    left: 3.4% !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    color: #ff8179 !important;
    background: none !important;
    font: 34px/1 Arial, sans-serif !important;
    content: "♡" !important;
  }

  .home-page .trust-strip::after {
    z-index: 0 !important;
    top: 40px !important;
    right: 3.6% !important;
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    background:
      radial-gradient(circle at 50% 72%, #78d8dc 0 24%, transparent 26%),
      radial-gradient(circle at 20% 40%, #78d8dc 0 12%, transparent 14%),
      radial-gradient(circle at 43% 20%, #78d8dc 0 12%, transparent 14%),
      radial-gradient(circle at 67% 25%, #78d8dc 0 12%, transparent 14%),
      radial-gradient(circle at 84% 43%, #78d8dc 0 12%, transparent 14%) !important;
    transform: none !important;
    content: "" !important;
  }

  .home-page .trust-item--shipping .trust-icon { background: #dff8fa !important; }
  .home-page .trust-item--shipping .trust-icon::after {
    width: 31px !important;
    height: 24px !important;
    border: 3px solid #00a9c4 !important;
    border-radius: 5px !important;
    background: linear-gradient(135deg, transparent 47%, #00a9c4 49% 53%, transparent 55%) !important;
  }
  .home-page .trust-item--shipping .trust-icon::before {
    position: absolute !important;
    z-index: 1 !important;
    top: 17px !important;
    left: 15px !important;
    width: 28px !important;
    height: 3px !important;
    background: #00a9c4 !important;
    content: "" !important;
  }
  .home-page .trust-item--returns .trust-icon { background: #fff3c8 !important; }
  .home-page .trust-item--returns .trust-icon::after {
    width: 28px !important;
    height: 28px !important;
    border: 3px solid #e5a908 !important;
    border-left-color: transparent !important;
    border-radius: 50% !important;
    transform: rotate(-35deg) !important;
  }
  .home-page .trust-item--returns .trust-icon::before {
    position: absolute !important;
    top: 17px !important;
    left: 12px !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 6px solid transparent !important;
    border-right: 10px solid #e5a908 !important;
    border-bottom: 6px solid transparent !important;
    background: none !important;
    content: "" !important;
  }

  /* Final icon pass: one rounded, airy stroke family with semantic symbols. */
  .home-page .trust-strip::before,
  .home-page .trust-strip::after {
    display: none !important;
    content: none !important;
  }

  .home-page .trust-icon {
    position: relative !important;
    box-sizing: border-box !important;
    flex: 0 0 60px !important;
    width: 60px !important;
    height: 60px !important;
    color: transparent !important;
    font-size: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 28px 28px !important;
  }

  .home-page .trust-item .trust-icon::before,
  .home-page .trust-item .trust-icon::after {
    display: none !important;
    content: none !important;
  }

  .home-page .trust-item--products .trust-icon {
    background-color: #fff0ee !important;
    background-size: 32px 32px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ff8179'%3E%3Ccircle cx='7.4' cy='10.3' r='3.1'/%3E%3Ccircle cx='13.1' cy='6.7' r='3.1'/%3E%3Ccircle cx='18.9' cy='6.7' r='3.1'/%3E%3Ccircle cx='24.6' cy='10.3' r='3.1'/%3E%3Cpath d='M16 14c-4.9 0-8.4 3.5-8.4 7.5 0 3.6 2.8 5 8.4 5s8.4-1.4 8.4-5c0-4-3.5-7.5-8.4-7.5Z'/%3E%3C/svg%3E") !important;
  }

  .home-page .trust-item--shipping .trust-icon {
    background-color: #dff8fa !important;
    background-size: 32px 32px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%2300a9c4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.35'%3E%3Cpath d='M4.5 8h14v12h-14zM18.5 12h4l4 4v4h-8z'/%3E%3Cpath d='M7.5 20h11M9 24a2.4 2.4 0 1 0 0-4.8A2.4 2.4 0 0 0 9 24Zm14 0a2.4 2.4 0 1 0 0-4.8A2.4 2.4 0 0 0 23 24Z'/%3E%3C/svg%3E") !important;
  }

  .home-page .trust-item--returns .trust-icon {
    background-color: #fff3c8 !important;
    background-size: 32px 32px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23e5a908' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.45'%3E%3Cpath d='m10 7-5 5 5 5'/%3E%3Cpath d='M5.5 12H17a7 7 0 0 1 0 14h-1'/%3E%3C/svg%3E") !important;
  }

  html[lang="zh"] .home-page #hero-title {
    font-size: clamp(40px, 3.2vw, 48px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0.02em !important;
    text-wrap: balance !important;
    word-break: keep-all !important;
  }

  .home-page .trust-item--questions .trust-icon {
    background-color: #e3f3ff !important;
    background-size: 32px 32px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%232894d8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.35'%3E%3Crect x='4.5' y='7' width='23' height='18' rx='3'/%3E%3Cpath d='m6 10 10 8 10-8'/%3E%3C/svg%3E") !important;
  }

  .clear-bay-footer {
    /* The quick-link strips already contain their own lower breathing room.
       Keeping this at zero prevents the page background from becoming a visible
       unowned band between quick links and the Footer wave. */
    margin-top: 0 !important;
    padding-top: 48px !important;
    background:
      radial-gradient(circle at 8% 22%, rgba(129, 222, 235, .22), transparent 24rem),
      radial-gradient(circle at 87% 32%, rgba(255, 213, 113, .16), transparent 22rem),
      linear-gradient(128deg, #057fa4 0%, #0796bc 58%, #007a9c 100%) !important;
  }

  .clear-bay-footer::before,
  .clear-bay-footer::after {
    display: none !important;
  }

  .products-page .products-quick-links {
    height: calc(100dvh - 58px - 37.5vw + 8px) !important;
    min-height: 0 !important;
    padding-bottom: 26px !important;
  }

  /* Products keeps its existing four-card positions, but uses Home's shared quick-link set. */
  .products-page .products-quick-icon {
    color: transparent !important;
    font-size: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 30px 30px !important;
  }

  .products-page .products-quick-icon::before,
  .products-page .products-quick-icon::after {
    display: none !important;
    content: none !important;
  }

  .products-page .products-quick-link--products .products-quick-icon {
    background-color: #fff0ee !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ff8179'%3E%3Ccircle cx='7.4' cy='10.3' r='3.1'/%3E%3Ccircle cx='13.1' cy='6.7' r='3.1'/%3E%3Ccircle cx='18.9' cy='6.7' r='3.1'/%3E%3Ccircle cx='24.6' cy='10.3' r='3.1'/%3E%3Cpath d='M16 14c-4.9 0-8.4 3.5-8.4 7.5 0 3.6 2.8 5 8.4 5s8.4-1.4 8.4-5c0-4-3.5-7.5-8.4-7.5Z'/%3E%3C/svg%3E") !important;
  }

  .products-page .products-quick-link--shipping .products-quick-icon {
    background-color: #dff8fa !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%2300a9c4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.35'%3E%3Cpath d='M4.5 8h14v12h-14zM18.5 12h4l4 4v4h-8z'/%3E%3Cpath d='M7.5 20h11M9 24a2.4 2.4 0 1 0 0-4.8A2.4 2.4 0 0 0 9 24Zm14 0a2.4 2.4 0 1 0 0-4.8A2.4 2.4 0 0 0 23 24Z'/%3E%3C/svg%3E") !important;
  }

  .products-page .products-quick-link--returns .products-quick-icon {
    background-color: #fff3c8 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23e5a908' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.45'%3E%3Cpath d='m10 7-5 5 5 5'/%3E%3Cpath d='M5.5 12H17a7 7 0 0 1 0 14h-1'/%3E%3C/svg%3E") !important;
  }

  .products-page .products-quick-link--questions .products-quick-icon {
    background-color: #e3f3ff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231495d8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.35'%3E%3Crect x='4.5' y='7.5' width='23' height='17' rx='2'/%3E%3Cpath d='m5.5 9 10.5 8L26.5 9'/%3E%3C/svg%3E") !important;
  }
}