/* What Makes a Great Digital Product (/web-development).
   Sits between #solutions and #roadmap. First carousel slide: a glossy WOW
   inside a glowing neon frame over the Golden.mp4 gold-particle background,
   with a tab bar and nav arrows. */

/* Ambient background glow behind the cards. In Figma the backdrop is not flat
   black: a cool-blue image sits over the #040506 base at ~20% opacity under a
   40px blur, blooming behind the card and fading to black top and bottom. We
   recreate that softly with layered radial gradients over the same base — the
   main slate-blue bloom centred behind the card plus a fainter brand-blue
   (#57a6fb) accent to its left. The section's ::before/::after (from
   .section-container) keep the top/bottom edges fading into black. */
#what-makes {
  position: relative;
  background:
    radial-gradient(75% 55% at 50% 42%, rgba(72, 120, 190, 0.18) 0%, rgba(38, 74, 132, 0.09) 38%, rgba(4, 5, 6, 0) 72%),
    radial-gradient(40% 42% at 27% 46%, rgba(87, 166, 251, 0.09) 0%, rgba(87, 166, 251, 0) 60%),
    #040506;
}

#what-makes .content {
  overflow: hidden;
}

#what-makes .wm-carousel {
  position: relative;
  display: flex;
  justify-content: center;
  /* Let horizontal swipes drive the carousel (vertical still scrolls the
     page), and keep a left swipe from triggering the browser's back nav. */
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  /* Stop the browser's native text-selection / image-drag from cancelling a
     carousel drag mid-gesture. */
  -webkit-user-select: none;
  user-select: none;
}

#what-makes .wm-carousel img {
  -webkit-user-drag: none;
  user-drag: none;
}

#what-makes .wm-slide {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

#what-makes .wm-slide.is-active {
  display: flex;
  animation: wm-fade 0.4s ease;
}

@keyframes wm-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #what-makes .wm-slide.is-active {
    animation: none;
  }
}

/* ---------- Stage (video + WOW + frame) ---------- */

#what-makes .wm-stagewrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

#what-makes .wm-stage {
  position: relative;
  flex: 0 0 auto;
  width: 920px;
  height: 560px;
}

/* gold-particle video, sitting inside the frame opening */
#what-makes .wm-stage__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 80%;
  object-fit: cover;
  border-radius: 60px / 80px;
  background: #000;
  z-index: 1;
}

/* WOW text — transparent PNG (black background keyed out), sitting on the front
   layer at full opacity so it reads as the original artwork, overlapping the
   frame. The vertical shift is exposed as --wow-shift so each breakpoint can
   place the glyphs: desktop centres them in the frame (-50%), mobile keeps the
   tuned -37% (the glyphs sit high in the source image there). */
#what-makes .wm-stage__wow {
  position: absolute;
  /* Desktop vertical placement (mobile overrides this to 50% below). */
  top: 64%;
  left: 50%;
  width: 115%;
  /* height:auto so the img's width/height attributes only supply the intrinsic
     aspect-ratio (reserving the box to prevent the load-time jump) rather than
     forcing a literal pixel height that stretches the artwork vertically. */
  height: auto;
  aspect-ratio: 2000 / 1091;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
  animation: wm-wow-float 5s ease-in-out infinite;
  will-change: transform;
}

/* gentle floating so the WOW isn't static. The vertical shift is baked into
   the keyframes as a literal (-50% desktop, -37% mobile) rather than a custom
   property: a var() inside @keyframes is not resolved on the first paint in
   Chromium, which left the WOW mis-placed (dropped to the bottom) until the
   next style recalc — e.g. after switching slides. */
@keyframes wm-wow-float {
  0%, 100% {
    transform: translate(-50%, calc(-50% - 10px)) rotate(-0.8deg);
  }
  50% {
    transform: translate(-50%, calc(-50% + 10px)) rotate(0.8deg);
  }
}

/* mobile keeps the tuned -37% shift */
@keyframes wm-wow-float-m {
  0%, 100% {
    transform: translate(-50%, calc(-37% - 10px)) rotate(-0.8deg);
  }
  50% {
    transform: translate(-50%, calc(-37% + 10px)) rotate(0.8deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #what-makes .wm-stage__wow {
    animation: none;
  }
}

/* neon frame — portrait PNG rotated 90deg to landscape, behind the WOW */
#what-makes .wm-stage__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 720px;   /* becomes visual height after rotate */
  height: 1700px; /* becomes visual width after rotate */
  object-fit: fill;
  transform: translate(-50%, -50%) rotate(90deg);
  pointer-events: none;
  z-index: 3;
}

