/* 2026-06-23: generated character backgrounds for UI explanation sections only */

#hero .hero-rich-decor-left {
  background-image: url("assets/hero-decor/hero-decor-left.webp?v=20260605-1306") !important;
  background-position: left center !important;
}

#hero .hero-rich-decor-right {
  background-image: url("assets/hero-decor/hero-decor-right.webp?v=20260605-1306") !important;
  background-position: right center !important;
}

#hero .site-edge-bear {
  display: block !important;
}

#cute-features,
#honmaru-preview,
#honmaru-features {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
}

#cute-features .wrap,
#cute-features .cute-ui-scroll,
#cute-features .cute-feature-list,
#honmaru-preview .wrap,
#honmaru-preview .preview-scroll,
#honmaru-preview .preview-words,
#honmaru-features .wrap {
  position: relative;
  z-index: 2;
}

#cute-features::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(255, 228, 238, .16), rgba(255, 250, 246, .68) 36%, rgba(255, 232, 242, .22) 100%),
    url("assets/concepts/mute-front-ui-section-bg-v1.webp?v=20260623-0945") left center / cover no-repeat !important;
  opacity: .82 !important;
  filter: saturate(1.04) brightness(1.02);
}

#cute-features::after {
  content: "";
  position: absolute;
  inset: 10% 11% 8% 27%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, .74), rgba(255, 246, 250, .32) 58%, transparent 76%);
}

#honmaru-preview::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(8, 2, 6, .70), rgba(8, 2, 6, .26) 58%, transparent 78%),
    url("assets/concepts/mute-back-ui-section-bg-v1.webp?v=20260623-0945") right center / cover no-repeat !important;
  opacity: .66 !important;
  filter: saturate(1.06) contrast(1.02);
  mix-blend-mode: normal !important;
}

#honmaru-preview::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: radial-gradient(ellipse at 50% 42%, rgba(8, 2, 6, .72), rgba(8, 2, 6, .24) 58%, transparent 78%) !important;
  opacity: 1 !important;
}

#honmaru-features::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(8, 2, 6, .88), rgba(8, 2, 6, .54) 22%, rgba(8, 2, 6, .82) 100%),
    url("assets/concepts/mute-back-ui-section-bg-v1.webp?v=20260623-0945") top right / min(1659px, 130vw) auto no-repeat !important;
  opacity: .44 !important;
  filter: saturate(1.06) contrast(1.04);
}

#honmaru-features::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 2, 6, .52), transparent 18%, transparent 80%, rgba(8, 2, 6, .72)),
    radial-gradient(ellipse at 50% 22%, rgba(8, 2, 6, .44), transparent 42%);
}

@media (max-width: 760px) {
  #cute-features::before {
    background:
      linear-gradient(180deg, rgba(255, 248, 250, .62), rgba(255, 231, 240, .34)),
      url("assets/concepts/mute-front-ui-section-bg-v1.webp?v=20260623-0945") 17% center / auto 100% no-repeat !important;
    opacity: .58 !important;
  }

  #cute-features::after {
    inset: 8% 4% 10%;
    background: radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, .78), rgba(255, 246, 250, .36) 58%, transparent 78%);
  }

  #honmaru-preview::before {
    background:
      radial-gradient(ellipse at 50% 46%, rgba(8, 2, 6, .74), rgba(8, 2, 6, .36) 58%, transparent 78%),
      url("assets/concepts/mute-back-ui-section-bg-v1.webp?v=20260623-0945") 79% center / auto 100% no-repeat !important;
    opacity: .58 !important;
  }

  #honmaru-features::before {
    background:
      linear-gradient(180deg, rgba(8, 2, 6, .90), rgba(8, 2, 6, .60) 26%, rgba(8, 2, 6, .86) 100%),
      url("assets/concepts/mute-back-ui-section-bg-v1.webp?v=20260623-0945") 79% top / auto min(760px, 72vh) no-repeat !important;
    opacity: .42 !important;
  }
}

/* 2026-06-23: soften back-UI decoration and make each feature match the black-cat character */
#honmaru-preview {
  background:
    radial-gradient(62% 44% at 50% 47%, rgba(239, 82, 138, .22), transparent 68%),
    radial-gradient(46% 34% at 80% 22%, rgba(155, 73, 178, .14), transparent 70%),
    linear-gradient(180deg, #0a0308 0%, #180711 48%, #090307 100%) !important;
}

#honmaru-preview::before {
  background:
    linear-gradient(90deg, rgba(8, 2, 6, .88), rgba(8, 2, 6, .20) 44%, rgba(8, 2, 6, .74)),
    url("assets/concepts/mute-back-ui-section-bg-v1.webp?v=20260623-0945") 86% center / cover no-repeat !important;
  opacity: .30 !important;
  filter: saturate(.92) brightness(1.08) contrast(.92) !important;
}

#honmaru-preview::after {
  background:
    radial-gradient(circle at 20% 26%, rgba(255, 188, 222, .28) 0 2px, transparent 3px),
    radial-gradient(circle at 79% 24%, rgba(255, 211, 146, .24) 0 2px, transparent 3px),
    radial-gradient(circle at 15% 76%, rgba(171, 94, 205, .20) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 74%, rgba(255, 142, 190, .22) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 52%, rgba(8, 2, 6, .28), transparent 70%) !important;
  opacity: .86 !important;
  mix-blend-mode: screen;
}

#honmaru-preview .preview-scroll {
  grid-auto-columns: minmax(168px, 196px);
}

#honmaru-preview .preview-phone,
#honmaru-features .hm-phone .phone {
  overflow: hidden !important;
  aspect-ratio: 418 / 871;
  border-radius: 36px !important;
  background: transparent !important;
}

#honmaru-preview .preview-phone img,
#honmaru-features .hm-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 !important;
  transform: translateY(-7.45%);
}

#honmaru-features {
  background:
    radial-gradient(72% 28% at 50% 0%, rgba(97, 29, 74, .30), transparent 70%),
    linear-gradient(180deg, #080206 0%, #150711 42%, #0a0307 100%) !important;
}

#honmaru-features::before {
  background:
    linear-gradient(180deg, rgba(8, 2, 6, .92), rgba(8, 2, 6, .64) 34%, rgba(8, 2, 6, .90)),
    url("assets/concepts/mute-back-ui-section-bg-v1.webp?v=20260623-0945") right top / min(1180px, 98vw) auto no-repeat !important;
  opacity: .18 !important;
  filter: saturate(.9) brightness(1.06) contrast(.88) !important;
}

#honmaru-features::after {
  background:
    radial-gradient(44% 18% at 50% 8%, rgba(255, 118, 172, .12), transparent 72%),
    linear-gradient(180deg, rgba(8, 2, 6, .34), transparent 16%, transparent 84%, rgba(8, 2, 6, .64)) !important;
}

#honmaru-features .hm-feature {
  --feature-spark: rgba(255, 176, 212, .26);
  --feature-warm: rgba(255, 194, 132, .12);
  --feature-pink: rgba(241, 84, 136, .18);
  --feature-violet: rgba(150, 78, 194, .14);
}

#honmaru-features .hm-feature:nth-child(2) {
  --feature-deco: url("assets/deco-mitsudan.webp?v=20260605-0134");
  --feature-pink: rgba(236, 85, 148, .18);
  --feature-violet: rgba(139, 82, 190, .12);
}

#honmaru-features .hm-feature:nth-child(3) {
  --feature-deco: url("assets/deco-otakiage.webp?v=20260605-0134");
  --feature-pink: rgba(234, 78, 132, .14);
  --feature-warm: rgba(255, 162, 95, .09);
}

#honmaru-features .hm-feature:nth-child(4) {
  --feature-deco: url("assets/deco-calendar.webp?v=20260605-0134");
  --feature-pink: rgba(236, 91, 151, .16);
  --feature-violet: rgba(173, 96, 207, .16);
}

#honmaru-features .hm-feature:nth-child(5) {
  --feature-deco: url("assets/deco-envelope.webp?v=20260616-0953");
  --feature-pink: rgba(235, 84, 136, .13);
  --feature-warm: rgba(255, 178, 103, .08);
}

@media (min-width: 521px) {
  #honmaru-features .hm-feature:not(.hm-envelope-feature) {
    padding: 44px 36px;
    border-radius: 0;
  }

  #honmaru-features .hm-feature:not(.hm-envelope-feature)::before {
    inset: -80px -110px -82px !important;
    background:
      var(--feature-deco) var(--feature-pos, 50% 50%) / min(680px, 58vw) auto no-repeat,
      radial-gradient(46% 60% at var(--feature-light, 50% 52%), var(--feature-pink), transparent 72%),
      radial-gradient(30% 36% at 24% 32%, var(--feature-violet), transparent 76%),
      radial-gradient(28% 32% at 78% 72%, var(--feature-warm), transparent 74%) !important;
    opacity: .48 !important;
    filter: saturate(.92) brightness(1.08) contrast(.88) drop-shadow(0 22px 34px rgba(0, 0, 0, .22)) !important;
    transform: none !important;
    mix-blend-mode: screen;
  }

  #honmaru-features .hm-feature:not(.hm-envelope-feature)::after {
    content: "" !important;
    position: absolute !important;
    inset: -36px -64px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 18% 24%, var(--feature-spark) 0 2px, transparent 3px),
      radial-gradient(circle at 82% 30%, rgba(255, 214, 148, .18) 0 2px, transparent 3px),
      radial-gradient(circle at 22% 78%, rgba(178, 102, 216, .18) 0 2px, transparent 3px),
      linear-gradient(116deg, transparent 0 42%, rgba(255, 176, 212, .08) 47%, transparent 56%) !important;
    opacity: .74 !important;
    mix-blend-mode: screen;
  }

  #honmaru-features .hm-feature:nth-child(2) { --feature-pos: 18% 48%; --feature-light: 35% 52%; }
  #honmaru-features .hm-feature:nth-child(3) { --feature-pos: 82% 50%; --feature-light: 65% 54%; }
  #honmaru-features .hm-feature:nth-child(4) { --feature-pos: 18% 46%; --feature-light: 36% 50%; }

  #honmaru-features .hm-feature:nth-child(3)::before {
    background:
      var(--feature-deco) 68% 50% / min(440px, 38vw) auto no-repeat,
      radial-gradient(46% 60% at 65% 54%, rgba(234, 78, 132, .12), transparent 72%),
      radial-gradient(30% 36% at 24% 32%, rgba(150, 78, 194, .10), transparent 76%),
      radial-gradient(28% 32% at 78% 72%, rgba(255, 162, 95, .06), transparent 74%) !important;
    opacity: .28 !important;
  }
}

#honmaru-features .hm-phone {
  width: min(278px, 78vw);
}

#honmaru-features .hm-phone .glow {
  background:
    radial-gradient(circle at 50% 56%, rgba(239, 82, 138, .24), transparent 58%),
    radial-gradient(ellipse at 50% 72%, rgba(121, 45, 119, .22), transparent 68%) !important;
  filter: blur(18px) !important;
}

#honmaru-features .hm-envelope-feature {
  background:
    radial-gradient(74% 52% at 54% 24%, rgba(84, 20, 58, .40), transparent 68%),
    radial-gradient(46% 34% at 80% 78%, rgba(241, 84, 136, .13), transparent 70%),
    linear-gradient(180deg, rgba(10, 3, 7, .96), rgba(22, 6, 17, .98)) !important;
}

#honmaru-features .hm-envelope-feature::before {
  background-image: url("assets/deco-envelope.webp?v=20260616-0953") !important;
  opacity: .28 !important;
  filter: saturate(.86) brightness(1.08) contrast(.86) !important;
}

#honmaru-features .hm-envelope-feature::after {
  background:
    radial-gradient(52% 34% at 50% 18%, rgba(10, 3, 7, .56), transparent 74%),
    radial-gradient(36% 30% at 78% 76%, rgba(255, 128, 174, .12), transparent 72%),
    linear-gradient(90deg, rgba(10, 3, 7, .72), transparent 30%, transparent 72%, rgba(10, 3, 7, .68)) !important;
}

#honmaru-features .hm-envelope-feature .envelope-scene-bg {
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 184, 218, .20) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 28%, rgba(255, 213, 146, .18) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 82%, rgba(255, 128, 174, .12), transparent 36%),
    linear-gradient(112deg, transparent 0 43%, rgba(255, 176, 212, .08) 48%, transparent 57%) !important;
  opacity: .9 !important;
}

#honmaru-features .hm-envelope-feature .hm-copy {
  background: radial-gradient(110% 100% at 50% 0%, rgba(9, 2, 7, .58), rgba(9, 2, 7, .18) 64%, transparent) !important;
}

@media (max-width: 760px) {
  #honmaru-preview::before {
    background:
      linear-gradient(180deg, rgba(8, 2, 6, .86), rgba(8, 2, 6, .34) 46%, rgba(8, 2, 6, .82)),
      url("assets/concepts/mute-back-ui-section-bg-v1.webp?v=20260623-0945") 78% center / auto 100% no-repeat !important;
    opacity: .24 !important;
  }

  #honmaru-preview .preview-scroll {
    grid-auto-columns: minmax(144px, 44vw);
  }

  #honmaru-features .hm-feature:not(.hm-envelope-feature) {
    padding: 34px 0 38px !important;
    margin-bottom: 82px !important;
  }

  #honmaru-features .hm-feature:not(.hm-envelope-feature)::before {
    inset: -30px -62px -42px !important;
    background:
      var(--feature-deco) center 50% / 118vw auto no-repeat,
      radial-gradient(ellipse at 50% 58%, var(--feature-pink), transparent 58%),
      radial-gradient(circle at 18% 36%, var(--feature-violet), transparent 26%),
      radial-gradient(circle at 84% 44%, var(--feature-warm), transparent 28%) !important;
    opacity: .42 !important;
    filter: saturate(.9) brightness(1.08) contrast(.88) !important;
    transform: none !important;
    mix-blend-mode: screen;
  }

  #honmaru-features .hm-feature:not(.hm-envelope-feature)::after {
    background:
      radial-gradient(circle at 18% 26%, rgba(255, 184, 218, .20) 0 2px, transparent 3px),
      radial-gradient(circle at 82% 22%, rgba(255, 213, 146, .16) 0 2px, transparent 3px),
      radial-gradient(ellipse at 50% 70%, rgba(255, 92, 150, .12), transparent 44%),
      radial-gradient(ellipse at 50% 78%, rgba(0, 0, 0, .30), transparent 58%) !important;
    opacity: .78 !important;
  }

  #honmaru-features .hm-feature:nth-child(2)::before,
  #honmaru-features .hm-feature:nth-child(4)::before {
    background-position: center 50%, center, center, center !important;
  }

  #honmaru-features .hm-feature:nth-child(3)::before {
    background:
      radial-gradient(circle at 18% 22%, rgba(255, 188, 222, .18) 0 2px, transparent 3px),
      radial-gradient(circle at 82% 24%, rgba(255, 213, 146, .14) 0 2px, transparent 3px),
      radial-gradient(ellipse at 50% 58%, rgba(234, 78, 132, .15), transparent 58%),
      radial-gradient(circle at 18% 36%, rgba(150, 78, 194, .10), transparent 26%),
      radial-gradient(circle at 84% 44%, rgba(255, 162, 95, .06), transparent 28%) !important;
    opacity: 1 !important;
  }

  #honmaru-features .hm-feature.reveal:nth-child(3):not(.hm-envelope-feature)::before {
    background:
      radial-gradient(circle at 18% 22%, rgba(255, 188, 222, .18) 0 2px, transparent 3px),
      radial-gradient(circle at 82% 24%, rgba(255, 213, 146, .14) 0 2px, transparent 3px),
      radial-gradient(ellipse at 50% 58%, rgba(234, 78, 132, .15), transparent 58%),
      radial-gradient(circle at 18% 36%, rgba(150, 78, 194, .10), transparent 26%),
      radial-gradient(circle at 84% 44%, rgba(255, 162, 95, .06), transparent 28%) !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  #honmaru-features .hm-feature.reveal:nth-child(3):not(.hm-envelope-feature)::after {
    background:
      radial-gradient(circle at 18% 26%, rgba(255, 184, 218, .20) 0 2px, transparent 3px),
      radial-gradient(circle at 82% 22%, rgba(255, 213, 146, .16) 0 2px, transparent 3px),
      radial-gradient(ellipse at 50% 70%, rgba(255, 92, 150, .10), transparent 44%),
      radial-gradient(ellipse at 50% 78%, rgba(0, 0, 0, .22), transparent 58%) !important;
    opacity: .76 !important;
  }

  #honmaru-features .hm-phone {
    width: min(218px, 64vw) !important;
  }

  #honmaru-features .hm-envelope-feature {
    min-height: 800px !important;
    background:
      radial-gradient(74% 34% at 50% 24%, rgba(84, 20, 58, .34), transparent 72%),
      linear-gradient(180deg, #0a0307 0%, #180711 48%, #090307 100%) !important;
  }

  #honmaru-features .hm-envelope-feature::before {
    opacity: .22 !important;
    background-size: auto 92% !important;
  }
}

/* 2026-06-23: remove all decorative background images.
   Keep actual product/UI images; remove only section/background ornaments. */
#hero::after,
#lock::after,
#honmaru-preview::before,
#reveal::before,
#honmaru-features::before,
#value::before,
#faq::before,
#cta::before,
#cute-features::before {
  background-image: none !important;
}

#hero::after,
#lock::after {
  display: none !important;
}

