/* Shared finishing touches; retain the established black, ivory and gold palette. */
:root{--qaa-finish-gold:#bd9147;--qaa-finish-focus:#bd9147}
html{scroll-padding-top:88px}
main{overflow-x:clip}
main :is(section[id],form[id]){scroll-margin-top:88px}
main :is(a,button,input,textarea,select,summary):focus-visible{outline:2px solid var(--qaa-finish-focus);outline-offset:4px}
main :is(.qa-demo,.qa-outline,.ec-button,.ec-secondary,.qaa-play-download){transition:box-shadow .2s ease,background-color .2s ease,transform .2s ease}
.qaa-examples-grid figure{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.qa-faq{transition:border-color .2s ease,background-color .2s ease}
.qa-faq[open]{border-color:#d7bd8d;background:#fffcf6}
.qa-enquiry :is(input,select,textarea){transition:border-color .2s ease,box-shadow .2s ease}
.qa-enquiry :is(input,select,textarea):focus{border-color:#bd9147;box-shadow:0 0 0 3px #bd914718}
.qa-footer{border-top:1px solid #d6ac6229}
@media(hover:hover) and (pointer:fine){
 .qaa-examples-grid figure:hover{transform:translateY(-4px);border-color:#d8a153;box-shadow:0 18px 42px rgba(0,0,0,0.65),0 0 24px rgba(216,161,83,0.15)}
 main :is(.qa-demo,.ec-button):hover{box-shadow:0 8px 22px #bd914724}
}
@media(max-width:700px){
 html{scroll-padding-top:80px}
 main :is(section[id],form[id]){scroll-margin-top:80px}
 .qa-footer .container{width:calc(100% - 36px)}
 .qa-footer-grid{gap:28px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}main *,main *::before,main *::after{animation:none!important;transition:none!important}.qa-pending{opacity:1!important;transform:none!important}}
@media print{.qa-pending{opacity:1!important;transform:none!important}.ref-header,.ref-drawer-backdrop,.fixed.bottom-5.right-5{display:none!important}}

/* ==========================================================================
   Quick Art Academy — Comprehensive Mobile Responsiveness & Button/Typography Polish
   ========================================================================== */

/* 1. Universal Anti-Overflow & Sizing */
html, body {
  max-width: 100vw;
  overflow-x: clip;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Responsive Typography Scaling */
h1, .qa-hero-title, .lp-hero-title {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

h2, .qa-sec-title, .lp-sec-title {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* 3. Button Styling & Minimum Touch Targets (44px+) */
:is(.qa-demo, .qa-outline, .ec-button, .ec-secondary, .lp-btn-primary, .lp-btn-secondary, .hub-btn-details, .hub-btn-enroll, .btn, .btn-gold, .btn-outline, .ref-all-online) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, box-shadow 0.22s ease, background 0.2s ease, border-color 0.2s ease;
}

:is(.qa-demo, .qa-outline, .ec-button, .ec-secondary, .lp-btn-primary, .lp-btn-secondary, .hub-btn-details, .hub-btn-enroll, .btn, .btn-gold):active {
  transform: scale(0.97) !important;
}

/* 4. Luxury Gold Gradient Buttons */
:is(.qa-demo, .lp-btn-primary, .hub-btn-enroll, .btn-gold) {
  background: linear-gradient(135deg, #f5c879 0%, #d8a153 55%, #bd863a 100%) !important;
  color: #0f1117 !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 18px rgba(216, 161, 83, 0.32) !important;
  text-shadow: none !important;
}

:is(.qa-demo, .lp-btn-primary, .hub-btn-enroll, .btn-gold):hover {
  background: linear-gradient(135deg, #fae0a2 0%, #dfad5e 55%, #c89243 100%) !important;
  box-shadow: 0 6px 24px rgba(216, 161, 83, 0.45) !important;
  transform: translateY(-2px);
}

/* 5. Luxury Glass Outline / Secondary Buttons */
:is(.qa-outline, .lp-btn-secondary, .hub-btn-details, .btn-outline) {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f1ede5 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

:is(.qa-outline, .lp-btn-secondary, .hub-btn-details, .btn-outline):hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(216, 161, 83, 0.5) !important;
  color: #f6d389 !important;
  transform: translateY(-2px);
}

/* 6. Form Fields & iOS Safari Auto-Zoom Fix */
@media (max-width: 768px) {
  :is(input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, textarea) {
    font-size: 16px !important;
    min-height: 44px;
  }
}

/* 7. Mobile Layout Polish (<= 640px) */
@media (max-width: 640px) {
  .lp-cta-row,
  .qa-cta-row,
  .hub-card-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .lp-cta-row > a,
  .lp-cta-row > button,
  .hub-card-actions > a,
  .qa-cta-row > a {
    width: 100% !important;
    text-align: center;
  }

  .lp-sticky-cta,
  #mobileStickyCta {
    padding: 10px 16px max(10px, env(safe-area-inset-bottom)) !important;
  }

  body:has(#mobileStickyCta.lp-sticky-visible) .fixed.bottom-5.right-5,
  body:has(#mobileStickyCta.lp-sticky-visible) .qa-float-stack {
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    transition: bottom 0.25s ease;
  }

  .lp-breadcrumb,
  .qa-breadcrumb {
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .lp-breadcrumb::-webkit-scrollbar,
  .qa-breadcrumb::-webkit-scrollbar {
    display: none !important;
  }
}

/* 8. Extra Small Screens (<= 375px: iPhone SE, etc.) */
@media (max-width: 375px) {
  h1, .lp-hero-title, .qa-hero-title {
    font-size: 27px !important;
    line-height: 1.18 !important;
  }

  h2, .lp-sec-title, .qa-sec-title {
    font-size: 21px !important;
    line-height: 1.25 !important;
  }

  .lp-pricing-price {
    font-size: 36px !important;
  }

  .lp-pricing-box {
    padding: 20px 14px !important;
  }

  .lp-media-thumb {
    border-radius: 12px !important;
  }

  .hub-card-body {
    padding: 14px 10px !important;
  }
}

/* 9. Luxury Course Feature Badges & Chips */
.lp-highlights, .lp-hero-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 12px !important;
  margin: 22px 0 28px !important;
}

.lp-h-item, .lp-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.88) 0%, rgba(13, 15, 22, 0.95) 100%) !important;
  border: 1px solid rgba(216, 161, 83, 0.32) !important;
  border-radius: 9999px !important;
  padding: 8px 18px 8px 10px !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0.15px !important;
  color: #f1f5f9 !important;
  box-shadow: 
    0 4px 16px -2px rgba(0, 0, 0, 0.65),
    0 0 16px -4px rgba(216, 161, 83, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

.lp-h-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(216, 161, 83, 0.28) 0%, rgba(216, 161, 83, 0.1) 100%) !important;
  border: 1px solid rgba(216, 161, 83, 0.45) !important;
  color: #f6d389 !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  box-shadow: 0 0 12px rgba(216, 161, 83, 0.3) !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
}

.lp-h-text {
  flex: 1 !important;
  min-width: 0 !important;
  display: inline-block !important;
  line-height: 1.3 !important;
}

.lp-h-item:hover, .lp-chip:hover {
  background: linear-gradient(135deg, rgba(38, 43, 62, 0.95) 0%, rgba(18, 20, 30, 0.98) 100%) !important;
  border-color: rgba(216, 161, 83, 0.7) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 
    0 8px 24px -4px rgba(0, 0, 0, 0.75),
    0 0 24px -2px rgba(216, 161, 83, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.lp-h-item:hover .lp-h-icon, .lp-chip:hover .lp-h-icon {
  transform: scale(1.12) rotate(6deg) !important;
  background: radial-gradient(circle, rgba(216, 161, 83, 0.45) 0%, rgba(216, 161, 83, 0.2) 100%) !important;
  border-color: rgba(216, 161, 83, 0.85) !important;
  box-shadow: 0 0 16px rgba(216, 161, 83, 0.6) !important;
}

@media (max-width: 640px) {
  .lp-highlights, .lp-hero-chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
    margin: 16px 0 22px !important;
    width: 100% !important;
  }

  .lp-h-item, .lp-chip {
    width: 100% !important;
    border-radius: 12px !important;
    padding: 9px 10px !important;
    gap: 8px !important;
    font-size: 12px !important;
    justify-content: flex-start !important;
  }

  .lp-h-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 11.5px !important;
  }

  .lp-h-text {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
  }
}

@media (max-width: 360px) {
  .lp-highlights, .lp-hero-chips {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }
  .lp-h-item, .lp-chip {
    padding: 8px 12px !important;
  }
}

/* 10. Refined Compact Stats Bar & Counter */
.lp-stats-bar {
  background: linear-gradient(180deg, rgba(14, 16, 23, 0.98) 0%, rgba(18, 20, 29, 0.98) 100%) !important;
  border-top: 1px solid rgba(216, 161, 83, 0.22) !important;
  border-bottom: 1px solid rgba(216, 161, 83, 0.22) !important;
  padding: 24px 0 !important;
  margin-bottom: 44px !important;
  position: relative !important;
}

.lp-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.lp-stat-item,
.lp-stats-grid > div {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
  border: 1px solid rgba(216, 161, 83, 0.22) !important;
  border-radius: 14px !important;
  padding: 16px 12px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-sizing: border-box !important;
}

.lp-stat-val,
.lp-stat-num {
  font-size: 24px !important;
  font-weight: 800 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  background: linear-gradient(135deg, #f8dfaa 0%, #d8a153 50%, #b88238 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1.15 !important;
  margin-bottom: 5px !important;
  letter-spacing: -0.02em !important;
}

.lp-stat-label,
.lp-stat-lbl {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  line-height: 1.35 !important;
}

@media (max-width: 768px) {
  .lp-stats-bar {
    padding: 18px 0 !important;
    margin-bottom: 32px !important;
  }
  .lp-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .lp-stat-item,
  .lp-stats-grid > div {
    padding: 12px 8px !important;
    border-radius: 12px !important;
  }
  .lp-stat-val,
  .lp-stat-num {
    font-size: 20px !important;
  }
  .lp-stat-label,
  .lp-stat-lbl {
    font-size: 10px !important;
  }
}

/* Universal Footer Brand: Keep "Quick Art" strictly on a single line */
.qa-footer .qa-brand,
.qa-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}

.qa-footer .qa-brand img,
.qa-brand img {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

.qa-footer .qa-brand > span,
.qa-brand > span {
  display: block !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}

.qa-footer .qa-brand > span b,
.qa-brand > span b {
  display: inline !important;
  color: #d7ac59 !important;
}

.qa-footer .qa-brand > span small,
.qa-brand > span small,
.qa-brand > span > small {
  display: block !important;
  font-size: 8.5px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  color: #94a3b8 !important;
  margin-top: 3px !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* Universal CTA Banner: Single unified luxury container, no nested inner boxes */
.rounded-\[36px\].bg-ink .grid > div:first-child,
section .rounded-\[36px\] .grid > div:first-child {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  display: block !important;
}

.rounded-\[36px\].bg-ink .grid > div:last-child,
section .rounded-\[36px\] .grid > div:last-child,
.rounded-\[36px\].bg-ink .flex-col,
section .rounded-\[36px\] .flex-col {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  width: 100% !important;
}

.rounded-\[36px\].bg-ink .lp-btn-primary,
.rounded-\[36px\].bg-ink .lp-btn-secondary,
section .rounded-\[36px\] .lp-btn-primary,
section .rounded-\[36px\] .lp-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 24px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border-radius: 14px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  gap: 8px !important;
}

@media (max-width: 768px) {
  .rounded-\[36px\].bg-ink .grid > div:last-child,
  section .rounded-\[36px\] .grid > div:last-child,
  .rounded-\[36px\].bg-ink .flex-col,
  section .rounded-\[36px\] .flex-col {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .rounded-\[36px\].bg-ink .lp-btn-primary,
  .rounded-\[36px\].bg-ink .lp-btn-secondary,
  section .rounded-\[36px\] .lp-btn-primary,
  section .rounded-\[36px\] .lp-btn-secondary {
    width: 100% !important;
    justify-content: center !important;
  }
}