/*
 * VS Digital Lab tablet/mobile responsive layer — 1.12.1
 * Loaded only on screens up to 1100px. Desktop CSS remains untouched.
 */

:root {
  --vsdl-page-gutter: 24px;
  --vsdl-content-max: 1280px;
  --vsdl-header-height: 82px;
}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
}

iframe,
embed,
object {
  max-width: 100%;
}

.alignwide,
.vsdl-page-shell,
.vsdl-content-shell {
  width: min(var(--vsdl-content-max), calc(100% - (var(--vsdl-page-gutter) * 2))) !important;
  margin-inline: auto !important;
}

.wp-block-post-content,
.vsdl-main,
.vsdl-product-page,
.vsdl-case-page,
.vsdl-contact-page {
  min-width: 0;
}

.wp-block-post-content > * {
  max-width: 100%;
}

.wp-block-table,
.vsdl-table-wrap,
.vsdl-project-facts,
.vsdl-details {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

/* Header: one reliable row on desktop. */
.vsdl-header {
  width: 100%;
}

.vsdl-header .vsdl-header-inner {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(14px, 2vw, 28px) !important;
  min-height: 62px !important;
}

.vsdl-header .vsdl-brand {
  justify-self: start;
  min-width: 0;
}

.vsdl-header .vsdl-nav {
  justify-self: center;
  min-width: 0;
  max-width: 100%;
}

.vsdl-header .vsdl-header-cta {
  justify-self: end;
  min-width: 0;
}

.vsdl-header .vsdl-nav-link,
.vsdl-header .vsdl-header-login,
.vsdl-header .vsdl-header-demo,
.vsdl-mobile-toggle {
  min-height: 44px;
}

.vsdl-mobile-toggle {
  touch-action: manipulation;
}

/* Hero: fluid desktop layout without fixed page height. */
.vsdl-hero-v2 {
  min-height: 0 !important;
  padding-bottom: clamp(28px, 4vw, 58px) !important;
}

.vsdl-hero-v2-inner {
  min-height: 0 !important;
}

.vsdl-hero-v2 h1 {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.vsdl-hero-v2-copy > p,
.vsdl-industry-heading > p,
.vsdl-why-v143-heading > p,
.vsdl-process-v145-heading > p,
.vsdl-final-cta-copy > p {
  text-wrap: pretty;
}

.vsdl-hero-v2-btn,
.vsdl-final-cta-primary,
.vsdl-final-cta-secondary {
  min-height: 48px;
}

.vsdl-hero-v2-stage,
.vsdl-hero-v2-app,
.vsdl-hero-v2-dashboard,
.vsdl-hero-v2-panels,
.vsdl-hero-v2-bottom {
  min-width: 0;
}

/* Section grids should never force horizontal scrolling. */
.vsdl-industry-grid,
.vsdl-why-v143-grid,
.vsdl-process-v145-grid,
.vsdl-solutions-grid,
.vsdl-home-project-grid,
.vsdl-footer-v144-grid,
.vsdl-final-cta-panel,
.vsdl-form-grid,
.vsdl-login-layout,
.vsdl-project-details,
.vsdl-detail-features,
.vsdl-ui-grid {
  min-width: 0;
}

.vsdl-industry-grid > *,
.vsdl-why-v143-grid > *,
.vsdl-process-v145-grid > *,
.vsdl-solutions-grid > *,
.vsdl-home-project-grid > *,
.vsdl-footer-v144-grid > *,
.vsdl-final-cta-panel > *,
.vsdl-form-grid > *,
.vsdl-login-layout > * {
  min-width: 0;
}

.vsdl-industry-grid article,
.vsdl-why-v143-grid article,
.vsdl-process-v145-card,
.vsdl-solution-card,
.vsdl-home-project-card {
  height: 100%;
}

/* Generic inner pages. */
.vsdl-product-hero,
.vsdl-case-hero,
.vsdl-contact-hero {
  padding-inline: var(--vsdl-page-gutter) !important;
}

.vsdl-product-stage,
.vsdl-app-shell,
.vsdl-project-story,
.vsdl-project-details,
.vsdl-contact-form,
.vsdl-login-intro,
.vsdl-login-box {
  max-width: 100%;
}

/* =========================
   TABLET / SMALL LAPTOP
   ========================= */
@media (max-width: 1180px) {
  :root {
    --vsdl-page-gutter: 22px;
  }

  .vsdl-header .vsdl-header-inner {
    gap: 16px !important;
  }

  .vsdl-header .vsdl-nav {
    gap: 0 !important;
    font-size: 11px !important;
  }

  .vsdl-header .vsdl-nav-link {
    padding-inline: 7px !important;
  }

  .vsdl-header .vsdl-header-login {
    display: none !important;
  }

  .vsdl-hero-v2 {
    padding-top: 112px !important;
  }

  .vsdl-hero-v2-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .vsdl-hero-v2-copy {
    max-width: 820px;
    padding: 34px 0 0 !important;
  }

  .vsdl-hero-v2-copy > p {
    max-width: 680px !important;
  }

  .vsdl-hero-v2-stage {
    width: min(920px, 100%) !important;
    height: 620px !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  .vsdl-hero-v2-app {
    left: 2% !important;
    right: 2% !important;
  }

  .vsdl-industry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .vsdl-why-v143-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .vsdl-process-v145-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    row-gap: 56px !important;
  }

  .vsdl-process-v145-grid::before {
    display: none !important;
  }

  .vsdl-solutions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .vsdl-home-project-grid,
  .vsdl-projects-premium .vsdl-home-project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .vsdl-final-cta-panel {
    grid-template-columns: minmax(250px, .8fr) minmax(0, 1.35fr) !important;
  }

  .vsdl-final-cta-actions {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(255,255,255,.12) !important;
    border-left: 0 !important;
  }

  .vsdl-final-cta-trust {
    grid-column: 1 / -1;
  }

  .vsdl-footer-v144-grid {
    grid-template-columns: minmax(240px, 1.35fr) repeat(3, minmax(0, 1fr)) !important;
  }

  .vsdl-login-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr) !important;
    gap: 28px !important;
  }
}

