/* Business profile landing page (/feature/business-profile).
   Everything is scoped to #dc-root, the element support.js mounts the page into,
   so the site header and footer keep the theme's own fonts and link colours. */

html.html-business-profile-landing-page { scroll-behavior: smooth; scroll-padding-top: 84px; }

/* Loading shell: the template is hidden until React mounts it, so the shell holds a
   screen of height and shows a hero-shaped skeleton; both stop once #dc-root exists. */
#bps-shell { min-height: 100vh; background: linear-gradient(135deg, #FFF3E3 0%, #FDE9F4 42%, #E9EEFF 100%); }
#bps-shell:has(#dc-root) { min-height: 0; background: none; }
#bps-shell:has(#dc-root) .bps-loading { display: none; }
.bps-loading { max-width: 1320px; margin: 0 auto; padding: clamp(20px, 2.5vw, 32px) 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; }
.bps-loading-inner { display: grid; gap: 18px; }
.bps-skel { display: block; border-radius: 12px; background: rgba(23, 18, 50, .07); animation: bpsPulse 1.4s ease-in-out infinite; }
.bps-skel-pill { width: 240px; height: 30px; border-radius: 999px; }
.bps-skel-h1 { width: 80%; height: clamp(36px, 5.6vw, 66px); }
.bps-skel-h1-short { width: 55%; }
.bps-skel-p { width: 90%; height: 18px; margin-top: 8px; }
.bps-skel-p-short { width: 65%; margin-top: 0; }
.bps-skel-photo { width: min(100%, 430px); aspect-ratio: 5 / 6; border-radius: 24px; justify-self: center; }
@keyframes bpsPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

#dc-root { background: #FFFFFF; color: #2A2348; font-family: "Plus Jakarta Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
#dc-root *, #dc-root *::before, #dc-root *::after { box-sizing: border-box; }
#dc-root a { color: #C2410C; text-decoration: none; }
#dc-root a:hover { color: #FFC489; }
#dc-root input, #dc-root textarea, #dc-root button { font-family: inherit; }
#dc-root ::selection { background: #D16E0D; color: #fff; }
#dc-root :focus-visible { outline: 2px solid #C2410C; outline-offset: 3px; }
#studio-preview::-webkit-scrollbar { width: 0; height: 0; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes auraDrift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-30px, 20px, 0) scale(1.08); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(209, 110, 13, .35); } 60% { box-shadow: 0 0 0 16px rgba(209, 110, 13, 0); } }
@keyframes gradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* the theme's style.css pads every section 60px top and bottom; each section here sets its own spacing */
main#top > section { padding-top: 0; padding-bottom: 0; }
/* style.css underlines any focused button; the theme cards, tabs and toggles here keep focus after a click */
main#top button, main#top button:focus, main#top button:hover { text-decoration: none; }

[data-reveal] { opacity: 0; transform: translateY(24px); }
[data-reveal="in"] { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.16, .84, .44, 1), transform .7s cubic-bezier(.16, .84, .44, 1); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  #dc-root * { animation: none !important; transition: none !important; }
  html.html-business-profile-landing-page { scroll-behavior: auto; }
}