/*
 * replica-home.css - home page sections (area B: home-page agent).
 *
 * Ported from the per-section <style> blocks of raw/live/home.html (digest: raw/analysis/inline-styles-home.css),
 * with the hashed suffixes of the AI-generated Horizon blocks replaced by stable class names:
 *   .ai-slideshow-*       <- .ai-slideshow-*-ay093n0xkoersq2tkaaigenblockcd727ffuqlrjg    (hero, blocks/ai_gen_block_cd727ff)
 *   .ai-multicolumn-*     <- .ai-multicolumn-*-amny1oenxm0s4yuxlyaigenblock2be2254qemfe9  (blocks/ai_gen_block_2be2254)
 *   .ai-split-banner*     <- .ai-split-banner*-abtkyn2disw9jbfrtbaigenblocka268684lmhbqh   (blocks/ai_gen_block_a268684)
 *   .ubr-section .ubr-*   <- #ubrev-template20781336232075customreviewsslideriCXT6e .ubr-* (sections/custom-reviews-slider)
 * Values that come from block settings are custom properties set inline by the templates (partials/home-*.html); the
 * fallbacks below are the live values. The section grid, the resource-list grid and the phone carousel of the product
 * lists are styled by the theme CSS (base.css / styles.css) through the same class names as the live markup.
 * Breakpoints are the theme's: 749px (phone) / 750px (desktop); the reviews section uses its own 600px like the live store.
 */

/* ------------------------------------------------------------------ hero slideshow (ai_gen_block_cd727ff) */
.ai-slideshow {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  display: block;
}

.ai-slideshow-container {
  position: relative;
  width: 100%;
  height: var(--ai-slideshow-height, 600px);
}

.ai-slideshow-track {
  display: flex;
  transition: transform 0.6s ease-in-out;
  height: 100%;
}

.ai-slideshow-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-slideshow-slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ai-slideshow-slide-placeholder {
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ai-slideshow-slide-placeholder svg {
  width: 100%;
  height: 100%;
  max-width: 500px;
  max-height: 500px;
}

.ai-slideshow-content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--ai-slideshow-text-color, #ffffff);
  width: 90%;
  max-width: 800px;
  z-index: 2;
}

.ai-slideshow-content.position-top {
  top: 80px;
}

.ai-slideshow-content.position-middle {
  top: 50%;
  transform: translate(-50%, -50%);
}

.ai-slideshow-content.position-bottom {
  bottom: 80px;
}

