.clipo-pricing {
  position: relative;
  width: 1728px;
  height: 1117px;
  overflow: hidden;
  background: var(--clipo-paper, #f7f7f6);
  color: var(--clipo-ink, #131313);
}

.clipo-pricing__canvas {
  position: relative;
  width: 1728px;
  height: 1117px;
  transform-origin: left top;
}

.clipo-pricing p,
.clipo-pricing h2,
.clipo-pricing ul { margin: 0; }

.clipo-pricing__headline {
  position: absolute;
  z-index: 3;
  font-family: var(--font-clipo-font-poster, PhonkSansHeavy, Impact, sans-serif);
  font-size: 157px;
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -6.28px;
  text-transform: uppercase;
  white-space: nowrap;
}

.clipo-pricing h2.clipo-pricing__headline {
  position: static;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.clipo-pricing__headline--lifetime {
  top: 16px;
  left: 16px;
}

.clipo-pricing__headline--access {
  top: 144px;
  left: 160px;
}

.clipo-pricing__arrow {
  position: absolute;
  top: 160px;
  right: 24px;
  z-index: 1;
  width: 208px;
  height: 184px;
  overflow: hidden;
  pointer-events: none;
  color: var(--clipo-canvas, #e0e0df);
}

.clipo-pricing__arrow-track,
.clipo-pricing__arrow-icon {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.clipo-pricing__arrow-track {
  will-change: transform;
}

.clipo-pricing__arrow-icon {
  color: var(--clipo-canvas, #e0e0df);
  font-family: var(--font-clipo-font-poster, PhonkSansHeavy, Impact, sans-serif);
  font-size: 188px;
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -7.52px;
}

.clipo-pricing__arrow-icon--next {
  transform: translate(100%, -100%);
}

.clipo-pricing__badge {
  position: absolute;
  top: 57px;
  left: 944px;
  z-index: 4;
  display: block;
  width: 231px;
  height: 60px;
  overflow: hidden;
}

.clipo-pricing__badge-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.clipo-pricing__details {
  position: absolute;
  top: 369px;
  left: 17px;
  z-index: 3;
  display: flex;
  width: 1695px;
  align-items: flex-start;
  justify-content: space-between;
  box-sizing: border-box;
  border-top: 1px solid var(--clipo-line, #cacac9);
  padding-top: 24px;
}

.clipo-pricing__notes,
.clipo-pricing__features {
  padding: 0;
  list-style: none;
  font-family: var(--font-clipo-font-display, Ronzino, Arial, sans-serif);
  font-weight: 500;
}

.clipo-pricing__notes {
  width: 269px;
  color: var(--clipo-muted, #858585);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.36px;
}

.clipo-pricing__features {
  display: flex;
  width: 983px;
  flex-direction: column;
  gap: 16px;
  color: var(--clipo-ink, #131313);
  font-size: 31px;
  line-height: 1.03;
  letter-spacing: -0.93px;
}

.clipo-pricing__feature {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}

.clipo-pricing__feature::before {
  content: "";
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 1px solid var(--clipo-paper, #f7f7f6);
  background: var(--clipo-blue, #2336f1);
}

.clipo-pricing__art {
  position: absolute;
  top: var(--comic-root-top, 461px);
  left: var(--comic-root-left, 17px);
  z-index: 2;
  display: block;
  width: var(--comic-root-width, 733px);
  height: var(--comic-root-height, 615.4px);
  max-width: none;
}

.clipo-pricing-comic {
  /* EDITABLE PROPS — layout */
  --comic-root-top: 461px;
  --comic-root-left: 17px;
  --comic-root-width: 733px;
  --comic-root-height: 615.4px;
  --comic-mask-top: 15.9254%;
  --comic-mask-left: 15.3217%;
  --comic-mask-width: 43.012%;
  --comic-mask-height: 71.593%;
  --comic-mask-color: #f7b7d4;
  --comic-artboard-top: -22.4%;
  --comic-artboard-left: -35.622%;
  --comic-artboard-width: 232.493%;
  --comic-artboard-height: 139.679%;

  /* EDITABLE PROPS — hover motion and depth */
  --comic-perspective: 108600px;
  --comic-perspective-origin-x: 43%;
  --comic-perspective-origin-y: 72.2%;
  --comic-perspective-origin: var(--comic-perspective-origin-x) var(--comic-perspective-origin-y);
  --comic-transform-origin-x: 43%;
  --comic-transform-origin-y: 48%;
  --comic-transform-origin: var(--comic-transform-origin-x) var(--comic-transform-origin-y);
  --comic-tilt-x-max: 12.2;
  --comic-tilt-y-max: 9;
  --comic-pointer-shift: 5;
  --comic-hover-depth: 2.08;
  --comic-hover-scale: 0.914;
  --comic-smoothing: 92;
  --comic-rays-parallax: 0.55;
  --comic-mascot-parallax: 1.25;
  --comic-frame-parallax: 2.38;
  --comic-chat-parallax: 5;
  --comic-page-z: 132px;
  --comic-rays-z: 24px;
  --comic-mascot-z: 128px;
  --comic-chat-z: 168px;

  /* EDITABLE PROPS — ray 1 */
  --comic-ray-1-top: 44.1%;
  --comic-ray-1-left: 35.201%;
  --comic-ray-1-width: 33.253%;
  --comic-ray-1-height: 33.286%;

  /* EDITABLE PROPS — ray 2 */
  --comic-ray-2-top: 11.047%;
  --comic-ray-2-left: 41.346%;
  --comic-ray-2-width: 6.145%;
  --comic-ray-2-height: 46.628%;

  /* EDITABLE PROPS — ray 3 */
  --comic-ray-3-top: 58.967%;
  --comic-ray-3-left: 31.707%;
  --comic-ray-3-width: 39.398%;
  --comic-ray-3-height: 13.199%;

  /* EDITABLE PROPS — ray 4 */
  --comic-ray-4-top: 30.845%;
  --comic-ray-4-left: 0.02%;
  --comic-ray-4-width: 50.843%;
  --comic-ray-4-height: 24.964%;

  /* EDITABLE PROPS — ray 5 */
  --comic-ray-5-top: 8.321%;
  --comic-ray-5-left: 18.454%;
  --comic-ray-5-width: 20.964%;
  --comic-ray-5-height: 46.915%;

  /* EDITABLE PROPS — ray 6 */
  --comic-ray-6-top: 28.264%;
  --comic-ray-6-left: 19.418%;
  --comic-ray-6-width: 9.518%;
  --comic-ray-6-height: 12.195%;

  /* EDITABLE PROPS — mascot, frame and callouts */
  /* Rive mascot: 30% larger than the original authored box, kept vertically
     centred and shifted 20px to the left. Using real layout dimensions keeps
     the Rive canvas sharp instead of scaling its rendered bitmap. */
  --comic-mascot-top: 20.5069%;
  --comic-mascot-left: calc(4.934% - 20px);
  --comic-mascot-width: 74.36%;
  --comic-mascot-height: 72.7402%;
  --comic-frame-top: 11.69%;
  --comic-frame-left: 11.72%;
  --comic-frame-width: 49.518%;
  --comic-frame-height: 80.201%;
  --comic-chat-top: 0%;
  --comic-chat-left: 41.345%;
  --comic-chat-width: 58.675%;
  --comic-chat-height: 64.275%;

  /* Runtime output — controlled by clipo-pricing-comic-tilt.js */
  --comic-rotate-x: 0deg;
  --comic-rotate-y: 0deg;
  --comic-depth: 0;
  --comic-scale: 1;
  --comic-rays-x: 0px;
  --comic-rays-y: 0px;
  --comic-mascot-x: 0px;
  --comic-mascot-y: 0px;
  --comic-frame-x: 0px;
  --comic-frame-y: 0px;
  --comic-chat-x: 0px;
  --comic-chat-y: 0px;
  perspective: var(--comic-perspective);
  perspective-origin: var(--comic-perspective-origin);
  transform-style: preserve-3d;
  cursor: var(--clipo-cursor-default);
  isolation: isolate;
}

.clipo-pricing-comic__tilt {
  position: absolute;
  inset: 0;
  transform: rotateX(var(--comic-rotate-x)) rotateY(var(--comic-rotate-y)) scale(var(--comic-scale));
  transform-origin: var(--comic-transform-origin);
  transform-style: preserve-3d;
}

.clipo-pricing-comic__mask-background,
.clipo-pricing-comic__clip {
  position: absolute;
  top: var(--comic-mask-top);
  left: var(--comic-mask-left);
  width: var(--comic-mask-width);
  height: var(--comic-mask-height);
}

.clipo-pricing-comic__mask-background {
  z-index: 1;
  background: var(--comic-mask-color);
  transform: translate3d(var(--comic-frame-x), var(--comic-frame-y), calc(var(--comic-depth) * var(--comic-page-z)));
}

.clipo-pricing-comic__clip {
  overflow: hidden;
  clip-path: inset(0);
  contain: paint;
  perspective: var(--comic-perspective);
  perspective-origin: var(--comic-perspective-origin);
}

.clipo-pricing-comic__clip--rays {
  z-index: 2;
  transform: translate3d(var(--comic-frame-x), var(--comic-frame-y), calc(var(--comic-depth) * var(--comic-page-z)));
}

.clipo-pricing-comic__clip--mascot {
  z-index: 3;
  transform: translate3d(var(--comic-frame-x), var(--comic-frame-y), calc(var(--comic-depth) * var(--comic-page-z)));
}

.clipo-pricing-comic__artboard {
  position: absolute;
  top: var(--comic-artboard-top);
  left: var(--comic-artboard-left);
  width: var(--comic-artboard-width);
  height: var(--comic-artboard-height);
}

.clipo-pricing-comic__clip--rays .clipo-pricing-comic__artboard {
  transform: translate3d(var(--comic-rays-x), var(--comic-rays-y), calc(var(--comic-depth) * var(--comic-rays-z)));
}

.clipo-pricing-comic__clip--mascot .clipo-pricing-comic__artboard {
  transform: translate3d(var(--comic-mascot-x), var(--comic-mascot-y), calc(var(--comic-depth) * var(--comic-mascot-z)));
}

.clipo-pricing-comic__asset {
  position: absolute;
  display: block;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}

.clipo-pricing-comic__asset > img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: 0 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.clipo-pricing-comic__ray--1 {
  top: var(--comic-ray-1-top);
  left: var(--comic-ray-1-left);
  width: var(--comic-ray-1-width);
  height: var(--comic-ray-1-height);
}

.clipo-pricing-comic__ray--2 {
  top: var(--comic-ray-2-top);
  left: var(--comic-ray-2-left);
  width: var(--comic-ray-2-width);
  height: var(--comic-ray-2-height);
}

.clipo-pricing-comic__ray--3 {
  top: var(--comic-ray-3-top);
  left: var(--comic-ray-3-left);
  width: var(--comic-ray-3-width);
  height: var(--comic-ray-3-height);
}

.clipo-pricing-comic__ray--4 {
  top: var(--comic-ray-4-top);
  left: var(--comic-ray-4-left);
  width: var(--comic-ray-4-width);
  height: var(--comic-ray-4-height);
}

.clipo-pricing-comic__ray--5 {
  top: var(--comic-ray-5-top);
  left: var(--comic-ray-5-left);
  width: var(--comic-ray-5-width);
  height: var(--comic-ray-5-height);
}

.clipo-pricing-comic__ray--6 {
  top: var(--comic-ray-6-top);
  left: var(--comic-ray-6-left);
  width: var(--comic-ray-6-width);
  height: var(--comic-ray-6-height);
}

.clipo-pricing-comic__mascot {
  top: var(--comic-mascot-top);
  left: var(--comic-mascot-left);
  width: var(--comic-mascot-width);
  height: var(--comic-mascot-height);
}

.clipo-pricing-comic__mascot-rive {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.clipo-pricing-comic__frame {
  top: var(--comic-frame-top);
  left: var(--comic-frame-left);
  z-index: 4;
  width: var(--comic-frame-width);
  height: var(--comic-frame-height);
  transform: translate3d(var(--comic-frame-x), var(--comic-frame-y), calc(var(--comic-depth) * var(--comic-page-z)));
}

.clipo-pricing-comic__chat {
  top: var(--comic-chat-top);
  left: var(--comic-chat-left);
  z-index: 5;
  width: var(--comic-chat-width);
  height: var(--comic-chat-height);
  transform: translate3d(var(--comic-chat-x), var(--comic-chat-y), calc(var(--comic-depth) * var(--comic-chat-z)));
}

.clipo-pricing-comic.is-hovered .clipo-pricing-comic__tilt,
.clipo-pricing-comic.is-hovered .clipo-pricing-comic__mask-background,
.clipo-pricing-comic.is-hovered .clipo-pricing-comic__clip,
.clipo-pricing-comic.is-hovered .clipo-pricing-comic__artboard,
.clipo-pricing-comic.is-hovered .clipo-pricing-comic__frame,
.clipo-pricing-comic.is-hovered .clipo-pricing-comic__chat {
  will-change: transform;
}

.clipo-pricing__price-row {
  position: absolute;
  top: 874px;
  left: 587px;
  z-index: 4;
  display: flex;
  width: 1125px;
  align-items: flex-start;
}

.clipo-pricing__price-row::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 142px;
  width: 983px;
  border-top: 1px solid var(--clipo-line, #cacac9);
}

.clipo-pricing__currency {
  width: 127px;
  padding-top: 24px;
  font-family: var(--font-clipo-font-poster, PhonkSansHeavy, Impact, sans-serif);
  font-size: 59px;
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -3.64px;
  text-align: right;
}

.clipo-pricing__price {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: baseline;
  padding-left: 16px;
  font-family: var(--font-clipo-font-poster, PhonkSansHeavy, Impact, sans-serif);
  font-weight: 400;
  line-height: 0.84;
  text-transform: uppercase;
  white-space: nowrap;
}

.clipo-pricing__price-major {
  position: relative;
  display: inline-block;
  font-size: 270px;
  letter-spacing: -10.8px;
}

.clipo-pricing__price-minor {
  position: relative;
  display: inline-block;
  color: var(--clipo-line, #cacac9);
  font-size: 157px;
  letter-spacing: -6.28px;
}

.clipo-pricing__price-sizer {
  display: block;
  visibility: hidden;
  line-height: 0.84;
  white-space: nowrap;
}

.clipo-pricing__digit-rail {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: start;
  letter-spacing: 0;
}

.clipo-pricing__digit-rail--major {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.clipo-pricing__digit-rail--minor {
  grid-template-columns: auto repeat(2, minmax(0, 1fr));
}

.clipo-pricing__decimal {
  display: block;
  line-height: 0.84;
  letter-spacing: -6.28px;
}

.clipo-pricing-digit {
  position: relative;
  display: block;
  width: 100%;
  height: 1em;
  overflow: visible;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  letter-spacing: 0;
  line-height: 0.84;
}

.clipo-pricing-digit__rotor {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.clipo-pricing-digit--major {
  --workflow-flip-depth: 190px;
}

.clipo-pricing-digit--minor {
  --workflow-flip-depth: 110px;
}

.clipo-pricing-digit__face {
  display: grid;
  place-items: start center;
  color: inherit;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  font: inherit;
  line-height: 0.84;
  text-align: center;
}

@media not all {
  .clipo-pricing-digit__rotor { will-change: auto; }
}

.clipo-pricing__download {
  position: relative;
  display: inline-flex;
  flex: 0 0 196px;
  width: 196px;
  min-width: 196px;
  min-height: 53px;
  margin-top: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid var(--clipo-blue, #2336f1);
  background: var(--clipo-yellow, #fad84c);
  color: var(--clipo-ink, #131313);
  font-family: var(--font-clipo-font-display, Ronzino, Arial, sans-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.36px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.clipo-pricing__download:hover,
.clipo-pricing__download:focus-visible {
  background-color: var(--clipo-blue, #2336f1);
  color: var(--clipo-paper, #f7f7f6);
  transform: translateY(-3px);
}

.clipo-pricing__download.is-checkout-pending {
  cursor: wait;
  pointer-events: none;
  transform: none;
}

.clipo-pricing__handle {
  position: absolute;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1px solid var(--clipo-ink, #131313);
  background: inherit;
  pointer-events: none;
}

.clipo-pricing__handle--tl { top: -9px; left: -9px; }
.clipo-pricing__handle--tr { top: -9px; right: -9px; }
.clipo-pricing__handle--br { right: -9px; bottom: -9px; }
.clipo-pricing__handle--bl { bottom: -9px; left: -9px; }

@media (max-width: 768px) {
  .clipo-pricing {
    width: 390px;
    height: 607px;
  }

  .clipo-pricing__canvas {
    width: 390px;
    height: 607px;
    transform: none;
  }

  .clipo-pricing__headline {
    font-size: 32px;
    line-height: 0.84;
    letter-spacing: -1.28px;
  }

  .clipo-pricing h2.clipo-pricing__headline:not(.is-clipo-push-ready) .clipo-pricing__headline {
    visibility: hidden;
  }

  .clipo-pricing__headline--lifetime {
    top: 16px;
    left: 16px;
    width: 358px;
  }

  .clipo-pricing__headline--access {
    top: 43px;
    left: 77px;
    width: 297px;
  }

  .clipo-pricing__badge {
    top: 16px;
    left: 199px;
    width: 90px;
    height: 25.5px;
  }

  .clipo-pricing__arrow {
    top: 116px;
    right: 16px;
    width: 46px;
    height: 41px;
    color: var(--clipo-canvas, #e0e0df);
  }

  .clipo-pricing__arrow-icon {
    font-size: 38px;
    line-height: 0.84;
    letter-spacing: -1.6px;
    text-align: right;
  }

  .clipo-pricing__details {
    top: 150px;
    left: 16px;
    display: block;
    width: 358px;
    height: 253px;
    padding-top: 8px;
  }

  .clipo-pricing__notes {
    width: 174px;
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: -0.28px;
  }

  .clipo-pricing__features {
    position: absolute;
    top: 103px;
    left: 0;
    width: 358px;
    gap: 4px;
    font-size: 17px;
    line-height: 1.03;
    letter-spacing: -0.51px;
  }

  .clipo-pricing__feature {
    height: 18px;
    gap: 16px;
  }

  .clipo-pricing__feature::before {
    flex-basis: 8px;
    width: 8px;
    height: 8px;
  }

  .clipo-pricing__price-row {
    top: 456px;
    left: 16px;
    display: block;
    width: 358px;
    height: 135px;
  }

  .clipo-pricing__price-row::before {
    display: none;
  }

  .clipo-pricing__currency {
    position: absolute;
    top: 4px;
    left: 0;
    width: 15px;
    padding: 0;
    font-size: 16.77px;
    line-height: 0.84;
    letter-spacing: -1.04px;
    text-align: right;
  }

  .clipo-pricing__price {
    position: absolute;
    top: 0;
    left: 23px;
    width: 335px;
    height: 77px;
    padding: 0;
    align-items: flex-start;
  }

  .clipo-pricing__price-major,
  .clipo-pricing__price-minor {
    font-size: 91.781px;
    letter-spacing: -3.6712px;
  }

  .clipo-pricing__decimal {
    letter-spacing: -3.6712px;
  }

  .clipo-pricing-digit--major,
  .clipo-pricing-digit--minor {
    --workflow-flip-depth: 65px;
  }

  .clipo-pricing__download {
    position: absolute;
    top: 101px;
    left: 0;
    width: 358px;
    min-width: 358px;
    min-height: 34px;
    padding: 8px;
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: -0.28px;
  }

  .clipo-pricing__download:hover,
  .clipo-pricing__download:focus-visible {
    transform: none;
  }

  .clipo-pricing__handle {
    width: 8px;
    height: 8px;
  }

  .clipo-pricing__handle--tl { top: -5px; left: -5px; }
  .clipo-pricing__handle--tr { top: -5px; right: -5px; }
  .clipo-pricing__handle--br { right: -5px; bottom: -5px; }
  .clipo-pricing__handle--bl { bottom: -5px; left: -5px; }

  .clipo-pricing__art {
    display: none;
    top: 539.153px;
    left: 16px;
    width: 638.475px;
    height: 536.04px;
    clip-path: inset(70.847px 280.475px 0 0);
  }
}

@media not all, (hover: none), (pointer: coarse) {
  .clipo-pricing-comic {
    perspective: none;
  }

  .clipo-pricing-comic__tilt,
  .clipo-pricing-comic__mask-background,
  .clipo-pricing-comic__clip,
  .clipo-pricing-comic__artboard,
  .clipo-pricing-comic__frame,
  .clipo-pricing-comic__chat {
    transform: none;
  }
}