/* Second copy of the neon frame, identical in position/size/rotation, sitting
   on the very front layer (above the WOW) with only its right side revealed —
   so the frame's right edge overlaps in front of the glyphs while the left
   edge stays behind, matching the Figma "topaz 3" layer. The frame is rotated
   90deg, so the element's local top maps to screen-right; a top->bottom mask
   therefore keeps the right half and fades out the left. */
#what-makes .wm-stage__frame--front {
  z-index: 5; /* above the WOW (z-index 4) */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 66%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 66%);
}

/* ---------- Caption ---------- */

#what-makes .wm-caption {
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  text-align: center;
}

/* ---------- Slides 2-4: glass card shell ---------- */

#what-makes .wm-cardwrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 529px;
}

/* Cards keep their intrinsic Figma width and are only ever shrunk with
   transform: scale() (see the responsive block). Do not add max-width here —
   it would collapse the box and clip the fixed-size phone mockups inside. */
#what-makes .wm-card {
  position: relative;
  flex: 0 0 auto;
  height: 529px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 18px 79.5px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

/* ---------- Slide 2: Informative (phone + annotations) ---------- */

#what-makes .wm-info {
  width: 832px;
}

#what-makes .wm-info__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

#what-makes .wm-info__lines path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 1;
}

#what-makes .wm-info__lines circle {
  fill: rgba(87, 166, 251, 0.9);
}

/* The mobile connector set is only for the portrait layout; hide it on desktop. */
#what-makes .wm-info__lines--mobile {
  display: none;
}

#what-makes .wm-info__phone {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 488px;
  width: auto;
  z-index: 2;
}

#what-makes .wm-info__card {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

#what-makes .wm-info__title {
  font-weight: 500;
  font-size: 20px;
}

#what-makes .wm-info__desc {
  font-weight: 400;
  font-size: 13px;
  opacity: 0.5;
}

#what-makes .wm-info__card--description {
  left: 66px;
  top: 218px;
  width: 200px;
}

#what-makes .wm-info__card--price {
  left: 86px;
  top: 380px;
  width: 180px;
}

#what-makes .wm-info__card--image {
  left: 554px;
  top: 110px;
  width: 200px;
}

#what-makes .wm-info__card--cta {
  left: 554px;
  top: 357px;
  width: 180px;
}

/* ---------- Slide 3: Cleanliness (before / after phones) ---------- */

#what-makes .wm-clean {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  width: 832px;
  padding: 0 48px;
}

#what-makes .wm-clean__phone {
  height: 482px;
  width: auto;
  flex: 0 0 auto;
  filter: drop-shadow(13px 9px 26.8px rgba(0, 0, 0, 0.25));
}

#what-makes .wm-clean__arrows {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  color: #fff;
}

#what-makes .wm-clean__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

#what-makes .wm-clean__arrow svg {
  width: 40px;
  height: 40px;
}

#what-makes .wm-clean__arrow--faint {
  opacity: 0.3;
}

#what-makes .wm-clean__arrow--faint svg {
  width: 24px;
  height: 24px;
}

/* ---------- Slide 4: Positioning (three niches) ---------- */

#what-makes .wm-position {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
  width: 1076px;
  padding: 55px 0;
}

#what-makes .wm-position__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
}

#what-makes .wm-position__label {
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  opacity: 0.5;
}

#what-makes .wm-position__phone {
  height: 451px;
  width: auto;
}

/* ---------- Slide 5: Functionality (self-animating disclosure) ----------
   Everything is absolutely positioned inside the 1076x529 card, so the whole
   scene scales as one unit with the shared .wm-card transform tiers. */

#what-makes .wm-func {
  width: 1076px;
}

#what-makes .wm-func__laptop {
  position: absolute;
  left: -66px;
  top: 20px;
  width: 965px;
  height: 583px;
  object-fit: cover;
  object-position: left top;
  pointer-events: none;
  z-index: 1;
}

/* Disclosure panel — sits over the mockup's (now empty) body-copy area. */
#what-makes .wm-func__panel {
  position: absolute;
  left: 76px;
  top: 306px;
  width: 232px;
  z-index: 3;
}

/* The plain "wall of text" shown on entry, before it collapses to a button. */
#what-makes .wm-func__wall {
  max-height: 220px;
  opacity: 1;
  overflow: hidden;
  color: #55585f;
  font-size: 11px;
  line-height: 1.55;
  transition: max-height 0.5s ease, opacity 0.35s ease;
}

#what-makes .wm-func__panel:not(.is-intro) .wm-func__wall {
  max-height: 0;
  opacity: 0;
}