.ai-slideshow-heading {
  font-size: var(--ai-slideshow-heading-size, 40px);
  margin: 0 0 16px;
  color: var(--ai-slideshow-text-color, #ffffff);
}

.ai-slideshow-subheading {
  font-size: var(--ai-slideshow-subheading-size, 18px);
  margin: 0 0 24px;
  color: var(--ai-slideshow-text-color, #ffffff);
}

.ai-slideshow-button {
  display: inline-block;
  padding: 12px 32px;
  background-color: var(--ai-slideshow-button-bg, #235986);
  color: var(--ai-slideshow-button-text, #ffffff);
  text-decoration: none;
  border-radius: var(--ai-slideshow-button-radius, 14px);
  transition: background-color 0.3s ease;
}

.ai-slideshow-button:hover {
  background-color: var(--ai-slideshow-button-hover-bg, #f5ba0a);
}

.ai-slideshow-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--ai-slideshow-nav-bg, #ffffff);
  color: var(--ai-slideshow-nav-color, #000000);
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background-color 0.3s ease;
}

.ai-slideshow-nav:hover {
  background-color: var(--ai-slideshow-nav-hover-bg, #f5f5f5);
}

.ai-slideshow-nav-prev {
  left: 20px;
}

.ai-slideshow-nav-next {
  right: 20px;
}

.ai-slideshow-nav svg {
  width: 24px;
  height: 24px;
}

.ai-slideshow-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}

.ai-slideshow-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--ai-slideshow-dot-color, #ffffff);
  opacity: 0.5;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.3s ease;
}

.ai-slideshow-dot.active {
  opacity: 1;
}

@media screen and (max-width: 749px) {
  .ai-slideshow-container {
    height: var(--ai-slideshow-height-mobile, 400px);
  }

  .ai-slideshow-heading {
    font-size: var(--ai-slideshow-heading-size-mobile, 24px);
  }

  .ai-slideshow-subheading {
    font-size: var(--ai-slideshow-subheading-size-mobile, 14.4px);
  }

  .ai-slideshow-nav {
    width: 40px;
    height: 40px;
  }

  .ai-slideshow-nav-prev {
    left: 10px;
  }

  .ai-slideshow-nav-next {
    right: 10px;
  }

  .ai-slideshow-content.position-top {
    top: 40px;
  }

  .ai-slideshow-content.position-bottom {
    bottom: 40px;
  }
}

/* ------------------------------------------------------------------ 3-column text block (ai_gen_block_2be2254) */
.ai-multicolumn {
  display: block;
  width: 100%;
  max-width: 100%;
  background-color: var(--ai-mc-bg, #ffffff);
  padding: var(--ai-mc-padding, 60px) 0;
}

.ai-multicolumn-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ai-mc-column-gap, 60px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.ai-multicolumn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ai-mc-content-gap, 16px);
}

.ai-multicolumn-icon {
  width: var(--ai-mc-icon-size, 36px);
  height: var(--ai-mc-icon-size, 36px);
  color: var(--ai-mc-icon-color, #000000);
  stroke-width: var(--ai-mc-icon-stroke, 1.5);
}

.ai-multicolumn-title {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: var(--ai-mc-title-size, 16px);
  color: var(--ai-mc-title-color, #000000);
  margin: 0;
  line-height: 1.2;
}

.ai-multicolumn-text {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: var(--ai-mc-text-size, 13px);
  color: var(--ai-mc-text-color, #000000);
  margin: 0;
  line-height: 1.5;
}

@media screen and (max-width: 749px) {
  .ai-multicolumn-container {
    grid-template-columns: 1fr;
    gap: var(--ai-mc-mobile-gap, 40px);
  }

  .ai-multicolumn {
    padding: var(--ai-mc-padding-mobile, 40px) 0;
  }
}

/* ------------------------------------------------------------------ split banner "KEEP GOING FOWARD" (ai_gen_block_a268684) */
.ai-split-banner {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.ai-split-banner__container {
  display: flex;
  width: 100%;
  min-height: var(--ai-sb-min-height, 300px);
}

.ai-split-banner__text-side {
  flex: 1;
  background-color: var(--ai-sb-text-bg, #eef1ea);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ai-sb-text-padding, 40px);
}

.ai-split-banner__text-content {
  max-width: 100%;
  text-align: var(--ai-sb-text-align, right);
}

.ai-split-banner__heading {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: var(--ai-sb-heading-size, 120px);
  line-height: var(--ai-sb-heading-line-height, 0.9);
  color: var(--ai-sb-text-color, #000000);
  margin: 0;
  word-wrap: break-word;
}

.ai-split-banner__image-side {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.ai-split-banner__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.ai-split-banner__image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ai-split-banner__image-placeholder svg {
  width: 100%;
  height: 100%;
  max-width: 500px;
  max-height: 500px;
}

.ai-split-banner__empty-state {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  font-size: 14px;
  color: #666;
  text-align: center;
  pointer-events: none;
}

@media screen and (max-width: 749px) {
  .ai-split-banner__container {
    flex-direction: var(--ai-sb-mobile-layout, column-reverse) !important;
    min-height: auto;
  }

  .ai-split-banner__image-side {
    min-height: var(--ai-sb-min-height-mobile, 260px);
    width: 100%;
    flex: none;
  }

  .ai-split-banner__text-side {
    padding: var(--ai-sb-text-padding-mobile, 20px);
    min-height: 150px;
    width: 100%;
    flex: none;
  }

  .ai-split-banner__heading {
    font-size: var(--ai-sb-heading-size-mobile, 76px);
  }
}

/* ------------------------------------------------------------------ reviews slider (sections/custom-reviews-slider.liquid) */
/* Shared with the product page through partials/reviews-slider.html; scoped by class so several instances can coexist. */
.ubr-section {
  --ub-green: #00b67a;
  --ub-green-d: #019267;
  --ub-ink: #0f1720;
  --ub-muted: #5b6b7a;
  padding: 64px 16px;
  background: linear-gradient(180deg, #ffffff 0%, #eafaf1 45%, #d9f5e6 100%);
}
.ubr-section * { box-sizing: border-box; }
.ubr-section .ubr-head { text-align: center; margin-bottom: 28px; }
.ubr-section .ubr-h2 { margin: 0 0 18px; font-size: clamp(26px, 4.2vw, 44px); line-height: 1.1; font-weight: 800; color: var(--ub-ink); letter-spacing: -.02em; }
.ubr-section .ubr-badge {
  display: inline-flex; align-items: center; gap: 12px; background: #fff; border-radius: 10px;
  padding: 14px 22px; box-shadow: 0 6px 22px rgba(15, 23, 32, .10); font-size: clamp(15px, 2.2vw, 21px); color: var(--ub-ink);
}
.ubr-section .ubr-badge b { font-weight: 800; }
.ubr-section .ubr-stars { display: flex; gap: 3px; }
.ubr-section .ubr-star { width: 1.55em; height: 1.55em; background: var(--ub-green); display: flex; align-items: center; justify-content: center; border-radius: 2px; }
.ubr-section .ubr-star.half { background: linear-gradient(90deg, var(--ub-green) 50%, #dcdce6 50%); }
.ubr-section .ubr-star svg { width: 72%; height: 72%; fill: #fff; }
.ubr-section .ubr-sub { margin: 14px 0 0; font-size: clamp(14px, 1.8vw, 18px); color: var(--ub-ink); }
.ubr-section .ubr-sub p { margin: 0; }
.ubr-section .ubr-slider { position: relative; max-width: 1240px; margin: 0 auto; }
.ubr-section .ubr-track {
  display: flex; gap: 22px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  padding: 10px 4px 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ubr-section .ubr-track::-webkit-scrollbar { display: none; }
.ubr-section .ubr-card {
  flex: 0 0 300px; scroll-snap-align: start; background: #fff; border-radius: 16px; padding: 26px 24px;
  box-shadow: 0 8px 26px rgba(15, 23, 32, .09); display: flex; flex-direction: column; gap: 14px;
}
.ubr-section .ubr-card .ubr-star { width: 1.85em; height: 1.85em; }
.ubr-section .ubr-title { margin: 0; font-size: 21px; font-weight: 800; color: var(--ub-ink); line-height: 1.25; }
.ubr-section .ubr-text { margin: 0; padding-left: 14px; border-left: 3px solid var(--ub-green); color: var(--ub-ink); font-size: 15px; line-height: 1.55; }
.ubr-section .ubr-who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; }
.ubr-section .ubr-av {
  width: 40px; height: 40px; border-radius: 50%; background: var(--ub-green); color: #fff; display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 17px; flex: 0 0 40px;
}
.ubr-section .ubr-name { font-weight: 700; color: var(--ub-ink); font-size: 15px; line-height: 1.3; }
.ubr-section .ubr-role { font-size: 13px; color: var(--ub-muted); line-height: 1.3; }
.ubr-section .ubr-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: #fff; color: var(--ub-ink); font-size: 19px; cursor: pointer; box-shadow: 0 4px 16px rgba(15, 23, 32, .18);
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.ubr-section .ubr-nav:hover { background: #f4f6f8; }
.ubr-section .ubr-nav.prev { left: -6px; }
.ubr-section .ubr-nav.next { right: -6px; }
.ubr-section .ubr-dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.ubr-section .ubr-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(15, 23, 32, .2); cursor: pointer; transition: .25s; }
.ubr-section .ubr-dot.active { background: var(--ub-green-d); width: 22px; border-radius: 5px; }
@media (max-width: 600px) {
  .ubr-section { padding: 44px 12px; }
  .ubr-section .ubr-card { flex-basis: 80vw; padding: 22px 20px; }
  .ubr-section .ubr-nav { display: none; }
}