/* Generated by scripts/build-css-bundles.py from: components.css, floating-contact.css, responsive-polish.css. Edit those files, not this one. */

/* --- components.css --- */
/* Shared brand token and CTA styles. Preserve the existing cascade layer. */
@layer theme {
  :root, :host {
    --sa-brand: #0084ff;
  }
}
@layer components {
  .btn{
    border-radius:calc(var(--radius) - 4px);
    padding-inline:calc(var(--spacing) * 4);
    padding-block:calc(var(--spacing) * 2);
    color:var(--color-white);
    transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
    transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));
    transition-duration:var(--tw-duration,var(--default-transition-duration));
    --tw-duration:200ms;
    transition-duration:200ms;
    --tw-ease:var(--ease-in);
    transition-timing-function:var(--ease-in);
    &.primary{
      background-color:var(--primary);
      &:hover{
        @media (hover:hover){
          background-color:var(--color-blue-600)}
        }
      }
    }
    .book-demo-btn{
      background-color:var(--primary);
      color:var(--color-white);
      padding-inline:2.5rem;
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      width:100%;
      svg{
        position:absolute;
        right:28px;
        opacity:0;
        transition:opacity 0.5s}
        span{
          z-index:10;
          position:relative;
          transition:transform 0.5s}
          &:hover{
            box-shadow:0 0 0 8px color-mix(in srgb, var(--primary) 50%, transparent),0 0 0 16px color-mix(in srgb, var(--primary) 25%, transparent);
            svg{
              opacity:1}
              span{
                transform:translateX(-16px)}
              }
            }
            .consult-btn{
              background-color:var(--primary);
              color:var(--color-white);
              border:1px solid var(--primary);
              padding-inline:2.5rem;
              position:relative;
              display:inline-flex;
              align-items:center;
              justify-content:center;
              overflow:hidden;
              width:100%;
              svg{
                position:absolute;
                right:28px;
                opacity:0;
                transition:opacity 0.5s}
                span{
                  z-index:10;
                  position:relative;
                  transition:transform 0.5s}
                  &:hover{
                    svg{
                      opacity:1}
                      span{
                        transform:translateX(-16px)}
                      }
                    }
                  }
/* Shared at every viewport: icon beside the title, description below both. */
.sa-icon-card,
#home-page .home-feature-card.sa-icon-card,
#home-page .pricing-inline-icon.sa-icon-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  align-items: center;
  gap: 12px;
  text-align: start;
}
.sa-icon-card > *,
#home-page .sa-icon-card > * {
  margin-block: 0;
  min-width: 0;
}
.sa-icon-card > :first-child {
  grid-column: 1;
  grid-row: 1;
}
.sa-icon-card > :nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}
.sa-icon-card > :nth-child(n + 3) {
  grid-column: 1 / -1;
}
#home-page .home-feature-card.sa-icon-card a { padding-top: 0; }
#home-page .pricing-plan-title.sa-icon-card { gap: 12px; }
.sa-icon-card--nested > :nth-child(2) { display: contents; }
.sa-icon-card--nested > div > * { margin-block: 0; min-width: 0; }
.sa-icon-card--nested > div > :is(h3, h4) { grid-column: 2; grid-row: 1; }
.sa-icon-card--nested > div > p { grid-column: 1 / -1; }
.sa-icon-card--plan > :first-child { grid-row: 2; }
.sa-icon-card--plan > div > p:first-child { grid-column: 2; grid-row: 1; }
.sa-icon-card--plan > div > h3 { grid-row: 2; }

/* Process icons remain compact beside their headings. */
.sa-icon-card--process { width: auto; min-width: 0; flex: 1; }
.sa-icon-card--process > :first-child { width: 48px; height: 48px; margin: 0; }

@media (max-width: 1199px) {
  .sa-process-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; }
  .sa-process-steps > :not(.sa-icon-card) { display: none; }
}
@media (max-width: 767px) {
  .sa-process-steps { grid-template-columns: minmax(0, 1fr); }
}