/* At this width the complete desktop navigation becomes crowded,
   so the accessible mobile navigation is used on tablets too. */
@media (max-width: 1024px) {
  .vsdl-header .vsdl-header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  .vsdl-header .vsdl-mobile-toggle {
    display: inline-flex !important;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    order: initial !important;
  }

  .vsdl-header .vsdl-header-cta {
    display: none !important;
  }

  .vsdl-header .vsdl-nav {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    display: none !important;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 12px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 16px !important;
    background: rgba(4, 14, 34, .98) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.36) !important;
    backdrop-filter: blur(18px);
  }

  .vsdl-header.is-menu-open .vsdl-nav {
    display: flex !important;
  }

  .vsdl-header .vsdl-nav-link {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 12px 14px !important;
    border-radius: 10px;
    font-size: 14px;
  }

  .vsdl-header .vsdl-nav-link::after {
    display: none !important;
  }

  .vsdl-header .vsdl-nav-link:hover,
  .vsdl-header .vsdl-nav-link.is-current {
    background: rgba(255,255,255,.07);
  }

  body.vsdl-menu-open {
    overflow: hidden;
  }

  .vsdl-hero-v2-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 0 !important;
  }

  .vsdl-hero-stat:nth-child(odd) {
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  .vsdl-hero-v2-stage {
    height: 560px !important;
  }

  .vsdl-hero-v2-app {
    top: 152px !important;
    height: 395px !important;
    grid-template-columns: 108px minmax(0, 1fr) !important;
  }

  .vsdl-hero-v2-sidebar {
    padding: 13px 9px !important;
  }

  .vsdl-hero-v2-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .vsdl-hero-v2-kpis article:nth-child(4) {
    display: none !important;
  }

  .vsdl-footer-v144-grid {
    grid-template-columns: minmax(220px, 1.3fr) repeat(2, minmax(0, 1fr)) !important;
  }

  .vsdl-footer-v144-grid > div:nth-child(4) {
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  .vsdl-footer-v144-grid > div:nth-child(n+4) {
    margin-top: 20px;
  }

  .vsdl-product-hero,
  .vsdl-case-hero,
  .vsdl-contact-hero {
    padding-top: 125px !important;
    padding-bottom: 120px !important;
  }
}

/* =========================
   TABLET PORTRAIT
   ========================= */
@media (max-width: 820px) {
  :root {
    --vsdl-page-gutter: 18px;
  }

  .admin-bar .vsdl-header {
    top: 46px !important;
  }

  .vsdl-header {
    padding-block: 12px !important;
  }

  .vsdl-header .vsdl-header-inner {
    min-height: 56px !important;
  }

  .vsdl-hero-v2 {
    padding-top: 104px !important;
  }

  .vsdl-hero-v2 h1 {
    max-width: 720px !important;
    font-size: clamp(44px, 8.8vw, 64px) !important;
  }

  .vsdl-hero-v2-copy > p {
    font-size: 15px !important;
  }

  .vsdl-hero-v2-stage {
    height: 510px !important;
  }

  .vsdl-hero-v2-backcard {
    height: 78px !important;
    padding: 14px 20px !important;
  }

  .vsdl-hero-v2-backcard.is-student { top: 12px !important; }
  .vsdl-hero-v2-backcard.is-building { top: 52px !important; }
  .vsdl-hero-v2-backcard.is-playroom { top: 92px !important; }

  .vsdl-hero-v2-app {
    top: 126px !important;
    height: 370px !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }

  .vsdl-hero-v2-tools i,
  .vsdl-hero-v2-tools b {
    display: none !important;
  }

  .vsdl-hero-v2-panels {
    grid-template-columns: minmax(0, 1.8fr) minmax(150px, .8fr) !important;
  }

  .vsdl-industry-grid,
  .vsdl-solutions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .vsdl-process-v145-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .vsdl-final-cta-panel {
    grid-template-columns: 1fr !important;
    border-radius: 24px !important;
  }

  .vsdl-final-cta-visual {
    min-height: 270px !important;
  }

  .vsdl-final-cta-copy {
    padding: 18px 30px 36px !important;
    text-align: center;
  }

  .vsdl-final-cta-copy > p {
    margin-inline: auto !important;
  }

  .vsdl-final-cta-benefits {
    max-width: 580px;
    margin-inline: auto;
  }

  .vsdl-final-cta-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 28px 30px !important;
  }

  .vsdl-footer-v144-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 30px 24px !important;
  }

  .vsdl-footer-v144-brand {
    grid-column: 1 / -1;
  }

  .vsdl-footer-v144-grid > div + div {
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  .vsdl-footer-v144-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .vsdl-footer-v144-bottom nav {
    flex-wrap: wrap;
    gap: 14px 22px !important;
  }

  .vsdl-login-layout {
    grid-template-columns: 1fr !important;
    max-width: 720px !important;
    margin-top: 105px !important;
  }

  .vsdl-contact-form {
    margin-top: 90px !important;
  }

  .vsdl-form-grid {
    grid-template-columns: 1fr !important;
  }

  .vsdl-form-grid .full {
    grid-column: auto !important;
  }

  .vsdl-project-details,
  .vsdl-detail-features,
  .vsdl-ui-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 680px) {
  :root {
    --vsdl-page-gutter: 15px;
  }

  .vsdl-header .vsdl-brand-copy small {
    display: block !important;
  }

  .vsdl-header .vsdl-brand-image {
    max-width: min(var(--vsdl-logo-width, 190px), 54vw) !important;
  }

  .vsdl-hero-v2 {
    padding-top: 96px !important;
    padding-bottom: 42px !important;
  }

  .vsdl-hero-v2-copy {
    padding-top: 24px !important;
  }

  .vsdl-hero-v2-eyebrow {
    max-width: 100%;
    white-space: normal;
  }

  .vsdl-hero-v2 h1 {
    margin-top: 20px !important;
    font-size: clamp(38px, 12vw, 52px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.045em !important;
  }

  .vsdl-hero-v2 h1 br {
    display: none;
  }

  .vsdl-hero-v2-copy > p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .vsdl-hero-v2-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }

  .vsdl-hero-v2-btn {
    width: 100% !important;
    min-height: 52px !important;
  }

  .vsdl-hero-v2-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 14px !important;
    margin-top: 34px !important;
  }

  .vsdl-hero-stat,
  .vsdl-hero-stat + .vsdl-hero-stat {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 0 !important;
    border-left: 0 !important;
  }

  .vsdl-hero-stat-icon,
  .vsdl-hero-stat-icon svg {
    width: 29px !important;
    height: 29px !important;
  }

  .vsdl-hero-stat b {
    font-size: 18px !important;
  }

  .vsdl-hero-stat small {
    margin-top: 4px !important;
    font-size: 10px !important;
  }

  /* Dashboard becomes a real fluid mobile card instead of a scaled desktop canvas. */
  .vsdl-hero-v2-stage {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 30px !important;
    overflow: visible !important;
    perspective: none !important;
  }

  .vsdl-hero-v2-stage::after,
  .vsdl-hero-v2-backcard {
    display: none !important;
  }

  .vsdl-hero-v2-app {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    transform: none !important;
  }

  .vsdl-hero-v2-sidebar {
    display: none !important;
  }

  .vsdl-hero-v2-dashboard {
    padding: 0 10px 12px !important;
  }

  .vsdl-hero-v2-dashboard > header {
    height: 48px !important;
  }

  .vsdl-hero-v2-tools em,
  .vsdl-hero-v2-tools button {
    min-height: 28px !important;
  }

  .vsdl-hero-v2-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .vsdl-hero-v2-kpis article,
  .vsdl-hero-v2-kpis article:nth-child(4) {
    display: grid !important;
    min-height: 66px !important;
    padding: 8px !important;
  }

  .vsdl-hero-v2-panels,
  .vsdl-hero-v2-bottom {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .vsdl-hero-v2-chart svg {
    height: 92px !important;
  }

  .vsdl-hero-v2-donut {
    min-height: 150px;
  }

  .vsdl-industry-showcase,
  .vsdl-why-v143,
  .vsdl-process-v145,
  .vsdl-final-cta {
    padding-top: 56px !important;
    padding-bottom: 60px !important;
  }

  .vsdl-industry-title-row h2,
  .vsdl-why-v143-heading h2,
  .vsdl-process-v145-heading h2 {
    font-size: clamp(31px, 9vw, 42px) !important;
    line-height: 1.08 !important;
  }

  .vsdl-industry-grid,
  .vsdl-why-v143-grid,
  .vsdl-process-v145-grid,
  .vsdl-solutions-grid,
  .vsdl-home-project-grid,
  .vsdl-projects-premium .vsdl-home-project-grid {
    grid-template-columns: 1fr !important;
  }

  .vsdl-industry-grid article {
    min-height: 0 !important;
  }

  .vsdl-why-v143-grid article {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding: 20px 18px 48px !important;
  }

  .vsdl-why-v143-icon {
    width: 58px !important;
    height: 58px !important;
  }

  .vsdl-process-v145-grid {
    gap: 44px !important;
    margin-top: 52px !important;
  }

  .vsdl-process-v145-card {
    min-height: 0 !important;
    padding: 32px 20px 24px !important;
  }

  .vsdl-final-cta-copy {
    padding-inline: 20px !important;
  }

  .vsdl-final-cta-copy h2 {
    font-size: clamp(35px, 10vw, 44px) !important;
  }

  .vsdl-final-cta-benefits {
    grid-template-columns: 1fr !important;
    max-width: 290px;
  }

  .vsdl-final-cta-actions {
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 20px 28px !important;
  }

  .vsdl-final-cta-primary,
  .vsdl-final-cta-secondary {
    width: 100%;
    min-height: 56px !important;
  }

  .vsdl-footer-v144-grid {
    grid-template-columns: 1fr !important;
    padding-block: 44px 32px !important;
  }

  .vsdl-footer-v144-brand {
    grid-column: auto;
  }

  .vsdl-footer-v144-grid > div,
  .vsdl-footer-v144-grid > div:nth-child(n+4) {
    margin-top: 0 !important;
  }

  .vsdl-footer-v144-bottom nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .vsdl-login-layout {
    margin: 92px auto 46px !important;
    padding-inline: var(--vsdl-page-gutter) !important;
  }

  .vsdl-login-intro,
  .vsdl-login-box,
  .vsdl-contact-form {
    padding: 28px 20px !important;
    border-radius: 20px !important;
  }

  .vsdl-contact-form {
    margin: 88px var(--vsdl-page-gutter) 42px !important;
  }

  .vsdl-product-hero,
  .vsdl-case-hero,
  .vsdl-contact-hero {
    padding-top: 108px !important;
    padding-bottom: 86px !important;
  }

  .vsdl-product-stage {
    border-radius: 18px !important;
  }

  .vsdl-app-shell {
    min-height: 0 !important;
    overflow-x: auto;
  }
}

