/* Homepage layout styles (shared redesign support) */
html, body { margin: 0; padding: 0; }
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

.container_main {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 56px;
  padding-right: 56px;
  width: 100%;
  box-sizing: border-box;
}
.grid_12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.sec_hero-lite.hero-section { display: block !important; }
.sec_hero-lite-mobile,
.sec_hero-lite-tab { display: none !important; }


@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-fade {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}


@media (max-width: 991px) and (min-width: 768px) {
  .container_main { padding-left: 40px; padding-right: 40px; }
  .grid_12 { grid-template-columns: repeat(8, 1fr); }
  .sec_hero-lite.hero-section { display: none !important; }
  .sec_hero-lite-tab { display: block !important; }
  .sec_hero-lite-mobile { display: none !important; }
}
@media (max-width: 767px) {
  .container_main { padding-left: 24px; padding-right: 24px; }
  .grid_12 { grid-template-columns: repeat(4, 1fr); }
  .sec_hero-lite.hero-section { display: none !important; }
  .sec_hero-lite-tab { display: none !important; }
  .sec_hero-lite-mobile { display: block !important; }
}
@media (max-width: 479px) {
  .container_main { padding-left: 24px; padding-right: 24px; }
}



.grid-item {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.grid-item.revealed {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.usecase-slider {
  position: relative;
  overflow: hidden;
}
.usecase-slider__track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.usecase-slider__slide {
  flex: 0 0 100%;
  min-width: 100%;
}
.usecase-slider__nav {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}
.usecase-slider__btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
}

/* Where Spotbot Lite Operates — full-bleed slider, title and progress laid over the image.
   Slide images live in images/Slider/ and are 16:9 (1672x941); the stage uses the same
   aspect ratio so the whole image shows with nothing cropped top or bottom.
   Captions sit on the right or bottom of the artwork, so the title goes top-left. */
.sec_operates {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0;
  background: #0a0b0e;
}
.operates_frame {
  position: relative;
  width: 100%;
}
.operates_stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  isolation: isolate;
  background: #0a0b0e;
  touch-action: pan-y;
}
/* Soft shade behind the title only */
.operates_stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at 0% 0%, rgba(8, 9, 12, 0.72), rgba(8, 9, 12, 0.25) 55%, transparent 80%);
}
.operates_slide {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.9s;
}
.operates_slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.operates_slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Title over the top-left corner */
.operates_head {
  position: absolute;
  top: clamp(20px, 3.5vw, 48px);
  left: clamp(16px, 3.5vw, 56px);
  z-index: 4;
  max-width: 44%;
  pointer-events: none;
  text-align: left;
}
.operates_eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.operates_eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #8b7bff, #d36bff);
}
.operates_counter {
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.operates_counter strong {
  color: #fff;
  font-weight: 700;
}
.sec_operates_title {
  margin: 0;
  color: #fff !important;
  font-size: clamp(26px, 3.1vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
}

/* Side arrows over the image */
.operates_arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(10, 11, 14, 0.45);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(-50%);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.operates_arrow--prev { left: clamp(16px, 2.5vw, 40px); }
.operates_arrow--next { right: clamp(16px, 2.5vw, 40px); }
.operates_arrow svg {
  width: 20px;
  height: 20px;
}
.operates_arrow:hover {
  background: rgba(110, 92, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-50%) scale(1.06);
}
.operates_arrow:focus-visible,
.operates_dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Story-style progress segments along the bottom edge (thin, so they never hide a caption) */
.operates_controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}
.operates_dots {
  display: flex;
  gap: 4px;
}
.operates_dot {
  position: relative;
  flex: 1 1 0;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  cursor: pointer;
}
.operates_dot::before,
.operates_dot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
}
.operates_dot::before {
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.2s ease;
}
.operates_dot:hover::before {
  background: rgba(255, 255, 255, 0.55);
}
.operates_dot::after {
  background: linear-gradient(90deg, #8b7bff, #d36bff);
  transform: scaleX(0);
  transform-origin: left center;
}
.operates_dot.is-done::after {
  transform: scaleX(1);
}
.operates_dot.is-active::after {
  animation: operates-progress var(--op-interval, 5s) linear forwards;
}
.sec_operates.is-paused .operates_dot.is-active::after {
  animation-play-state: paused;
}
@keyframes operates-progress {
  to { transform: scaleX(1); }
}

@media (max-width: 991px) {
  .operates_arrow {
    width: 44px;
    height: 44px;
  }
}
@media (max-width: 767px) {
  .operates_head {
    top: 16px;
    left: 16px;
    max-width: 42%;
  }
  .operates_eyebrow {
    margin-bottom: 6px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  .operates_eyebrow::before {
    width: 16px;
  }
  .sec_operates_title {
    font-size: clamp(16px, 4.4vw, 22px);
  }
  /* Arrows would cover captions on a small image: phones use swipe and the progress bar */
  .operates_arrow {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .operates_slide,
  .operates_slide img {
    transition: none;
  }
  .operates_dot.is-active::after {
    animation: none;
    transform: scaleX(1);
  }
}
@media (max-width: 767px) {
  /* Fixed flex bases in validation / capabilities force overflow on narrow phones */
  #validation .container_main > div[style*="display:flex"] > div,
  #capabilities .capabilities-grid > div {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100%;
    min-width: 0 !important;
  }
  #validation .container_main > div[style*="display:flex"] {
    gap: 24px !important;
  }
  #capabilities .capabilities-grid {
    gap: 20px !important;
  }
  .section-100px-padding {
    padding-left: clamp(16px, 4vw, 30px);
    padding-right: clamp(16px, 4vw, 30px);
    overflow-x: clip;
  }
  .sec_why-automation-video,
  .background-video-4,
  .div-block-52 {
    max-width: 100%;
    overflow-x: clip;
  }
  .div-block-52 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

}