#hero::before {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.58), transparent 36%),
    linear-gradient(90deg, rgba(255,255,255,.62), transparent 34%, transparent 66%, rgba(255,232,241,.42)) !important;
}

#cute-features::before {
  background:
    linear-gradient(112deg, rgba(209, 81, 129, .12) 0 1px, transparent 1px 36%, rgba(255,255,255,.44) 36.2% 37%, transparent 37.2%),
    radial-gradient(82% 56% at 12% 70%, rgba(219, 94, 143, .12), transparent 70%) !important;
}

#lock {
  background:
    radial-gradient(48% 38% at 50% 35%, rgba(231, 98, 151, .18), transparent 72%),
    linear-gradient(180deg, #ffd7e6 0%, #8a3158 46%, #180611 100%) !important;
}

#honmaru-preview::before,
#reveal::before,
#honmaru-features::before,
#value::before,
#faq::before,
#cta::before {
  background:
    linear-gradient(120deg, transparent 0 31%, rgba(239,82,138,.10) 31.2% 32%, transparent 32.2% 68%, rgba(227,187,107,.08) 68.2% 69%, transparent 69.2%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.030) 0 1px, transparent 1px 92px) !important;
  opacity: .54 !important;
  filter: none !important;
  mix-blend-mode: screen !important;
}

#honmaru-preview::after,
#reveal::after,
#honmaru-features::after,
#value::after,
#faq::after,
#cta::after {
  background:
    radial-gradient(circle at 16% 21%, rgba(255, 213, 146, .18) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 76%, rgba(255, 118, 184, .16) 0 2px, transparent 3px),
    linear-gradient(105deg, transparent 0 45%, rgba(255, 151, 204, .08) 45.2% 46%, transparent 46.2%) !important;
  opacity: .58 !important;
}

#hero .site-edge-bear,
#hero .cute-deco,
#hero .hero-cute-layer,
.hero-phone .phone::after,
#lock .lock-smoke,
#honmaru-features .hm-feature:not(.hm-envelope-feature)::before,
#honmaru-features .hm-envelope-feature::before,
#honmaru-features .hm-envelope-feature .envelope-scene-bg {
  display: none !important;
  background-image: none !important;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature)::after,
#honmaru-features .hm-envelope-feature::after {
  background:
    radial-gradient(ellipse at 50% 70%, rgba(255,78,130,.12), transparent 42%),
    radial-gradient(ellipse at 50% 78%, rgba(0,0,0,.28), transparent 56%) !important;
  opacity: .46 !important;
}

#honmaru-features .hm-feature {
  background:
    radial-gradient(80% 88% at 50% 48%, rgba(72, 16, 55, .24), rgba(18, 4, 14, .08) 66%, transparent 100%) !important;
}

@media (max-width: 760px) {
  #hero::after,
  #lock::after {
    display: none !important;
  }

  #honmaru-preview::before,
  #reveal::before,
  #honmaru-features::before,
  #value::before,
  #faq::before,
  #cta::before {
    background:
      linear-gradient(180deg, rgba(12, 2, 10, .22), rgba(12, 2, 10, .04) 44%, rgba(12, 2, 10, .26)),
      repeating-linear-gradient(90deg, rgba(255,255,255,.026) 0 1px, transparent 1px 78px) !important;
  }
}

/* 2026-06-23: final per-section decoration split.
   Do not reuse the same background image across the major dark sections. */
#honmaru-preview::before {
  background:
    linear-gradient(90deg, rgba(12, 2, 10, .62), rgba(12, 2, 10, .18) 42%, rgba(12, 2, 10, .46)),
    url("assets/concepts/mute-back-ui-section-bg-v1.webp?v=20260623-1639") right center / cover no-repeat !important;
  opacity: .86 !important;
}

#reveal::before {
  background:
    radial-gradient(ellipse at 50% 44%, rgba(14, 2, 10, .30), rgba(14, 2, 10, .74) 72%),
    url("assets/concepts/mute-angel-devil-cat-characters-v3-wicked.webp?v=20260623-1639") center center / min(1180px, 110vw) auto no-repeat !important;
  opacity: .62 !important;
  filter: saturate(1.05) brightness(.92) contrast(1.05) !important;
}

#honmaru-features::before {
  background:
    linear-gradient(180deg, rgba(8, 2, 6, .86), rgba(8, 2, 6, .50) 38%, rgba(8, 2, 6, .88)),
    url("assets/generated-bg/secret-transition-side-decor-v1.webp?v=20260623-1639") center top / cover repeat-y !important;
  opacity: .52 !important;
  filter: saturate(.98) brightness(1.04) contrast(.96) !important;
}

#value::before {
  background:
    linear-gradient(90deg, rgba(10, 2, 8, .86), rgba(10, 2, 8, .24) 42%, rgba(10, 2, 8, .78)),
    url("assets/deco-mitsudan.webp?v=20260623-1639") left center / min(980px, 88vw) auto no-repeat !important;
  opacity: .70 !important;
  filter: saturate(.95) brightness(1.05) contrast(.94) !important;
}

#faq::before {
  background:
    linear-gradient(90deg, rgba(10, 2, 8, .78), rgba(10, 2, 8, .24) 44%, rgba(10, 2, 8, .86)),
    url("assets/deco-calendar.webp?v=20260623-1639") right center / min(920px, 86vw) auto no-repeat !important;
  opacity: .62 !important;
  filter: saturate(.92) brightness(1.02) contrast(.92) !important;
}

#cta::before {
  background:
    linear-gradient(90deg, rgba(10, 2, 8, .82), rgba(10, 2, 8, .22) 48%, rgba(10, 2, 8, .82)),
    url("assets/generated-bg/mute-cta-side-decor-v1.webp?v=20260623-1639") center center / cover no-repeat !important;
  opacity: .78 !important;
  filter: saturate(1.08) brightness(1.08) contrast(.98) !important;
}

#honmaru-preview::after {
  background:
    radial-gradient(circle at 16% 21%, rgba(255, 213, 146, .46) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 76%, rgba(255, 118, 184, .38) 0 2px, transparent 3px),
    linear-gradient(105deg, transparent 0 45%, rgba(255, 151, 204, .14) 45.2% 46%, transparent 46.2%) !important;
}

#reveal::after {
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 194, 226, .24), transparent 18%),
    radial-gradient(circle at 18% 30%, rgba(255, 213, 146, .30) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 31%, rgba(255, 118, 184, .34) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(8, 1, 7, .16), rgba(8, 1, 7, .38)) !important;
}

#honmaru-features::after {
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 208, 116, .34) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 22%, rgba(255, 119, 184, .32) 0 2px, transparent 3px),
    radial-gradient(circle at 16% 82%, rgba(179, 83, 213, .24) 0 2px, transparent 3px) !important;
}

#value::after {
  background:
    radial-gradient(circle at 18% 18%, rgba(244, 217, 147, .36) 0 3px, transparent 4px),
    radial-gradient(circle at 74% 78%, rgba(241, 84, 136, .22) 0 3px, transparent 4px),
    linear-gradient(118deg, transparent 0 40%, rgba(255, 172, 207, .08) 40.2% 41%, transparent 41.2%) !important;
}

#faq::after {
  background:
    radial-gradient(circle at 82% 20%, rgba(184, 99, 182, .26) 0 3px, transparent 4px),
    radial-gradient(circle at 20% 78%, rgba(244, 217, 147, .20) 0 3px, transparent 4px),
    linear-gradient(70deg, transparent 0 54%, rgba(255, 172, 207, .06) 54.2% 55%, transparent 55.2%) !important;
}

#cta::after {
  background:
    radial-gradient(circle at 18% 22%, rgba(244, 217, 147, .42) 0 4px, transparent 5px),
    radial-gradient(circle at 82% 26%, rgba(241, 84, 136, .34) 0 4px, transparent 5px),
    radial-gradient(circle at 50% 82%, rgba(184, 99, 182, .28) 0 5px, transparent 6px),
    linear-gradient(118deg, transparent 0 42%, rgba(255, 214, 147, .13) 42.2% 43.2%, transparent 43.4%) !important;
}

@media (max-width: 760px) {
  #honmaru-preview::before {
    background:
      linear-gradient(90deg, rgba(12, 2, 10, .58), rgba(12, 2, 10, .14) 44%, rgba(12, 2, 10, .38)),
      url("assets/concepts/mute-back-ui-section-bg-v1.webp?v=20260623-1639") 74% center / auto 100% no-repeat !important;
  }

  #reveal::before {
    background:
      radial-gradient(ellipse at 50% 44%, rgba(14, 2, 10, .30), rgba(14, 2, 10, .78) 72%),
      url("assets/concepts/mute-angel-devil-cat-characters-v3-wicked.webp?v=20260623-1639") center center / auto 78% no-repeat !important;
    opacity: .56 !important;
  }

  #honmaru-features::before {
    background:
      linear-gradient(180deg, rgba(8, 2, 6, .86), rgba(8, 2, 6, .48) 38%, rgba(8, 2, 6, .88)),
      url("assets/generated-bg/secret-transition-side-decor-v1.webp?v=20260623-1639") center top / auto 760px repeat-y !important;
  }

  #value::before {
    background:
      linear-gradient(180deg, rgba(10, 2, 8, .84), rgba(10, 2, 8, .30) 48%, rgba(10, 2, 8, .86)),
      url("assets/deco-mitsudan.webp?v=20260623-1639") center top / auto 94% no-repeat !important;
    opacity: .54 !important;
  }

  #faq::before {
    background:
      linear-gradient(180deg, rgba(10, 2, 8, .82), rgba(10, 2, 8, .28) 48%, rgba(10, 2, 8, .86)),
      url("assets/deco-calendar.webp?v=20260623-1639") center top / auto 92% no-repeat !important;
    opacity: .50 !important;
  }

  #cta::before {
    background:
      linear-gradient(180deg, rgba(10, 2, 8, .78), rgba(10, 2, 8, .18) 48%, rgba(10, 2, 8, .86)),
      url("assets/generated-bg/mute-cta-side-decor-v1.webp?v=20260623-1639") center top / auto 100% no-repeat !important;
    opacity: .76 !important;
  }
}

/* 2026-06-23: background color/decor refresh only. Keep copy, layout and section structure unchanged. */
body {
  background:
    linear-gradient(180deg, #fff3f1 0%, #ffe4ee 32%, #160611 58%, #080206 100%) !important;
}

#hero,
#cute-features,
#tease,
#lock,
#honmaru-preview,
#reveal,
#honmaru-features,
#value,
#faq,
#cta {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
}

#hero .wrap,
#cute-features .wrap,
#tease .wrap,
#lock .lock-scene,
#honmaru-preview .wrap,
#reveal .wrap,
#honmaru-features .wrap,
#value .wrap,
#faq .wrap,
#cta .wrap {
  position: relative;
  z-index: 3;
}

#hero .hero-rich-decor,
#hero .site-edge-bear,
#hero .cute-deco,
#hero .hero-cute-layer {
  opacity: 0 !important;
  visibility: hidden !important;
}

#hero {
  background:
    radial-gradient(60% 48% at 71% 45%, rgba(255, 255, 255, .62), transparent 66%),
    radial-gradient(46% 38% at 29% 46%, rgba(255, 255, 255, .72), transparent 68%),
    linear-gradient(118deg, #fff8f0 0%, #ffe2eb 42%, #e9d7e4 70%, #f8bfd9 100%) !important;
}

#hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(116deg, transparent 0 18%, rgba(197, 78, 122, .12) 18.2% 19%, transparent 19.2% 52%, rgba(255, 255, 255, .44) 52.2% 53%, transparent 53.2%),
    linear-gradient(64deg, transparent 0 30%, rgba(255, 139, 181, .18) 30.2% 31.2%, transparent 31.4% 72%, rgba(130, 61, 96, .08) 72.2% 73%, transparent 73.2%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 96px) !important;
  opacity: .8 !important;
}

#hero::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 8% max(18px, 4vw) 10% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 12% 22%, rgba(203, 81, 126, .26) 0 5px, transparent 6px),
    radial-gradient(circle at 88% 20%, rgba(114, 54, 91, .20) 0 4px, transparent 5px),
    radial-gradient(circle at 18% 82%, rgba(255, 185, 106, .26) 0 4px, transparent 5px),
    radial-gradient(circle at 84% 78%, rgba(203, 81, 126, .22) 0 5px, transparent 6px),
    linear-gradient(135deg, transparent 0 43%, rgba(255, 255, 255, .38) 43.2% 44%, transparent 44.2% 57%, rgba(147, 68, 103, .12) 57.2% 58%, transparent 58.2%) !important;
  border: 1px solid rgba(255, 255, 255, .36);
  opacity: .74 !important;
}

#cute-features {
  background:
    radial-gradient(64% 48% at 31% 31%, rgba(255, 255, 255, .66), transparent 68%),
    linear-gradient(180deg, #fff7f2 0%, #ffe3ee 48%, #ffd4e5 100%) !important;
}

#cute-features::before {
  background:
    linear-gradient(112deg, rgba(199, 78, 123, .16) 0 1px, transparent 1px 42%, rgba(255, 255, 255, .54) 42.2% 43%, transparent 43.2%),
    linear-gradient(68deg, transparent 0 28%, rgba(255, 164, 196, .22) 28.2% 29.6%, transparent 29.8%),
    radial-gradient(80% 58% at 16% 72%, rgba(204, 91, 138, .16), transparent 70%) !important;
  opacity: 1 !important;
  filter: none !important;
}

#cute-features::after {
  inset: 8% 7% 9% !important;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 188, 105, .24) 0 4px, transparent 5px),
    radial-gradient(circle at 86% 26%, rgba(201, 82, 125, .22) 0 5px, transparent 6px),
    radial-gradient(circle at 72% 82%, rgba(126, 70, 105, .16) 0 4px, transparent 5px),
    linear-gradient(124deg, transparent 0 47%, rgba(255, 255, 255, .34) 47.2% 48%, transparent 48.2%) !important;
  opacity: .9 !important;
}

#tease,
#lock {
  background:
    radial-gradient(48% 38% at 50% 35%, rgba(231, 98, 151, .22), transparent 72%),
    linear-gradient(180deg, #ffd7e6 0%, #8a3158 46%, #180611 100%) !important;
}

#tease::before,
#lock::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(130deg, transparent 0 38%, rgba(255, 232, 241, .18) 38.2% 39%, transparent 39.2% 64%, rgba(255, 118, 169, .12) 64.2% 65%, transparent 65.2%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 84px) !important;
}

#honmaru-preview,
#honmaru-features,
#value,
#faq,
#cta {
  background:
    radial-gradient(58% 42% at 50% 22%, rgba(198, 55, 102, .22), transparent 72%),
    radial-gradient(34% 32% at 82% 18%, rgba(119, 55, 145, .16), transparent 72%),
    linear-gradient(180deg, #0b0207 0%, #1a0712 48%, #080206 100%) !important;
}

#honmaru-preview::before,
#honmaru-features::before,
#value::before,
#faq::before,
#cta::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(120deg, transparent 0 31%, rgba(239, 82, 138, .14) 31.2% 32%, transparent 32.2% 68%, rgba(227, 187, 107, .10) 68.2% 69%, transparent 69.2%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 92px) !important;
  opacity: .86 !important;
  filter: none !important;
}

#honmaru-preview::after,
#honmaru-features::after,
#value::after,
#faq::after,
#cta::after {
  content: "" !important;
  position: absolute !important;
  inset: 5% 5% 6% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 15% 22%, rgba(244, 217, 147, .34) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 24%, rgba(241, 84, 136, .26) 0 3px, transparent 4px),
    radial-gradient(circle at 20% 80%, rgba(184, 99, 182, .22) 0 3px, transparent 4px),
    radial-gradient(circle at 84% 78%, rgba(244, 217, 147, .20) 0 3px, transparent 4px),
    linear-gradient(118deg, transparent 0 44%, rgba(255, 172, 207, .08) 44.2% 45%, transparent 45.2%) !important;
  opacity: .72 !important;
  mix-blend-mode: screen;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature)::after,
#honmaru-features .hm-envelope-feature .envelope-scene-bg {
  background:
    linear-gradient(118deg, transparent 0 41%, rgba(255, 176, 212, .12) 41.2% 42%, transparent 42.2% 58%, rgba(244, 217, 147, .08) 58.2% 59%, transparent 59.2%),
    radial-gradient(circle at 18% 24%, rgba(255, 184, 218, .16) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 30%, rgba(255, 213, 146, .14) 0 2px, transparent 3px) !important;
}

#value .value-row,
#faq .faq-item,
#cta .waitlist-note {
  position: relative;
  z-index: 3;
}