@media (max-width: 420px) {
  :root {
    --vsdl-page-gutter: 13px;
  }

  .vsdl-header .vsdl-brand-lockup {
    gap: 4px !important;
  }

  .vsdl-header .vsdl-brand-copy strong {
    font-size: 12px !important;
  }

  .vsdl-header .vsdl-brand-copy small {
    font-size: 6px !important;
    letter-spacing: .08em !important;
  }

  .vsdl-hero-v2 h1 {
    font-size: clamp(35px, 11vw, 44px) !important;
  }

  .vsdl-hero-v2-stats {
    grid-template-columns: 1fr !important;
  }

  .vsdl-hero-v2-kpis {
    grid-template-columns: 1fr !important;
  }

  .vsdl-final-cta-visual {
    min-height: 235px !important;
  }

  .vsdl-footer-v144-bottom nav {
    grid-template-columns: 1fr !important;
  }
}

/* Accessibility and performance preferences. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .vsdl-hero-v2-stage,
  .vsdl-home-hero-stage {
    transform: none !important;
  }
}

/* Archive, standard page and single-post templates. */
body:not(.home) .wp-site-blocks > main.wp-block-group:not(.vsdl-product-page):not(.vsdl-case-page):not(.vsdl-contact-page):not(.vsdl-auth-page) {
  padding-top: 122px !important;
  padding-inline: var(--vsdl-page-gutter) !important;
}

