.patch-page{
  --patch-night:#17181a;
  --patch-night-soft:#2b2d31;
  --patch-day:#f3f1ec;
  --patch-day-deep:#d5d0c5;
  --patch-accent:#d9ff58;
  --patch-blue:#dce8ef;
}

.patch-page .w2-hero{
  background:
    linear-gradient(
      90deg,
      rgba(23,24,26,.98) 0%,
      rgba(23,24,26,.98) 49.8%,
      #f4f2ed 50%,
      #fff 100%
    );
  color:#fff;
}

.patch-page .w2-hero h1{
  color:#fff;
}

.patch-page .w2-lead{
  color:rgba(255,255,255,.78);
}

.patch-page .w2-kicker{
  color:var(--patch-accent);
}

.patch-split{
  position:relative;
  min-height:400px;
}

.patch-side{
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.patch-side-night{
  left:0;
}

.patch-side-day{
  right:0;
}

.patch-pack{
  position:relative;
  width:145px;
  height:215px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:center;
  border-radius:14px;
  font-size:12px;
  font-weight:850;
  line-height:1.4;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.patch-pack-night{
  color:#111;
  background:
    linear-gradient(
      155deg,
      #f7f5ee,
      #e2ddd1
    );
  box-shadow:
    0 28px 60px
    rgba(0,0,0,.28);
}

.patch-pack-day{
  color:#252525;
  background:
    linear-gradient(
      155deg,
      #fff,
      #edece8
    );
  border:
    1px solid
    rgba(0,0,0,.08);
  box-shadow:
    0 28px 60px
    rgba(40,40,40,.11);
}

.patch-dot{
  position:absolute;
  border-radius:50%;
  background:
    rgba(255,255,255,.92);
  border:
    1px solid
    rgba(0,0,0,.08);
  box-shadow:
    0 5px 15px
    rgba(0,0,0,.08);
}

.patch-dot-a{
  width:38px;
  height:38px;
  top:22px;
  right:18px;
}

.patch-dot-b{
  width:28px;
  height:28px;
  bottom:25px;
  left:18px;
}

.patch-dot-c{
  width:21px;
  height:21px;
  bottom:67px;
  right:18px;
}

.patch-ultra{
  opacity:.55;
  box-shadow:
    0 3px 8px
    rgba(0,0,0,.05);
}

.patch-vs{
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  width:62px;
  height:62px;
  transform:
    translate(-50%,-50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--patch-accent);
  color:#181918;
  font-size:14px;
  font-weight:950;
  box-shadow:
    0 12px 30px
    rgba(0,0,0,.2);
}

.patch-winner{
  margin:30px 0;
  padding:26px;
  border-radius:24px;
  border:
    1px solid
    var(--k-line);
  background:
    linear-gradient(
      135deg,
      #fff,
      #f7f7f4
    );
}

.patch-winner strong{
  display:block;
  margin-bottom:8px;
  font-size:19px;
}

.patch-choice-grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:15px;
  margin:30px 0;
}

.patch-choice{
  padding:26px;
  border-radius:24px;
}

.patch-choice-night{
  background:#1a1b1d;
  color:#fff;
}

.patch-choice-night h3,
.patch-choice-night strong{
  color:#fff;
}

.patch-choice-day{
  background:#f2f0eb;
  color:#222;
}

.patch-score{
  display:grid;
  grid-template-columns:
    170px 1fr 1fr;
  gap:0;
  overflow:hidden;
  margin:30px 0;
  border:
    1px solid
    var(--k-line);
  border-radius:22px;
}

.patch-score > div{
  padding:17px;
  border-bottom:
    1px solid
    var(--k-line);
}

.patch-score > div:nth-child(3n+1){
  font-weight:800;
}

.patch-score-head{
  background:#18191b;
  color:#fff;
  font-weight:850;
}

.patch-score-day{
  background:#f6f4ef;
}

.patch-usage{
  display:grid;
  grid-template-columns:
    repeat(4,1fr);
  gap:12px;
  margin:28px 0;
}

.patch-step{
  padding:20px;
  border-radius:18px;
  border:
    1px solid
    var(--k-line);
  background:#fff;
}

.patch-step strong{
  display:block;
  font-size:26px;
  margin-bottom:10px;
}

.patch-evidence{
  margin:30px 0;
  padding:26px;
  border-left:
    4px solid
    #282a2e;
  background:#f7f7f5;
  border-radius:
    0 20px 20px 0;
}

body[dir="rtl"] .patch-evidence{
  border-left:0;
  border-right:
    4px solid
    #282a2e;
  border-radius:
    20px 0 0 20px;
}

@media(max-width:760px){

  .patch-page .w2-hero{
    background:
      linear-gradient(
        180deg,
        #17181a 0%,
        #17181a 54%,
        #f5f3ee 54.2%,
        #fff 100%
      );
  }

  .patch-split{
    min-height:390px;
  }

  .patch-side{
    width:100%;
    height:50%;
  }

  .patch-side-night{
    top:0;
    bottom:auto;
  }

  .patch-side-day{
    top:50%;
    right:auto;
    bottom:auto;
    left:0;
  }

  .patch-pack{
    transform:scale(.76);
  }

  .patch-choice-grid{
    grid-template-columns:1fr;
  }

  .patch-score{
    grid-template-columns:
      120px 1fr 1fr;
    font-size:13px;
  }

  .patch-usage{
    grid-template-columns:
      repeat(2,1fr);
  }
}

@media(max-width:480px){

  .patch-score{
    grid-template-columns:
      95px 1fr 1fr;
    font-size:12px;
  }

  .patch-score > div{
    padding:11px 8px;
  }

  .patch-usage{
    grid-template-columns:1fr;
  }
}