/* Responsive refinements use stable component classes, independent of export IDs. */
html { scroll-padding-top: 90px; }
#dc-root :is(section,footer) :is(h1,h2,h3,p,a) { overflow-wrap: break-word; }
#dc-root :is(section,footer) :is(div,span) { min-width: 0; }
html body a[href*="book-demo"] { white-space: nowrap; justify-content: center; }
html body #dc-root .faq-group-heading { font-size: 15px !important; line-height: 1.4 !important; }
html body .zb-menu { overflow-y: auto; overscroll-behavior: contain; }
html body .zb-menu-foot { flex-shrink: 0; }
html body .zb-menu-links { flex-shrink: 0; }
html body .zb-burger { width: 44px; height: 44px; }

@media (max-width: 1100px) {
  html body #dc-root header { padding: 0 !important; background: rgba(255,255,255,.96) !important; }
  html body #dc-root header>div { padding: 14px 18px !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; }
  html body #dc-root header nav, html body #dc-root header nav+div { display: none !important; }
  html body .zb-bar { display: flex !important; }
  html body .zb-menu { display: flex !important; }
  html body .zubo-assistant-top { padding: 0 6px 0 12px; min-height: 44px; }
  html body .zubo-assistant-details { display: inline-flex; align-items: center; min-height: 44px; }
  html body .zubo-assistant-dismiss { width: 44px; height: 44px; flex-basis: 44px; }
  #problem .problem-grid>div { opacity: 1 !important; transform: none !important; }
  html body:has(>.zubo-assistant-card) { padding-bottom: 0; }
  html body:has(>.zubo-assistant-card) #dc-root footer { padding-bottom: 174px !important; }
  html body #how { height: auto !important; }
  html body #howPin { position: relative !important; height: auto !important; width: 100% !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: auto !important; padding: 64px 26px; overflow: visible !important; }
  #howPin>div { grid-template-columns: minmax(0,1fr) !important; gap: 32px !important; }
  #howPin .how-cards { display: grid !important; gap: 16px !important; height: auto !important; }
  #howPin .how-cards>[id^="zstep-"] { position: relative !important; height: auto !important; min-height: 0 !important; left: auto !important; right: auto !important; top: auto !important; margin: 0 !important; padding: 26px !important; }
  #howPin .how-cards>[id^="zstep-"]>div:nth-child(3) { min-height: 0 !important; }
}
@media (max-width: 900px) {
  #cost .cost-layout { grid-template-columns: minmax(0,1fr) !important; gap: 48px !important; }
  #cost .cost-layout>div:first-child { max-width: 620px; }
  #cost .cost-orbit { width: min(100%,420px) !important; margin: 40px auto 20px !important; }
  #problem .problem-grid { gap: 16px !important; border: 0 !important; }
  #problem .problem-card { border: 1px solid #E7E0D2 !important; border-radius: 18px !important; }
  #problem .problem-card>div:nth-child(2) { min-height: 0 !important; }
  #problem .problem-card>div:nth-child(3) { min-height: 180px !important; }
  #problem .problem-card>div:last-child { min-height: 0 !important; }
  html body #features .feature-layout { min-height: 0 !important; gap: 28px !important; margin-top: 28px !important; }
  #features .feature-workspace { min-width: 0; }
  .feature-detail-booking>div:first-child { order: 2; }
  html body #howPin { width: 100% !important; left: 0 !important; right: 0 !important; }
  #howPin .how-cards { display: grid !important; gap: 16px !important; height: auto !important; }
  #howPin .how-cards>[id^="zstep-"] { height: auto !important; margin: 0 !important; padding: 26px !important; }
  #howPin .how-cards>[id^="zstep-"]>div:nth-child(3) { min-height: 0 !important; }
  .demo-main input, .demo-main select { font-size: 16px; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 80px; }
  html body #dc-root header>div { min-height: 64px; }
  html body #dc-root section:not(.home-hero):not(#how):not(#signals) { padding: 54px 18px !important; }
  html body #dc-root header+section:not(.home-hero)>div:last-child { padding: 0 !important; }
  html body #dc-root #plans { padding-bottom: 0 !important; }
  html body .home-hero .hero-content { padding: 32px 18px 0 !important; gap: 30px !important; }
  html body #dc-root .home-hero h1 { font-size: 42px !important; }
  html body .hero-subtitle { font-size: 28px !important; line-height: 1.12 !important; }
  html body .hero-actions { gap: 12px !important; margin-top: 24px !important; }
  html body .hero-actions a { min-height: 48px; padding: 14px 22px !important; }
  html body .hero-demo { gap: 16px !important; }
  html body .hero-phone { flex-basis: 302px !important; width: 302px !important; }
  html body .hero-summary { width: 100% !important; flex: 1 1 100% !important; padding-top: 0 !important; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px !important; padding-bottom: 20px; }
  html body .hero-summary>div { padding: 14px 12px !important; animation: none !important; }
  html body .hero-summary>div:last-child { grid-column: 1/-1; }
  #cost .cost-orbit { width: 100% !important; max-width: 360px !important; margin-top: 48px !important; margin-bottom: 14px !important; }
  #cost .cost-orbit>div:nth-child(n+6) { width: 120px !important; }
  #cost .cost-orbit>div:nth-child(6) { top: 10% !important; }
  #cost .cost-orbit>div:nth-child(7) { left: 78% !important; top: 78% !important; }
  #cost .cost-orbit>div:nth-child(8) { left: 22% !important; top: 78% !important; }
  #cost .cost-orbit>div:nth-child(n+6)>div { padding: 12px 9px !important; animation: none !important; }
  #cost .cost-orbit>div:nth-child(n+6)>div>div:first-child { font-size: 32px !important; }
  #cost .cost-orbit>div:nth-child(n+6)>div>div:last-child { font-size: 12px !important; }
  #problem .problem-grid { margin-top: 28px !important; }
  #problem .problem-card { padding: 22px 18px !important; gap: 12px !important; }
  #problem .problem-card>div:nth-child(3) { min-height: 0 !important; padding: 16px 14px !important; }
  #features .feature-tabs { margin-top: 24px !important; flex-wrap: nowrap !important; gap: 0 !important; }
  #features .feature-tabs>* { flex: 1 1 0; min-width: 0; }
  #features .feature-tabs button { width: 100%; min-height: 48px; padding: 12px 4px !important; font-size: 14px !important; white-space: nowrap; }
  #features .feature-workspace { padding: 16px !important; }
  #features .feature-workspace>div:first-child { flex-wrap: wrap; row-gap: 8px; }
  #features .feature-workspace>div:first-child>span:last-child { margin-left: 0 !important; flex-basis: 100%; }
  #features .workspace-row { grid-template-columns: minmax(0,1fr) auto !important; gap: 10px !important; padding: 14px 12px !important; }
  #features .workspace-row>div:first-child>div { overflow-wrap: anywhere; }
  #features .workspace-row>div:last-child { padding: 6px 8px !important; font-size: 11px !important; }
  html body #howPin { padding: 54px 18px !important; }
  #howPin .how-cards>[id^="zstep-"] { padding: 24px 22px !important; }
  #howPin .how-cards>[id^="zstep-"]>div:nth-child(2) { font-size: 26px !important; }
  #howPin .how-cards>[id^="zstep-"]>div:nth-child(3) { font-size: 16px !important; }
  #faq #foundingCard { margin-top: 0 !important; padding: 24px !important; }
  #dc-root section button { min-height: 44px; }
  #dc-root footer a { display: inline-flex; align-items: center; min-height: 44px; }
  #dc-root footer a[href^="mailto:"] { overflow-wrap: anywhere; }
  html body .zubo-assistant-content { padding: 10px 12px; gap: 10px; }
  html body .zubo-assistant-message { font-size: 13px; }
  html body .zubo-assistant-message span { display: none; }
  html body .zubo-assistant-top { gap: 6px; padding: 0 4px 0 12px; min-height: 44px; }
  html body .zubo-assistant-title { font-size: 11px; }
  html body .zubo-assistant-details { display: inline-flex; align-items: center; min-height: 44px; }
  html body .zubo-assistant-dismiss { width: 44px; height: 44px; flex-basis: 44px; }
  html body .zubo-assistant-cta { min-height: 44px; }
  .demo-main input, .demo-main select { font-size: 16px; }
  .demo-form-card .form-row { grid-template-columns: minmax(0,1fr); gap: 0; }
}
@media (max-width: 767px) {
  html body #realtime .realtime-visual { zoom: 1 !important; height: 300px !important; margin-top: 24px !important; }
  #realtime>div:first-child { margin-bottom: 28px !important; }
  #realtime .realtime-visual>div:nth-child(-n+3) { width: 340px !important; height: 340px !important; bottom: -95px !important; }
  #realtime .realtime-visual>div:nth-child(4) { bottom: 90px !important; gap: 18px !important; }
  #realtime .realtime-visual>div:nth-child(4)>span:first-child { font-size: 210px !important; }
  #realtime .realtime-visual>div:nth-child(4)>span:last-child { width: 34px !important; height: 34px !important; }
  #realtime .realtime-flags>div { left: 50% !important; right: auto !important; top: 28px !important; translate: -50% 0; max-width: calc(100% - 8px) !important; width: max-content; white-space: normal !important; text-align: center; font-size: 13px !important; padding: 12px 16px !important; }
}
@media (max-width: 360px) {
  html body .hero-subtitle { font-size: 25px !important; }
  #cost .cost-orbit>div:nth-child(n+6) { width: 110px !important; }
  #cost .cost-orbit>div:nth-child(7) { left: 76% !important; }
  #cost .cost-orbit>div:nth-child(8) { left: 24% !important; }
  html body .hero-summary { grid-template-columns: minmax(0,1fr); }
  #features .feature-tabs button { font-size: 12px !important; }
  #features .workspace-row { grid-template-columns: minmax(0,1fr) !important; }
  #features .workspace-row>div:last-child { justify-self: start; }
}
@media (max-height: 560px) and (max-width: 1100px) {
  html body .zb-menu { padding: 16px 22px; gap: 10px; }
  html body .zb-menu-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 0; }
  html body .zb-menu-links a { padding: 10px 0; font-size: 18px; }
  html body .zb-menu-foot { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #dc-root *, .zb-menu { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  #problem .problem-grid>div, #compareWith, #foundingCard, #ctaInner { opacity: 1 !important; transform: none !important; }
  #realtime .realtime-flags>div { opacity: 1 !important; animation: none !important; }
}