/* Homepage hero: looping phone demos of the most visited templates. Loaded after home-mobile/home-desktop. */
.hero-demos { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.hero-demo { --w: 150px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 0 0 auto; width: var(--w); color: #5d4650; text-decoration: none; }
.hero-demo-phone { position: relative; display: block; width: 100%; padding: calc(var(--w) * .035); border-radius: calc(var(--w) * .17); background: linear-gradient(150deg, #3b2b32, #120b0e); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 24px 46px -20px rgba(76,5,25,.5), 0 8px 18px -10px rgba(0,0,0,.35); transition: transform 220ms ease, box-shadow 220ms ease; }
.hero-demo-phone video { display: block; width: 100%; height: auto; aspect-ratio: 432 / 936; border-radius: calc(var(--w) * .135); background: #24171d; object-fit: cover; }
/* Dynamic island: also covers the one drawn inside the WhatsApp template. */
.hero-demo-phone::after { position: absolute; top: calc(var(--w) * .051); left: 50%; width: calc(var(--w) * .28); height: calc(var(--w) * .068); border-radius: 999px; background: #0d0809; transform: translateX(-50%); content: ""; }
.hero-demo-name { max-width: 100%; font-size: 11px; font-weight: 600; line-height: 1.3; text-align: center; }
.hero-demo:hover .hero-demo-phone { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 30px 52px -20px rgba(76,5,25,.55), 0 10px 20px -10px rgba(0,0,0,.35); }
.hero-demo:hover .hero-demo-name { color: #b9254a; }
.hero-demo:focus-visible { outline: 2px solid #d7355d; outline-offset: 6px; border-radius: 12px; }
.hero-demos-note { flex: 0 0 100%; margin: 12px 0 0; font-size: 10px; letter-spacing: .03em; color: #8b7880; text-align: center; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.hero-proof li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #f1d9de; border-radius: 999px; background: rgba(255,255,255,.82); color: #6b5560; font-size: 11px; font-weight: 600; line-height: 1.3; }
.hero-proof li::before { color: #d7355d; font-weight: 800; content: "✓"; }

/* AdSense auto ads arrive as div.google-auto-placed between blocks. In flex rows they get their own
   line at the end of the block; in the catalog grid they span the full row. Nothing is squeezed. */
.hero-content, .hero-actions { flex-wrap: wrap; }
.hero-content > .google-auto-placed, .hero-actions > .google-auto-placed, .hero-demos > .google-auto-placed { flex: 0 0 100%; order: 99; }
.hero-content > .google-auto-placed { position: relative; z-index: 3; padding: 0 24px 24px; }
#gallery-grid > .google-auto-placed { grid-column: 1 / -1; }

@media (max-width: 767px) {
  .hero-content { flex-direction: column; align-items: stretch; }
  .hero-demos { gap: 0 10px; margin-top: 22px; align-items: flex-start; }
  /* Three across inside the 18px gutters and two 10px gaps, even at 320px. */
  .hero-demo { --w: min(132px, calc((100vw - 56px) / 3)); gap: 7px; }
  .hero-demo-name { font-size: 10px; }
  .hero-proof { margin-top: 14px; }
  .hero-proof li { padding: 4px 9px; font-size: 10.5px; }
}

@media (min-width: 768px) {
  /* Zero basis: with .hero-content wrapping (for ads) the phones still share the copy's line. */
  .hero-demos { flex: 1 1 0%; min-width: 0; padding: 30px 28px 26px 0; }
  .hero-demo-main { --w: clamp(160px, 13.5vw, 188px); z-index: 2; }
  .hero-demo-side { --w: clamp(124px, 10.5vw, 140px); z-index: 1; }
  .hero-demo-side:first-of-type { margin-right: -16px; transform: rotate(-4deg); }
  .hero-demo-side:last-of-type { margin-left: -16px; transform: rotate(4deg); }
  .hero-demo-side:first-of-type .hero-demo-name { padding-right: 24px; }
  .hero-demo-side:last-of-type .hero-demo-name { padding-left: 24px; }
  .hero-proof { margin-top: 18px; max-width: 470px; }
}
/* Between 768 and 1100px the copy keeps 65% of the hero: only the main phone fits. */
@media (min-width: 768px) and (max-width: 1100px) {
  .hero-demo-side { display: none; }
  .hero-demos { padding-right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-demo-phone { transition: none; }
  .hero-demo:hover .hero-demo-phone { transform: none; }
}