.s4 {
    --white:#F0F0F0; --yellow:#F8FF13; --grey:#9E9E9E; --dark:#020307;
    position:relative;
    margin:0;
    height:3200px;
    background:var(--dark);
    color:var(--white);
    font-family:'Euclid Circular A', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  }

  .s4__pin {
    position:sticky; top:0;
    height:800px;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .s4__stage { position:relative; flex:none; width:1440px; height:800px; }
  .s4__stage img, .s4__stage svg { display:block; }

  .s4__dots { position:absolute; inset:0; width:1440px; height:800px; pointer-events:none; z-index:0; }

  .s4__left { position:absolute; left:88px; top:88px; width:550px; height:624px; display:flex; flex-direction:column; justify-content:space-between; }
  .s4__heading { margin:0; font-weight:600; font-size:72px; line-height:72px; letter-spacing:-5.3px; color:var(--white); }
  .s4__heading b { font-weight:600; color:var(--yellow); }

  .s4__list {
    position:relative;
    list-style:none; margin:0; padding:8px;
    display:flex; flex-direction:column;
    border-radius:28px;
  }
  .s4__list-frame { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
  .s4__list-frame rect {
    x:0.5px; y:0.5px; width:calc(100% - 1px); height:calc(100% - 1px);
    rx:27.5px; ry:27.5px;
    fill:none; stroke:rgba(240,240,240,0.08); stroke-width:1px;
    stroke-dasharray:8 8;
  }

  .s4__item {
    display:flex; align-items:center; gap:16px;
    width:100%; height:68px; padding:20px 24px;
    border:1px solid transparent; border-radius:20px;
    background:none; color:var(--grey);

    font-family:inherit; font-weight:700; font-size:20px; line-height:28px;
    letter-spacing:-0.5px; text-align:left;
    cursor:pointer;

    --ring-paint: transparent;
    transition:color .25s ease, background-color .25s ease, box-shadow .25s ease;
  }
  .s4__item-icon {
    flex:none; width:28px; height:28px;
  }
  .s4__item span { white-space:nowrap; }

  .s4__item.is-active {
    color:var(--white);
    border-color:var(--yellow);
    background-color:rgba(248,255,19,0.08);
    box-shadow:inset 0 0 16px 0 rgba(248,255,19,0.25);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  }
  .s4__item.is-active .s4__item-icon { color:var(--yellow); }

  .s4__item:not(.is-active):hover,
  .s4__item:focus-visible {
    color:var(--white);
    background-color:rgba(240,240,240,0.02);
    box-shadow:inset 0 0 20px 0 rgba(240,240,240,0.05);
    --ring-paint: linear-gradient(180deg, rgba(240,240,240,0.08) 0%, rgba(240,240,240,0) 66.327%);
    outline:none;
  }
  .s4__item:focus-visible { box-shadow:0 0 0 2px rgba(248,255,19,0.5); }

  .s4__panel {
    position:absolute; left:686px; top:88px;
    width:624px; height:624px;
    border-radius:40px; overflow:hidden;

    --ring-paint: linear-gradient(180deg, rgba(240,240,240,0.08) 0%, rgba(240,240,240,0) 66.327%);

    background:
      linear-gradient(180deg, rgba(240,240,240,0.04) 0%, rgba(240,240,240,0) 66.327%),
      linear-gradient(90deg, rgba(240,240,240,0.04) 0%, rgba(240,240,240,0.04) 100%);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    z-index:1;
  }

  .s4__glow,
  .s4__glow-light { position:absolute; left:23px; top:301px; width:576px; height:299px; pointer-events:none; }

  .s4__charcoal {
    position:absolute; left:26px; top:153px; width:700px; height:447px;
    object-fit:contain; object-position:bottom center; pointer-events:none;
  }

  .s4__card {
    position:absolute; left:0; top:0; width:624px;
    padding:64px 48px;
    display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;
  }
  .s4__card-title { margin:0; font-weight:600; font-size:32px; line-height:40px; letter-spacing:-0.3px; color:var(--white); }
  .s4__card-desc  { margin:0; font-weight:600; font-size:18px; line-height:28px; letter-spacing:-0.18px; color:var(--grey); font-feature-settings:'lnum' 1,'pnum' 1; }

  .s4__line { position:absolute; left:998px; top:75.5px; transform:translateX(-50%); width:385px; height:33px; z-index:5; pointer-events:none; }

  .s4__phone {
    position:absolute; left:50%; top:214px;
    width:298px; height:386px; overflow:hidden;

    transform: translateX(-50%) translateY(var(--nudge-y, 0)) scale(var(--nudge-scale, 1));
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .s4__phone.is-stepping { --nudge-y: 5px; --nudge-scale: 0.988; }

  .s4__body {
    position:absolute; left:-415.94px; top:-120.06px;
    width:1130.53px; height:847.9px; max-width:none; pointer-events:none;
  }

  .s4__screen {
    position:absolute; left:13.54px; top:11.18px;
    width:271.18px; height:585.42px;
    border-radius:40px; overflow:hidden; background:var(--dark);
  }
  .s4__screen img {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;
    opacity:0; transition:opacity .45s ease;
  }
  .s4__screen img.is-active { opacity:1; }

  .s4__island {
    position:absolute; left:50%; top:9.82px; width:80px; height:23px;
    transform:translateX(-50%); border-radius:100px; background:var(--dark); z-index:2;
  }

  .s4__progress {
    position:absolute; left:1334px; top:88px; width:18px; height:624px;
    display:flex; flex-direction:column; align-items:center; gap:24px;
  }
  .s4__progress-num { font-weight:500; font-size:18px; line-height:28px; letter-spacing:-0.18px; color:var(--grey); }
  .s4__track {
    position:relative; flex:1 0 0; width:6px; min-height:0;
    background:rgba(240,240,240,0.08); border-radius:100px; overflow:hidden;
  }
  .s4__fill {
    position:absolute; left:0; top:0; width:6px;
    height:16.67%;
    background:var(--yellow); border-radius:100px;
    transition:height .35s cubic-bezier(0.22,0.61,0.36,1);
  }

  @media (prefers-reduced-motion: reduce) {
    .s4__item, .s4__screen img, .s4__fill, .s4__phone { transition:none; }
  }

  @media (max-width: 767px) {

    .s4 { height: 812px; }
    .s4__pin { height: 812px; }
    .s4__stage {
      position: relative;
      width: 100%;
      max-width: 375px;
      min-height: 812px;
      margin: 0 auto;
      background-image:
        url('../../assets/img/why/mobile-dots.svg'),
        url('../../assets/img/why/mobile-bg.svg');
      background-size: cover, cover;
      background-repeat: no-repeat, no-repeat;
      background-position: center, center;
    }

    .s4__dots { display: none; }

    .s4__left {
      position: static;
      width: auto;
      height: auto;
      display: block;
    }

    .s4__stage .s4__heading.reveal {
      position: absolute;
      left: 50%;
      top: 48px;
      transform: translateX(-50%);
      width: max-content;
      max-width: calc(100% - 32px);
      min-height: 36px;
      font-size: 36px;
      line-height: 36px;
      letter-spacing: -3px;
      text-align: center;
    }
    .s4__heading br { display: none; }

    .s4__list,
    .s4__list-frame { display: none; }

    .s4__panel {
      left: 16px;
      top: 124px;
      width: 339px;
      height: 556px;
      border-radius: 40px;
      overflow: hidden;
      --ring-paint: linear-gradient(180deg, rgba(240, 240, 240, 0.08) 0%, rgba(240, 240, 240, 0) 66.327%);
      background:
        linear-gradient(180deg, rgba(240, 240, 240, 0.02) 0%, rgba(240, 240, 240, 0) 66.327%),
        linear-gradient(90deg, rgba(240, 240, 240, 0.02) 0%, rgba(240, 240, 240, 0.02) 100%);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }

    .s4__glow {
      left: 11px;
      top: 245px;
      width: 315px;
      height: 299px;
      border-radius: 32px;
      background: #0C0C10;
      border: 1px dashed rgba(240, 240, 240, 0.08);
      overflow: hidden;
    }
    .s4__glow-light {
      left: 11px;
      top: 245px;
      width: 315px;
      height: 299px;
      border-radius: 32px;
      object-fit: cover;
    }

    .s4__charcoal {
      left: 21px;
      top: 368.126px;
      width: 139.863px;
      height: 69.449px;
    }

    .s4__card {
      left: -1px;
      top: -1px;
      width: 339px;
      padding: 32px;
      gap: 16px;
    }
    .s4__card-title {
      font-size: 24px;
      line-height: 32px;
      letter-spacing: -0.3px;
    }
    .s4__card-desc {
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: -0.16px;
    }

    .s4__line {
      left: 82.99px;
      top: 110.95px;
      transform: none;
      width: 205.02px;
      height: 33px;
    }

    .s4__phone {
      left: 50%;
      top: 182.82px;
      width: 278.84px;
      height: 361.18px;
      transform: translateX(-50%) translateY(var(--nudge-y, 0)) scale(var(--nudge-scale, 1));
    }

    .s4__body {
      left: -389.19px;
      top: -112.34px;
      width: 1057.845px;
      height: 793.384px;
    }
    .s4__screen {
      left: 12.665px;
      top: 10.464px;
      width: 253.743px;
      height: 547.776px;
      border-radius: 37.43px;
    }
    .s4__island {
      top: 9.189px;
      width: 74.856px;
      height: 21.521px;
    }

    .s4__progress {
      left: 16px;
      top: 712px;
      width: 339px;
      height: 28px;
      display: block;
      flex-direction: row;
      gap: 0;
    }
    .s4__progress-num {
      position: absolute;
      top: 0;
      width: 18px;
      min-height: 28px;
      line-height: 28px;
      text-align: center;
    }

    .s4__progress-num.js-num { left: 16px; }
    .s4__progress-num:not(.js-num) { left: 301px; width: 22px; }

    .s4__track {
      position: absolute;
      left: 164.5px;
      top: -89.5px;
      width: 6px;
      height: 219px;
      flex: none;
      transform: rotate(-90deg);
      transform-origin: center;
    }
  }

  @media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    .s4__fill {
      transition: height 1.2s linear;
    }

    .s4__screen img {
      transition: opacity 0.22s ease;
    }
  }