@media (max-width: 760px) {
  #hero {
    background:
      radial-gradient(86% 42% at 50% 33%, rgba(255, 255, 255, .82), transparent 68%),
      linear-gradient(180deg, #fff7f0 0%, #ffe1ec 52%, #e8d4e2 100%) !important;
  }

  #hero::after {
    inset: 12% 14px 9% !important;
    opacity: .62 !important;
  }

  #cute-features::before {
    background:
      linear-gradient(112deg, rgba(199, 78, 123, .12) 0 1px, transparent 1px 38%, rgba(255, 255, 255, .46) 38.2% 39.2%, transparent 39.4%),
      radial-gradient(88% 46% at 50% 18%, rgba(255, 255, 255, .62), transparent 72%) !important;
    opacity: 1 !important;
  }

  #tease,
  #lock {
    background:
      radial-gradient(76% 34% at 50% 30%, rgba(255, 198, 223, .26), transparent 72%),
      linear-gradient(180deg, #ffd6e5 0%, #7b294f 44%, #12040d 100%) !important;
  }

  #honmaru-preview::before,
  #honmaru-features::before,
  #value::before,
  #faq::before,
  #cta::before {
    background:
      linear-gradient(126deg, transparent 0 34%, rgba(239, 82, 138, .12) 34.2% 35.2%, transparent 35.4% 66%, rgba(227, 187, 107, .09) 66.2% 67.2%, transparent 67.4%) !important;
  }

  #honmaru-preview::after,
  #honmaru-features::after,
  #value::after,
  #faq::after,
  #cta::after {
    inset: 4% 12px 5% !important;
    opacity: .64 !important;
  }
}

/* 2026-06-23: generated image ornament layers. These sit above the color base but below all copy/UI. */
#hero::after {
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255, 248, 243, .88) 28%, rgba(255, 248, 243, .54) 44%, rgba(255, 235, 244, .42) 56%, rgba(255, 230, 241, .78) 72%),
    url("assets/generated-bg/fuwa-side-decor-v1.webp?v=20260623-1248") center center / cover no-repeat !important;
  border: 0 !important;
  opacity: .92 !important;
}

#cute-features::after {
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255, 247, 242, .74) 27%, rgba(255, 247, 242, .50) 44%, rgba(255, 235, 244, .44) 57%, rgba(255, 225, 238, .66) 74%),
    url("assets/generated-bg/fuwa-side-decor-v1.webp?v=20260623-1248") center center / cover no-repeat !important;
  opacity: .74 !important;
}

#tease::after,
#lock::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(75, 16, 43, .42) 0%, rgba(115, 35, 68, .18) 24%, rgba(126, 46, 78, .38) 50%, rgba(34, 7, 20, .50) 78%, rgba(16, 4, 12, .78) 100%),
    url("assets/generated-bg/secret-transition-side-decor-v1.webp?v=20260623-1248") center center / cover no-repeat !important;
  opacity: .72 !important;
  mix-blend-mode: soft-light;
}

#honmaru-preview::after,
#honmaru-features::after,
#value::after,
#faq::after {
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(9, 2, 7, .74) 0%, rgba(9, 2, 7, .58) 42%, rgba(9, 2, 7, .20) 70%, rgba(9, 2, 7, .10) 100%),
    url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1248") center center / cover no-repeat !important;
  opacity: .76 !important;
  mix-blend-mode: screen;
}

#honmaru-features::after {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(9, 2, 7, .88) 0%, rgba(9, 2, 7, .74) 42%, rgba(9, 2, 7, .36) 72%, rgba(9, 2, 7, .18) 100%),
    url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1248") center center / cover no-repeat !important;
  opacity: .58 !important;
}

#cta::after {
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(8, 1, 6, .76) 0%, rgba(8, 1, 6, .54) 38%, rgba(8, 1, 6, .18) 68%, rgba(8, 1, 6, .08) 100%),
    url("assets/generated-bg/mute-cta-side-decor-v1.webp?v=20260623-1248") center center / cover no-repeat !important;
  opacity: .82 !important;
  mix-blend-mode: screen;
}

#honmaru-preview .preview-scroll,
#honmaru-features .hm-feature,
#value .value-list,
#faq .faq-item,
#cta .footer {
  position: relative;
  z-index: 3;
}

@media (max-width: 760px) {
  #hero::after {
    background:
      linear-gradient(90deg, rgba(255, 248, 243, .92) 0%, rgba(255, 248, 243, .64) 36%, rgba(255, 235, 244, .66) 64%, rgba(255, 228, 240, .86) 100%),
      url("assets/generated-bg/fuwa-side-decor-v1.webp?v=20260623-1248") 50% center / auto 100% no-repeat !important;
    opacity: .72 !important;
  }

  #cute-features::after {
    background:
      linear-gradient(90deg, rgba(255, 247, 242, .88), rgba(255, 235, 244, .70)),
      url("assets/generated-bg/fuwa-side-decor-v1.webp?v=20260623-1248") center center / auto 100% no-repeat !important;
    opacity: .50 !important;
  }

  #tease::after,
  #lock::after {
    background:
      linear-gradient(180deg, rgba(255, 204, 224, .20), rgba(43, 8, 27, .76)),
      url("assets/generated-bg/secret-transition-side-decor-v1.webp?v=20260623-1248") center center / auto 100% no-repeat !important;
    opacity: .44 !important;
  }

  #honmaru-preview::after,
  #honmaru-features::after,
  #value::after,
  #faq::after {
    background:
      radial-gradient(ellipse at 50% 42%, rgba(9, 2, 7, .84) 0%, rgba(9, 2, 7, .66) 46%, rgba(9, 2, 7, .28) 80%),
      url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1248") center center / auto 100% no-repeat !important;
    opacity: .46 !important;
  }

  #honmaru-features::after {
    background:
      radial-gradient(ellipse at 50% 46%, rgba(9, 2, 7, .90) 0%, rgba(9, 2, 7, .72) 48%, rgba(9, 2, 7, .32) 82%),
      url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1248") center center / auto 100% no-repeat !important;
    opacity: .38 !important;
  }

  #cta::after {
    background:
      radial-gradient(ellipse at 50% 44%, rgba(8, 1, 6, .86) 0%, rgba(8, 1, 6, .66) 46%, rgba(8, 1, 6, .30) 80%),
      url("assets/generated-bg/mute-cta-side-decor-v1.webp?v=20260623-1248") center center / auto 100% no-repeat !important;
    opacity: .50 !important;
  }
}

/* 2026-07-02: add the supplied angel/devil cat artwork to the "...BUT" tease
   background without covering the copy. The source has a pale background, so
   multiply blending lets the white field recede into the existing pink scene. */
#tease .tease-character-bg {
  position: absolute !important;
  left: 50% !important;
  bottom: clamp(10px, 4.5vw, 54px) !important;
  width: min(760px, 92vw) !important;
  aspect-ratio: 716 / 473 !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: url("assets/generated-bg/tease-character/angel-devil-cats.png?v=20260702-tease-cats") center bottom / contain no-repeat !important;
  opacity: .34 !important;
  mix-blend-mode: multiply !important;
  filter: saturate(.95) brightness(.98) contrast(.96) drop-shadow(0 30px 42px rgba(47, 17, 42, .26)) !important;
}

#tease .wrap {
  position: relative !important;
  z-index: 3 !important;
}

@media (max-width: 760px) {
  #tease .tease-character-bg {
    bottom: clamp(168px, 25vw, 230px) !important;
    width: min(640px, 138vw) !important;
    opacity: .34 !important;
  }
}

@media (max-width: 420px) {
  #tease .tease-character-bg {
    bottom: 210px !important;
    width: 142vw !important;
    opacity: .36 !important;
  }
}

/* 2026-06-23: brighten the back-room explanation backgrounds while keeping the hidden-room mood. */
#honmaru-preview {
  background:
    radial-gradient(60% 40% at 50% 22%, rgba(232, 83, 137, .30), transparent 72%),
    radial-gradient(38% 34% at 82% 16%, rgba(151, 82, 182, .22), transparent 74%),
    linear-gradient(180deg, #160711 0%, #241024 50%, #10050d 100%) !important;
}

#honmaru-features {
  background:
    radial-gradient(72% 30% at 50% 0%, rgba(150, 48, 101, .36), transparent 72%),
    radial-gradient(42% 30% at 84% 15%, rgba(151, 82, 182, .18), transparent 74%),
    linear-gradient(180deg, #13060f 0%, #241025 46%, #10050d 100%) !important;
}

#honmaru-preview::before {
  opacity: .34 !important;
  filter: saturate(.96) brightness(1.18) contrast(.88) !important;
}

#honmaru-preview::after {
  background:
    radial-gradient(circle at 20% 26%, rgba(255, 188, 222, .34) 0 2px, transparent 3px),
    radial-gradient(circle at 79% 24%, rgba(255, 211, 146, .30) 0 2px, transparent 3px),
    radial-gradient(circle at 15% 76%, rgba(171, 94, 205, .24) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 74%, rgba(255, 142, 190, .28) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 52%, rgba(8, 2, 6, .18), transparent 70%) !important;
  opacity: .78 !important;
}

#honmaru-features::before {
  background:
    linear-gradient(180deg, rgba(8, 2, 6, .78), rgba(8, 2, 6, .46) 34%, rgba(8, 2, 6, .72)),
    url("assets/concepts/mute-back-ui-section-bg-v1.webp?v=20260623-0945") right top / min(1180px, 98vw) auto no-repeat !important;
  opacity: .24 !important;
  filter: saturate(.98) brightness(1.18) contrast(.86) !important;
}

#honmaru-features::after {
  background:
    radial-gradient(44% 18% at 50% 8%, rgba(255, 138, 186, .18), transparent 72%),
    linear-gradient(180deg, rgba(8, 2, 6, .18), transparent 18%, transparent 84%, rgba(8, 2, 6, .46)) !important;
  opacity: .88 !important;
}

@media (max-width: 760px) {
  #honmaru-preview {
    background:
      radial-gradient(64% 36% at 50% 38%, rgba(241, 84, 111, .26), transparent 70%),
      radial-gradient(72% 42% at 18% 64%, rgba(156, 76, 150, .22), transparent 72%),
      linear-gradient(180deg, #12050e 0%, #211022 48%, #0f050d 100%) !important;
  }

  #honmaru-preview::before {
    opacity: .30 !important;
  }

  #honmaru-preview::after,
  #honmaru-features::after {
    background:
      radial-gradient(ellipse at 50% 42%, rgba(9, 2, 7, .68) 0%, rgba(9, 2, 7, .48) 46%, rgba(9, 2, 7, .18) 80%),
      url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1248") center center / auto 100% no-repeat !important;
    opacity: .36 !important;
  }

  #honmaru-features::before {
    background:
      linear-gradient(180deg, rgba(8, 2, 6, .76), rgba(8, 2, 6, .42) 26%, rgba(8, 2, 6, .70) 100%),
      url("assets/concepts/mute-back-ui-section-bg-v1.webp?v=20260623-0945") 79% top / auto min(760px, 72vh) no-repeat !important;
    opacity: .30 !important;
  }
}

/* 2026-06-23: character-world final pass.
   Keep the LP structure intact while making the back-room decoration visible in every dark section. */
#honmaru-preview,
#reveal,
#honmaru-features,
#value,
#faq,
#cta {
  background:
    radial-gradient(46% 30% at 50% 18%, rgba(255, 111, 173, .24), transparent 72%),
    radial-gradient(34% 26% at 17% 38%, rgba(120, 60, 150, .24), transparent 74%),
    radial-gradient(36% 30% at 85% 72%, rgba(233, 94, 159, .18), transparent 76%),
    linear-gradient(180deg, #160814 0%, #2a122b 42%, #120512 100%) !important;
}

#honmaru-preview::before,
#reveal::before,
#honmaru-features::before,
#value::before,
#faq::before,
#cta::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(9, 2, 8, .50) 0%, rgba(9, 2, 8, .18) 23%, rgba(9, 2, 8, .02) 50%, rgba(9, 2, 8, .16) 76%, rgba(9, 2, 8, .52) 100%),
    url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1518") center center / cover no-repeat !important;
  opacity: .96 !important;
  filter: saturate(1.18) brightness(1.28) contrast(.96) !important;
  mix-blend-mode: screen !important;
}

#honmaru-preview::after,
#reveal::after,
#honmaru-features::after,
#value::after,
#faq::after,
#cta::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 13% 17%, rgba(255, 208, 116, .46) 0 2px, transparent 3px),
    radial-gradient(circle at 24% 67%, rgba(255, 118, 184, .34) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 20%, rgba(255, 170, 214, .44) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 78%, rgba(255, 214, 136, .34) 0 2px, transparent 3px),
    radial-gradient(circle at 43% 11%, rgba(190, 98, 221, .28) 0 2px, transparent 3px),
    linear-gradient(100deg, transparent 0 42%, rgba(255, 151, 204, .15) 42.2% 43.4%, transparent 43.6% 62%, rgba(255, 220, 148, .10) 62.2% 63%, transparent 63.2%),
    radial-gradient(ellipse at 50% 50%, rgba(18, 5, 18, .54), rgba(18, 5, 18, .22) 48%, rgba(18, 5, 18, .04) 74%, transparent 100%) !important;
  opacity: .88 !important;
  mix-blend-mode: screen !important;
}

#honmaru-preview .wrap,
#reveal .wrap,
#honmaru-features .wrap,
#value .wrap,
#faq .wrap,
#cta .wrap {
  position: relative;
  z-index: 3;
}

#honmaru-preview {
  background:
    radial-gradient(62% 38% at 50% 48%, rgba(255, 96, 158, .30), transparent 72%),
    radial-gradient(72% 58% at 50% 100%, rgba(89, 23, 74, .48), transparent 78%),
    linear-gradient(180deg, #180816 0%, #321633 54%, #170716 100%) !important;
}

#honmaru-preview::before {
  background:
    linear-gradient(90deg, rgba(15, 4, 13, .58) 0%, rgba(15, 4, 13, .12) 38%, rgba(15, 4, 13, .10) 62%, rgba(15, 4, 13, .58) 100%),
    url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1518") center center / cover no-repeat !important;
  opacity: 1 !important;
}

#honmaru-preview::after {
  background:
    radial-gradient(ellipse at 50% 54%, rgba(28, 6, 24, .28), transparent 72%),
    radial-gradient(circle at 14% 20%, rgba(255, 208, 116, .52) 0 2px, transparent 3px),
    radial-gradient(circle at 18% 77%, rgba(241, 84, 136, .42) 0 2px, transparent 3px),
    radial-gradient(circle at 83% 21%, rgba(255, 159, 207, .48) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 80%, rgba(255, 216, 143, .38) 0 2px, transparent 3px),
    linear-gradient(105deg, transparent 0 45%, rgba(255, 142, 197, .16) 45.2% 46%, transparent 46.2% 56%, rgba(255, 235, 171, .10) 56.2% 57%, transparent 57.2%) !important;
  opacity: .94 !important;
}

#reveal {
  background:
    radial-gradient(54% 34% at 50% 32%, rgba(255, 119, 180, .22), transparent 70%),
    radial-gradient(86% 62% at 50% 0%, rgba(74, 20, 66, .50), transparent 72%),
    linear-gradient(180deg, #12040f 0%, #230c23 50%, #10030d 100%) !important;
}

#reveal::before {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(20, 5, 17, .28), rgba(20, 5, 17, .54) 58%, rgba(20, 5, 17, .38) 100%),
    url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1518") center center / cover no-repeat !important;
  opacity: .74 !important;
}

#reveal::after {
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 194, 226, .26), transparent 18%),
    radial-gradient(circle at 18% 30%, rgba(255, 213, 146, .38) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 31%, rgba(255, 118, 184, .40) 0 2px, transparent 3px),
    radial-gradient(circle at 26% 70%, rgba(188, 94, 220, .26) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 73%, rgba(255, 213, 146, .28) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(8, 1, 7, .10), rgba(8, 1, 7, .36)) !important;
  opacity: .76 !important;
}

#honmaru-features {
  background:
    radial-gradient(68% 26% at 50% 4%, rgba(255, 105, 170, .28), transparent 74%),
    radial-gradient(40% 28% at 80% 18%, rgba(159, 81, 197, .24), transparent 72%),
    linear-gradient(180deg, #160714 0%, #2b132e 44%, #120512 100%) !important;
}

#honmaru-features::before {
  background:
    linear-gradient(180deg, rgba(11, 2, 9, .24), rgba(11, 2, 9, .06) 42%, rgba(11, 2, 9, .28)),
    url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1518") center top / cover repeat-y !important;
  opacity: .86 !important;
}

#honmaru-features::after {
  background:
    linear-gradient(180deg, rgba(19, 5, 18, .34), transparent 15%, transparent 84%, rgba(19, 5, 18, .48)),
    radial-gradient(circle at 12% 16%, rgba(255, 208, 116, .44) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 22%, rgba(255, 119, 184, .40) 0 2px, transparent 3px),
    radial-gradient(circle at 16% 82%, rgba(179, 83, 213, .32) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 78%, rgba(255, 214, 136, .30) 0 2px, transparent 3px) !important;
  opacity: .92 !important;
}

#honmaru-features .hm-feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(80% 88% at 50% 48%, rgba(72, 16, 55, .32), rgba(18, 4, 14, .08) 66%, transparent 100%) !important;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature)::before {
  content: "" !important;
  position: absolute !important;
  inset: -18% -12% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    var(--feature-deco) var(--feature-pos, center 50%) / min(760px, 126vw) auto no-repeat,
    radial-gradient(56% 42% at var(--feature-light, 50% 50%), rgba(255, 111, 173, .28), transparent 74%),
    linear-gradient(115deg, transparent 0 42%, rgba(255, 178, 216, .14) 42.2% 43%, transparent 43.2% 60%, rgba(255, 220, 150, .10) 60.2% 61%, transparent 61.2%) !important;
  opacity: .74 !important;
  filter: saturate(1.08) brightness(1.16) contrast(.96) !important;
  mix-blend-mode: screen !important;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature)::after,