/* Validation & Standards on tablets and phones: tighter cards, image centred below */
@media (max-width: 767px) {
  #validation .div-block-111 {
    margin-bottom: 12px;
  }
  #validation div[style*="grid-template-columns:1fr 1fr"] {
    gap: 10px !important;
  }
  #validation .glass-block-for-story {
    padding: 14px 12px !important;
    border-radius: 14px;
  }
  #validation .glass-block-for-story .heading-15 {
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }
  #validation .glass-block-for-story p {
    font-size: 12.5px !important;
    line-height: 17px !important;
  }
  #validation img {
    width: 100%;
    max-width: 340px !important;
    margin: 0 auto;
    border-radius: 16px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  }
}
/* Small phones: 2-column card grids were too cramped to read */
@media (max-width: 479px) {
  /* Validation keeps its 2 x 2 grid on phones, sized to fit two cards side by side */
  #validation div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #validation .glass-block-for-story {
    padding: 12px 10px !important;
    border-radius: 12px;
  }
  #validation .glass-block-for-story .heading-15 {
    font-size: 14px !important;
  }
  #validation .glass-block-for-story p {
    font-size: 11.5px !important;
    line-height: 16px !important;
  }
}

/* ============================================================
   Hero — brand and hook on the left, 16:9 artwork on the right
   ============================================================ */
