/* Draw My Business: the flow on top of home.css (hero landscape, glass, town pins). */
.dmb-stage { min-height: 980px; }
.dmb-panel { border-radius: var(--radius-xl); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); color: var(--ink); max-width: 520px; }
.dmb-panel p { color: var(--ink); }
.dmb-panel h1, .dmb-panel h2 { color: var(--ink); outline: none; }
.dmb-kicker { color: var(--sapphire-ink); }
.dmb-muted { color: var(--ink-muted) !important; }
.dmb-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.dmb-beads { display: flex; gap: 6px; align-items: center; }
.dmb-bead { width: 10px; height: 10px; border-radius: 50%; background: var(--ground-sunken); box-shadow: var(--shadow-clay-well); border: 1px solid var(--line-strong); }
.dmb-bead.is-done { background: var(--gold); border-color: var(--gold-trim); box-shadow: var(--shadow-clay); }
.dmb-bead.is-now { background: var(--sapphire-ink); border-color: var(--sapphire-ink); }
.dmb-options { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.dmb-option { width: 100%; justify-content: flex-start; text-align: left; white-space: normal; padding: var(--space-3) var(--space-6); }
.dmb-option[aria-pressed="true"] { background: var(--sheen), var(--sapphire-ink); color: var(--ground); border-color: transparent; }
.dmb-candidate { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; white-space: normal; border-radius: 22px; padding: var(--space-3) var(--space-6); }
.dmb-candidate small { font-weight: 400; color: var(--ink-muted); }
.dmb-listing { background: var(--ground-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-1); }
.dmb-quote { margin: 0; padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg); background: var(--ground-warm); color: var(--ink); }
.dmb-also { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dmb-also li { display: flex; gap: var(--space-3); align-items: baseline; }
.dmb-also li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-trim); flex: none; transform: translateY(1px); }
.dmb-textarea { border-radius: 24px; min-height: 96px; resize: vertical; }
.dmb-error { color: var(--status-danger) !important; }
.dmb-demo { display: inline-flex; align-self: flex-start; }

/* The office lights up once we know the business.
   Dark: lights off. Powering: a warm sweep, then each room glows on in turn (front desk first).
   Questions: the room being asked about breathes teal. Result: the leak pulses gold and red. */
.dmb-town .home-town-map > img { transition: filter 1.2s ease-out, opacity .8s ease-out; }
.dmb-town.is-blank .home-town-map > img { filter: brightness(.4) saturate(.28) drop-shadow(0 34px 34px var(--ground-shadow)); opacity: .9; }
.dmb-town.is-blank .home-pin, .dmb-town.is-blank .home-ring { opacity: 0; }

/* Light effects stay inside the office's outline (the mask is the office image, set on the page). */
.dmb-fx { position: absolute; inset: 0; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.dmb-sweep { position: absolute; top: -10%; bottom: -10%; left: -60%; width: 60%; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(100deg, rgba(255, 214, 150, 0) 0%, rgba(255, 214, 150, .55) 50%, rgba(255, 214, 150, 0) 100%); }
.dmb-town.is-powering .dmb-sweep { animation: dmb-sweep 1.3s cubic-bezier(.3, .1, .2, 1) .05s 1 both; }
@keyframes dmb-sweep { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(270%); opacity: 0; } }

.dmb-glow { position: absolute; width: 28%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.9); opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 210, 140, .8), rgba(255, 190, 110, .32) 50%, rgba(255, 190, 110, 0));
  transition: opacity .5s ease-out, transform .5s ease-out; }
.dmb-town.is-on .dmb-glow { opacity: .42; }
.dmb-town.is-powering .dmb-glow { animation: dmb-bloom 1.1s ease-out both; animation-delay: calc(var(--i, 0) * 160ms + 350ms); }
@keyframes dmb-bloom { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); } 45% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: .42; transform: translate(-50%, -50%) scale(.9); } }
.dmb-town .dmb-glow.is-active { background: radial-gradient(closest-side, rgba(124, 207, 201, .9), rgba(79, 169, 164, .35) 50%, rgba(79, 169, 164, 0)); animation: dmb-breathe 1.8s ease-in-out infinite; }
@keyframes dmb-breathe { 0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(.85); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }
.dmb-town .dmb-glow.is-top { background: radial-gradient(closest-side, rgba(244, 197, 66, .95), rgba(214, 72, 60, .45) 50%, rgba(214, 72, 60, 0)); animation: dmb-alarm 1.5s ease-in-out infinite; }
@keyframes dmb-alarm { 0%, 100% { opacity: .65; transform: translate(-50%, -50%) scale(.9); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } }
.dmb-town .dmb-glow.is-flag { background: radial-gradient(closest-side, rgba(244, 197, 66, .7), rgba(244, 197, 66, 0)); opacity: .55; }
.dmb-town .dmb-glow.is-dim { opacity: 0; }

/* Labels pop in with the lights, in the same order */
.dmb-town .home-pin { transition: opacity .4s ease-out, transform .3s ease-out, box-shadow .3s ease-out; }
.dmb-town.is-powering .home-pin { animation: dmb-pop .5s ease-out backwards; animation-delay: calc(var(--i, 0) * 160ms + 500ms); }
@keyframes dmb-pop { from { opacity: 0; transform: translate(-50%, -80%) scale(.8); } to { opacity: 1; transform: translate(-50%, -100%) scale(1); } }
.dmb-town .home-pin.is-active { box-shadow: 0 0 0 3px var(--turquoise), var(--shadow-glass); transform: translate(-50%, -100%) scale(1.08); z-index: 2; }
.dmb-town .home-pin.is-top { box-shadow: 0 0 0 3px var(--gold), var(--shadow-glass); transform: translate(-50%, -100%) scale(1.12); z-index: 2; }
.dmb-town .home-pin.is-top::before { background: var(--status-danger); }
.dmb-town .home-pin.is-flag::before { background: var(--gold-trim); }
.dmb-town .home-pin.is-dim { opacity: .62; }
.dmb-town .home-ring { transition: left .6s ease-out, top .6s ease-out, opacity .4s; }
.dmb-town .home-ring.is-hidden { opacity: 0; }
.dmb-caption { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); color: var(--ink); white-space: nowrap; }
.dmb-town:not(.is-blank) .dmb-caption { display: none; }

@media (max-width: 1080px) { .dmb-stage { min-height: 0; } .dmb-panel { max-width: none; } }
@media (max-width: 720px) { .dmb-panel { padding: var(--space-6) var(--space-4); } }
@media (prefers-reduced-motion: reduce) { .dmb-town .home-pin, .dmb-town .home-ring, .dmb-town .home-town-map img, .dmb-sweep, .dmb-glow { animation: none !important; transition: none !important; } .dmb-sweep { display: none; } }