/* HERO v2.0 — approved story composition
   Scattered channels -> beaver bundles them -> carries them toward the business.
   Header and all later sections intentionally untouched. */
#hero.hero-v20 {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 720px !important;
  padding: 64px 4.5% 44px !important;
  background: #fffdfa !important;
}

#hero.hero-v20 .hero-layout {
  position: relative !important;
  width: min(1480px, 100%) !important;
  min-height: 612px !important;
  margin: 0 auto !important;
}

#hero.hero-v20 .hero-copy {
  position: relative !important;
  z-index: 5 !important;
  width: clamp(520px, 43vw, 620px) !important;
  padding: 20px 0 0 !important;
}

#hero.hero-v20 .hero-kicker {
  margin: 0 0 17px !important;
  color: #1d2d46 !important;
  font: 500 16px/1.5 'Noto Sans JP', sans-serif !important;
  letter-spacing: .035em !important;
}

#hero.hero-v20 .hero-copy h1 {
  margin: 0 0 27px !important;
  color: #10243e !important;
  font: 700 clamp(47px, 3.8vw, 63px)/1.38 'Noto Sans JP', sans-serif !important;
  letter-spacing: -.035em !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

#hero.hero-v20 .hero-copy h1 em {
  color: #ff6f61 !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

#hero.hero-v20 .hero-sub {
  max-width: 555px !important;
  margin: 0 0 28px !important;
  color: #243449 !important;
  font: 400 15px/1.9 'Noto Sans JP', sans-serif !important;
  letter-spacing: .01em !important;
}

#hero.hero-v20 .hero-cta-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 28px !important;
}

#hero.hero-v20 .beaver-primary,
#hero.hero-v20 .btn-secondary-beaver {
  min-height: 54px !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

#hero.hero-v20 .hero-benefits {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
  max-width: 590px !important;
}

#hero.hero-v20 .hero-benefit {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 0 20px !important;
  color: #3b4148 !important;
  font-size: 11.5px !important;
  line-height: 1.55 !important;
}

#hero.hero-v20 .hero-benefit:first-child { padding-left: 0 !important; }
#hero.hero-v20 .hero-benefit + .hero-benefit::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 1px;
  height: 36px;
  background: #f3d8d2;
}
#hero.hero-v20 .hero-benefit-icon { color: #ff7568 !important; }

/* The artwork is one visual story, not a boxed right-column illustration. */
#hero.hero-v20 .hero-backdrop {
  position: absolute !important;
  z-index: 2 !important;
  width: clamp(720px, 59vw, 900px) !important;
  right: clamp(-92px, -3vw, -35px) !important;
  top: -48px !important;
  pointer-events: none !important;
}

#hero.hero-v20 .hero-backdrop-image {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain !important;
  border: 0 !important;
  filter: none !important;
}

/* Soft veil preserves copy readability while still letting the illustration enter the hero canvas. */
#hero.hero-v20::before {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0 auto 0 0;
  width: 55%;
  pointer-events: none;
  background: linear-gradient(90deg,
    #fffdfa 0%,
    rgba(255,253,250,.99) 58%,
    rgba(255,253,250,.82) 76%,
    rgba(255,253,250,0) 100%);
}

#hero.hero-v20::after {
  content: '';
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 66px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,253,250,0), #fffdfa 90%);
}

@media (max-width: 1240px) {
  #hero.hero-v20 { min-height: 690px !important; padding-left: 4% !important; padding-right: 4% !important; }
  #hero.hero-v20 .hero-copy { width: min(545px, 46vw) !important; }
  #hero.hero-v20 .hero-copy h1 { font-size: clamp(43px, 4.2vw, 56px) !important; }
  #hero.hero-v20 .hero-backdrop { width: clamp(660px, 60vw, 810px) !important; right: -85px !important; top: -20px !important; }
}

@media (max-width: 980px) {
  #hero.hero-v20 { min-height: auto !important; padding: 56px 6% 30px !important; }
  #hero.hero-v20 .hero-layout { min-height: 0 !important; }
  #hero.hero-v20 .hero-copy { width: 100% !important; max-width: 680px !important; padding-top: 0 !important; }
  #hero.hero-v20 .hero-copy h1 { font-size: clamp(40px, 7.5vw, 52px) !important; }
  #hero.hero-v20::before { width: 100%; height: 57%; background: linear-gradient(180deg,#fffdfa 0%,rgba(255,253,250,.96) 73%,rgba(255,253,250,0) 100%); }
  #hero.hero-v20 .hero-backdrop { position: relative !important; width: min(110%, 790px) !important; right: auto !important; top: auto !important; margin: -6px -8% -14px auto !important; }
}

@media (max-width: 600px) {
  #hero.hero-v20 { padding: 48px 5.5% 22px !important; }
  #hero.hero-v20 .hero-kicker { font-size: 13px !important; }
  #hero.hero-v20 .hero-copy h1 { font-size: clamp(34px, 10.5vw, 42px) !important; line-height: 1.42 !important; margin-bottom: 19px !important; }
  #hero.hero-v20 .hero-sub { font-size: 13px !important; line-height: 1.8 !important; margin-bottom: 22px !important; }
  #hero.hero-v20 .hero-cta-wrap { gap: 9px !important; flex-wrap: wrap !important; }
  #hero.hero-v20 .beaver-primary,
  #hero.hero-v20 .btn-secondary-beaver { flex: 1 1 46% !important; min-width: 145px !important; padding: 12px !important; font-size: 12px !important; }
  #hero.hero-v20 .hero-benefits { justify-content: space-between !important; }
  #hero.hero-v20 .hero-benefit { padding: 0 8px !important; gap: 5px !important; font-size: 10px !important; }
  #hero.hero-v20 .hero-benefit:first-child { padding-left: 0 !important; }
  #hero.hero-v20 .hero-backdrop { width: 122% !important; margin: 8px -14% -6px -8% !important; }
}