.vsdl-product-query .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.vsdl-product-query .wp-block-post-template > li,
.vsdl-product-card {
  min-width: 0;
}

.vsdl-product-card {
  height: 100%;
}

.vsdl-product-card .wp-block-post-featured-image img {
  width: 100%;
  object-fit: cover;
}

.vsdl-contact-grid {
  min-width: 0;
}

.vsdl-showcase-wrap,
.vsdl-case-media,
.vsdl-single-content {
  width: min(1120px, calc(100% - (var(--vsdl-page-gutter) * 2))) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

.vsdl-showcase-wrap {
  width: min(1440px, calc(100% - (var(--vsdl-page-gutter) * 2))) !important;
}

@media (max-width: 1024px) {
  .vsdl-product-query .wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .vsdl-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .vsdl-contact-grid h1,
  .vsdl-contact-grid .vsdl-product-lead {
    max-width: 760px;
  }

  .vsdl-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .vsdl-project-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .vsdl-project-story,
  .vsdl-details {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 680px) {
  body:not(.home) .wp-site-blocks > main.wp-block-group:not(.vsdl-product-page):not(.vsdl-case-page):not(.vsdl-contact-page):not(.vsdl-auth-page) {
    padding-top: 98px !important;
    padding-bottom: 58px !important;
  }

  .vsdl-product-query .wp-block-post-template,
  .vsdl-kpi-row,
  .vsdl-project-facts {
    grid-template-columns: 1fr !important;
  }

  .vsdl-showcase-wrap {
    margin-top: -64px !important;
    margin-bottom: 58px !important;
  }

  .vsdl-app-main {
    padding: 14px !important;
  }

  .vsdl-app-main > header {
    align-items: flex-start !important;
    gap: 12px;
  }

  .vsdl-app-user {
    display: none !important;
  }

  .vsdl-ui-panel {
    min-height: 0 !important;
  }

  .vsdl-detail-features ul {
    grid-template-columns: 1fr !important;
  }

  .vsdl-case-media {
    margin-top: -62px !important;
  }

  .vsdl-single-content {
    padding-inline: 0 !important;
  }
}


/* ==========================================================
   1.12.2 — MOBILE VISUAL POLISH
   Desktop and tablet layouts remain unchanged.
   ========================================================== */
@media (max-width: 680px) {
  /* HERO — clearer hierarchy and compact premium statistic cards. */
  .vsdl-hero-v2-copy {
    padding-top: 18px !important;
  }

  .vsdl-hero-v2-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    width: max-content !important;
    max-width: 100% !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    border: 1px solid rgba(108, 128, 255, .30) !important;
    border-radius: 999px !important;
    background: rgba(43, 63, 138, .24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
    letter-spacing: .12em !important;
  }

  .vsdl-hero-v2 h1 {
    max-width: 100% !important;
    margin: 18px 0 16px !important;
    font-size: clamp(37px, 11.2vw, 49px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance;
  }

  .vsdl-hero-v2-copy > p {
    margin-bottom: 0 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .vsdl-hero-v2-actions {
    margin-top: 22px !important;
  }

  .vsdl-hero-v2-btn {
    border-radius: 13px !important;
  }

  .vsdl-hero-v2-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 28px !important;
  }

  .vsdl-hero-stat,
  .vsdl-hero-stat + .vsdl-hero-stat {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 10px !important;
    min-height: 96px !important;
    padding: 13px 12px !important;
    border: 1px solid rgba(132, 151, 255, .16) !important;
    border-radius: 15px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 12px 30px rgba(0,0,0,.14) !important;
    text-align: left !important;
  }

  .vsdl-hero-stat-icon,
  .vsdl-hero-stat-icon svg {
    width: 30px !important;
    height: 30px !important;
  }

  .vsdl-hero-stat-icon {
    margin: 0 !important;
  }

  .vsdl-hero-stat > div {
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .vsdl-hero-stat b {
    font-size: 19px !important;
    line-height: 1 !important;
  }

  .vsdl-hero-stat small {
    margin-top: 5px !important;
    color: #b8c3d8 !important;
    font-size: 9.5px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    white-space: pre-line !important;
  }

  /* HERO APP — retain the visual idea, but remove desktop-only clutter. */
  .vsdl-hero-v2-stage {
    margin-top: 24px !important;
  }

  .vsdl-hero-v2-app {
    border: 1px solid rgba(114, 137, 222, .38) !important;
    border-radius: 18px !important;
    background: #f7f9fd !important;
    box-shadow: 0 24px 55px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.05) inset !important;
  }

  .vsdl-hero-v2-dashboard {
    padding: 0 10px 10px !important;
  }

  .vsdl-hero-v2-dashboard > header {
    height: 46px !important;
    padding-inline: 2px !important;
  }

  .vsdl-hero-v2-tools i,
  .vsdl-hero-v2-tools b,
  .vsdl-hero-v2-tools button {
    display: none !important;
  }

  .vsdl-hero-v2-tools em {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 27px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    background: #edf2fb !important;
    font-size: 8px !important;
  }

  .vsdl-hero-v2-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .vsdl-hero-v2-kpis article,
  .vsdl-hero-v2-kpis article:nth-child(4) {
    min-height: 70px !important;
    padding: 9px !important;
    border-radius: 10px !important;
  }

  .vsdl-hero-v2-panels {
    display: block !important;
    margin-top: 8px !important;
  }

  .vsdl-hero-v2-chart {
    min-height: 150px !important;
    border-radius: 11px !important;
  }

  .vsdl-hero-v2-chart svg {
    height: 88px !important;
  }

  .vsdl-hero-v2-donut,
  .vsdl-hero-v2-bottom {
    display: none !important;
  }

  /* FINAL CTA — one balanced card, shorter visual and cleaner actions. */
  .vsdl-final-cta {
    padding: 48px 0 30px !important;
  }

  .vsdl-final-cta .vsdl-final-cta-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: calc(100% - 28px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    transform: none !important;
    box-shadow: 0 24px 55px rgba(18, 26, 76, .24) !important;
  }

  .vsdl-final-cta-visual {
    min-height: 205px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }

  .vsdl-final-cta-orbit {
    top: 28px !important;
    width: 158px !important;
    height: 158px !important;
  }

  .vsdl-final-cta-rocket {
    top: 8px !important;
    width: 148px !important;
  }

  .vsdl-final-cta-cloud.cloud-a {
    left: calc(50% - 86px) !important;
    bottom: 27px !important;
    width: 124px !important;
  }

  .vsdl-final-cta-cloud.cloud-b {
    left: calc(50% + 2px) !important;
    bottom: 21px !important;
    width: 102px !important;
  }

  .vsdl-final-cta-cloud.cloud-c {
    left: calc(50% - 42px) !important;
    bottom: 14px !important;
    width: 92px !important;
  }

  .vsdl-final-cta-copy {
    padding: 28px 20px 24px !important;
    text-align: left !important;
  }

  .vsdl-final-cta-copy > span {
    display: inline-flex !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(137, 119, 255, .28) !important;
    border-radius: 999px !important;
    background: rgba(111, 83, 255, .12) !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  .vsdl-final-cta-copy h2 {
    margin-bottom: 14px !important;
    font-size: clamp(32px, 9.2vw, 40px) !important;
    line-height: 1.02 !important;
  }

  .vsdl-final-cta-copy > p {
    margin-inline: 0 !important;
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  .vsdl-final-cta-benefits,
  .vsdl-final-cta-benefits.has-1-benefits,
  .vsdl-final-cta-benefits.has-2-benefits {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 20px 0 0 !important;
  }

  .vsdl-final-cta-benefits > div {
    min-height: 54px !important;
    padding: 9px 11px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.04) !important;
  }

  .vsdl-final-cta-benefits i {
    flex-basis: 34px !important;
    width: 34px !important;
    height: 34px !important;
  }

  .vsdl-final-cta-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 20px !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    border-left: 0 !important;
    background: rgba(2, 8, 28, .18) !important;
  }

  .vsdl-final-cta-primary,
  .vsdl-final-cta-secondary {
    min-height: 54px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
  }

  .vsdl-final-cta-trust {
    justify-content: center !important;
    margin-top: 6px !important;
    text-align: left !important;
  }

  /* FOOTER — brand first, two-column navigation and a clear bottom bar. */
  .vsdl-footer-v144-grid,
  .vsdl-footer-cms .vsdl-footer-v144-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 18px !important;
    width: calc(100% - 30px) !important;
    padding: 38px 0 28px !important;
  }

  .vsdl-footer-v144-brand,
  .vsdl-footer-cms .vsdl-footer-v144-brand {
    grid-column: 1 / -1 !important;
    padding-bottom: 26px !important;
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
  }

  .vsdl-footer-v144-brand p,
  .vsdl-footer-v144-grid p {
    max-width: 420px !important;
    margin-top: 16px !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
  }

  .vsdl-footer-v144-grid > div + div,
  .vsdl-footer-cms .vsdl-footer-v144-grid > div + div {
    margin: 0 !important;
    padding: 22px 0 0 !important;
    border-left: 0 !important;
  }

  .vsdl-footer-link-column {
    min-width: 0 !important;
  }

  .vsdl-footer-v144-grid h4 {
    margin-bottom: 12px !important;
    font-size: 12px !important;
    letter-spacing: .02em !important;
  }

  .vsdl-footer-v144-grid a {
    display: flex !important;
    align-items: center !important;
    min-height: 32px !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .vsdl-footer-contact,
  .vsdl-footer-cms .vsdl-footer-contact {
    grid-column: 1 / -1 !important;
    margin-top: 22px !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(255,255,255,.09) !important;
  }

  .vsdl-footer-cms .vsdl-footer-contact .vsdl-contact-row {
    min-height: 38px !important;
    margin: 0 0 7px !important;
  }

  .vsdl-footer-cms .vsdl-socials {
    margin-top: 18px !important;
  }

  .vsdl-footer-cms .vsdl-socials a {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .vsdl-footer-v144-bottom,
  .vsdl-footer-cms .vsdl-footer-v144-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    width: calc(100% - 30px) !important;
    padding: 20px 0 24px !important;
    text-align: center !important;
  }

  .vsdl-footer-v144-bottom nav,
  .vsdl-footer-cms .vsdl-footer-v144-bottom nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .vsdl-footer-v144-bottom nav a,
  .vsdl-footer-cms .vsdl-footer-v144-bottom nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.025) !important;
  }
}

@media (max-width: 360px) {
  .vsdl-hero-v2-stats {
    grid-template-columns: 1fr !important;
  }

  .vsdl-hero-stat,
  .vsdl-hero-stat + .vsdl-hero-stat {
    min-height: 82px !important;
  }

  .vsdl-footer-v144-grid,
  .vsdl-footer-cms .vsdl-footer-v144-grid {
    grid-template-columns: 1fr !important;
  }

  .vsdl-footer-v144-brand,
  .vsdl-footer-cms .vsdl-footer-v144-brand,
  .vsdl-footer-contact,
  .vsdl-footer-cms .vsdl-footer-contact {
    grid-column: auto !important;
  }

  .vsdl-footer-v144-bottom nav,
  .vsdl-footer-cms .vsdl-footer-v144-bottom nav {
    grid-template-columns: 1fr !important;
  }
}