/* The disclosure (button + on-demand copy) that replaces the text wall. */
#what-makes .wm-func__disclosure {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.35s ease;
}

#what-makes .wm-func__panel:not(.is-intro) .wm-func__disclosure {
  max-height: 320px;
  opacity: 1;
}

/* Three key benefits sitting under the button — the "clean layout" state. */
#what-makes .wm-func__features {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

#what-makes .wm-func__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #3a3d42;
  font-size: 11px;
  font-weight: 500;
}

#what-makes .wm-func__features svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: #111417;
}

#what-makes .wm-func__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: #111417;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

#what-makes .wm-func__btn:hover {
  background: #24282d;
}

#what-makes .wm-func__chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

#what-makes .wm-func__panel.is-open .wm-func__chevron {
  transform: rotate(180deg);
}

/* On-demand copy: a floating popover just under the button (absolute so it
   overlays the benefits instead of pushing the layout — the "interactive
   tooltip" pattern the slide is demonstrating). */
#what-makes .wm-func__desc {
  position: absolute;
  left: 0;
  top: 44px;
  width: 250px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: #3a3d42;
  font-size: 11px;
  line-height: 1.55;
  z-index: 5;
  pointer-events: none;
  transition: max-height 0.45s ease, opacity 0.35s ease;
}

#what-makes .wm-func__panel.is-open .wm-func__desc {
  max-height: 240px;
  padding: 12px 14px;
  opacity: 1;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
}

/* "Reducing Cognitive Load" tooltip — a readable frosted card that slides in
   from the right on entry. Wider than the raw design so the copy loses a line,
   and given a solid blurred background so it stays legible over the artwork. */
#what-makes .wm-func__tip {
  position: absolute;
  left: 700px;
  top: 50%;
  width: 340px;
  max-width: calc(100% - 48px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(12, 14, 17, 0.78);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  color: #fff;
  opacity: 0;
  transform: translate(24px, -50%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

#what-makes .wm-func__tip.is-shown {
  opacity: 1;
  transform: translate(0, -50%);
}

#what-makes .wm-func__tip-title {
  font-weight: 600;
  font-size: 20px;
}

#what-makes .wm-func__tip-desc {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.68;
}

@media (prefers-reduced-motion: reduce) {
  #what-makes .wm-func__wall,
  #what-makes .wm-func__disclosure,
  #what-makes .wm-func__desc,
  #what-makes .wm-func__tip {
    transition: none;
  }
}

/* ---------- Nav arrows ---------- */

#what-makes .wm-nav {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

#what-makes .wm-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

#what-makes .wm-nav svg {
  width: 24px;
  height: 24px;
}

#what-makes .wm-nav--prev {
  left: 0;
  transform: translateY(-50%) rotate(180deg);
}

#what-makes .wm-nav--next {
  right: 0;
}

#what-makes .wm-nav[disabled] {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Tabs ---------- */

#what-makes .wm-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px;
  padding: 10px;
  border-radius: 71px;
  background: rgba(16, 19, 21, 0.63);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

#what-makes .wm-tab {
  width: 156px;
  height: 60px;
  border: none;
  border-radius: 62px;
  background: rgba(23, 23, 23, 0.64);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

#what-makes .wm-tab:hover {
  background: rgba(40, 40, 40, 0.7);
}

#what-makes .wm-tab.is-active {
  background: rgba(87, 166, 251, 0.9);
}

/* ---------- Tablet ---------- */

@media (max-width: 900px) {
  #what-makes .wm-stagewrap {
    height: 350px;
  }

  #what-makes .wm-stage {
    transform: scale(0.62);
    transform-origin: top center;
  }

  #what-makes .wm-nav {
    top: 38%;
  }

  #what-makes .wm-tabs {
    max-width: 100%;
    border-radius: 32px;
  }

  #what-makes .wm-tab {
    width: auto;
    padding: 0 16px;
    height: 48px;
    font-size: 14px;
  }
}

@media (max-width: 560px) {
  #what-makes .wm-stagewrap {
    height: 262px;
  }

  #what-makes .wm-stage {
    transform: scale(0.46);
  }

  #what-makes .wm-nav--next {
    right: -6px;
  }
}

@media (max-width: 440px) {
  #what-makes .wm-stagewrap {
    height: 196px;
  }

  #what-makes .wm-stage {
    transform: scale(0.34);
  }
}

/* ---------- Responsive scaling for slides 2-4 (fixed-size cards) ----------
   The cards keep their Figma pixel geometry and are scaled down as one unit so
   the phone mockups and annotations stay perfectly aligned. Wrapper height is
   pinned to the scaled height (529px * scale) to avoid empty space below. */

