/* Mobile hero: the micelle supports the message instead of becoming a second panel. */
.mobile-inline-micelle { display: none; }

@media (max-width: 720px) {
  .hero-layout { padding-top: 1.7rem; }
  .hero-copy { padding-bottom: 1.55rem; }
  .hero .eyebrow { margin-bottom: .95rem; }
  .hero-mobile-message { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: .55rem; align-items: center; }
  .hero-mobile-copy { min-width: 0; }
  .hero h1 { max-width: 14.5rem; margin-bottom: .85rem; font-size: clamp(2.25rem, 10vw, 2.62rem); line-height: 1.01; }
  .hero-intro { max-width: 15.2rem; margin-bottom: 0; font-size: .93rem; line-height: 1.55; }
  .mobile-inline-micelle { position: relative; display: grid; place-items: center; width: 7.5rem; height: 7.5rem; justify-self: end; overflow: visible; }
  .mobile-inline-micelle::before { content: ""; position: absolute; width: 7.05rem; height: 7.05rem; border: 1px solid rgba(174,214,234,.18); border-radius: 50%; box-shadow: 0 0 0 13px rgba(151,204,228,.028); }
  .mobile-inline-micelle img { position: relative; z-index: 1; width: 6.75rem; height: 6.75rem; object-fit: contain; filter: drop-shadow(0 9px 11px rgba(0,0,0,.20)); }
  .hero-art { display: none; }
  .hero-actions { margin-top: 1.25rem; }
  .hero-actions .button-green { min-height: 52px; }
}

@media (max-width: 390px) {
  .hero-layout { padding-top: 1.48rem; }
  .hero-mobile-message { grid-template-columns: minmax(0, 1fr) 6.7rem; gap: .38rem; }
  .hero h1 { max-width: 13.7rem; font-size: 2.18rem; }
  .hero-intro { max-width: 14.35rem; font-size: .9rem; }
  .mobile-inline-micelle { width: 6.7rem; height: 6.7rem; }
  .mobile-inline-micelle::before { width: 6.25rem; height: 6.25rem; }
  .mobile-inline-micelle img { width: 6rem; height: 6rem; }
  .hero-copy { padding-bottom: 1.35rem; }
}

/* Larger inline object: no enclosing circle or decorative orbit. */
@media (max-width: 720px) {
  .hero-mobile-message { grid-template-columns: minmax(0, 1fr) 9.6rem; gap: .35rem; align-items: center; }
  .hero h1 { max-width: 16rem; }
  .hero-intro { max-width: 16.5rem; }
  .mobile-inline-micelle { width: 9.6rem; height: 9.6rem; }
  .mobile-inline-micelle::before { display: none; }
  .mobile-inline-micelle img { width: 9.25rem; height: 9.25rem; filter: drop-shadow(0 12px 15px rgba(0,0,0,.20)); }
}

@media (max-width: 390px) {
  .hero-mobile-message { grid-template-columns: minmax(0, 1fr) 8.4rem; gap: .25rem; }
  .hero h1 { max-width: 13rem; font-size: 2.12rem; }
  .hero-intro { max-width: 13.5rem; font-size: .89rem; }
  .mobile-inline-micelle { width: 8.4rem; height: 8.4rem; }
  .mobile-inline-micelle img { width: 8.05rem; height: 8.05rem; }
}

/* Slightly larger mobile micelle while retaining the established text and CTA spacing. */
@media (max-width: 720px) {
  .mobile-inline-micelle img { width: 10.2rem; height: 10.2rem; margin-right: -.16rem; filter: drop-shadow(0 13px 16px rgba(0,0,0,.21)); }
}

@media (max-width: 390px) {
  .mobile-inline-micelle img { width: 9.3rem; height: 9.3rem; margin-right: -.12rem; }
}

/* Optical alignment: shift the inline micelle toward the copy while preserving its full silhouette. */
@media (max-width: 720px) {
  .mobile-inline-micelle { transform: translateX(-.72rem); }
}

@media (max-width: 390px) {
  .mobile-inline-micelle { transform: translateX(-.52rem); }
}

/* Balanced mobile composition: headline and micelle share one row; description clears beneath both. */
@media (max-width: 720px) {
  .hero-mobile-message { display: grid; grid-template-columns: minmax(0, 1fr) 9.7rem; grid-template-rows: auto auto; gap: 0 .25rem; align-items: center; }
  .hero-mobile-copy { display: contents; }
  .hero h1 { grid-column: 1; grid-row: 1; max-width: 16rem; margin: 0; font-size: clamp(2.28rem, 10vw, 2.62rem); }
  .mobile-inline-micelle { grid-column: 2; grid-row: 1; width: 9.7rem; height: 9.7rem; justify-self: center; align-self: center; transform: none; }
  .mobile-inline-micelle img { width: 10.35rem; height: 10.35rem; margin: 0; }
  .hero-intro { grid-column: 1 / -1; grid-row: 2; max-width: 100%; margin: 1.05rem 0 0; font-size: .96rem; line-height: 1.56; }
  .hero-actions { margin-top: 1.2rem; }
}

@media (max-width: 390px) {
  .hero-mobile-message { grid-template-columns: minmax(0, 1fr) 8.55rem; }
  .hero h1 { max-width: 13.35rem; font-size: 2.2rem; }
  .mobile-inline-micelle { width: 8.55rem; height: 8.55rem; transform: none; }
  .mobile-inline-micelle img { width: 9.05rem; height: 9.05rem; margin: 0; }
  .hero-intro { max-width: 100%; margin-top: .9rem; font-size: .91rem; }
}