/* Closer to Korea — compact home hero
   Goal: keep the brand impact while revealing that more content continues below. */

.hero-product-guide-link{
  display:inline-flex;
  width:max-content;
  margin:.1rem 0 .15rem;
  color:#655579;
  font-size:.84rem;
  font-weight:800;
  text-underline-offset:.2em;
}

@media (min-width: 960px){
  .hero{
    min-height:auto !important;
    padding-top:.9rem !important;
    padding-bottom:1rem !important;
    gap:1rem !important;
    align-items:stretch !important;
  }

  .hero-copy,
  .hero-collage{
    min-height:clamp(500px,61vh,590px) !important;
    max-height:590px;
  }

  .hero-copy{
    padding:clamp(1.7rem,3.2vw,2.65rem) !important;
  }

  .hero h1{
    max-width:11.2ch !important;
    margin:.55rem 0 .8rem !important;
    font-size:clamp(3.65rem,5.8vw,5.15rem) !important;
    line-height:.93 !important;
  }

  .hero-copy>p{
    margin:.35rem 0 .65rem;
    max-width:52ch !important;
    font-size:1rem !important;
    line-height:1.55 !important;
  }

  .hero-actions{
    margin:.75rem 0 .35rem !important;
  }

  .trust-row{
    margin-top:.5rem !important;
  }

  .hero-collage{
    aspect-ratio:auto !important;
  }

  .hero-collage img{
    position:absolute;
    inset:.45rem;
    width:calc(100% - .9rem);
    height:calc(100% - .9rem);
    object-fit:cover;
  }

  /* The first section should begin close enough to peek into the initial viewport. */
  .hero + .quick-categories{
    padding-top:clamp(1.6rem,3vw,2.4rem) !important;
  }
}

@media (min-width: 700px) and (max-width: 959px){
  .hero{
    padding-top:.75rem !important;
    padding-bottom:1rem !important;
    gap:.9rem !important;
  }

  .hero-copy{
    padding:1.4rem !important;
  }

  .hero h1{
    font-size:clamp(3rem,8.5vw,4.5rem) !important;
    line-height:.94 !important;
  }

  .hero-collage{
    min-height:420px !important;
  }
}

@media (max-width: 699px){
  .hero{
    padding-top:.55rem !important;
    padding-bottom:.8rem !important;
    gap:.7rem !important;
  }

  .hero-copy{
    padding:1.05rem !important;
  }

  .hero h1{
    margin:.5rem 0 .7rem !important;
    max-width:10.5ch !important;
    font-size:clamp(2.35rem,12vw,3.45rem) !important;
    line-height:.94 !important;
  }

  .hero-copy>p{
    font-size:.95rem !important;
    line-height:1.5 !important;
  }

  .hero-actions{
    margin:.65rem 0 .3rem !important;
  }

  .hero-actions .jelly-button{
    flex:1 1 100%;
    width:100%;
  }

  .hero-collage{
    min-height:auto !important;
    aspect-ratio:4/3 !important;
  }

  .hero + .quick-categories{
    padding-top:1.3rem !important;
  }
}