#honmaru-features .hm-envelope-feature .envelope-scene-bg {
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 213, 146, .34) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 28%, rgba(255, 128, 191, .32) 0 2px, transparent 3px),
    radial-gradient(circle at 24% 80%, rgba(174, 84, 211, .26) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 78%, rgba(255, 213, 146, .24) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 52%, rgba(16, 3, 13, .34), transparent 72%) !important;
  opacity: .92 !important;
  mix-blend-mode: screen !important;
}

#honmaru-features .hm-copy,
#honmaru-features .hm-phone {
  position: relative;
  z-index: 2;
}

#value::before,
#faq::before,
#cta::before {
  background:
    linear-gradient(90deg, rgba(9, 2, 8, .58) 0%, rgba(9, 2, 8, .20) 31%, rgba(9, 2, 8, .08) 50%, rgba(9, 2, 8, .22) 70%, rgba(9, 2, 8, .60) 100%),
    url("assets/generated-bg/mute-cta-side-decor-v1.webp?v=20260623-1518") center center / cover no-repeat !important;
  opacity: .82 !important;
}

#value .value-row,
#faq .faq-item,
#cta .waitlist-note,
#cta .footer {
  position: relative;
  z-index: 3;
}

#value .vhead h2,
#faq h2,
#cta h2 {
  position: relative;
  z-index: 3;
  text-shadow: 0 2px 18px rgba(8, 1, 7, .72);
}

#value .value-row,
#faq .faq-item {
  background: rgba(24, 6, 21, .38) !important;
  border-color: rgba(255, 156, 204, .18) !important;
  box-shadow: 0 18px 38px rgba(8, 1, 7, .20);
}

#value .vt,
#faq .faq-q,
#faq .faq-a,
#cta p,
#cta .micro {
  color: rgba(255, 242, 248, .82) !important;
  text-shadow: 0 1px 14px rgba(8, 1, 7, .54);
}

#faq .qmk,
#faq .ar,
#value .vn {
  color: rgba(255, 191, 222, .92) !important;
}

@media (max-width: 760px) {
  #honmaru-preview,
  #reveal,
  #honmaru-features,
  #value,
  #faq,
  #cta {
    background:
      radial-gradient(86% 34% at 50% 30%, rgba(255, 108, 171, .24), transparent 72%),
      radial-gradient(82% 44% at 50% 72%, rgba(105, 34, 98, .36), transparent 78%),
      linear-gradient(180deg, #170715 0%, #2a122b 48%, #120512 100%) !important;
  }

  #honmaru-preview::before,
  #reveal::before,
  #honmaru-features::before,
  #value::before,
  #faq::before,
  #cta::before {
    background:
      linear-gradient(180deg, rgba(12, 2, 10, .28), rgba(12, 2, 10, .08) 44%, rgba(12, 2, 10, .32)),
      url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1518") center top / auto 100% repeat-y !important;
    opacity: .90 !important;
    filter: saturate(1.24) brightness(1.34) contrast(.95) !important;
  }

  #honmaru-preview::after,
  #reveal::after,
  #honmaru-features::after,
  #value::after,
  #faq::after,
  #cta::after {
    background:
      radial-gradient(circle at 12% 16%, rgba(255, 213, 146, .44) 0 2px, transparent 3px),
      radial-gradient(circle at 86% 19%, rgba(255, 119, 184, .40) 0 2px, transparent 3px),
      radial-gradient(circle at 17% 78%, rgba(180, 83, 215, .30) 0 2px, transparent 3px),
      radial-gradient(circle at 84% 80%, rgba(255, 214, 136, .30) 0 2px, transparent 3px),
      linear-gradient(105deg, transparent 0 44%, rgba(255, 151, 204, .12) 44.2% 45.2%, transparent 45.4%) !important;
    opacity: .84 !important;
  }

  #honmaru-preview::before {
    background:
      linear-gradient(180deg, rgba(13, 2, 10, .18), rgba(13, 2, 10, .04) 44%, rgba(13, 2, 10, .30)),
      url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1518") center top / auto 100% repeat-y !important;
    opacity: .96 !important;
  }

  #honmaru-features .hm-feature:not(.hm-envelope-feature)::before {
    inset: -10% -16% !important;
    background:
      var(--feature-deco) center 50% / 128vw auto no-repeat,
      radial-gradient(74% 48% at 50% 48%, rgba(255, 111, 173, .28), transparent 74%),
      linear-gradient(112deg, transparent 0 43%, rgba(255, 178, 216, .12) 43.2% 44%, transparent 44.2%) !important;
    opacity: .70 !important;
  }

  #honmaru-features .hm-feature:nth-child(3)::before {
    background:
      var(--feature-deco) center 46% / 108vw auto no-repeat,
      radial-gradient(74% 48% at 50% 48%, rgba(255, 111, 173, .26), transparent 74%),
      linear-gradient(112deg, transparent 0 43%, rgba(255, 178, 216, .12) 43.2% 44%, transparent 44.2%) !important;
  }

  #value::before,
  #faq::before,
  #cta::before {
    background:
      linear-gradient(180deg, rgba(12, 2, 10, .34), rgba(12, 2, 10, .10) 44%, rgba(12, 2, 10, .38)),
      url("assets/generated-bg/mute-cta-side-decor-v1.webp?v=20260623-1518") center top / auto 100% repeat-y !important;
    opacity: .82 !important;
  }
}

/* 2026-06-23: make the character decoration itself enter the viewport, especially on tall mobile sections. */
#honmaru-preview::before,
#reveal::before,
#honmaru-features::before {
  background:
    linear-gradient(90deg, rgba(12, 2, 10, .54) 0%, rgba(12, 2, 10, .18) 36%, rgba(12, 2, 10, .08) 58%, rgba(12, 2, 10, .36) 100%),
    url("assets/concepts/mute-back-ui-section-bg-v1.webp?v=20260623-1518") right center / cover no-repeat,
    url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1518") center center / cover no-repeat !important;
  opacity: .88 !important;
}

#reveal::before {
  background:
    linear-gradient(90deg, rgba(12, 2, 10, .62), rgba(12, 2, 10, .12) 44%, rgba(12, 2, 10, .36)),
    url("assets/concepts/mute-back-ui-section-bg-v1.webp?v=20260623-1518") right center / cover no-repeat,
    url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1518") center center / cover no-repeat !important;
  opacity: .80 !important;
}

#honmaru-features::before {
  background:
    linear-gradient(180deg, rgba(12, 2, 10, .34), rgba(12, 2, 10, .06) 45%, rgba(12, 2, 10, .34)),
    url("assets/concepts/mute-back-ui-section-bg-v1.webp?v=20260623-1518") right top / min(1180px, 108vw) auto repeat-y,
    url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1518") center top / cover repeat-y !important;
  opacity: .92 !important;
}

#honmaru-preview::after,
#reveal::after,
#honmaru-features::after,
#value::after,
#faq::after,
#cta::after {
  background:
    radial-gradient(circle at 11% 12%, rgba(255, 213, 146, .50) 0 2px, transparent 3px),
    radial-gradient(circle at 22% 42%, rgba(255, 118, 184, .40) 0 2px, transparent 3px),
    radial-gradient(circle at 16% 78%, rgba(189, 90, 226, .34) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 16%, rgba(255, 128, 191, .46) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 51%, rgba(255, 213, 146, .34) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 84%, rgba(188, 94, 220, .30) 0 2px, transparent 3px),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 64px, rgba(255, 151, 204, .055) 65px 66px, transparent 67px 132px),
    linear-gradient(105deg, transparent 0 43%, rgba(255, 151, 204, .15) 43.2% 44.2%, transparent 44.4% 61%, rgba(255, 220, 148, .09) 61.2% 62%, transparent 62.2%) !important;
  opacity: .95 !important;
}

@media (max-width: 760px) {
  #honmaru-preview::before {
    background:
      linear-gradient(90deg, rgba(12, 2, 10, .46), rgba(12, 2, 10, .08) 44%, rgba(12, 2, 10, .30)),
      url("assets/concepts/mute-back-ui-section-bg-v1.webp?v=20260623-1518") 73% top / auto 100% no-repeat,
      url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1518") center top / auto 100% no-repeat !important;
    opacity: .96 !important;
  }

  #reveal::before {
    background:
      linear-gradient(90deg, rgba(12, 2, 10, .58), rgba(12, 2, 10, .10) 46%, rgba(12, 2, 10, .36)),
      url("assets/concepts/mute-back-ui-section-bg-v1.webp?v=20260623-1518") 73% top / auto 100% no-repeat,
      url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1518") center top / auto 100% no-repeat !important;
    opacity: .88 !important;
  }

  #honmaru-features::before {
    background:
      linear-gradient(180deg, rgba(12, 2, 10, .30), rgba(12, 2, 10, .04) 46%, rgba(12, 2, 10, .30)),
      url("assets/concepts/mute-back-ui-section-bg-v1.webp?v=20260623-1518") 73% top / auto 780px repeat-y,
      url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1518") center top / auto 780px repeat-y !important;
    opacity: .96 !important;
  }

  #value::before,
  #faq::before,
  #cta::before {
    background:
      linear-gradient(90deg, rgba(12, 2, 10, .48), rgba(12, 2, 10, .10) 48%, rgba(12, 2, 10, .36)),
      url("assets/generated-bg/mute-cta-side-decor-v1.webp?v=20260623-1518") center top / auto 760px repeat-y,
      url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1518") center top / auto 760px repeat-y !important;
    opacity: .90 !important;
  }

  #honmaru-preview::after,
  #reveal::after,
  #honmaru-features::after,
  #value::after,
  #faq::after,
  #cta::after {
    background:
      radial-gradient(circle at 10% 12%, rgba(255, 213, 146, .50) 0 2px, transparent 3px),
      radial-gradient(circle at 20% 40%, rgba(255, 118, 184, .40) 0 2px, transparent 3px),
      radial-gradient(circle at 14% 77%, rgba(189, 90, 226, .34) 0 2px, transparent 3px),
      radial-gradient(circle at 90% 15%, rgba(255, 128, 191, .46) 0 2px, transparent 3px),
      radial-gradient(circle at 82% 52%, rgba(255, 213, 146, .34) 0 2px, transparent 3px),
      radial-gradient(circle at 90% 84%, rgba(188, 94, 220, .30) 0 2px, transparent 3px),
      repeating-radial-gradient(circle at 50% 50%, transparent 0 58px, rgba(255, 151, 204, .065) 59px 60px, transparent 61px 118px),
      linear-gradient(105deg, transparent 0 43%, rgba(255, 151, 204, .13) 43.2% 44.2%, transparent 44.4%) !important;
    opacity: .96 !important;
  }
}

/* 2026-06-23 final background-image removal. Keep UI/content images only. */
#hero::after,
#lock::after {
  display: none !important;
  background: none !important;
  background-image: none !important;
}

#hero::before {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.58), transparent 36%),
    linear-gradient(90deg, rgba(255,255,255,.62), transparent 34%, transparent 66%, rgba(255,232,241,.42)) !important;
}

#cute-features::before,
#cute-features::after {
  background-image: none !important;
}

#cute-features::before {
  background:
    linear-gradient(112deg, rgba(209, 81, 129, .12) 0 1px, transparent 1px 36%, rgba(255,255,255,.44) 36.2% 37%, transparent 37.2%),
    radial-gradient(82% 56% at 12% 70%, rgba(219, 94, 143, .12), transparent 70%) !important;
}

#cute-features::after {
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 188, 105, .16) 0 4px, transparent 5px),
    linear-gradient(124deg, transparent 0 47%, rgba(255,255,255,.22) 47.2% 48%, transparent 48.2%) !important;
}

#lock {
  background:
    radial-gradient(48% 38% at 50% 35%, rgba(231, 98, 151, .18), transparent 72%),
    linear-gradient(180deg, #ffd7e6 0%, #8a3158 46%, #180611 100%) !important;
}

#honmaru-preview::before,
#reveal::before,
#honmaru-features::before,
#value::before,
#faq::before,
#cta::before {
  background:
    linear-gradient(120deg, transparent 0 31%, rgba(239,82,138,.10) 31.2% 32%, transparent 32.2% 68%, rgba(227,187,107,.08) 68.2% 69%, transparent 69.2%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.030) 0 1px, transparent 1px 92px) !important;
  background-image:
    linear-gradient(120deg, transparent 0 31%, rgba(239,82,138,.10) 31.2% 32%, transparent 32.2% 68%, rgba(227,187,107,.08) 68.2% 69%, transparent 69.2%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.030) 0 1px, transparent 1px 92px) !important;
  opacity: .54 !important;
  filter: none !important;
}

#honmaru-preview::after,
#reveal::after,
#honmaru-features::after,
#value::after,
#faq::after,
#cta::after {
  background:
    radial-gradient(circle at 16% 21%, rgba(255, 213, 146, .18) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 76%, rgba(255, 118, 184, .16) 0 2px, transparent 3px),
    linear-gradient(105deg, transparent 0 45%, rgba(255, 151, 204, .08) 45.2% 46%, transparent 46.2%) !important;
  background-image:
    radial-gradient(circle at 16% 21%, rgba(255, 213, 146, .18) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 76%, rgba(255, 118, 184, .16) 0 2px, transparent 3px),
    linear-gradient(105deg, transparent 0 45%, rgba(255, 151, 204, .08) 45.2% 46%, transparent 46.2%) !important;
  opacity: .58 !important;
}

#hero .hero-rich-decor,
#hero .site-edge-bear,
#hero .cute-deco,
#hero .hero-cute-layer,
.hero-phone .phone::after,
#lock .lock-smoke,
#honmaru-features .hm-feature:not(.hm-envelope-feature)::before,
#honmaru-features .hm-envelope-feature::before,
#honmaru-features .hm-envelope-feature .envelope-scene-bg {
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* 2026-06-23 final-final: remove all major-section decorative background images. */
#honmaru-preview::before {
  background:
    linear-gradient(90deg, rgba(12, 2, 10, .62), rgba(12, 2, 10, .18) 42%, rgba(12, 2, 10, .46)),
    radial-gradient(64% 42% at 50% 50%, rgba(255, 96, 158, .16), transparent 72%) !important;
  opacity: .70 !important;
}

#reveal::before {
  background:
    radial-gradient(ellipse at 50% 44%, rgba(14, 2, 10, .30), rgba(14, 2, 10, .74) 72%),
    linear-gradient(120deg, transparent 0 31%, rgba(239,82,138,.10) 31.2% 32%, transparent 32.2% 68%, rgba(227,187,107,.08) 68.2% 69%, transparent 69.2%) !important;
  opacity: .58 !important;
}

#honmaru-features::before {
  background:
    linear-gradient(180deg, rgba(8, 2, 6, .86), rgba(8, 2, 6, .50) 38%, rgba(8, 2, 6, .88)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.026) 0 1px, transparent 1px 92px) !important;
  opacity: .46 !important;
}

#value::before {
  background:
    linear-gradient(90deg, rgba(10, 2, 8, .86), rgba(10, 2, 8, .24) 42%, rgba(10, 2, 8, .78)),
    radial-gradient(46% 38% at 20% 24%, rgba(227,187,107,.14), transparent 72%) !important;
  opacity: .58 !important;
}

#faq::before {
  background:
    linear-gradient(90deg, rgba(10, 2, 8, .78), rgba(10, 2, 8, .24) 44%, rgba(10, 2, 8, .86)),
    radial-gradient(42% 36% at 82% 18%, rgba(184,99,182,.16), transparent 72%) !important;
  opacity: .52 !important;
}

#cta::before {
  background:
    linear-gradient(90deg, rgba(10, 2, 8, .82), rgba(10, 2, 8, .22) 48%, rgba(10, 2, 8, .82)),
    radial-gradient(54% 42% at 50% 20%, rgba(244,217,147,.16), transparent 70%) !important;
  opacity: .60 !important;
}

@media (max-width: 760px) {
  #honmaru-preview::before {
    background:
      linear-gradient(90deg, rgba(12, 2, 10, .58), rgba(12, 2, 10, .14) 44%, rgba(12, 2, 10, .38)),
      radial-gradient(86% 34% at 50% 30%, rgba(255, 108, 171, .16), transparent 72%) !important;
  }

  #reveal::before {
    background:
      radial-gradient(ellipse at 50% 44%, rgba(14, 2, 10, .30), rgba(14, 2, 10, .78) 72%),
      repeating-linear-gradient(90deg, rgba(255,255,255,.026) 0 1px, transparent 1px 78px) !important;
    opacity: .56 !important;
  }

  #honmaru-features::before {
    background:
      linear-gradient(180deg, rgba(8, 2, 6, .86), rgba(8, 2, 6, .48) 38%, rgba(8, 2, 6, .88)),
      repeating-linear-gradient(90deg, rgba(255,255,255,.026) 0 1px, transparent 1px 78px) !important;
  }

  #value::before {
    background:
      linear-gradient(180deg, rgba(10, 2, 8, .84), rgba(10, 2, 8, .30) 48%, rgba(10, 2, 8, .86)),
      radial-gradient(46% 38% at 20% 24%, rgba(227,187,107,.14), transparent 72%) !important;
    opacity: .54 !important;
  }

  #faq::before {
    background:
      linear-gradient(180deg, rgba(10, 2, 8, .82), rgba(10, 2, 8, .28) 48%, rgba(10, 2, 8, .86)),
      radial-gradient(42% 36% at 82% 18%, rgba(184,99,182,.16), transparent 72%) !important;
    opacity: .50 !important;
  }

  #cta::before {
    background:
      linear-gradient(180deg, rgba(10, 2, 8, .78), rgba(10, 2, 8, .18) 48%, rgba(10, 2, 8, .86)),
      radial-gradient(54% 42% at 50% 20%, rgba(244,217,147,.16), transparent 70%) !important;
    opacity: .76 !important;
  }
}

