/* Toggled by site.js for form success/message states (keeps the element's
   real display type intact when shown). */
.is-hidden { display: none !important; }

/* Floating "Ask AI" button — fixed circle in the top-right that expands to a
   pill label on hover/focus, with a gentle attention ring. */
.ai-fab {
  position: fixed; top: 82px; right: clamp(14px, 3vw, 28px); z-index: 60;
  display: inline-flex; align-items: center;
  width: 56px; height: 56px; border-radius: 28px;
  background: #e2a24c; color: #0b0b0a; text-decoration: none;
  box-shadow: 0 6px 22px rgba(0,0,0,0.28);
  overflow: hidden; white-space: nowrap;
  transition: width .28s cubic-bezier(.2,.7,.2,1), background .2s, box-shadow .2s;
  animation: aiNudge 2.8s ease-out infinite;
}
.ai-fab .ai-fab-ico { flex: 0 0 56px; display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; }
.ai-fab .ai-fab-txt {
  font-family: 'Space Mono', monospace; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; padding-right: 22px;
}
.ai-fab:hover, .ai-fab:focus-visible {
  width: 198px; background: #f2efe7; box-shadow: 0 10px 30px rgba(0,0,0,0.34); animation: none;
}
.ai-fab:hover .ai-fab-txt, .ai-fab:focus-visible .ai-fab-txt { opacity: 1; transform: none; }
@keyframes aiNudge {
  0%, 100% { box-shadow: 0 6px 22px rgba(0,0,0,0.28); }
  50%      { box-shadow: 0 6px 22px rgba(0,0,0,0.28), 0 0 0 9px rgba(226,162,76,0.16); }
}
/* On narrow screens drop it to the bottom-right so it never collides with the nav. */
@media (max-width: 560px) { .ai-fab { top: auto; bottom: 18px; } }

/* Responsive rules — replace the design tool's matchMedia JS.
   The prototypes set the mobile (single-column) layout via inline styles,
   so these desktop overrides need !important to win over inline styles. */
@media (min-width: 880px) {
  [data-nav-links]   { display: flex !important; }
  [data-hero-grid]   { grid-template-columns: 1.12fr 0.88fr !important; }
  [data-hero-left]   { justify-content: space-between !important; min-height: clamp(500px,60vh,700px) !important; }
  [data-pricing-grid]{ grid-template-columns: 1fr 1fr !important; }
  [data-contact-grid]{ grid-template-columns: 1fr 1fr !important; }
  [data-grid]        { grid-template-columns: 1fr 1fr !important; }
  [data-two]         { grid-template-columns: 220px 1fr !important; }
}