.feature-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.controls .controls-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #242329;
}

ol.steps {
  list-style: none;
  padding: 0;
  margin: 0;
}

.demo-note {
  margin: 10px 2px 0;
  color: #77757f;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
}

.effects {
  padding-top: 86px;
  padding-bottom: 92px;
}

.effects .section-head {
  margin-bottom: 62px;
}

.effect-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 6vw, 96px);
  margin-bottom: 100px;
}

.effect-row:last-child {
  margin-bottom: 0;
}

.effect-row-reverse .effect-visual {
  order: 2;
}

.effect-visual {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 20px;
  background: #e9e7e2;
}

.effect-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.effect-panel img {
  display: block;
  width: 200%;
  max-width: none;
  height: 100%;
  object-fit: fill;
}
.effect-after img{transform:translateX(-50%)}
.effect-visual::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-50%);pointer-events:none}
.effect-label{position:absolute;z-index:2;bottom:12px;padding:6px 10px;border-radius:8px;color:#fff;background:rgba(30,30,35,.76);font-size:12px;font-weight:600;pointer-events:none}
.effect-label-before{left:12px}.effect-label-after{right:12px}
.caveat a,.content-attribution a{color:#5144c6;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.content-attribution{max-width:850px;margin:24px auto 0;color:#77727e;font-size:13px}

.effect-kicker {
  display: inline-block;
  color: #6757f6;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 12px;
}

.effect-copy h3 {
  margin: 0 0 18px;
  font-size: clamp(25px, 2.7vw, 34px);
  line-height: 1.17;
  letter-spacing: -.035em;
}

.effect-copy p {
  margin: 0 0 15px;
  color: #64636c;
  font-size: 16px;
  line-height: 1.58;
}

.effect-cta {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 9px;
  background: #242329;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.effect-cta:hover,
.effect-cta:focus-visible {
  background: #48414f;
}

.site-footer .foot {
  display: grid;
  grid-template-columns: 2fr repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.site-footer .foot .foot-heading {
  margin: 0 0 16px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.site-footer .foot nav {
  display: grid;
  gap: 9px;
}

.site-footer .foot p,
.site-footer .foot a {
  font-size: 14px;
  line-height: 1.7;
}

.site-footer .foot a:hover,
.site-footer .foot a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.site-footer .copyright {
  border-top: 1px solid #3b3942;
  margin-top: 40px;
  padding-top: 22px;
  color: #8e8b95;
  font-size: 13px;
}

@media (max-width: 900px) {
  .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .effects { padding-top: 68px; padding-bottom: 70px; }
  .effect-row { gap: 28px; margin-bottom: 72px; }
  .site-footer .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .effect-row { grid-template-columns: 1fr; }
  .effect-row-reverse .effect-visual { order: 0; }
  .effect-visual { aspect-ratio: 3 / 2; }
  .effects .section-head { margin-bottom: 40px; }
}

@media (max-width: 560px) {
  .feature-row { grid-template-columns: 1fr; }
  .effect-row { margin-bottom: 56px; }
  .site-footer .foot { grid-template-columns: 1fr; gap: 28px; }
}