/* 2026-06-24: revert to the state before generated background decorations. */
#tease::after {
  background:
    linear-gradient(180deg, rgba(255, 204, 224, .20), rgba(43, 8, 27, .76)) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 204, 224, .20), rgba(43, 8, 27, .76)) !important;
}

/* 2026-06-24: make the back-room typography softer and cuter without changing copy. */
#tease,
#lock,
#honmaru-preview,
#reveal,
#honmaru-features,
#value,
#faq,
#cta {
  font-family: var(--f-round) !important;
}

#tease h2,
#tease .tease-actually,
#tease .tease-screen-tap,
#lock .lock-title,
#lock .lock-ko,
#lock .lock-back,
#reveal h2,
#reveal .reveal-sub,
#reveal .safety-note,
#honmaru-preview .preview-words,
#honmaru-features .hm-sec-head h2,
#honmaru-features .app-description,
#honmaru-features .hm-feature h3,
#honmaru-features .hm-feature p,
#value .vhead h2,
#value .value-row .vt,
#faq h2,
#faq .faq-q,
#faq .faq-a,
#cta h2,
#cta p,
#cta .waitlist-note p,
#cta .btn-dark {
  font-family: var(--f-round) !important;
  letter-spacing: 0 !important;
}

#lock .lock-title,
#reveal h2,
#honmaru-features .hm-feature h3,
#value .vhead h2,
#faq h2,
#cta h2 {
  font-weight: 900 !important;
  text-shadow:
    0 2px 0 rgba(64, 13, 43, .5),
    0 0 20px rgba(255, 156, 196, .26) !important;
}

#honmaru-features .hm-feature h3 {
  background: linear-gradient(120deg, #ffd7e6, #ff8ebc 54%, #f5d18a) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

#cta .btn-dark {
  font-weight: 900 !important;
}

@media (max-width: 520px) {
  #reveal h2 {
    max-width: min(100%, 11em) !important;
    font-size: clamp(29px, 7.5vw, 33px) !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #reveal h2 .em {
    display: inline !important;
    white-space: normal !important;
  }

  #honmaru-features .hm-feature h3,
  #value .vhead h2,
  #faq h2,
  #cta h2 {
    font-size: clamp(27px, 7vw, 33px) !important;
    line-height: 1.45 !important;
  }
}

/* 2026-06-24: smartphone UI assets are replacements, not overlays.
   Show each supplied phone image at its native ratio and remove old frame-fit offsets. */
#honmaru-preview .preview-phone,
#honmaru-features .hm-phone .phone {
  aspect-ratio: 398 / 854 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#honmaru-preview .preview-phone img,
#honmaru-features .hm-phone img {
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

#honmaru-preview .preview-phone > :not(img),
#honmaru-features .hm-phone .phone > :not(img) {
  display: none !important;
}

#honmaru-features .hm-phone .glow,
#honmaru-features .hm-phone::before,
#honmaru-features .hm-phone::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* 2026-06-24: front UI phone alignment fix.
   The three supplied front-side PNGs are not the same pixel width. Without a
   common device box, height-based rendering makes one phone wider than the
   others and creates a visible frame/screen shift. */
#hero .hero-phone .phone,
#cute-features .cute-ui-slide.single-ui,
#cute-features .cute-ui-slide.single-ui.tall-ui {
  aspect-ratio: 852 / 1846 !important;
}

#hero .hero-phone .phone {
  width: 100% !important;
}

#hero .hero-phone .phone img,
#cute-features .cute-ui-slide.single-ui img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: fill !important;
}

#cute-features .cute-ui-scroll.split-ui {
  align-items: flex-start !important;
}

#cute-features .cute-ui-slide.single-ui,
#cute-features .cute-ui-slide.single-ui.tall-ui {
  flex: 0 0 clamp(106px, 16.2vw, 207px) !important;
  width: clamp(106px, 16.2vw, 207px) !important;
  max-width: clamp(106px, 16.2vw, 207px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 520px) {
  #cute-features .cute-ui-slide.single-ui,
  #cute-features .cute-ui-slide.single-ui.tall-ui {
    flex-basis: clamp(104px, 29vw, 116px) !important;
    width: clamp(104px, 29vw, 116px) !important;
    max-width: clamp(104px, 29vw, 116px) !important;
  }
}

/* 2026-06-24: brighten the back-feature explanation background without changing its pink-purple mood. */
#honmaru-features {
  background:
    radial-gradient(70% 30% at 50% 5%, rgba(255, 150, 194, .36), transparent 72%),
    radial-gradient(50% 34% at 84% 20%, rgba(190, 116, 217, .28), transparent 74%),
    radial-gradient(54% 38% at 16% 74%, rgba(255, 189, 138, .16), transparent 76%),
    linear-gradient(180deg, #32122c 0%, #54284f 45%, #2a1028 100%) !important;
}

#honmaru-features::before {
  background:
    linear-gradient(180deg, rgba(37, 9, 31, .34), rgba(37, 9, 31, .10) 42%, rgba(37, 9, 31, .38)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.034) 0 1px, transparent 1px 92px) !important;
  opacity: .34 !important;
}

#honmaru-features::after {
  background:
    radial-gradient(circle at 16% 21%, rgba(255, 220, 159, .26) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 76%, rgba(255, 143, 198, .24) 0 2px, transparent 3px),
    linear-gradient(105deg, transparent 0 45%, rgba(255, 180, 216, .11) 45.2% 46%, transparent 46.2%) !important;
  opacity: .68 !important;
}

#honmaru-features .hm-feature {
  background:
    radial-gradient(80% 88% at 50% 48%, rgba(114, 39, 90, .32), rgba(43, 12, 37, .12) 66%, transparent 100%) !important;
}

@media (max-width: 760px) {
  #honmaru-features {
    background:
      radial-gradient(86% 34% at 50% 28%, rgba(255, 139, 190, .34), transparent 72%),
      radial-gradient(82% 44% at 50% 74%, rgba(143, 67, 137, .42), transparent 78%),
      linear-gradient(180deg, #35132f 0%, #552950 48%, #291027 100%) !important;
  }

  #honmaru-features::before {
    background:
      linear-gradient(180deg, rgba(37, 9, 31, .30), rgba(37, 9, 31, .08) 44%, rgba(37, 9, 31, .34)),
      repeating-linear-gradient(90deg, rgba(255,255,255,.034) 0 1px, transparent 1px 78px) !important;
    opacity: .36 !important;
  }
}

/* 2026-06-26: use the supplied screen-only phone UI assets directly. */
#honmaru-features .hm-phone,
#honmaru-features .hm-envelope-feature .hm-phone {
  width: clamp(256px, 20.35vw, 278px) !important;
  max-width: clamp(256px, 20.35vw, 278px) !important;
  justify-self: center !important;
}

#honmaru-features .hm-phone .phone,
#honmaru-features .hm-envelope-feature .hm-phone .phone {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
  height: auto !important;
}

#honmaru-features .hm-phone img,
#honmaru-features .hm-envelope-feature .hm-phone img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

@media (max-width: 760px) {
  #honmaru-features .hm-phone,
  #honmaru-features .hm-envelope-feature .hm-phone {
    width: min(218px, 62vw) !important;
    max-width: min(218px, 62vw) !important;
  }
}

/* 2026-06-26: use screen-only phone images directly.
   No CSS device frame, crop, inset, or label/table frame: the PNG is the source. */
#honmaru-preview .preview-phone,
#honmaru-features .hm-phone .phone,
#honmaru-features .hm-envelope-feature .hm-phone .phone {
  box-sizing: border-box !important;
  aspect-ratio: auto !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

#honmaru-preview .preview-phone img,
#honmaru-features .hm-phone img,
#honmaru-features .hm-envelope-feature .hm-phone img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  transform: none !important;
}

#honmaru-features .hm-feature.reveal,
#honmaru-features .hm-feature.reveal.in,
#honmaru-features .hm-feature.reveal:nth-child(odd),
#honmaru-features .hm-feature.reveal:nth-child(even) {
  transform: none !important;
}

/* 2026-06-30: match each front-side smartphone UI frame to the actual PNG ratio.
   The home image is 378x767, while calendar/memo are 352x763. */
#hero .hero-phone .phone {
  aspect-ratio: 378 / 767 !important;
}

#cute-features .cute-ui-slide.single-ui:first-child {
  aspect-ratio: 378 / 767 !important;
}

#cute-features .cute-ui-slide.single-ui:nth-child(2),
#cute-features .cute-ui-slide.single-ui:nth-child(3),
#cute-features .cute-ui-slide.single-ui.tall-ui {
  aspect-ratio: 352 / 763 !important;
}

#hero .hero-phone .phone img,
#cute-features .cute-ui-slide.single-ui img {
  height: auto !important;
  object-fit: contain !important;
}

/* 2026-06-25: My Melody / Kuromi toned background palette.
   Keep the story contrast, but reduce the over-bright surface pink and the
   harsh red-black back-room mood. */
body {
  background:
    linear-gradient(180deg, #f8dbe8 0%, #efbfd5 30%, #372445 58%, #201428 100%) !important;
}

#hero {
  background:
    radial-gradient(58% 44% at 68% 42%, rgba(255, 248, 251, .48), transparent 68%),
    radial-gradient(46% 36% at 28% 46%, rgba(255, 251, 253, .52), transparent 70%),
    linear-gradient(118deg, #fae8ee 0%, #f4cadb 44%, #e6cfe6 72%, #eab1cf 100%) !important;
}

#cute-features {
  background:
    radial-gradient(64% 46% at 32% 32%, rgba(255, 248, 252, .48), transparent 70%),
    linear-gradient(180deg, #fae8ee 0%, #f1c5d8 52%, #eeb4cd 100%) !important;
}

#hero::after {
  background:
    linear-gradient(90deg, rgba(251, 232, 239, .88) 0%, rgba(250, 220, 232, .60) 44%, rgba(236, 199, 223, .50) 64%, rgba(232, 177, 207, .76) 100%),
    url("assets/generated-bg/fuwa-side-decor-v1.webp?v=20260623-1248") center center / cover no-repeat !important;
  opacity: .70 !important;
  filter: saturate(.72) brightness(.96) contrast(.90) !important;
  mix-blend-mode: normal !important;
}

#honmaru-features .hm-feature:nth-child(3)::before {
  background:
    radial-gradient(58% 68% at var(--mute-feature-overlay-x, 50%) 50%, rgba(35, 17, 45, .74), rgba(35, 17, 45, .30) 50%, transparent 74%),
    linear-gradient(90deg, rgba(25, 11, 34, .34) 0%, rgba(25, 11, 34, .06) 25%, rgba(25, 11, 34, .03) 48%, rgba(25, 11, 34, .06) 74%, rgba(25, 11, 34, .34) 100%),
    var(--mute-feature-side-decor) center center / cover no-repeat !important;
  opacity: .42 !important;
  transform: none !important;
}

#cute-features::after {
  background:
    linear-gradient(90deg, rgba(251, 232, 239, .78) 0%, rgba(250, 220, 232, .58) 48%, rgba(236, 199, 223, .46) 68%, rgba(232, 177, 207, .64) 100%),
    url("assets/generated-bg/fuwa-side-decor-v1.webp?v=20260623-1248") center center / cover no-repeat !important;
  opacity: .58 !important;
  filter: saturate(.70) brightness(.95) contrast(.88) !important;
  mix-blend-mode: normal !important;
}

#tease,
#lock {
  background:
    radial-gradient(62% 36% at 50% 32%, rgba(246, 196, 219, .28), transparent 72%),
    linear-gradient(180deg, #efc0d6 0%, #8f5a88 44%, #2b1834 100%) !important;
}

#tease::after,
#lock::after {
  background:
    linear-gradient(180deg, rgba(249, 210, 227, .22), rgba(54, 30, 65, .74)),
    url("assets/generated-bg/secret-transition-side-decor-v1.webp?v=20260623-1248") center center / cover no-repeat !important;
  opacity: .36 !important;
  filter: hue-rotate(16deg) saturate(.62) brightness(1.03) contrast(.86) !important;
  mix-blend-mode: soft-light !important;
}

#honmaru-preview,
#reveal,
#honmaru-features,
#value,
#faq,
#cta {
  background:
    radial-gradient(48% 30% at 50% 18%, rgba(205, 142, 207, .24), transparent 72%),
    radial-gradient(36% 28% at 18% 40%, rgba(148, 106, 178, .24), transparent 74%),
    radial-gradient(38% 30% at 84% 74%, rgba(226, 151, 198, .16), transparent 76%),
    linear-gradient(180deg, #25162f 0%, #3a244a 45%, #22142d 100%) !important;
}

#honmaru-preview::before,
#reveal::before,
#honmaru-features::before,
#value::before,
#faq::before,
#cta::before {
  background:
    linear-gradient(90deg, rgba(26, 14, 35, .42) 0%, rgba(26, 14, 35, .14) 28%, rgba(26, 14, 35, .04) 50%, rgba(26, 14, 35, .16) 74%, rgba(26, 14, 35, .44) 100%),
    url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260623-1518") center center / cover no-repeat !important;
  opacity: .56 !important;
  filter: hue-rotate(22deg) saturate(.52) brightness(1.12) contrast(.78) !important;
  mix-blend-mode: screen !important;
}

#honmaru-preview::after,
#reveal::after,
#honmaru-features::after,
#value::after,
#faq::after,
#cta::after {
  background:
    radial-gradient(circle at 14% 18%, rgba(244, 215, 158, .26) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 22%, rgba(235, 173, 216, .30) 0 2px, transparent 3px),
    radial-gradient(circle at 24% 76%, rgba(184, 139, 216, .22) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 80%, rgba(244, 215, 158, .18) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 52%, rgba(32, 18, 42, .34), rgba(32, 18, 42, .12) 48%, transparent 76%),
    linear-gradient(104deg, transparent 0 43%, rgba(232, 178, 220, .08) 43.2% 44.2%, transparent 44.4% 62%, rgba(244, 220, 160, .06) 62.2% 63%, transparent 63.2%) !important;
  opacity: .54 !important;
  mix-blend-mode: screen !important;
}

#honmaru-preview {
  background:
    radial-gradient(60% 36% at 50% 48%, rgba(214, 144, 210, .22), transparent 72%),
    radial-gradient(70% 56% at 50% 100%, rgba(86, 54, 106, .42), transparent 78%),
    linear-gradient(180deg, #261730 0%, #402751 54%, #24152e 100%) !important;
}

#reveal {
  background:
    radial-gradient(54% 34% at 50% 32%, rgba(220, 155, 215, .20), transparent 70%),
    radial-gradient(86% 62% at 50% 0%, rgba(76, 49, 98, .44), transparent 72%),
    linear-gradient(180deg, #24142d 0%, #392446 50%, #21122a 100%) !important;
}

#honmaru-features {
  background:
    radial-gradient(72% 30% at 50% 6%, rgba(219, 154, 211, .24), transparent 74%),
    radial-gradient(50% 34% at 84% 20%, rgba(166, 121, 200, .24), transparent 74%),
    radial-gradient(54% 38% at 16% 74%, rgba(239, 196, 160, .12), transparent 76%),
    linear-gradient(180deg, #2a1835 0%, #452b55 46%, #24152e 100%) !important;
}

#honmaru-features .hm-feature {
  background:
    radial-gradient(80% 88% at 50% 48%, rgba(116, 74, 130, .24), rgba(47, 26, 61, .14) 66%, transparent 100%) !important;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature)::before {
  opacity: .42 !important;
  filter: hue-rotate(18deg) saturate(.55) brightness(1.08) contrast(.82) !important;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature)::after,
#honmaru-features .hm-envelope-feature .envelope-scene-bg {
  background:
    radial-gradient(circle at 18% 22%, rgba(244, 215, 158, .22) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 28%, rgba(235, 173, 216, .22) 0 2px, transparent 3px),
    radial-gradient(circle at 24% 80%, rgba(184, 139, 216, .18) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 52%, rgba(34, 18, 42, .26), transparent 72%) !important;
}

@media (max-width: 760px) {
  #hero {
    background:
      radial-gradient(86% 42% at 50% 33%, rgba(255, 248, 252, .62), transparent 68%),
      linear-gradient(180deg, #fae8ee 0%, #f2c5d8 54%, #e6cfe6 100%) !important;
  }

  #hero::after {
    background:
      linear-gradient(90deg, rgba(251, 232, 239, .86), rgba(236, 199, 223, .66)),
      url("assets/generated-bg/fuwa-side-decor-v1.webp?v=20260623-1248") 50% center / auto 100% no-repeat !important;
    opacity: .54 !important;
  }

  #cute-features::after {
    background:
      linear-gradient(90deg, rgba(251, 232, 239, .82), rgba(236, 199, 223, .64)),
      url("assets/generated-bg/fuwa-side-decor-v1.webp?v=20260623-1248") center center / auto 100% no-repeat !important;
    opacity: .40 !important;
  }

  #tease,
  #lock {
    background:
      radial-gradient(76% 34% at 50% 30%, rgba(246, 196, 219, .24), transparent 72%),
      linear-gradient(180deg, #edbfd5 0%, #7c4b7c 44%, #261630 100%) !important;
  }

  #honmaru-preview,
  #reveal,
  #honmaru-features,
  #value,
  #faq,
  #cta {
    background:
      radial-gradient(78% 36% at 50% 28%, rgba(213, 151, 210, .22), transparent 72%),
      radial-gradient(82% 44% at 50% 74%, rgba(104, 70, 128, .36), transparent 78%),
      linear-gradient(180deg, #281832 0%, #3f284e 48%, #21142a 100%) !important;
  }

  #honmaru-preview::before,
  #reveal::before,
  #honmaru-features::before,
  #value::before,
  #faq::before,
  #cta::before {
    opacity: .42 !important;
  }

  #honmaru-preview::after,
  #reveal::after,
  #honmaru-features::after,
  #value::after,
  #faq::after,
  #cta::after {
    opacity: .44 !important;
  }
}