.sec_hero-lite.section-100px-padding {
  padding-top: 40px;
  padding-bottom: 72px;
}
.sec_hero-lite .hero_grid {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.sec_hero-lite .hero_copy {
  flex: 1 1 380px;
  min-width: 0;
  /* Sit a little above the vertical middle of the artwork */
  align-self: flex-start;
  padding-top: clamp(24px, 4vw, 56px);
}
.sec_hero-lite .hero_brand {
  margin: 0 0 10px;
  color: #fff;
  font-family: Advent Pro, Exo, sans-serif;
  font-size: clamp(40px, 5.2vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  animation: hero-rise 0.7s ease both;
}
.sec_hero-lite .hero_hook {
  margin: 0 0 22px;
  max-width: 36ch;
  color: rgba(255, 255, 255, 0.88);
  font-family: Lato, sans-serif;
  font-size: clamp(18px, 2.1vw, 22px);
  font-weight: 400;
  line-height: 1.35;
  animation: hero-rise 0.7s ease 0.08s both;
}
.sec_hero-lite .hero_ctas {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 28px;
  animation: hero-rise 0.7s ease 0.34s both;
}
.sec_hero-lite .hero_media {
  flex: 0 1 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hero-fade 0.9s ease 0.2s both;
}
.sec_hero-lite .hero_media_img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .sec_hero-lite .hero_brand,
  .sec_hero-lite .hero_hook,
  .sec_hero-lite .hero_ctas,
  .sec_hero-lite .hero_media {
    animation: none;
  }
}
/* Tablet: keep text and artwork side by side, buttons in one row */
@media (max-width: 991px) and (min-width: 768px) {
  .sec_hero-lite .hero_grid {
    flex-wrap: nowrap;
    align-items: center;
    gap: 28px;
  }
  .sec_hero-lite .hero_copy {
    flex: 1 1 0;
    padding-top: 0;
  }
  .sec_hero-lite .hero_media {
    flex: 0 1 340px;
  }
  .sec_hero-lite .hero_ctas {
    gap: 10px;
  }
  .sec_hero-lite .hero_ctas .w-button {
    display: inline-block;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 13px;
    text-align: center;
  }
}
/* Phone: artwork full width on top, centered text and stacked buttons below */
@media (max-width: 767px) {
  .sec_hero-lite.section-100px-padding {
    padding-top: 20px;
    padding-bottom: 44px;
  }
  .sec_hero-lite .container_main {
    padding-left: 20px;
    padding-right: 20px;
  }
  .sec_hero-lite .hero_grid {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
  }
  .sec_hero-lite .hero_media {
    flex: 0 0 auto;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  .sec_hero-lite .hero_media_img {
    max-width: 100%;
    border-radius: 10px;
  }
  .sec_hero-lite .hero_copy {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    align-self: auto;
    padding-top: 0;
    text-align: center;
  }
  .sec_hero-lite .hero_brand {
    font-size: clamp(36px, 10vw, 48px);
  }
  .sec_hero-lite .hero_hook {
    margin-left: auto;
    margin-right: auto;
  }
  .sec_hero-lite .hero_ctas {
    justify-content: center;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .sec_hero-lite .hero_ctas .w-button {
    width: 100%;
    margin: 0;
    text-align: center;
    box-sizing: border-box;
  }
}

/* ============================================================
   Hero — full-screen artwork variant
   The lobby artwork (images/SpotBot in a Modern Hospital Lobby.png, 1672x941)
   already carries the SPOTLESS-Ai brand and the hook line, so the HTML text is
   kept for screen readers only and the CTA buttons are laid over the artwork
   at every screen size.
   Sizing rule: the artwork spans the full width at its own 16:9 ratio, so the
   whole picture is always shown with nothing trimmed and no side gaps. On
   short laptop screens it is a little taller than the window and the bottom
   band comes into view with a small scroll.
   ============================================================ */
.sec_hero-lite--fullbleed.section-100px-padding {
  padding: 0;
  overflow: hidden;
}
.sec_hero-lite--fullbleed .container_main {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
}
.sec_hero-lite--fullbleed .hero_grid {
  display: block;
  position: relative;
  width: 100%;
  gap: 0;
  text-align: left;
}
.sec_hero-lite--fullbleed .hero_media {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  max-width: none;
  margin: 0;
  background: #0a0b0e;
}
.sec_hero-lite--fullbleed .hero_media_box {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
}
.sec_hero-lite--fullbleed .hero_media_img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
}
/* Brand and hook are painted into the artwork - keep them for assistive tech only */
.sec_hero-lite--fullbleed .hero_brand,
.sec_hero-lite--fullbleed .hero_hook {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Buttons sit just under the painted headline, same spot at every size */
.sec_hero-lite--fullbleed .hero_copy {
  position: absolute;
  z-index: 2;
  left: 6%;
  top: 37%;
  flex: none;
  width: auto;
  max-width: 60%;
  padding: 0;
  align-self: auto;
  text-align: left;
  pointer-events: none;
}
.sec_hero-lite--fullbleed .hero_ctas {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  max-width: none;
  margin: 0;
  gap: clamp(6px, 1vw, 16px);
  pointer-events: auto;
}
.sec_hero-lite--fullbleed .hero_ctas .w-button {
  display: inline-block;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  /* Large desktop (1440px and up) - full size */
  padding: 11px 24px;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-align: center;
  box-sizing: border-box;
  color: #fff;
  border: 2px solid transparent;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
/* Brand colours, solid so the labels stay readable over the bright lobby artwork:
   Book a Demo uses the site's pink-to-blue gradient (same as the header button),
   the other two use the brand blue */
.sec_hero-lite--fullbleed .hero_ctas .btn_primary_demo {
  background: linear-gradient(135deg, #e56bff 0%, #d647ee 45%, #3636ec 100%);
  box-shadow: 0 6px 18px rgba(214, 71, 238, 0.45);
}
.sec_hero-lite--fullbleed .hero_ctas .btn_primary_demo:hover,
.sec_hero-lite--fullbleed .hero_ctas .btn_primary_demo:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, #ef8bff 0%, #de5cf4 45%, #4a4af0 100%);
  transform: translateY(-1px);
}
.sec_hero-lite--fullbleed .hero_ctas .button-primary-4-copy {
  background-color: #3636ec;
  border-color: #3636ec;
}
.sec_hero-lite--fullbleed .hero_ctas .button-primary-4-copy:hover,
.sec_hero-lite--fullbleed .hero_ctas .button-primary-4-copy:focus-visible {
  color: #fff;
  background-color: #2626c9;
  border-color: #2626c9;
  transform: translateY(-1px);
}
/* Laptop (992px - 1439px) - slightly smaller so the row stays under the headline */
@media (max-width: 1439px) and (min-width: 992px) {
  .sec_hero-lite--fullbleed .hero_ctas {
    gap: 10px;
  }
  .sec_hero-lite--fullbleed .hero_ctas .w-button {
    padding: 8px 18px;
    font-size: 11px;
  }
}
/* Tablet and phone (below 992px) - everything scales with the screen width so the
   row shrinks in step with the painted headline above it */
@media (max-width: 991px) {
  .sec_hero-lite--fullbleed.section-100px-padding {
    padding: 0;
  }
  .sec_hero-lite--fullbleed .hero_grid {
    display: block;
    flex-direction: row;
    text-align: left;
  }
  .sec_hero-lite--fullbleed .hero_media {
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .sec_hero-lite--fullbleed .hero_copy {
    width: auto;
    max-width: 70%;
    padding: 0;
    text-align: left;
  }
  .sec_hero-lite--fullbleed .hero_ctas {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: none;
    gap: clamp(4px, 0.9vw, 8px);
  }
  .sec_hero-lite--fullbleed .hero_ctas .w-button {
    width: auto;
    margin: 0;
    padding: clamp(3px, 0.65vw, 6px) clamp(7px, 1.5vw, 14px);
    font-size: clamp(7px, 1.05vw, 10px);
    line-height: 1.5;
    letter-spacing: 0.01em;
    border-width: 1px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  }
}
/* Small phones (up to 420px) */
@media (max-width: 420px) {
  .sec_hero-lite--fullbleed .hero_ctas {
    gap: 4px;
  }
  .sec_hero-lite--fullbleed .hero_ctas .w-button {
    padding: 3px 7px;
    font-size: 7px;
    letter-spacing: 0;
  }
}

/* ============================================================
   Why Automation Matters — title and copy on the left, artwork on the right
   (stacked title, copy, artwork on tablet and phone)
   ============================================================ */
#why-automation .div-block-46 {
  display: flex;
  flex-direction: row-reverse; /* image left, title + text right (stacks text-first below 992px) */
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 64px);
}
#why-automation .div-block-47 {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 16px;
}
#why-automation .div-block-50,
#why-automation .div-block-49 {
  width: 100%;
  justify-content: flex-start;
}
#why-automation .heading-18 {
  text-align: left;
  margin: 0;
}
#why-automation .paragraph-left-align,
#why-automation .paragraph-left-align.tab-center-align {
  text-align: left;
  margin: 0;
}
#why-automation .why-automation-image-wrap {
  flex: 0 1 46%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#why-automation .why-automation-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