@media (max-width: 1160px) {
  #what-makes .wm-card {
    transform: scale(0.9);
    transform-origin: top center;
  }
  #what-makes .wm-cardwrap {
    height: 476px;
  }
}

@media (max-width: 1040px) {
  #what-makes .wm-card {
    transform: scale(0.8);
  }
  #what-makes .wm-cardwrap {
    height: 423px;
  }
}

@media (max-width: 900px) {
  #what-makes .wm-card {
    transform: scale(0.66);
  }
  #what-makes .wm-cardwrap {
    height: 349px;
  }
}

@media (max-width: 768px) {
  /* Taller, narrower viewport: pull the bloom up behind the phone and let it
     span the width so it reads the same as the Figma mobile frame. */
  #what-makes {
    background:
      radial-gradient(95% 46% at 50% 40%, rgba(72, 120, 190, 0.20) 0%, rgba(38, 74, 132, 0.10) 40%, rgba(4, 5, 6, 0) 74%),
      radial-gradient(75% 40% at 42% 44%, rgba(87, 166, 251, 0.08) 0%, rgba(87, 166, 251, 0) 62%),
      #040506;
  }
  #what-makes .wm-card {
    transform: scale(0.56);
  }
  #what-makes .wm-cardwrap {
    height: 296px;
  }
}

@media (max-width: 600px) {
  #what-makes .wm-card {
    transform: scale(0.44);
  }
  #what-makes .wm-cardwrap {
    height: 233px;
  }
}

@media (max-width: 440px) {
  #what-makes .wm-card {
    transform: scale(0.3);
  }
  #what-makes .wm-cardwrap {
    height: 159px;
  }
}

/* ============================================================================
   MOBILE (<=600px) — bespoke portrait layout matching Figma 1273-5654..5984.
   Each slide becomes a 343x456 dark bordered card: name label on top, the
   visual re-laid-out for portrait, caption inside at the bottom; below the
   card a nav row of arrow circles flanking pagination dots (the tab pills are
   restyled into those dots).
   ========================================================================= */