/* Preserve the existing tablet-only visibility of the support card. */
@media (min-width: 768px) and (max-width: 1023px) {
  .sa-icon-card.md\:hidden.lg\:block { display: none; }
}

                  /* Contact fields share the homepage brand accent. */
                  .focus\:border-primary:focus {
                    border-color: var(--primary);
                  }
                  
                  

/* Client strip (global_trusted_clients.php): logo, name and one line per client, centred at every width. */
.sa-clients { padding: 2.5rem 1rem; text-align: center; }
.sa-clients h2 { margin: 0 0 1.25rem; color: rgb(255 255 255 / .82); font-size: 1rem; font-weight: 600; letter-spacing: .02em; }
.sa-clients ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.sa-client { display: flex; align-items: center; gap: .875rem; width: 17.5rem; max-width: 100%; min-height: 4.5rem; padding: .75rem 1.25rem .75rem .75rem; border: 1px solid rgb(255 255 255 / .12); border-radius: .875rem; background: rgb(255 255 255 / .04); text-align: start; transition: border-color .2s ease, background-color .2s ease; }
.sa-client:hover { border-color: rgb(255 255 255 / .28); background: rgb(255 255 255 / .07); }
.sa-client img { flex: none; display: block; width: 3rem; height: 3rem; border-radius: .75rem; }
.sa-client span { display: flex; flex-direction: column; line-height: 1.35; }
.sa-client strong { color: #fff; font-size: 1rem; font-weight: 600; }
.sa-client small { color: rgb(255 255 255 / .75); font-size: .875rem; }
.sa-client:focus-visible { outline: 2px solid #8bc1ff; outline-offset: 3px; }
@media (max-width: 479px) {
  .sa-clients ul { flex-direction: column; align-items: center; }
}

/* Related articles (components/related-posts.php): one card list, stacked on phones. */
.sa-related-posts-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.sa-related-post { display: flex; flex-direction: column; gap: .625rem; height: 100%; padding: 1rem; border-radius: .875rem; background: rgb(255 255 255 / .08); transition: background-color .2s ease; }
.sa-related-post:hover { background: rgb(255 255 255 / .12); }
.sa-related-post img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .5rem; }
.sa-related-post-meta { color: #8bc1ff; font-size: .875rem; }
.sa-related-post h3 { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
.sa-related-post p { margin: 0; color: rgb(255 255 255 / .82); font-size: .9375rem; line-height: 1.6; }

/* Name, address and phone block (components/nap.php). */
.sa-nap { display: flex; flex-direction: column; gap: .375rem; font-style: normal; color: rgb(255 255 255 / .75); line-height: 1.6; }
.sa-nap a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sa-nap a:hover { color: var(--color-primary); }

/* SEO landing pages (content/seo-pages/*.md via src/inc/landing-page.php). */
.sa-seo-content > p { max-width: 62rem; color: rgb(255 255 255 / .85); font-size: 1rem; line-height: 1.7; }
.sa-seo-content > p strong, .sa-seo-content li strong { color: #fff; }
.sa-seo-content a { color: #0084ff; text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
.sa-seo-content a:hover { color: #fff; }
.sa-seo-content ul, .sa-seo-content ol { display: grid; gap: .875rem; max-width: 62rem; margin: 0; padding: 0; list-style: none; }
.sa-seo-content li { position: relative; padding-left: 2.25rem; color: rgb(255 255 255 / .85); line-height: 1.65; }
.sa-seo-content ul > li::before { content: ""; position: absolute; left: .5rem; top: .6em; width: .5rem; height: .5rem; border-radius: 50%; background: #0084ff; }
.sa-seo-content ol { counter-reset: seo-step; }
.sa-seo-content ol > li { counter-increment: seo-step; padding-left: 2.75rem; }
.sa-seo-content ol > li::before { content: counter(seo-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: #126ce5; color: #fff; font-size: .875rem; font-weight: 700; }
.sa-seo-table-wrap { overflow-x: auto; border: 1px solid rgb(255 255 255 / .12); border-radius: .875rem; }
.sa-seo-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9375rem; }
.sa-seo-table :is(th, td) { padding: .875rem 1rem; border-bottom: 1px solid rgb(255 255 255 / .1); text-align: left; vertical-align: top; line-height: 1.5; }
.sa-seo-table thead th { background: rgb(255 255 255 / .06); color: #fff; font-weight: 600; }
.sa-seo-table tbody th { color: rgb(255 255 255 / .82); font-weight: 600; }
.sa-seo-table td { color: rgb(255 255 255 / .75); }
.sa-seo-table--compare td:last-child { color: #fff; background: rgb(18 108 229 / .12); }
.sa-seo-table--facts td:last-child { white-space: nowrap; }
.sa-seo-table a { overflow-wrap: normal; }
.sa-seo-table tr:last-child :is(th, td) { border-bottom: 0; }
.sa-seo-cta { text-align: center; }
.sa-seo-cta > div { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: 2rem 1.5rem; border: 1px solid rgb(255 255 255 / .12); border-radius: 1rem; background: radial-gradient(ellipse at 50% 120%, rgb(18 108 229 / .35), transparent 70%), #111720; }
.sa-seo-cta-text { margin: 0; font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: 600; line-height: 1.3; }
.sa-seo-smallprint { margin: 0 auto 2rem; color: rgb(255 255 255 / .65); font-size: .8125rem; font-style: italic; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Phones: each comparison row becomes a card (row name, then each column value with its label); no sideways scrolling. */
@media (max-width: 639px) {
  .sa-seo-table-wrap { overflow: visible; border: 0; }
  .sa-seo-table { min-width: 0; }
  .sa-seo-table thead { display: none; }
  .sa-seo-table, .sa-seo-table tbody, .sa-seo-table tr { display: block; }
  .sa-seo-table tr { margin-bottom: .75rem; border: 1px solid rgb(255 255 255 / .12); border-radius: .875rem; overflow: hidden; }
  .sa-seo-table :is(th, td) { display: block; border-bottom: 0; }
  .sa-seo-table tbody th { background: rgb(255 255 255 / .06); color: #fff; }
  .sa-seo-table td { display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  .sa-seo-table td::before { content: attr(data-label); color: rgb(255 255 255 / .65); font-weight: 600; text-align: left; }
}

/* "Updated <date>" under a page hero (config/page-dates.php). */
.sa-updated { margin: .75rem 0 0; font-size: .8125rem; line-height: 1.4; color: rgb(255 255 255 / .66); }
.sa-updated time { font-variant-numeric: tabular-nums; }

/* --- floating-contact.css --- */
/* Shared contact shortcuts: keep the original brand artwork and colors. */
.floating-contact {
  --contact-float-distance: -4px;
  position: fixed;
  right: calc(1.25rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.floating-contact > div {
  animation: contact-arrive .5s ease-out both;
}
.floating-contact > div:nth-child(2) { animation-delay: .1s; }
.floating-contact > div:nth-child(3) { animation-delay: .2s; }
.floating-contact a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  transition: transform .2s ease;
}
.floating-contact img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: contact-float 6s ease-in-out infinite;
  animation-delay: .7s;
}
.floating-contact > div:nth-child(2) img { animation-delay: 1.4s; }
.floating-contact > div:nth-child(3) img { animation-delay: 2.1s; }
.floating-contact:focus-within img { animation-play-state: paused; }
@media (hover: hover) {
  .floating-contact:hover img { animation-play-state: paused; }
}
.floating-contact a:hover,
.floating-contact a:focus-visible { transform: translateY(-5px); }
.floating-contact a:focus-visible {
  outline: 2px solid var(--primary, #0084ff);
  outline-offset: 4px;
}
body:has(.floating-contact) footer {
  padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
}
@keyframes contact-arrive {
  from { opacity: 0; transform: translateY(18px) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Animate the artwork so the clickable targets stay in place. */
@keyframes contact-float {
  0%, 12%, 42%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(var(--contact-float-distance)) scale(1.05); }
}
@media (max-width: 767px) {
  .floating-contact {
    --contact-float-distance: -2px;
    right: calc(1rem + env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    gap: .625rem;
  }
  .floating-contact a { width: 2.75rem; height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-contact > div, .floating-contact img { animation: none; }
  .floating-contact a { transition: none; }
  .floating-contact a:hover,
  .floating-contact a:focus-visible { transform: none; }
}

/* --- responsive-polish.css --- */
/* Cross-page responsive polish: layout, order and density only. Colors, fonts and component styling are unchanged (DESIGN.md). */

/* Service heroes: keep the benefit readable at a glance on phones and tablets; the full text stays in the page. */
@media (max-width: 1023px) {
  .page-hero .responsive-hero-content > p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    max-width: 60ch;
  }
}


/* FAQ: a single "All" filter does nothing, so hide it; tighter question rows on phones. */
[data-uk-switcher]:has(> li:only-child) { display: none; }
@media (max-width: 767px) {
  li[data-slot="accordion-item"] { padding: 1rem 1.25rem; }
  li[data-slot="accordion-item"] .uk-accordion-title > div { gap: .75rem; }
}

/* Buttons are centred wherever a section stacks into one column (owner rule). Two-column tablet
   layouts keep buttons aligned with their own text column. */
@media (max-width: 1023px) {
  /* Background-image service heroes: centre the short hero text with its buttons. */
  .page-hero .responsive-hero-content { text-align: center; }
  .page-hero .responsive-hero-content > p { margin-inline: auto; }
  .page-hero .responsive-hero-content > div:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2rem; }
  .page-hero .responsive-hero-content > div:last-child > * { margin: 0 !important; }
  /* Single-column sections with one closing button. */
  #white-label-or-build .btn,
  .overview-section .mt-auto > .btn,
  #home-page .pricing-custom > .btn { display: flex; width: max-content; max-width: 100%; margin-inline: auto; align-self: center; }
  #home-page .pricing-custom { align-items: stretch; }
}
@media (max-width: 900px) {
  /* White-label hero stacks at 900px: text, preview, then centred buttons. */
  .wl-room-preview__copy > * { text-align: center; }
  .wl-room-preview__actions { justify-content: center; }
}
@media (max-width: 767px) {
  /* Contact banners: centred copy and button on phones. */
  main :has(> .cta-btn) { text-align: center; align-items: center !important; }
  main .cta-btn { align-self: center !important; margin-inline: auto; }
}
@media (max-width: 640px) {
  /* Features hero stacks at 640px: text, phone previews, then the centred button. */
  .features-hero-copy { display: contents; }
  .features-hero-copy > * { text-align: center; }
  .features-hero-copy > h1 { margin-bottom: -1rem !important; } /* Title and description read as one block inside the grid gap. */
  .features-actions { order: 1; justify-content: center; }
}

/* Centred buttons keep a natural, limited width — never stretched edge to edge (owner rule). */
@media (max-width: 1023px) {
  .page-hero .responsive-hero-content .btn,
  .overview-section .mt-auto > .btn,
  main .cta-btn,
  main form button[type="submit"] {
    width: auto !important;
    min-width: 12rem;
    max-width: min(100%, 20rem) !important;
    padding-inline: 2rem !important;
    justify-content: center;
  }
  .overview-section .mt-auto { display: flex; justify-content: center; }
  main form button[type="submit"] { display: flex; margin-inline: auto !important; }
}
@media (max-width: 480px) {
  .wl-room-preview__actions { align-items: center !important; }
  .wl-room-preview__actions .primary { width: auto; min-width: 12rem; }
}

/* A last odd card in a two-column tablet grid spans the full row instead of being duplicated for tablets. */
@media (min-width: 768px) and (max-width: 1023px) { .sa-span-tablet { grid-column: 1 / -1; } }