.stack-video {
  width: 100%;
  height: auto;
  max-width: 80vw;
  aspect-ratio: 16/9;
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  display: block;
  margin-top: 2rem;
}

#videoSection_technology {
  background-color: #f2f3f4;
}

/* === Technology page: spec compare visuals === */
.spec-compare{
  padding: 2.5rem 0 1rem;
  background-color: #ffffff;
}

.spec-compare .standard-container{
  color: #ffffff;
}

.compare-row .compare-cell--value.is-better{
  position: relative;
  color: #0a2e55;
  background-color: #E2EBF3;
}

.compare-row .compare-cell--value.is-better strong{
  /* subtle Apple-like emphasis */
  /*background: #f4f7fb; */
  padding: .35rem .6rem;
  border-radius: 999px;
}

/* tiny check glyph */
.compare-row .compare-cell--value.is-better::after{
  font-weight: 700;
  margin-left: .5rem;
  opacity: .9;
}

/* column accents (only desktop) */
@media (min-width: 761px){
  .compare-row .compare-cell:nth-child(2){ /* SonixED column */
    border-left: 1px solid #eef2f7;
    border-right: 1px solid #eef2f7;
  }

  /* Hide compare arrows on desktop/tablet */
  .comp-arrows { display: none !important; }
}

@media (max-width:760px){
  /* Ensure rows behave as 3-column grid on mobile */
  .compare-table .compare-row{
    display:grid;
    grid-template-columns: 1.1fr 1fr 1fr;
  }

  .compare-row:hover{ transform:none; }

  .compare-table .compare-row > .compare-cell:nth-child(1){
    grid-column: 1 !important; grid-row:auto;
  }
  .compare-table .compare-row > .compare-cell:nth-child(2){
    grid-column: 2 !important; grid-row:auto;
  }

  /* Hide all competitor cells by default; show only active */
  .compare-table .compare-row > .compare-cell:nth-child(n+3){
    grid-column: 3 !important; grid-row:auto;
    display: none;
  }
  .compare-table .compare-row > .compare-cell.is-active-col{
    display: block !important;
  }

  /* Active header toggle (visible competitor) */
  .compare-cell--head .comp-toggle[aria-pressed="true"]{
    background:#e9eef7;
    color:#0a2e55;
  }

  /* Keep the 3rd header cell always visible, hide 4th header cell on mobile */
  .compare-row--head .compare-cell.always-visible{
    display:block !important;           /* override the generic nth-child(n+3) hide */
    grid-column: 3 !important;
  }
  .compare-row--head .compare-cell:nth-child(4){
    display:none !important;
  }

  /* Header slider (like a-cards) inside the 3rd header cell */
  .compare-row--head .comp-switcher{
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    border-radius:10px;
    background:#f2f5fa;
  }
  /* Slide wrappers (full-width snap pages) */
  .compare-row--head .comp-switcher .snap{
    flex:0 0 100%;
    scroll-snap-align:center;
    text-align:center;
    padding:.4rem 0;
  }
  /* Small centered pill inside each slide */
  .compare-row--head .comp-switcher .snap .comp-toggle{
    display:inline-block;
    padding:.35rem .6rem;     /* smaller horizontal pill */
    font-size:.9rem;
    max-width:10rem;          /* cap width to keep it narrow */
    width:auto;
    background:transparent;
    border-radius:999px;
  }
  .compare-row--head .comp-switcher .snap .comp-toggle[aria-pressed="true"]{
    background:#e9eef7;
    color:#0a2e55;
  }

  /* Arrange each slide content horizontally: arrow + pill */
  .compare-row--head .comp-switcher .snap{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Tiny inline arrow buttons inside header slides */
  .compare-row--head .comp-header-arrow{
    appearance: none;
    background: transparent;
    border: 0;
    width: 28px; height: 28px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #6b7280;
    opacity: .6;
    padding: 0;
  }

  .compare-row--head .comp-header-arrow:hover{ opacity: .9; }
  .compare-row--head .comp-header-arrow:active{ opacity: 1; }

  .compare-row--head .comp-header-arrow svg{
    width: 16px; height: 16px;
    stroke: currentColor; fill: none; display: block;
  }

  /* Ensure the section that also has .standard-container doesn't push content sideways */
  .spec-compare.standard-container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Allow capture of horizontal gestures anywhere on the table */
  .spec-compare{
    position:relative;
  }
  .compare-table{
    touch-action:pan-y;
    overscroll-behavior-x:contain;
  }
  .compare-table .compare-row{
    -webkit-user-select:none;
    user-select:none;
  }

  /* Arrow bar under the table (mobile only) */
  .comp-arrows{
    display:flex;
    justify-content: flex-end;
    align-items:center;
    gap:.75rem;
    margin:.5rem 0 1rem;
    width: 100%;
  }
  .comp-arrows .comp-card-arrows{
    display: flex;
    gap: .75rem;
  }

  /* Style the buttons actually used in HTML */
  .comp-arrows .comp-card-arrow{
    width:36px; height:36px;
    border-radius:999px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid #d9dee6;
    background:#fff;
    color:#6b7280;
  }
  .comp-arrows .comp-card-arrow[disabled]{
    opacity:.5; cursor:not-allowed;
  }

  /* Ensure SVG icons render correctly inside the arrow buttons */
  .comp-arrows .comp-card-arrow svg{
    width: 18px;
    height: 18px;
    flex: 0 0 auto;           /* prevent collapse */
    overflow: visible;
    display: block !important;
    stroke: currentColor !important;
    fill: none !important;
  }
  /* Make sure inner shapes are visible and stroked */
  .comp-arrows .comp-card-arrow svg *,
  .comp-arrows .comp-card-arrow svg path{
    display: block !important;
    visibility: visible !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 3.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    vector-effect: non-scaling-stroke;
  }

  /* Smooth entrance for newly active competitor column */
  @keyframes compFadeSlideLeft {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes compFadeSlideRight {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  .compare-table .compare-row > .compare-cell.animate-in.anim-from-left{
    animation: compFadeSlideLeft 220ms ease-out both;
  }
  .compare-table .compare-row > .compare-cell.animate-in.anim-from-right{
    animation: compFadeSlideRight 220ms ease-out both;
  }

  /* Respect user preference */
  @media (prefers-reduced-motion: reduce){
    .compare-table .compare-row > .compare-cell.animate-in{
      animation: none;
    }
  }

  /* Small paint hint for smoother slide/fade-in */
  .compare-table .compare-row > .compare-cell:nth-child(n+3){
    will-change: transform, opacity;
  }

  /* Make container block-level and trim side padding; clamp overflow */
  .spec-compare.standard-container{
    display: block;                   /* avoid flex centering side-effects */
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden;               /* safety clamp */
  }

  /* Ensure table never exceeds viewport width on mobile */
  .compare-table{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Allow grid tracks to actually shrink */
  .compare-table .compare-row{
    /* was: grid-template-columns: 1.1fr 1fr 1fr; */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  /* Allow grid items to shrink instead of forcing overflow */
  .compare-table .compare-cell,
  .compare-table .compare-cell--head{
    min-width: 0;
  }
}

/* Header toggle base style (looks like plain text on desktop) */
.compare-cell--head .comp-toggle{
  appearance:none;
  background:none;
  border:0;
  padding:.1rem .4rem;
  border-radius:999px;
  color:inherit;
  font:inherit;
  cursor:pointer;
  font-size:.9rem;
  line-height:1.15;
}


.tech-cases { background: #fff; border-block: 1px solid #fff; margin: 3rem; border-radius: 20px; margin-top: 4rem;}

@media (max-width: 768px) {
  .tech-cases { margin-left: 0.75rem; margin-right: 0.75rem; }
}


#info-box-left_tech {
  font-size: 1.5rem;
}

.tech-cases .cases-panels{min-height: 350px;}

.a-card-grid .a-card {
  height: 27vh !important;
  min-height: 27vh !important;
  max-height: 27vh !important;
}

/* Make existing .a-card tiles clean + compact (no bg image) */
.a-card{
  background-color: #fff !important; /* overrides inline bg-color */
  background-image:none !important;           /* overrides inline bg-image */
  min-height:180px; max-height:220px;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0, 0, 0, 0.206);
  position:relative; overflow:hidden;
  padding:1.25rem;
}

/* Use existing overlay block as the content area, left-aligned */
.a-card .a-card__overlay--top-left{
  position:relative;
  display:flex; flex-direction:column;
 padding:0; margin:0;
}

/* Title + helper text */
.a-card .a-card__text{
  display:block; margin:0 0 .25rem 0; color:#456; font-size:.9rem;
}
.a-card .a-card__title{
  margin:0; font-size:1.15rem; font-weight:600; color:#0a2e55;
  display:flex; align-items:center; gap:.75rem;
}
.a-card .a-card__plus{
  background:#fff;
  color:#0a2e55;
}

.a-card:hover .app-icon svg { stroke: #d0b81c; }

/* Optional: smaller modal height when these cards expand */

.a-card-expanded .a-card-expanded-content{ max-height:80vh; }

.app-icon svg{
  width: 70px;
  height: 70px;
}