.react-skip-link {
  position: fixed;
  z-index: 1100;
  inset-block-start: 0.5rem;
  inset-inline-start: 1rem;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  background: #fff;
  color: #155b9f;
  outline: 2px solid #1e90ff;
}

.react-skip-link:not(:focus) {
  clip-path: inset(50%);
}

#page-content {
  scroll-margin-top: 6rem;
}

.site-footer a[aria-current="page"] {
  color: #a9d6ff;
}

.site-footer a:focus-visible {
  outline: 2px solid #a9d6ff;
  outline-offset: 3px;
}

#video-library-root .videos-library-header h1 {
  margin: 0.25rem 0 0;
}

.site-footer {
  background-image: linear-gradient(135deg, #192d35, #213d4a);
}

.site-footer-grid h2 {
  margin-bottom: 0.8rem;
  color: #d5edff;
}

.site-footer-grid a[href="req-demo"] {
  padding: 0.4rem 0.75rem;
  border: 1px solid #76baff;
  border-radius: 8px;
}

/* Alternate related surfaces while keeping the existing hero and brand panels. */
section:not(section section) {
  --section-scroll: #4599db;
}

section:not(section section):nth-of-type(3n + 2) {
  --section-surface: #f1f8ff;
  --section-scroll: #378aca;
}

section:not(section section):nth-of-type(3n + 3) {
  --section-surface: #f7fafc;
  --section-scroll: #557fa5;
}

section:not(section section):not(.page-hero, .videos-page, .bg-primary, .bg-primary-3, .bg-gradient, .jarallax, .text-white, .restaurant-hero section) {
  background-color: var(--section-surface, #fff) !important;
}

section:not(section section):is(.bg-primary, .bg-primary-3, .bg-gradient, .jarallax, .text-white),
.restaurant-hero section {
  --section-scroll: #176bb4;
}

html {
  scrollbar-color: var(--site-scroll, #4599db) #edf5fc;
}

.videos-thumbs {
  scrollbar-color: #4599db #edf5fc;
}

section:not(section section).customer-stories {
  --section-surface: #fff;
}

section:not(section section).cloud-services {
  --section-surface: #e8f5f7;
  --section-scroll: #378b9d;
}

section:not(section section).home-solutions {
  --section-surface: #e8f1fa;
  --section-scroll: #326b9f;
  background-image: linear-gradient(180deg, #fff 0, #e8f1fa 9rem, #e8f1fa calc(100% - 5rem), #f7fafc 100%);
}

.home-solutions .home-solution.card {
  padding: 0;
  overflow: hidden;
  border: 1px solid #d7e6f3;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(25, 45, 53, 0.06);
}

.home-solutions .home-solution-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e2ebf3;
}

.home-solution-link::after {
  content: '\2192';
}

[dir="rtl"] .home-solution-link::after {
  content: '\2190';
}

.home-solutions .home-solution:hover,
.home-solutions .home-solution:focus-visible {
  border-color: #1e90ff;
  box-shadow: 0 12px 24px rgba(30, 144, 255, 0.14);
}

.home-solutions .home-solutions-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

.home-solution-media {
  aspect-ratio: 2 / 1;
  background: linear-gradient(145deg, #e2f2ff, #f5fbff);
  overflow: hidden;
}

.home-solution-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.solution-image-cover {
  object-fit: cover;
}

.solution-image-contain {
  object-fit: contain;
  padding: 0.75rem;
}

.home-solution-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.15rem 1.25rem;
}

@media (min-width: 576px) {
  .home-solutions .home-solutions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .home-solutions .home-solutions-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .home-solutions .home-solution {
    grid-column: span 2;
  }

  .home-solutions .home-solution:nth-child(n + 4) {
    grid-column: span 3;
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
  }

  .home-solutions .home-solution:nth-child(n + 4) .home-solution-media {
    aspect-ratio: auto;
    height: clamp(10rem, 16vw, 13rem);
  }
}

.cover-header {
  position: absolute;
  inset-inline: 0;
}

.cover-header .site-navbar {
  background: transparent;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
}

.cover-header .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.65);
}

.cover-header .navbar-toggler-icon {
  filter: brightness(0) invert(1);
}

.cover-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(84px + clamp(2rem, 6vw, 5.5rem)) clamp(5rem, 9vw, 8rem);
  --section-scroll: #176bb4;
}