@media (max-width: 991px) {
  #why-automation .div-block-46 {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  #why-automation .div-block-47 {
    align-items: center;
    gap: 12px;
  }
  #why-automation .heading-18 {
    text-align: center;
  }
  #why-automation .paragraph-left-align,
  #why-automation .paragraph-left-align.tab-center-align {
    text-align: left;
  }
  #why-automation .why-automation-image-wrap {
    flex: 0 0 auto;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  #why-automation .div-block-46 {
    gap: 20px;
  }
  #why-automation .paragraph-left-align,
  #why-automation .paragraph-left-align.tab-center-align {
    font-size: 14px;
    line-height: 20px;
  }
  #why-automation .why-automation-image-wrap {
    max-width: 100%;
  }
  #why-automation .why-automation-image {
    border-radius: 12px;
  }
}

/* ============================================================
   "The Case for Automated Disinfection" (video band) on tablets and phones
   The band was a full screen tall (100vh) with the copy pinned at the very
   bottom, so on a phone most of the screen was empty video. It is now a
   shorter band: enough video to set the mood, with the copy just below the
   middle and tighter type.
   ============================================================ */
@media (max-width: 991px) {
  .sec_why-automation-video.background-video-4 {
    height: clamp(420px, 60vh, 600px);
  }
  .sec_why-automation-video .div-block-52 {
    height: 100%;
    justify-content: flex-end;
    padding-bottom: 36px;
  }
  .sec_why-automation-video .copy {
    height: auto;
    justify-content: flex-end;
  }
  .sec_why-automation-video .copy .heading-2 {
    margin-bottom: 12px;
  }
}
@media (max-width: 767px) {
  .sec_why-automation-video.background-video-4 {
    height: clamp(380px, 54vh, 520px);
  }
  .sec_why-automation-video .div-block-52 {
    padding-bottom: 28px;
  }
  .sec_why-automation-video .copy .heading-2 {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 10px;
  }
  .sec_why-automation-video .copy .paragraph-14-copy {
    font-size: 13.5px;
    line-height: 19px;
  }
}
@media (max-width: 479px) {
  .sec_why-automation-video.background-video-4 {
    height: clamp(340px, 50vh, 460px);
  }
  .sec_why-automation-video .div-block-52 {
    padding-bottom: 24px;
  }
  .sec_why-automation-video .copy .heading-2 {
    font-size: 20px;
    line-height: 26px;
  }
  .sec_why-automation-video .copy .paragraph-14-copy {
    font-size: 13px;
    line-height: 18px;
  }
}