/* 2026-06-30: direct generated smartphone UI assets.
   The generated PNG is the deliverable; the LP must not crop, mask, frame, or stretch it. */
#honmaru-preview .preview-scroll {
  display: flex !important;
  grid-template-columns: none !important;
  gap: clamp(18px, 3vw, 30px) !important;
  align-items: flex-start !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x mandatory !important;
}

#honmaru-preview .preview-phone.direct-phone-ui,
#honmaru-features .hm-phone .phone.direct-phone-ui,
#honmaru-features .hm-envelope-feature .hm-phone .phone.direct-phone-ui {
  box-sizing: border-box !important;
  aspect-ratio: auto !important;
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 28px 58px rgba(0, 0, 0, .38)) !important;
}

#honmaru-preview .preview-phone.direct-phone-ui {
  flex: 0 0 clamp(218px, 22vw, 292px) !important;
  width: clamp(218px, 22vw, 292px) !important;
  max-width: clamp(218px, 22vw, 292px) !important;
  scroll-snap-align: start !important;
}

#honmaru-features .hm-phone,
#honmaru-features .hm-envelope-feature .hm-phone {
  width: clamp(270px, 22vw, 320px) !important;
  max-width: clamp(270px, 22vw, 320px) !important;
}

#honmaru-preview .preview-phone.direct-phone-ui img,
#honmaru-features .hm-phone .phone.direct-phone-ui img,
#honmaru-features .hm-envelope-feature .hm-phone .phone.direct-phone-ui img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center top !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

@media (max-width: 760px) {
  #honmaru-preview .preview-phone.direct-phone-ui {
    flex-basis: min(74vw, 278px) !important;
    width: min(74vw, 278px) !important;
    max-width: min(74vw, 278px) !important;
  }

  #honmaru-features .hm-phone,
  #honmaru-features .hm-envelope-feature .hm-phone {
    width: min(82vw, 300px) !important;
    max-width: min(82vw, 300px) !important;
  }
}

/* 2026-07-02: restore the earlier black-cat reference UI direction.
   These assets already include the device frame, so the LP should present them
   as complete reference mockups instead of wrapping or cropping them. */
#honmaru-preview .preview-phone.reference-phone-ui,
#honmaru-features .hm-phone .phone.reference-phone-ui,
#honmaru-features .hm-envelope-feature .hm-phone .phone.reference-phone-ui {
  box-sizing: border-box !important;
  aspect-ratio: 355 / 820 !important;
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 28px 58px rgba(0, 0, 0, .42)) !important;
}

#honmaru-preview .preview-phone.reference-phone-ui {
  flex: 0 0 clamp(178px, 18vw, 238px) !important;
  width: clamp(178px, 18vw, 238px) !important;
  max-width: clamp(178px, 18vw, 238px) !important;
  scroll-snap-align: start !important;
}

#honmaru-features .hm-phone,
#honmaru-features .hm-envelope-feature .hm-phone {
  width: clamp(252px, 20vw, 300px) !important;
  max-width: clamp(252px, 20vw, 300px) !important;
}

#honmaru-preview .preview-phone.reference-phone-ui img,
#honmaru-features .hm-phone .phone.reference-phone-ui img,
#honmaru-features .hm-envelope-feature .hm-phone .phone.reference-phone-ui img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: fill !important;
  object-position: center top !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

@media (max-width: 760px) {
  #honmaru-preview .preview-phone.reference-phone-ui {
    flex-basis: min(59vw, 224px) !important;
    width: min(59vw, 224px) !important;
    max-width: min(59vw, 224px) !important;
  }

  #honmaru-features .hm-phone,
  #honmaru-features .hm-envelope-feature .hm-phone {
    width: min(72vw, 272px) !important;
    max-width: min(72vw, 272px) !important;
  }
}

/* 2026-07-02: use the regenerated smartphone UI images as-is.
   Keep their own device frame and native aspect ratio; only the LP display box changes. */
#honmaru-preview .preview-phone.regenerated-phone-ui,
#honmaru-features .hm-phone .phone.regenerated-phone-ui,
#honmaru-features .hm-envelope-feature .hm-phone .phone.regenerated-phone-ui {
  box-sizing: border-box !important;
  aspect-ratio: auto !important;
  height: auto !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: clamp(34px, 9%, 54px) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 30px 62px rgba(0, 0, 0, .46)) !important;
}

#honmaru-preview .preview-phone.regenerated-phone-ui {
  flex: 0 0 clamp(188px, 18.5vw, 246px) !important;
  width: clamp(188px, 18.5vw, 246px) !important;
  max-width: clamp(188px, 18.5vw, 246px) !important;
  scroll-snap-align: start !important;
}

#honmaru-preview .preview-phone.regenerated-phone-ui.regenerated-home-ui {
  flex-basis: clamp(229px, 22.5vw, 300px) !important;
  width: clamp(229px, 22.5vw, 300px) !important;
  max-width: clamp(229px, 22.5vw, 300px) !important;
}

#honmaru-features .hm-phone:has(.regenerated-phone-ui),
#honmaru-features .hm-envelope-feature .hm-phone:has(.regenerated-phone-ui) {
  width: clamp(258px, 20.5vw, 306px) !important;
  max-width: clamp(258px, 20.5vw, 306px) !important;
}

#honmaru-features .hm-phone:has(.regenerated-home-ui) {
  width: clamp(314px, 25vw, 372px) !important;
  max-width: min(86vw, 372px) !important;
}

#honmaru-preview .preview-phone.regenerated-phone-ui img,
#honmaru-features .hm-phone .phone.regenerated-phone-ui img,
#honmaru-features .hm-envelope-feature .hm-phone .phone.regenerated-phone-ui img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center top !important;
  border: 0 !important;
  border-radius: inherit !important;
  transform: none !important;
}

#lock .passcode-img {
  display: block !important;
  width: auto !important;
  max-width: min(76vw, 340px) !important;
  height: auto !important;
  max-height: min(78svh, 720px) !important;
  object-fit: contain !important;
  border-radius: clamp(36px, 8vw, 54px) !important;
}

@media (max-width: 760px) {
  #honmaru-preview .preview-phone.regenerated-phone-ui {
    flex-basis: min(61vw, 230px) !important;
    width: min(61vw, 230px) !important;
    max-width: min(61vw, 230px) !important;
  }

  #honmaru-preview .preview-phone.regenerated-phone-ui.regenerated-home-ui {
    flex-basis: min(74vw, 280px) !important;
    width: min(74vw, 280px) !important;
    max-width: min(74vw, 280px) !important;
  }

  #honmaru-features .hm-phone:has(.regenerated-phone-ui),
  #honmaru-features .hm-envelope-feature .hm-phone:has(.regenerated-phone-ui) {
    width: min(73vw, 276px) !important;
    max-width: min(73vw, 276px) !important;
  }

  #honmaru-features .hm-phone:has(.regenerated-home-ui) {
    width: min(86vw, 336px) !important;
    max-width: min(86vw, 336px) !important;
  }

  #lock .passcode-img {
    max-width: min(82vw, 320px) !important;
    max-height: min(72svh, 660px) !important;
  }
}

/* 2026-07-02: generated per-section side decorations for the attached MUTE UI sections.
   The artwork is intentionally used as a soft overlay; center masks keep copy and phone UI readable. */
#lock::after {
  background:
    linear-gradient(180deg, rgba(244, 190, 219, .08), rgba(30, 13, 38, .30)),
    radial-gradient(52% 62% at 50% 47%, rgba(46, 22, 54, .64), rgba(46, 22, 54, .22) 52%, transparent 76%),
    url("assets/generated-bg/section-decor-20260702/lock-side-decor.webp?v=20260702-section-side-decor") center center / cover no-repeat !important;
  opacity: .44 !important;
  filter: saturate(1.06) brightness(1.03) contrast(.92) !important;
  mix-blend-mode: normal !important;
}

#honmaru-features .hm-feature:nth-child(2) {
  --mute-feature-side-decor: url("assets/generated-bg/section-decor-20260702/talk-side-decor.webp?v=20260702-section-side-decor");
  --mute-feature-overlay-x: 58%;
}

#honmaru-features .hm-feature:nth-child(3) {
  --mute-feature-side-decor: url("assets/generated-bg/section-decor-20260702/trash-side-decor.webp?v=20260702-section-side-decor");
  --mute-feature-overlay-x: 44%;
}

#honmaru-features .hm-feature:nth-child(4) {
  --mute-feature-side-decor: url("assets/generated-bg/section-decor-20260702/anger-calendar-side-decor.webp?v=20260702-section-side-decor");
  --mute-feature-overlay-x: 56%;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature)::before {
  inset: -16% calc(50% - 50vw) !important;
  background:
    radial-gradient(58% 68% at var(--mute-feature-overlay-x, 50%) 50%, rgba(35, 17, 45, .74), rgba(35, 17, 45, .30) 50%, transparent 74%),
    linear-gradient(90deg, rgba(25, 11, 34, .34) 0%, rgba(25, 11, 34, .06) 25%, rgba(25, 11, 34, .03) 48%, rgba(25, 11, 34, .06) 74%, rgba(25, 11, 34, .34) 100%),
    var(--mute-feature-side-decor) center center / cover no-repeat !important;
  opacity: .42 !important;
  filter: saturate(1.04) brightness(1.05) contrast(.86) !important;
  mix-blend-mode: normal !important;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature)::after {
  background:
    radial-gradient(50% 68% at var(--mute-feature-overlay-x, 50%) 48%, rgba(30, 13, 39, .54), rgba(30, 13, 39, .18) 58%, transparent 76%),
    linear-gradient(90deg, rgba(18, 7, 24, .34), transparent 25%, transparent 76%, rgba(18, 7, 24, .34)) !important;
  opacity: .78 !important;
  mix-blend-mode: normal !important;
}

#honmaru-features .hm-envelope-feature::before {
  background-image: url("assets/generated-bg/section-decor-20260702/secret-letter-side-decor.webp?v=20260702-section-side-decor") !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: .36 !important;
  filter: saturate(1.04) brightness(1.04) contrast(.88) !important;
  mix-blend-mode: normal !important;
}

#honmaru-features .hm-envelope-feature::after {
  background:
    linear-gradient(90deg, rgba(14, 5, 20, .70) 0%, rgba(14, 5, 20, .18) 25%, rgba(14, 5, 20, .08) 52%, rgba(14, 5, 20, .22) 76%, rgba(14, 5, 20, .70) 100%),
    radial-gradient(54% 62% at 50% 45%, rgba(20, 8, 27, .76), rgba(20, 8, 27, .26) 54%, transparent 78%) !important;
  opacity: .96 !important;
}

#honmaru-features .hm-envelope-feature .envelope-scene-bg {
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 213, 146, .24) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 24%, rgba(255, 128, 191, .28) 0 2px, transparent 3px),
    radial-gradient(62% 72% at 50% 48%, rgba(24, 10, 31, .52), transparent 76%) !important;
  opacity: .78 !important;
  mix-blend-mode: screen !important;
}

@media (max-width: 760px) {
  #lock::after {
    background:
      linear-gradient(180deg, rgba(244, 190, 219, .06), rgba(30, 13, 38, .26)),
      radial-gradient(70% 62% at 50% 44%, rgba(46, 22, 54, .70), rgba(46, 22, 54, .30) 54%, transparent 78%),
      url("assets/generated-bg/section-decor-20260702/lock-side-decor.webp?v=20260702-section-side-decor") center center / auto 100% no-repeat !important;
    opacity: .46 !important;
  }

  #honmaru-features .hm-feature:not(.hm-envelope-feature)::before {
    inset: -12% -38% !important;
    background:
      radial-gradient(72% 62% at 50% 48%, rgba(35, 17, 45, .82), rgba(35, 17, 45, .34) 56%, transparent 80%),
      linear-gradient(90deg, rgba(25, 11, 34, .34), rgba(25, 11, 34, .04) 34%, rgba(25, 11, 34, .04) 66%, rgba(25, 11, 34, .34)),
      var(--mute-feature-side-decor) center center / auto 100% no-repeat !important;
    opacity: .46 !important;
  }

  #honmaru-features .hm-feature:nth-child(3)::before {
    background:
      radial-gradient(72% 62% at 50% 48%, rgba(35, 17, 45, .82), rgba(35, 17, 45, .34) 56%, transparent 80%),
      linear-gradient(90deg, rgba(25, 11, 34, .34), rgba(25, 11, 34, .04) 34%, rgba(25, 11, 34, .04) 66%, rgba(25, 11, 34, .34)),
      var(--mute-feature-side-decor) center center / auto 100% no-repeat !important;
    opacity: .46 !important;
    transform: none !important;
  }

  #honmaru-features .hm-feature:not(.hm-envelope-feature)::after {
    opacity: .82 !important;
  }

  #honmaru-features .hm-envelope-feature::before {
    background-size: auto 100% !important;
    opacity: .42 !important;
  }
}

/* Keep this after all mobile feature overrides: the trash section has older
   child-specific artwork rules, so it needs the same specificity here. */
#honmaru-features .hm-feature.reveal:nth-child(3):not(.hm-envelope-feature)::before,
#honmaru-features .hm-feature:nth-child(3)::before {
  background:
    radial-gradient(58% 68% at var(--mute-feature-overlay-x, 50%) 50%, rgba(35, 17, 45, .74), rgba(35, 17, 45, .30) 50%, transparent 74%),
    linear-gradient(90deg, rgba(25, 11, 34, .34) 0%, rgba(25, 11, 34, .06) 25%, rgba(25, 11, 34, .03) 48%, rgba(25, 11, 34, .06) 74%, rgba(25, 11, 34, .34) 100%),
    var(--mute-feature-side-decor) center center / cover no-repeat !important;
  opacity: .42 !important;
  transform: none !important;
  filter: saturate(1.04) brightness(1.05) contrast(.86) !important;
  mix-blend-mode: normal !important;
}

@media (max-width: 760px) {
  #honmaru-features .hm-feature.reveal:nth-child(3):not(.hm-envelope-feature)::before,
  #honmaru-features .hm-feature:nth-child(3)::before {
    background:
      radial-gradient(72% 62% at 50% 48%, rgba(35, 17, 45, .82), rgba(35, 17, 45, .34) 56%, transparent 80%),
      linear-gradient(90deg, rgba(25, 11, 34, .34), rgba(25, 11, 34, .04) 34%, rgba(25, 11, 34, .04) 66%, rgba(25, 11, 34, .34)),
      var(--mute-feature-side-decor) center center / auto 100% no-repeat !important;
    opacity: .46 !important;
    transform: none !important;
  }
}

/* 2026-07-02: restore visible background decoration.
   Earlier cleanup rules intentionally removed major background images; the LP now
   needs a stronger waitlist mood, so this final pass brings the artwork back
   while keeping central copy and phone UI readable. */
#hero .hero-rich-decor,
#hero .site-edge-bear,
#hero .cute-deco,
#hero .hero-cute-layer,
#lock::after,
#lock .lock-smoke,
#honmaru-features .hm-feature:not(.hm-envelope-feature)::before,
#honmaru-features .hm-feature:not(.hm-envelope-feature)::after,
#honmaru-features .hm-envelope-feature::before,
#honmaru-features .hm-envelope-feature::after,
#honmaru-features .hm-envelope-feature .envelope-scene-bg {
  display: block !important;
}

/* 2026-07-02: keep the lock passcode artwork centered inside its scene.
   The regenerated image was height-limited and rendered wider than the centered
   button, making the phone visibly drift to the right on mobile. */
#lock .lock-scene.lock-scene-asset,
#lock .passcode-unlock {
  margin-left: auto !important;
  margin-right: auto !important;
}

#lock .passcode-unlock {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

#lock .passcode-img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#hero .hero-rich-decor {
  display: none !important;
}

#hero .hero-phone::before,
#hero .hero-phone::after,
#hero .hero-phone .phone::before,
#hero .hero-phone .phone::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}

#hero .hero-phone,
#hero .hero-phone .phone,
#hero .hero-phone .phone img {
  position: relative !important;
  z-index: 8 !important;
}

#hero .hero-phone,
#hero .hero-phone.reveal,
#hero .hero-phone.reveal.in {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

#hero::before {
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, .58) 0 42px, transparent 43px),
    radial-gradient(circle at 84% 24%, rgba(255, 218, 235, .52) 0 56px, transparent 57px),
    radial-gradient(circle at 18% 74%, rgba(255, 244, 203, .42) 0 34px, transparent 35px),
    radial-gradient(circle at 78% 78%, rgba(219, 202, 238, .42) 0 46px, transparent 47px),
    linear-gradient(118deg, transparent 0 31%, rgba(255, 255, 255, .42) 31.2% 32%, transparent 32.2% 63%, rgba(205, 112, 162, .16) 63.2% 64%, transparent 64.2%) !important;
  opacity: .92 !important;
}

