/* Buildiario 1.0 Mobile Comfort — responsive layer added after the premium/glossy styles.
   Presentation-only: no API, membership, checkout, login, download, or form changes. */

/* Keep pale glossy buttons readable against the deep-navy support banner. */
.cta-banner .btn-ghost-white,
.cta-banner .btn-white {
  color:#143f66 !important;
  background-image:linear-gradient(180deg,#fff 0%,#f6fbff 43%,#d5ebff 100%) !important;
  border-color:#c0dbf1 !important;
  text-shadow:none !important;
  box-shadow:0 11px 25px rgba(0,12,30,.23),inset 0 2px 1px #fff !important;
}
.cta-banner .btn-ghost-white:hover,
.cta-banner .btn-white:hover {
  color:#123b60 !important;
  background-image:linear-gradient(180deg,#fff,#e1f2ff 100%) !important;
}

@media(max-width:990px) {
  .pricing-grid {grid-template-columns:minmax(0,1fr)}
  .price-card {min-width:0}
}
/* Tablets: preserve a clean header without pushing the action buttons offscreen. */
@media(max-width:990px) and (min-width:731px) {
  .topbar {padding-inline:16px; gap:12px}
  .topbar-right {gap:8px; flex-shrink:0}
  .topbar-right .top-link,.topbar-right .btn-outline {display:none}
  .topbar-right .btn {padding:10px 12px;font-size:11px}
  .breadcrumb {letter-spacing:.65px}
}

@media(max-width:730px) {
  .site-layout,.main-area {min-width:0;width:100%}
  .topbar {gap:8px;padding-inline:12px;min-width:0}
  .topbar-left {flex:1;min-width:0;gap:8px}
  .topbar-right {gap:7px;min-width:0;flex-shrink:0}
  .topbar-right .top-link,.topbar-right .btn-outline {display:none!important}
  .breadcrumb {white-space:normal;line-height:1.3;letter-spacing:.75px;max-width:155px}
  .topbar-right .btn {white-space:nowrap;min-height:44px;padding:9px 11px}
  .menu-btn {flex:0 0 42px;width:42px;height:42px;box-shadow:0 5px 14px rgba(22,69,117,.12)}
  .sidebar {height:100dvh;max-height:100dvh;overflow:hidden;padding-bottom:max(12px,env(safe-area-inset-bottom));z-index:41}
  .sidebar.open {box-shadow:15px 0 46px rgba(2,16,35,.4)}
  .mobile-overlay.show {z-index:40}
  .sidebar-nav {flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;gap:7px}
  .sidebar .nav-link {min-height:48px}
  .sidebar-help {padding:12px;border-radius:17px}
  .sidebar-help p {margin:4px 0 9px}
  .sidebar-footer {padding-top:8px}
  .workspace-badge {margin-bottom:12px;min-height:56px}
  .brand-section {margin-bottom:10px}
  .content {padding:19px 14px 34px}
  .page-heading {margin-top:8px}
  .page-heading h1 {font-size:clamp(29px,8vw,40px);line-height:1.12}
  .page-heading p,.section-intro>p {font-size:14px;line-height:1.65}
  .home-hero {padding:28px 22px 24px;gap:14px;min-height:0;border-radius:22px}
  .home-hero h1 {font-size:clamp(36px,9.2vw,49px);line-height:1.075;margin-bottom:17px;overflow-wrap:normal}
  .home-hero .lead {font-size:14px;line-height:1.72;margin:0}
  .home-hero .button-row {display:grid;grid-template-columns:1fr;gap:10px;margin:23px 0 16px}
  .home-hero .button-row .btn {width:100%;min-height:50px;white-space:normal;padding:12px 14px}
  .hero-art {width:100%;min-width:0;max-width:100%;padding:12px 0 6px!important}
  .home-hero .screen-frame {transform:none;border-width:3px;max-width:100%}
  .home-hero .screen-frame img {height:clamp(170px,49vw,290px)!important;object-fit:cover;object-position:top}
  .home-hero .floating-pill {padding:7px 9px;font-size:9px;max-width:52%}
  .home-hero .float-one {right:0;bottom:0}
  .home-hero .float-two {left:0;bottom:22px}
  .home-hero .art-label {right:1%;top:6px;padding:6px 8px;font-size:8px}
  .section {margin-top:44px}
  .premium-role-section {margin-top:46px}
  .premium-role-tabs {gap:7px;padding:11px}
  .premium-role-tabs button {min-width:0;min-height:50px;padding:10px;line-height:1.35}
  .premium-role-panel {padding:22px}
  .premium-role-panel h3 {font-size:clamp(23px,6vw,29px)}
  .premium-role-panel p {font-size:13px;line-height:1.7}
  .premium-role-panel .btn {min-height:46px}
  .premium-journey {padding:22px;margin-top:46px}
  .premium-journey-grid {grid-template-columns:1fr}
  .premium-contact-banner {padding:22px;gap:17px}
  .premium-contact-banner .btn {white-space:normal;min-height:48px;width:100%}
  .cta-banner {padding:24px 21px;border-radius:20px}
  .cta-banner h2 {font-size:clamp(28px,7.4vw,38px);line-height:1.14;max-width:100%;letter-spacing:-.035em}
  .cta-banner p {font-size:14px;line-height:1.65}
  .cta-banner .button-row {display:grid;grid-template-columns:1fr;gap:11px;width:100%;margin-top:22px}
  .cta-banner .btn {width:100%;min-height:50px;white-space:normal;padding:12px 14px}
  .contact-form input,.contact-form textarea,.contact-form select,
  .feature-search input,.faq-search input,.ai-form input {font-size:16px;min-height:48px}
  .contact-form textarea {min-height:150px}
  .contact-form button[type=submit],.wizard-main button,.mailbox-card {min-height:48px}
  .download-help {display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:21px}
  .download-help .btn {width:100%;min-height:48px;margin-left:0;white-space:normal}
  .download-grid {grid-template-columns:minmax(0,1fr)}
  .download-card {min-width:0;max-width:100%;padding:21px}
  .download-card .btn {width:100%;max-width:100%;padding:12px;min-height:48px;white-space:normal;overflow-wrap:anywhere}
  .mailbox-grid {grid-template-columns:1fr}
  .mailbox-card {padding:18px}
  .contact-layout > div,.contact-side {min-width:0}
  .main-footer {padding-bottom:88px}
  .ai-launcher {right:12px;bottom:calc(13px + env(safe-area-inset-bottom));min-height:46px;z-index:51}
  .ai-panel {right:8px;bottom:calc(71px + env(safe-area-inset-bottom));width:calc(100vw - 16px);max-width:none;height:min(530px,calc(100dvh - 98px));border-radius:18px}
  .ai-header {padding:12px 14px}
}

@media(max-width:390px) {
  .topbar {height:62px;gap:6px;padding-inline:10px}
  .topbar-left {gap:6px}
  .topbar-right .btn-blue {display:none!important}
  .topbar-right .portal-login-cta {font-size:10px!important;padding:10px 11px!important;min-height:43px}
  .breadcrumb {max-width:116px;letter-spacing:.45px;font-size:9px}
  .breadcrumb span {padding-inline:3px}
  .home-hero {padding:23px 18px 20px;border-radius:20px}
  .home-hero h1 {font-size:clamp(32px,9.7vw,38px)}
  .home-hero .eyebrow {font-size:9px;letter-spacing:1.3px}
  .home-hero .hero-sub {font-size:10px}
  .home-hero .floating-pill {display:none}
  .section-intro h2 {font-size:26px}
  .premium-role-tabs {grid-template-columns:1fr 1fr}
  .premium-role-tabs button {gap:5px;font-size:11px}
  .cta-banner h2 {font-size:29px}
  .cta-banner p {font-size:13px}
  .ai-launcher {padding:10px 12px;font-size:12px}
}
@media(max-width:340px) {
  .topbar .breadcrumb {display:none}
  .home-hero h1 {font-size:32px}
  .sidebar {width:min(295px,94vw)}
}
@media(hover:none) {
  .btn:hover:not(:disabled),.ai-launcher:hover,.premium-role-tabs button:hover,
  .nav-link:hover {transform:none}
}
@media(prefers-reduced-motion:reduce) {
  .sidebar {transition:none!important}
}