.cover-hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.33;
}

.cover-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-hero h1 {
  max-width: 20ch;
  margin-inline: auto;
  font-size: clamp(2.25rem, 6vw, 4.25rem);
  line-height: 1.15;
  text-wrap: balance;
}

.cover-hero .lead {
  max-width: 62ch;
  margin-inline: auto;
  color: #fff;
}

.cover-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

:is(#contact-form, #demo-form, #video-library-root) {
  scroll-margin-top: 1rem;
}

@media (min-width: 1200px) {
  .cover-header .site-navbar .navbar-nav .nav-link {
    color: #fff;
  }

  .cover-header .site-navbar .navbar-nav :is(.nav-link:hover, .nav-link.active, .show > .nav-link) {
    color: #155b9f;
  }
}

.cover-hero-divider {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  display: block;
  width: 100%;
  height: clamp(2rem, 5vw, 4.5rem);
  color: #fff;
  pointer-events: none;
}

/* The active image and its control share the same slide state. */
.cover-hero-backdrop img {
  opacity: 0;
}

.cover-hero-backdrop img.is-current {
  opacity: 1;
}

.cover-hero-dots {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.9rem;
}

.cover-hero-dot {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.cover-hero-dot::before {
  width: 8px;
  height: 8px;
  border: 1px solid #fff;
  border-radius: 50%;
  content: '';
}

.cover-hero-dot[aria-pressed="true"]::before {
  background: #fff;
}

.cover-hero-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
}

@media (prefers-reduced-motion: no-preference) {
  .cover-hero-backdrop img {
    transition: opacity 650ms ease;
  }
}

.site-language-icon {
  display: block;
  flex-shrink: 0;
}