#hero::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  background:
    radial-gradient(circle at 16% 74%, rgba(255, 220, 166, .46) 0 46px, transparent 48px),
    radial-gradient(circle at 86% 22%, rgba(214, 166, 224, .30) 0 62px, transparent 64px),
    radial-gradient(circle at 82% 78%, rgba(190, 142, 219, .32) 0 72px, transparent 74px),
    linear-gradient(90deg, rgba(250, 232, 239, .72) 0%, rgba(250, 220, 232, .28) 42%, rgba(236, 199, 223, .18) 64%, rgba(232, 177, 207, .52) 100%),
    url("assets/generated-bg/fuwa-side-decor-v1.webp?v=20260702-bg-restore") center center / cover no-repeat !important;
  opacity: .78 !important;
  filter: saturate(.84) brightness(1.02) contrast(.94) drop-shadow(0 22px 34px rgba(205, 94, 142, .12)) !important;
  mix-blend-mode: normal !important;
}

#hero .hero-cute-layer {
  opacity: .94 !important;
}

#hero .cute-deco {
  opacity: .82 !important;
}

#cute-features::before {
  background:
    linear-gradient(90deg, rgba(255, 244, 249, .78), rgba(255, 236, 244, .40) 44%, rgba(255, 228, 240, .66)),
    url("assets/concepts/mute-front-ui-section-bg-v1.webp?v=20260702-bg-restore") left center / cover no-repeat !important;
  opacity: .72 !important;
  filter: saturate(.96) brightness(1.02) contrast(.92) !important;
}

#cute-features::after {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, .68), rgba(255, 246, 250, .28) 56%, transparent 76%),
    url("assets/generated-bg/fuwa-side-decor-v1.webp?v=20260702-bg-restore") center center / cover no-repeat !important;
  opacity: .52 !important;
  filter: saturate(.78) brightness(1.02) contrast(.90) !important;
  mix-blend-mode: normal !important;
}

#tease::after,
#lock::after {
  display: block !important;
  background:
    linear-gradient(180deg, rgba(249, 210, 227, .18), rgba(54, 30, 65, .72)),
    radial-gradient(58% 58% at 50% 45%, rgba(45, 21, 54, .58), rgba(45, 21, 54, .18) 54%, transparent 78%),
    url("assets/generated-bg/secret-transition-side-decor-v1.webp?v=20260702-bg-restore") center center / cover no-repeat !important;
  opacity: .48 !important;
  filter: hue-rotate(12deg) saturate(.76) brightness(1.04) contrast(.90) !important;
  mix-blend-mode: soft-light !important;
}

#lock::after {
  background:
    linear-gradient(180deg, rgba(244, 190, 219, .08), rgba(30, 13, 38, .28)),
    radial-gradient(52% 62% at 50% 47%, rgba(46, 22, 54, .68), rgba(46, 22, 54, .22) 52%, transparent 76%),
    url("assets/generated-bg/section-decor-20260702/lock-side-decor.webp?v=20260702-bg-restore") center center / cover no-repeat !important;
  opacity: .56 !important;
  filter: saturate(1.08) brightness(1.04) contrast(.92) !important;
  mix-blend-mode: normal !important;
}

#honmaru-preview::before,
#reveal::before,
#honmaru-features::before,
#value::before,
#faq::before,
#cta::before {
  background:
    linear-gradient(90deg, rgba(26, 14, 35, .54) 0%, rgba(26, 14, 35, .18) 28%, rgba(26, 14, 35, .06) 50%, rgba(26, 14, 35, .18) 74%, rgba(26, 14, 35, .52) 100%),
    url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260702-bg-restore") center center / cover no-repeat !important;
  opacity: .64 !important;
  filter: hue-rotate(18deg) saturate(.66) brightness(1.10) contrast(.82) !important;
  mix-blend-mode: screen !important;
}

#honmaru-preview::after,
#reveal::after,
#honmaru-features::after,
#value::after,
#faq::after,
#cta::after {
  background:
    radial-gradient(circle at 14% 18%, rgba(244, 215, 158, .34) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 22%, rgba(235, 173, 216, .34) 0 2px, transparent 3px),
    radial-gradient(circle at 24% 76%, rgba(184, 139, 216, .26) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 80%, rgba(244, 215, 158, .22) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 52%, rgba(32, 18, 42, .34), rgba(32, 18, 42, .12) 48%, transparent 76%),
    linear-gradient(104deg, transparent 0 43%, rgba(232, 178, 220, .10) 43.2% 44.2%, transparent 44.4% 62%, rgba(244, 220, 160, .08) 62.2% 63%, transparent 63.2%) !important;
  opacity: .70 !important;
  mix-blend-mode: screen !important;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature)::before,
#honmaru-features .hm-feature.reveal:nth-child(3):not(.hm-envelope-feature)::before,
#honmaru-features .hm-feature:nth-child(3)::before {
  background:
    radial-gradient(58% 68% at var(--mute-feature-overlay-x, 50%) 50%, rgba(35, 17, 45, .76), rgba(35, 17, 45, .30) 50%, transparent 74%),
    linear-gradient(90deg, rgba(25, 11, 34, .34) 0%, rgba(25, 11, 34, .06) 25%, rgba(25, 11, 34, .03) 48%, rgba(25, 11, 34, .06) 74%, rgba(25, 11, 34, .34) 100%),
    var(--mute-feature-side-decor) center center / cover no-repeat !important;
  opacity: .58 !important;
  filter: saturate(1.08) brightness(1.07) contrast(.88) !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature)::after {
  background:
    radial-gradient(50% 68% at var(--mute-feature-overlay-x, 50%) 48%, rgba(30, 13, 39, .52), rgba(30, 13, 39, .16) 58%, transparent 76%),
    linear-gradient(90deg, rgba(18, 7, 24, .30), transparent 25%, transparent 76%, rgba(18, 7, 24, .30)) !important;
  opacity: .72 !important;
  mix-blend-mode: normal !important;
}

#honmaru-features .hm-envelope-feature::before {
  background-image: url("assets/generated-bg/section-decor-20260702/secret-letter-side-decor.webp?v=20260702-bg-restore") !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: .46 !important;
  filter: saturate(1.08) brightness(1.05) contrast(.90) !important;
}

@media (max-width: 760px) {
  #hero::after {
    background:
      linear-gradient(90deg, rgba(251, 232, 239, .78), rgba(236, 199, 223, .58)),
      url("assets/generated-bg/fuwa-side-decor-v1.webp?v=20260702-bg-restore") 50% center / auto 100% no-repeat !important;
    opacity: .58 !important;
  }

  #hero .hero-rich-decor {
    width: 46vw !important;
    opacity: .56 !important;
  }

  #cute-features::before {
    background:
      linear-gradient(180deg, rgba(255, 248, 250, .74), rgba(255, 231, 240, .42)),
      url("assets/concepts/mute-front-ui-section-bg-v1.webp?v=20260702-bg-restore") 18% center / auto 100% no-repeat !important;
    opacity: .58 !important;
  }

  #cute-features::after {
    background:
      radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, .70), rgba(255, 246, 250, .30) 58%, transparent 78%),
      url("assets/generated-bg/fuwa-side-decor-v1.webp?v=20260702-bg-restore") center center / auto 100% no-repeat !important;
    opacity: .42 !important;
  }

  #tease::after,
  #lock::after {
    background:
      linear-gradient(180deg, rgba(249, 210, 227, .12), rgba(54, 30, 65, .68)),
      radial-gradient(70% 62% at 50% 44%, rgba(46, 22, 54, .66), rgba(46, 22, 54, .28) 54%, transparent 78%),
      url("assets/generated-bg/secret-transition-side-decor-v1.webp?v=20260702-bg-restore") center center / auto 100% no-repeat !important;
    opacity: .44 !important;
  }

  #lock::after {
    background:
      linear-gradient(180deg, rgba(244, 190, 219, .06), rgba(30, 13, 38, .24)),
      radial-gradient(70% 62% at 50% 44%, rgba(46, 22, 54, .70), rgba(46, 22, 54, .30) 54%, transparent 78%),
      url("assets/generated-bg/section-decor-20260702/lock-side-decor.webp?v=20260702-bg-restore") center center / auto 100% no-repeat !important;
    opacity: .50 !important;
  }

  #honmaru-preview::before,
  #reveal::before,
  #honmaru-features::before,
  #value::before,
  #faq::before,
  #cta::before {
    background:
      linear-gradient(180deg, rgba(26, 14, 35, .50), rgba(26, 14, 35, .14) 42%, rgba(26, 14, 35, .50)),
      url("assets/generated-bg/mute-dark-side-decor-v1.webp?v=20260702-bg-restore") center center / auto 100% repeat-y !important;
    opacity: .50 !important;
  }

  #honmaru-features .hm-feature:not(.hm-envelope-feature)::before,
  #honmaru-features .hm-feature.reveal:nth-child(3):not(.hm-envelope-feature)::before,
  #honmaru-features .hm-feature:nth-child(3)::before {
    background:
      radial-gradient(72% 62% at 50% 48%, rgba(35, 17, 45, .82), rgba(35, 17, 45, .34) 56%, transparent 80%),
      linear-gradient(90deg, rgba(25, 11, 34, .34), rgba(25, 11, 34, .04) 34%, rgba(25, 11, 34, .04) 66%, rgba(25, 11, 34, .34)),
      var(--mute-feature-side-decor) center center / auto 100% no-repeat !important;
    opacity: .56 !important;
  }

  #honmaru-features .hm-envelope-feature::before {
    background-size: auto 100% !important;
    opacity: .48 !important;
  }
}

/* 2026-07-02: visible generated decoration pass.
   The previous pass loaded the assets, but masks and opacity made them too weak
   to read as background decoration on the live LP. */
#tease {
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(249, 224, 234, .64) 0%, rgba(184, 143, 168, .78) 58%, rgba(71, 38, 72, .96) 100%),
    url("assets/generated-bg/secret-transition-side-decor-v1.webp?v=20260702-visible-decor") center center / cover no-repeat !important;
}

#tease::after {
  background:
    linear-gradient(180deg, rgba(255, 236, 245, .18), rgba(50, 24, 57, .30)),
    radial-gradient(70% 60% at 50% 44%, rgba(255, 229, 244, .22), transparent 62%) !important;
  opacity: .74 !important;
  mix-blend-mode: normal !important;
}

#tease .tease-character-bg {
  bottom: clamp(18px, 3vw, 38px) !important;
  width: min(780px, 94vw) !important;
  background-image: url("assets/generated-bg/tease-character/angel-devil-cats-transparent.png?v=20260702-visible-decor") !important;
  opacity: .92 !important;
  mix-blend-mode: normal !important;
  filter: saturate(1.06) brightness(1.02) contrast(1.02) drop-shadow(0 28px 46px rgba(36, 15, 38, .32)) !important;
}

#lock::after {
  background:
    linear-gradient(180deg, rgba(18, 6, 25, .10), rgba(18, 6, 25, .28)),
    radial-gradient(58% 62% at 50% 45%, rgba(44, 18, 54, .22), transparent 68%),
    url("assets/generated-bg/section-decor-20260702/lock-side-decor.webp?v=20260702-visible-decor") center center / cover no-repeat !important;
  opacity: .88 !important;
  filter: saturate(1.14) brightness(1.08) contrast(1.02) !important;
  mix-blend-mode: normal !important;
  z-index: 2 !important;
}

#lock .lock-smoke {
  opacity: .72 !important;
}

#lock .lock-scene.lock-scene-asset {
  z-index: 4 !important;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature) {
  isolation: isolate !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature)::before,
#honmaru-features .hm-feature.reveal:nth-child(3):not(.hm-envelope-feature)::before,
#honmaru-features .hm-feature:nth-child(3)::before {
  inset: -18% calc(50% - 50vw) !important;
  background:
    linear-gradient(90deg, rgba(10, 3, 16, .38) 0%, rgba(10, 3, 16, .06) 26%, rgba(10, 3, 16, .04) 50%, rgba(10, 3, 16, .06) 74%, rgba(10, 3, 16, .38) 100%),
    radial-gradient(62% 72% at var(--mute-feature-overlay-x, 50%) 50%, rgba(255, 160, 207, .18), transparent 66%),
    var(--mute-feature-side-decor) center center / cover no-repeat !important;
  opacity: .88 !important;
  filter: saturate(1.16) brightness(1.08) contrast(1.00) !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  z-index: -1 !important;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature)::after {
  background:
    radial-gradient(48% 68% at var(--mute-feature-overlay-x, 50%) 48%, rgba(18, 7, 24, .26), rgba(18, 7, 24, .08) 58%, transparent 78%),
    linear-gradient(90deg, rgba(9, 2, 13, .28), transparent 26%, transparent 74%, rgba(9, 2, 13, .28)) !important;
  opacity: .58 !important;
  z-index: -1 !important;
}

#honmaru-features .hm-feature .hm-copy,
#honmaru-features .hm-feature .hm-phone {
  position: relative !important;
  z-index: 2 !important;
}

#honmaru-features .hm-envelope-feature::before {
  background-image: url("assets/generated-bg/section-decor-20260702/secret-letter-side-decor.webp?v=20260702-visible-decor") !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: .82 !important;
  filter: saturate(1.12) brightness(1.08) contrast(1.00) !important;
  mix-blend-mode: normal !important;
}

#honmaru-features .hm-envelope-feature::after {
  background:
    linear-gradient(90deg, rgba(10, 3, 16, .56) 0%, rgba(10, 3, 16, .14) 28%, rgba(10, 3, 16, .08) 52%, rgba(10, 3, 16, .14) 74%, rgba(10, 3, 16, .56) 100%),
    radial-gradient(54% 62% at 50% 45%, rgba(20, 8, 27, .38), transparent 76%) !important;
  opacity: .64 !important;
}

@media (max-width: 760px) {
  #tease {
    background:
      linear-gradient(180deg, rgba(249, 224, 234, .60) 0%, rgba(169, 121, 159, .76) 58%, rgba(70, 37, 73, .96) 100%),
      url("assets/generated-bg/secret-transition-side-decor-v1.webp?v=20260702-visible-decor") center center / auto 100% no-repeat !important;
  }

  #tease .tease-character-bg {
    bottom: 186px !important;
    width: 146vw !important;
    opacity: .88 !important;
  }

  #lock::after {
    background:
      linear-gradient(180deg, rgba(18, 6, 25, .08), rgba(18, 6, 25, .24)),
      radial-gradient(70% 62% at 50% 44%, rgba(44, 18, 54, .18), transparent 70%),
      url("assets/generated-bg/section-decor-20260702/lock-side-decor.webp?v=20260702-visible-decor") center center / auto 100% no-repeat !important;
    opacity: .86 !important;
  }

  #honmaru-features .hm-feature:not(.hm-envelope-feature)::before,
  #honmaru-features .hm-feature.reveal:nth-child(3):not(.hm-envelope-feature)::before,
  #honmaru-features .hm-feature:nth-child(3)::before {
    inset: -15% -44% !important;
    background:
      linear-gradient(90deg, rgba(10, 3, 16, .34), rgba(10, 3, 16, .04) 34%, rgba(10, 3, 16, .04) 66%, rgba(10, 3, 16, .34)),
      radial-gradient(74% 64% at 50% 48%, rgba(255, 160, 207, .18), transparent 68%),
      var(--mute-feature-side-decor) center center / auto 100% no-repeat !important;
    opacity: .86 !important;
  }

  #honmaru-features .hm-envelope-feature::before {
    background-size: auto 100% !important;
    opacity: .82 !important;
  }
}

/* 2026-07-02: stronger decorative direction.
   Make the generated backgrounds read as part of the MUTE world, not a faint
   texture, while preserving the central copy and phone UI. */
#tease {
  background:
    radial-gradient(circle at 16% 23%, rgba(255, 223, 158, .42) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 30%, rgba(255, 126, 190, .48) 0 3px, transparent 4px),
    radial-gradient(circle at 22% 82%, rgba(255, 190, 226, .38) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(255, 225, 238, .52) 0%, rgba(203, 139, 180, .72) 44%, rgba(69, 34, 71, .98) 100%),
    url("assets/generated-bg/secret-transition-side-decor-v1.webp?v=20260702-bold-decor") center center / cover no-repeat !important;
}

#tease::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    linear-gradient(112deg, transparent 0 29%, rgba(255, 235, 247, .38) 29.3% 30.3%, transparent 30.6% 62%, rgba(255, 154, 205, .28) 62.4% 63.4%, transparent 63.8%),
    radial-gradient(ellipse at 50% 76%, rgba(255, 104, 178, .24), transparent 58%) !important;
  opacity: .92 !important;
  mix-blend-mode: screen !important;
}

#tease::after {
  background:
    radial-gradient(ellipse at 50% 58%, rgba(52, 21, 58, .10), rgba(52, 21, 58, .36) 70%, rgba(52, 21, 58, .72) 100%),
    linear-gradient(180deg, rgba(255, 245, 251, .10), rgba(38, 16, 47, .28)) !important;
  opacity: .84 !important;
}

#tease .tease-character-bg {
  bottom: clamp(4px, 1.8vw, 24px) !important;
  width: min(900px, 108vw) !important;
  opacity: 1 !important;
  filter: saturate(1.18) brightness(1.08) contrast(1.08) drop-shadow(0 34px 54px rgba(31, 10, 34, .42)) !important;
}

