.hero { position: relative; isolation: isolate; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: start; min-height: 0; padding-block: 32px 24px; }
.hero-copy { padding: clamp(72px, 8vw, 116px) 0 0 12px; }
.hero-showcase { position: relative; z-index: 2; width: 92%; justify-self: center; padding-bottom: 10px; }
.hero .theme-decor { position: absolute; z-index: 0; pointer-events: none; background: url('/wedding_theme_elements/watercolor_blue_ink_splash.webp') no-repeat center / contain; }
.hero .decor-3 { left: -10vw; top: -7vh; width: 35vw; height: 50vh; transform: rotate(-30deg); }
.hero .decor-4 { right: 20vw; top: 20vh; width: 50vw; height: 70vh; }
.phone-stage { aspect-ratio: 640 / 620; }
.phone-active, .phone-ghost { width: 46%; height: 94%; top: 1%; left: 27%; }
.phone-active { z-index: 1; left: 19%; transform: rotate(-4deg); }
.phone-ghost { display: block; left: 50%; top: 6%; transform: rotate(9deg) scale(.72); opacity: .38; padding: 6px; cursor: pointer; transition: opacity .3s; }
.phone-ghost:hover, .phone-ghost:focus-visible { opacity: .6; }
.phone-screen { position: relative; display: block; }
.phone-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone-active iframe { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: auto; }
.phone-active.is-ready iframe { opacity: 1; }
.phone-active.is-ready .active-cover { visibility: hidden; }
.template-switcher { display: flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; margin: 28px auto 0; padding: 5px; border: 1px solid var(--border-warm); border-radius: 50px; scroll-margin-top: 24px; }
.template-switcher button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; border: 0; border-radius: 50px; padding: 10px 22px; background: transparent; color: var(--color-text-light); font-size: 14px; cursor: pointer; transition: background .2s, color .2s; }
.template-switcher button[aria-pressed="true"] { background: var(--color-rose-ink); color: var(--color-paper); }
.template-switcher button img { width: 15px; height: 22px; object-fit: cover; object-position: top; border: 1px solid currentColor; border-radius: 2px; }
.template-switcher button:hover:not([aria-pressed="true"]) { background: rgba(255,255,255,.5); color: var(--color-rose-ink); }
.site-footer { margin-top: 16px; border-top: 1px solid var(--border-warm); }



@media (max-width: 1050px) {
  .phone-ghost { padding: 4px; }
  .template-switcher button { padding-inline: 16px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 22px; gap: 35px; }
  .hero-copy { padding: 0; }
  .hero-showcase { width: min(100%, 440px); }
  .hero .theme-decor { display: none; }
  .hero-subtitle-break { display: inline; }
  .phone-stage { aspect-ratio: 640 / 750; }
  .phone-active, .phone-ghost { width: 57%; height: 92%; left: 19%; top: 1%; }
  .phone-active { left: 12%; }
  .phone-ghost { left: 38%; top: 6%; padding: 3px; }
  .template-switcher { margin-top: 24px; }
  .template-switcher button { padding: 9px 17px; font-size: 13px; gap: 8px; }
}
@media (max-width: 360px) {
  .template-switcher button { padding-inline: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-active, .phone-ghost, .phone-active iframe { transition: none; }
}