.site-navbar .navbar-nav .site-language {
  min-height: 44px;
  gap: 0.4rem;
  padding-inline: 0.65rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

.cover-header .site-navbar .navbar-nav a.site-language {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.site-navbar .navbar-nav .site-language:hover,
.site-navbar .navbar-nav .site-language:focus-visible {
  background: #edf6ff;
  color: #155b9f;
}

@media (max-width: 1199.98px) {
  .cover-header .site-navbar .navbar-nav a.site-language {
    color: #155b9f;
  }
}

section:not(section section).customer-logos {
  --section-surface: #fff;
  --section-scroll: #4599db;
}

.customer-logos > .container { max-width:1600px;width:100%;padding-inline:clamp(16px,3vw,48px); }
.customer-logos .section-title { margin-bottom:24px; }
.customer-logo-slider { display:flex;align-items:center;gap:12px;direction:ltr; }
.customer-logo-grid { display:flex;flex:1;min-width:0;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0;padding:12px 0;list-style:none; }
.customer-logo-grid::-webkit-scrollbar { display:none; }
.customer-logo-tile { display:grid;place-items:center;flex:0 0 160px;min-width:0;padding:8px;scroll-snap-align:start; }
.customer-logo-crop { display:block;position:relative;width:144px;aspect-ratio:1;overflow:hidden;direction:ltr;clip-path:inset(0 7%); }
.customer-logo-crop img { position:absolute;max-width:none!important;height:auto;top:-18.5%; }
.customer-slider-arrow { flex:0 0 40px;width:40px;height:40px;border:1px solid #d8e8f5;border-radius:50%;background:#f1f8ff;color:#1675bd;font-size:28px;line-height:1;cursor:pointer; }
.customer-slider-arrow:hover,.customer-slider-arrow:focus-visible { background:#168cf5;color:#fff; }
@media(max-width:575px) {
 .customer-logo-slider { gap:4px; }
 .customer-logo-grid { gap:12px; }
 .customer-logo-tile { flex-basis:120px;padding:4px; }
 .customer-logo-crop { width:112px; }
 .customer-slider-arrow { flex-basis:32px;width:32px;height:32px; }
}

.home-solution-media .solution-image-pos { object-fit:cover;object-position:center 12%;padding:0; }

.home-solution-media.home-pos-media { display:grid;place-items:center;padding:10px 20px 5px; }
.pos-touch-device { width:100%;max-width:270px;position:relative;filter:drop-shadow(0 6px 5px rgba(23,49,70,.16)); }
.pos-touch-screen { position:relative;aspect-ratio:4/3;border:8px solid #202c36;border-bottom-width:12px;border-radius:10px;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1px #485963; }
.home-pos-media .pos-touch-screen .solution-image-pos { width:100%;height:100%;object-fit:contain;padding:0; }
.pos-touch-stand { display:block;position:relative;width:24%;height:16px;margin:0 auto;background:linear-gradient(90deg,#586672,#a8b4bc 48%,#586672);clip-path:polygon(25% 0,75% 0,90% 80%,100% 100%,0 100%,10% 80%); }
.pos-touch-device::after { content:"";display:block;width:52%;height:6px;margin:0 auto;border-radius:50% 50% 3px 3px;background:linear-gradient(#6b7c89,#263541); }
@media(min-width:576px) { .home-pos-media .pos-touch-device { max-width:clamp(170px,16vw,240px); } }
.home-pos-media .pos-touch-device { width:60%;max-width:240px; }

/* Hide browser click outlines while retaining a deliberate keyboard focus cue. */
.cover-hero-dot:focus,
.customer-slider-arrow:focus { outline:none;box-shadow:none; }
.cover-hero-dot:focus-visible { outline:none; }
.cover-hero-dot:focus-visible::before { outline:2px solid #fff;outline-offset:4px; }
.customer-slider-arrow:focus-visible { outline:2px solid #1675bd;outline-offset:3px; }
.cover-hero-dot,
.customer-slider-arrow { -webkit-tap-highlight-color:transparent; }

.home-solution-media.home-pda-media { display:grid;place-items:center;padding:10px; }
.pda-device { position:relative;box-sizing:border-box;width:87px;padding:12px 5px 13px;border:3px solid #33414c;border-radius:12px;background:linear-gradient(100deg,#27323b,#151d25 55%,#34424e);box-shadow:3px 5px 8px rgba(22,44,62,.22); }
.home-pda-media .pda-device img { display:block;width:100%;height:auto;border:1px solid #10171d;border-radius:2px; }
.pda-device-speaker { position:absolute;top:4px;left:35%;width:30%;height:3px;border-radius:3px;background:#0a1117; }
.pda-device-key { position:absolute;bottom:4px;left:40%;width:20%;height:5px;border-radius:3px;border:1px solid #168dda;background:#17232f; }
.pda-device::before,.pda-device::after { content:"";position:absolute;top:30%;width:3px;height:21px;border-radius:2px;background:#128bd3; }
.pda-device::before { left:-5px; }.pda-device::after { right:-5px; }
@media(max-width:575px) { .pda-device { width:78px; } }
.home-solution-media.home-pda-media { min-height:200px; }

.home-solution-media.home-order-media { display:grid;place-items:center;padding:10px 20px; }
.order-taker-device { position:relative;width:70%;max-width:260px;padding:7px 12px;border:2px solid #43515c;border-radius:12px;background:linear-gradient(115deg,#34414c,#15212b 65%,#34414c);box-shadow:0 6px 9px rgba(22,44,62,.2); }
.order-taker-screen { aspect-ratio:1024/728;border-radius:3px;overflow:hidden;background:#fff; }
.home-order-media .order-taker-screen img { width:100%;height:100%;object-fit:cover;object-position:top;padding:0; }
.order-taker-camera { position:absolute;width:3px;height:3px;border-radius:50%;left:4px;top:calc(50% - 1px);background:#647989;box-shadow:0 0 0 1px #101a23; }
@media(min-width:576px) and (max-width:991.98px) { .order-taker-device { width:58%;padding:5px 10px;border-radius:9px; } }
.cover-hero-backdrop img[src*="customer-10-rs-store"] { object-position:center top; }