#lock::after {
  background:
    radial-gradient(circle at 13% 17%, rgba(255, 179, 225, .78) 0 3px, transparent 4px),
    radial-gradient(circle at 87% 24%, rgba(255, 210, 145, .68) 0 2px, transparent 3px),
    radial-gradient(circle at 18% 77%, rgba(220, 145, 255, .52) 0 3px, transparent 4px),
    radial-gradient(circle at 84% 82%, rgba(255, 120, 190, .54) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(18, 6, 25, .02), rgba(18, 6, 25, .18)),
    url("assets/generated-bg/section-decor-20260702/lock-side-decor.webp?v=20260702-bold-decor") center center / cover no-repeat !important;
  opacity: .98 !important;
  filter: saturate(1.28) brightness(1.12) contrast(1.08) !important;
}

#lock::before {
  background:
    radial-gradient(ellipse at 50% 44%, rgba(255, 193, 227, .22), transparent 34%),
    radial-gradient(ellipse at 50% 68%, rgba(255, 86, 169, .16), transparent 56%),
    radial-gradient(ellipse at 50% 50%, transparent 0 48%, rgba(8,2,8,.38) 88%) !important;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature) {
  padding-top: clamp(44px, 7vw, 76px) !important;
  padding-bottom: clamp(44px, 7vw, 82px) !important;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature)::before,
#honmaru-features .hm-feature.reveal:nth-child(3):not(.hm-envelope-feature)::before,
#honmaru-features .hm-feature:nth-child(3)::before {
  inset: -24% calc(50% - 50vw) !important;
  background:
    radial-gradient(circle at 13% 22%, rgba(255, 210, 145, .58) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 24%, rgba(255, 118, 191, .60) 0 3px, transparent 4px),
    radial-gradient(circle at 20% 83%, rgba(191, 126, 238, .46) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 82%, rgba(255, 223, 158, .44) 0 2px, transparent 3px),
    linear-gradient(90deg, rgba(10, 3, 16, .18) 0%, rgba(10, 3, 16, .02) 28%, rgba(10, 3, 16, .02) 50%, rgba(10, 3, 16, .02) 72%, rgba(10, 3, 16, .18) 100%),
    radial-gradient(62% 72% at var(--mute-feature-overlay-x, 50%) 50%, rgba(255, 112, 190, .22), transparent 66%),
    var(--mute-feature-side-decor) center center / cover no-repeat !important;
  opacity: 1 !important;
  filter: saturate(1.30) brightness(1.12) contrast(1.08) !important;
  z-index: 0 !important;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature)::after {
  background:
    linear-gradient(114deg, transparent 0 36%, rgba(255, 184, 222, .18) 41%, transparent 52%),
    radial-gradient(48% 68% at var(--mute-feature-overlay-x, 50%) 48%, rgba(18, 7, 24, .12), rgba(18, 7, 24, .04) 58%, transparent 78%),
    linear-gradient(90deg, rgba(9, 2, 13, .18), transparent 28%, transparent 72%, rgba(9, 2, 13, .18)) !important;
  opacity: .72 !important;
  z-index: 1 !important;
  mix-blend-mode: screen !important;
}

#honmaru-features .hm-feature .hm-copy {
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(35, 13, 41, .52), rgba(22, 7, 27, .26)) !important;
  box-shadow: 0 24px 74px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#honmaru-features .hm-envelope-feature::before {
  background-image: url("assets/generated-bg/section-decor-20260702/secret-letter-side-decor.webp?v=20260702-bold-decor") !important;
  opacity: .98 !important;
  filter: saturate(1.28) brightness(1.12) contrast(1.08) !important;
}

#honmaru-features .hm-envelope-feature::after {
  background:
    radial-gradient(circle at 13% 21%, rgba(255, 210, 145, .52) 0 2px, transparent 3px),
    radial-gradient(circle at 87% 23%, rgba(255, 118, 191, .50) 0 2px, transparent 3px),
    linear-gradient(90deg, rgba(10, 3, 16, .42) 0%, rgba(10, 3, 16, .10) 28%, rgba(10, 3, 16, .06) 52%, rgba(10, 3, 16, .10) 74%, rgba(10, 3, 16, .42) 100%),
    radial-gradient(54% 62% at 50% 45%, rgba(20, 8, 27, .18), transparent 76%) !important;
  opacity: .70 !important;
  mix-blend-mode: screen !important;
}

@media (max-width: 760px) {
  #tease .tease-character-bg {
    bottom: 174px !important;
    width: 164vw !important;
    opacity: 1 !important;
  }

  #lock::after {
    background:
      radial-gradient(circle at 13% 17%, rgba(255, 179, 225, .72) 0 3px, transparent 4px),
      radial-gradient(circle at 87% 24%, rgba(255, 210, 145, .60) 0 2px, transparent 3px),
      radial-gradient(circle at 18% 77%, rgba(220, 145, 255, .48) 0 3px, transparent 4px),
      radial-gradient(circle at 84% 82%, rgba(255, 120, 190, .50) 0 2px, transparent 3px),
      linear-gradient(180deg, rgba(18, 6, 25, .02), rgba(18, 6, 25, .16)),
      url("assets/generated-bg/section-decor-20260702/lock-side-decor.webp?v=20260702-bold-decor") center center / auto 100% no-repeat !important;
  }

  #honmaru-features .hm-feature:not(.hm-envelope-feature)::before,
  #honmaru-features .hm-feature.reveal:nth-child(3):not(.hm-envelope-feature)::before,
  #honmaru-features .hm-feature:nth-child(3)::before {
    inset: -18% -54% !important;
    background:
      radial-gradient(circle at 14% 23%, rgba(255, 210, 145, .56) 0 2px, transparent 3px),
      radial-gradient(circle at 88% 25%, rgba(255, 118, 191, .58) 0 3px, transparent 4px),
      radial-gradient(circle at 20% 82%, rgba(191, 126, 238, .44) 0 2px, transparent 3px),
      radial-gradient(circle at 86% 82%, rgba(255, 223, 158, .42) 0 2px, transparent 3px),
      linear-gradient(90deg, rgba(10, 3, 16, .14), rgba(10, 3, 16, .02) 34%, rgba(10, 3, 16, .02) 66%, rgba(10, 3, 16, .14)),
      radial-gradient(76% 66% at 50% 48%, rgba(255, 112, 190, .20), transparent 68%),
      var(--mute-feature-side-decor) center center / auto 104% no-repeat !important;
  }

  #honmaru-features .hm-feature .hm-copy {
    padding: 22px 18px !important;
    background: linear-gradient(180deg, rgba(35, 13, 41, .58), rgba(22, 7, 27, .28)) !important;
  }

  #honmaru-features .hm-envelope-feature::before {
    background-size: auto 104% !important;
    opacity: .98 !important;
  }
}

/* 2026-07-02: mobile feature frames should expose the generated ornaments.
   The art is strongest on the edges, so place it as top/bottom frame layers. */
@media (max-width: 760px) {
  #honmaru-features .hm-feature:not(.hm-envelope-feature)::before,
  #honmaru-features .hm-feature.reveal:nth-child(3):not(.hm-envelope-feature)::before,
  #honmaru-features .hm-feature:nth-child(3)::before {
    background:
      radial-gradient(circle at 14% 23%, rgba(255, 210, 145, .62) 0 2px, transparent 3px),
      radial-gradient(circle at 88% 25%, rgba(255, 118, 191, .64) 0 3px, transparent 4px),
      radial-gradient(circle at 20% 82%, rgba(191, 126, 238, .52) 0 2px, transparent 3px),
      radial-gradient(circle at 86% 82%, rgba(255, 223, 158, .50) 0 2px, transparent 3px),
      linear-gradient(90deg, rgba(10, 3, 16, .06), transparent 34%, transparent 66%, rgba(10, 3, 16, .06)),
      var(--mute-feature-side-decor) center top / 100% auto no-repeat,
      var(--mute-feature-side-decor) center bottom / 100% auto no-repeat,
      linear-gradient(180deg, rgba(58, 18, 63, .76), rgba(31, 8, 39, .90)) !important;
    opacity: 1 !important;
    filter: saturate(1.42) brightness(1.18) contrast(1.14) !important;
  }

  #honmaru-features .hm-feature .hm-copy {
    background: linear-gradient(180deg, rgba(35, 13, 41, .46), rgba(22, 7, 27, .22)) !important;
  }
}

/* 2026-07-02: remove decorative artwork from the BUT transition only.
   Later lock and feature-section decorations stay active. */
#tease {
  background: linear-gradient(180deg,
    #f9e0ea 0%,
    #efc8d8 25%,
    #c98fac 41%,
    #79466b 57%,
    #351b35 78%,
    #130812 100%) !important;
}

#tease::before,
#tease::after,
#tease .wrap::before,
#tease .tease-character-bg {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
}

/* 2026-07-02: character accents integrated as decoration, not a shown asset. */
#honmaru-preview .wrap {
  position: relative !important;
}

#honmaru-preview .duality-character-showcase {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  width: auto !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

#honmaru-preview .duality-cat {
  display: block !important;
  position: absolute !important;
  aspect-ratio: 1 / .82 !important;
  border-radius: 0 !important;
  background-image: url("assets/generated-bg/tease-character/angel-devil-cats.png?v=20260702-character-decor") !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

#honmaru-preview .duality-cat-front {
  width: clamp(96px, 11vw, 140px) !important;
  left: max(4px, calc(50% - 410px)) !important;
  top: clamp(116px, 16vw, 184px) !important;
  background-size: 250% auto !important;
  background-position: 3% 49% !important;
  opacity: .46 !important;
  filter: saturate(.94) brightness(1.1) drop-shadow(0 10px 22px rgba(255, 192, 216, .12)) !important;
  transform: rotate(-8deg) !important;
  -webkit-mask-image: radial-gradient(ellipse 70% 68% at 52% 52%, #000 0 52%, rgba(0,0,0,.62) 68%, transparent 86%) !important;
  mask-image: radial-gradient(ellipse 70% 68% at 52% 52%, #000 0 52%, rgba(0,0,0,.62) 68%, transparent 86%) !important;
}

#honmaru-preview .duality-cat-back {
  width: clamp(118px, 14vw, 178px) !important;
  right: max(0px, calc(50% - 445px)) !important;
  top: clamp(170px, 21vw, 260px) !important;
  background-size: 242% auto !important;
  background-position: 97% 51% !important;
  opacity: .74 !important;
  filter: saturate(1.08) brightness(.96) drop-shadow(0 22px 42px rgba(7, 2, 12, .46)) !important;
  transform: rotate(7deg) !important;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 53%, #000 0 56%, rgba(0,0,0,.72) 70%, transparent 88%) !important;
  mask-image: radial-gradient(ellipse 72% 70% at 50% 53%, #000 0 56%, rgba(0,0,0,.72) 70%, transparent 88%) !important;
}

#honmaru-preview .duality-switch-line {
  display: none !important;
}

@media (max-width: 760px) {
  #honmaru-preview .duality-character-showcase {
    inset: 0 !important;
  }

  #honmaru-preview .duality-cat {
    display: block !important;
  }

  #honmaru-preview .duality-cat-front {
    width: 90px !important;
    left: -4px !important;
    top: 118px !important;
    opacity: .46 !important;
    background-size: 258% auto !important;
  }

  #honmaru-preview .duality-cat-back {
    width: 104px !important;
    right: -16px !important;
    top: 104px !important;
    opacity: .70 !important;
    background-size: 252% auto !important;
  }
}

/* 2026-07-02: make the MUTE preview phones auto-scroll in a seamless loop. */
#honmaru-preview .preview-scroll.preview-loop {
  --preview-loop-gap: clamp(18px, 3vw, 30px);
  display: block !important;
  overflow: hidden !important;
  overscroll-behavior-x: auto !important;
  scroll-snap-type: none !important;
  scrollbar-width: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%) !important;
}

#honmaru-preview .preview-scroll.preview-loop::-webkit-scrollbar {
  display: none !important;
}

#honmaru-preview .preview-loop-track {
  display: flex !important;
  align-items: flex-start !important;
  width: max-content !important;
  will-change: transform !important;
  animation: mutePreviewLoop 28s linear infinite !important;
}

#honmaru-preview .preview-scroll.preview-loop.js-preview-loop .preview-loop-track {
  animation: none !important;
}

#honmaru-preview .preview-loop-set {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--preview-loop-gap) !important;
  flex: 0 0 auto !important;
  padding-right: var(--preview-loop-gap) !important;
}

#honmaru-preview .preview-loop:hover .preview-loop-track {
  animation-play-state: paused !important;
}

@keyframes mutePreviewLoop {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 760px) {
  #honmaru-preview .preview-scroll.preview-loop {
    --preview-loop-gap: 18px;
  }

  #honmaru-preview .preview-loop-track {
    animation-duration: 24s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #honmaru-preview .preview-scroll.preview-loop {
    overflow-x: auto !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  #honmaru-preview .preview-loop-track {
    animation: none !important;
  }
}

/* 2026-07-02: feature backgrounds must fill the full section frame.
   The copy/phone stay constrained, but the decorative art no longer leaves
   side or vertical bands from the parent wrap/margins. */
#honmaru-features {
  padding-bottom: 0 !important;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature) {
  box-sizing: border-box !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  margin: 0 calc(50% - 50vw) !important;
  padding:
    clamp(58px, 7vw, 92px)
    max(24px, calc((100vw - 1120px) / 2 + 24px))
    clamp(64px, 8vw, 104px) !important;
  min-height: min(980px, 100svh) !important;
  align-content: center !important;
  justify-content: center !important;
  grid-template-columns: minmax(300px, 520px) minmax(220px, 330px) !important;
  gap: clamp(34px, 5vw, 72px) !important;
  background:
    linear-gradient(180deg, rgba(45, 20, 55, .92), rgba(31, 11, 42, .96)) !important;
}

#honmaru-features .hm-feature:nth-child(even):not(.hm-envelope-feature) {
  grid-template-columns: minmax(220px, 330px) minmax(300px, 520px) !important;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature)::before,
#honmaru-features .hm-feature.reveal:nth-child(3):not(.hm-envelope-feature)::before,
#honmaru-features .hm-feature:nth-child(3)::before {
  inset: 0 !important;
  background:
    radial-gradient(circle at 13% 22%, rgba(255, 210, 145, .52) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 24%, rgba(255, 118, 191, .58) 0 3px, transparent 4px),
    radial-gradient(circle at 20% 83%, rgba(191, 126, 238, .42) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 82%, rgba(255, 223, 158, .40) 0 2px, transparent 3px),
    linear-gradient(90deg, rgba(10, 3, 16, .18) 0%, rgba(10, 3, 16, .02) 28%, rgba(10, 3, 16, .02) 72%, rgba(10, 3, 16, .18) 100%),
    radial-gradient(60% 66% at var(--mute-feature-overlay-x, 50%) 50%, rgba(255, 112, 190, .18), transparent 66%),
    var(--mute-feature-side-decor) center center / cover no-repeat !important;
  opacity: 1 !important;
  filter: saturate(1.34) brightness(1.15) contrast(1.12) !important;
  transform: none !important;
  z-index: 0 !important;
}

#honmaru-features .hm-feature:not(.hm-envelope-feature)::after {
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(14, 4, 22, .08), transparent 18%, transparent 78%, rgba(14, 4, 22, .18)),
    radial-gradient(54% 62% at var(--mute-feature-overlay-x, 50%) 48%, rgba(18, 7, 24, .10), rgba(18, 7, 24, .04) 58%, transparent 78%),
    linear-gradient(90deg, rgba(9, 2, 13, .10), transparent 28%, transparent 72%, rgba(9, 2, 13, .10)) !important;
  opacity: .70 !important;
  z-index: 1 !important;
  mix-blend-mode: normal !important;
}

#honmaru-features .hm-feature .hm-copy,
#honmaru-features .hm-feature .hm-phone {
  position: relative !important;
  z-index: 2 !important;
}

#honmaru-features .hm-envelope-feature {
  margin-bottom: 0 !important;
}

@media (max-width: 760px) {
  #honmaru-features .hm-feature:not(.hm-envelope-feature) {
    min-height: 100svh !important;
    padding:
      clamp(52px, 12vw, 72px)
      22px
      clamp(58px, 14vw, 84px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  #honmaru-features .hm-feature:nth-child(even):not(.hm-envelope-feature) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #honmaru-features .hm-feature:not(.hm-envelope-feature)::before,
  #honmaru-features .hm-feature.reveal:nth-child(3):not(.hm-envelope-feature)::before,
  #honmaru-features .hm-feature:nth-child(3)::before {
    background:
      radial-gradient(circle at 14% 23%, rgba(255, 210, 145, .56) 0 2px, transparent 3px),
      radial-gradient(circle at 88% 25%, rgba(255, 118, 191, .60) 0 3px, transparent 4px),
      radial-gradient(circle at 20% 82%, rgba(191, 126, 238, .48) 0 2px, transparent 3px),
      radial-gradient(circle at 86% 82%, rgba(255, 223, 158, .46) 0 2px, transparent 3px),
      linear-gradient(90deg, rgba(10, 3, 16, .08), transparent 34%, transparent 66%, rgba(10, 3, 16, .08)),
      radial-gradient(76% 66% at 50% 48%, rgba(255, 112, 190, .14), transparent 68%),
      var(--mute-feature-side-decor) center center / cover no-repeat !important;
  }
}