@media (max-width: 600px) {
  #what-makes .content { position: relative; overflow: visible; padding-bottom: 64px; }
  #what-makes .wm-carousel { display: block; position: static; }

  /* --- the card --- */
  #what-makes .wm-slide { gap: 0; }
  #what-makes .wm-slide.is-active {
    position: relative;
    display: block;
    width: 100%;
    max-width: 367px;
    margin: 0 auto;
    aspect-ratio: 343 / 456;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    overflow: hidden;
    animation: wm-fade 0.4s ease;
  }

  #what-makes .wm-slide__name {
    display: block;
    position: absolute;
    top: 16px; left: 0; right: 0;
    margin: 0;
    text-align: center;
    z-index: 7;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    color: #fff;
  }

  #what-makes .wm-slide .wm-caption {
    position: absolute;
    left: 20px; right: 20px; bottom: 18px;
    margin: 0;
    z-index: 7;
    font-size: 13px;
    line-height: 1.35;
  }

  /* visual wrappers fill the card; per-slide media positioned inside */
  #what-makes .wm-stagewrap,
  #what-makes .wm-cardwrap {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    display: block;
    transform: none;
  }
  #what-makes .wm-card {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    transform: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }

  /* ---- Slide 1: WOW (stage scaled to fill, bleeding past the sides) ---- */
  #what-makes .wm-stage {
    position: absolute;
    left: 50%; top: 12%;
    width: 920px; height: 560px;
    transform: translateX(-50%) scale(0.47);
    transform-origin: top center;
  }
  /* Portrait wants a slightly different balance than desktop: a smaller video
     opening, a marginally tighter WOW, and a taller frame. */
  #what-makes .wm-stage__video { width: 66%; height: 66%; }
  #what-makes .wm-stage__wow   { width: 89%; top: 50%; transform: translate(-50%, -37%); animation-name: wm-wow-float-m; }
  #what-makes .wm-stage__frame { width: 580px; height: 1264px; }

  /* ---- Slide 2: Informative (big centred phone + label pills) ---- */
  #what-makes .wm-info__lines--desktop { display: none; }
  #what-makes .wm-info__lines--mobile  { display: block; z-index: 5; } /* above the phone, below the pills */
  #what-makes .wm-info__phone {
    position: absolute;
    left: 26.5%; top: 12%;
    width: 46.9%; height: auto;
    transform: none;
  }
  #what-makes .wm-info__card {
    padding: 8px 12px;
    border-radius: 12px;
    z-index: 6;                 /* sit above the phone, like Figma */
    /* Frosted-glass pills per the design (was an opaque dark fill). The blur
       keeps the white label legible where a pill overlaps the bright phone. */
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  #what-makes .wm-info__desc { display: none; }
  #what-makes .wm-info__title { font-size: 13px; }
  #what-makes .wm-info__card--image       { left: 70%;  top: 22%;   width: auto; }
  #what-makes .wm-info__card--description  { left: 1.5%; top: 43%;   width: auto; }
  #what-makes .wm-info__card--price        { left: 4%;   top: 64%;   width: auto; }
  #what-makes .wm-info__card--cta          { left: 74%;  top: 63.5%; width: auto; }

  /* ---- Slide 3: Cleanliness (two phones side by side, no arrows) ---- */
  #what-makes .wm-clean {
    position: absolute;
    left: 3%; right: 3%; top: 12%;
    height: 66%;
    width: auto;
    gap: 2.5%;
    padding: 0;
    align-items: center;
    justify-content: center;
  }
  #what-makes .wm-clean__arrows { display: none; }
  #what-makes .wm-clean__phone { height: 100%; width: auto; filter: drop-shadow(6px 6px 16px rgba(0, 0, 0, 0.35)); }

  /* ---- Slide 4: Positioning (three larger phones, bleeding off) ---- */
  #what-makes .wm-position {
    position: absolute;
    left: 50%; top: 10%;
    width: 131%;
    padding: 0;
    gap: 2.3%;
    transform: translateX(-50%);
    justify-content: center;
  }
  #what-makes .wm-position__item { gap: 8px; }
  #what-makes .wm-position__label { font-size: 13px; }
  #what-makes .wm-position__phone { height: auto; width: 100%; }
  #what-makes .wm-position__item { width: 32%; flex: 0 0 auto; }

  /* ---- Slide 5: Functionality (laptop shifted left, interactive panel) ---- */
  /* Anchor the laptop to the left so only its left half shows and the rest
     bleeds off the right edge, matching the Figma mobile frame. */
  #what-makes .wm-func__laptop {
    position: absolute;
    left: -6.1%; top: 12%;
    width: 158%; height: auto;
    transform: none;
    object-fit: contain;
  }
  /* Keep the self-playing disclosure (text wall -> Product Details button +
     three feature lines, then an on-demand description) on mobile too, laid
     over the mockup's empty body-copy area and scaled down to fit. */
  #what-makes .wm-func__panel {
    display: block;
    left: 16.5%; top: 46%;
    width: 40%;
    z-index: 7; /* keep the on-demand description above the tip pill (z-index 4) */
  }
  #what-makes .wm-func__wall { font-size: 6px; line-height: 1.45; max-height: 72px; }
  #what-makes .wm-func__features { margin-top: 6px; gap: 4px; }
  #what-makes .wm-func__features li { font-size: 7px; gap: 4px; }
  #what-makes .wm-func__features svg { width: 9px; height: 9px; }
  #what-makes .wm-func__btn { font-size: 7.5px; padding: 4px 8px; gap: 3px; }
  #what-makes .wm-func__chevron { width: 9px; height: 9px; }
  #what-makes .wm-func__desc { font-size: 7.5px; width: 140px; top: 26px; }
  #what-makes .wm-func__panel.is-open .wm-func__desc { padding: 7px 9px; }
  #what-makes .wm-func__tip {
    left: 17.5%; right: auto; top: 72%;
    width: 65%;
    transform: none;
    opacity: 1;
    padding: 12px 16px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  #what-makes .wm-func__tip-desc { display: none; }
  #what-makes .wm-func__tip-title { font-size: 14px; }

  /* --- nav row: dots (from the tabs) flanked by arrow circles --- */
  #what-makes .wm-tabs {
    margin-top: 20px;
    padding: 0;
    gap: 12px;
    background: none;
    box-shadow: none;
    border-radius: 0;
    min-height: 48px;
    align-items: center;
  }
  #what-makes .wm-tab {
    width: 10px; height: 10px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    box-shadow: none;
    font-size: 0;
    color: transparent;
    transition: background 0.2s ease, width 0.2s ease;
  }
  #what-makes .wm-tab.is-active {
    width: 26px;
    border-radius: 6px;
    background: #57a6fb;
  }

  #what-makes .wm-nav {
    position: absolute;
    top: auto;
    bottom: 8px;
    width: 48px; height: 48px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none;
  }
  #what-makes .wm-nav--prev { left: calc(50% - 124px); right: auto; transform: rotate(180deg); }
  #what-makes .wm-nav--next { right: calc(50% - 124px); left: auto; transform: none; }
  #what-makes .wm-nav[disabled] { opacity: 0.35; pointer-events: none; }
}