/* Our Affiliations on phones: keep three logos per row (Webflow dropped to two
   under 480px). Logos scale to fit their cell so wide marks do not overflow. */
@media (max-width: 479px) {
  #affiliations .div-block-70 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 16px;
    grid-row-gap: 28px;
    width: 100%;
  }
  #affiliations .div-block-71 {
    min-width: 0;
  }
  #affiliations .logo-size {
    width: auto;
    height: 32px;
    max-width: 100%;
    object-fit: contain;
  }
}

/* ============================================================
   How It Works + Evidence — 4 cards, each with its own illustration
   (images/how-it-works/, images/evidence/). 4 across → 2 x 2 → 1 column.
   ============================================================ */
.hiw_steps {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  counter-reset: none;
}
.hiw_step {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #24252b;
  border: 1px solid #34363e;
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.hiw_step:hover {
  transform: translateY(-4px);
  border-color: var(--color, #d647ee);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4), 0 0 24px rgba(214, 71, 238, 0.18);
}
.hiw_media {
  aspect-ratio: 8 / 5;
  background: #f4f0fc;
  border-bottom: 1px solid #34363e;
}
.hiw_media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hiw_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 18px 22px;
  text-align: left;
}
.hiw_num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color, #d647ee), var(--color-2, #3636ec));
  color: #fff;
  font-family: Lato, sans-serif;
  font-size: 15px;
  font-weight: 700;
}
.hiw_title {
  margin: 2px 0 0;
  color: #fff;
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}
.hiw_text {
  margin: 0;
  color: #a1a3ab;
  font-family: Lato, sans-serif;
  font-size: 14px;
  line-height: 21px;
}
@media (max-width: 991px) {
  .hiw_steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
/* Phones: one card per row */
@media (max-width: 599px) {
  .hiw_steps { grid-template-columns: 1fr; gap: 14px; }
  .hiw_body { padding: 14px 16px 18px; gap: 6px; }
  .hiw_title { font-size: 17px; line-height: 22px; }
  .hiw_text { font-size: 13.5px; line-height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hiw_step { transition: none; }
  .hiw_step:hover { transform: none; }
}

/* Evidence: cards have no number badge; disclaimer under the grid */
.ev_note {
  margin: 24px auto 0;
  max-width: 760px;
  font-size: 13px;
  line-height: 19px;
  opacity: 0.7;
}
@media (max-width: 599px) {
  .ev_note { font-size: 12px; line-height: 17px; margin-top: 18px; }
}

/* Safety & Compliance: title + text left, one illustration right; stacks text-first on tablet/phone */
#safety .sf_layout {
  display: flex;
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  width: 100%;
}
#safety .sf_text { flex: 1 1 0; min-width: 0; }
#safety .sf_media { flex: 0 1 48%; min-width: 0; }
#safety .sf_media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
@media (max-width: 991px) {
  #safety .sf_layout { flex-direction: column; align-items: stretch; gap: 28px; }
  #safety .sf_media { flex: 0 0 auto; width: 100%; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 479px) {
  #safety .sf_media img { border-radius: 14px; }
}
/* Phones: section + container padding stacked to ~40px a side; keep only the section's */
@media (max-width: 767px) {
  #how-it-works .container_main,
  #evidence .container_main,
  #safety .container_main { padding-left: 0; padding-right: 0; }
}