/* ==========================================================================
   Commission Models block (home) — built from Figma node 4896:2097.
   Art is split into separate SVG layers; every label is real HTML text.
   Each piece is drawn on its Figma canvas (options 298.5×320, card 336×277)
   and scaled with `zoom` by js/commission-block.js.
   ========================================================================== */

.cm {
  --cm-ink: #000;
  --cm-cream: #f2ede1;
  position: relative;
  width: 100%;
  margin: 0 auto 34px;
}
.cm__stage {
  position: relative;
  width: 1200px;
  height: 320px;
  margin: 0 auto;
  zoom: 0.9667; /* 1160 / 1200 until JS measures */
}
.cm__cell {
  position: absolute;
}
.cm__cell--options {
  left: 0;
  top: 0;
}
.cm__cell--rs {
  left: 249px;
  top: 31px;
}
.cm__cell--cpa {
  left: 593px;
  top: 31px;
}
.cm__cell--hy {
  left: 864px;
  top: 31px;
}
.cm .cm-art {
  position: relative;
  margin: 0;
}
.cm img {
  display: block;
  max-width: none;
}
.why .cm p,
.why .cm h3 {
  margin: 0;
  padding: 0;
}
.why .cm p {
  text-align: left;
}

/* Shared helper: Figma "flex wrapper" box with a centred, transformed child */
.cm .cm-x {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cm .cm-x > * {
  flex: none;
}

/* Comic lettering: white fill, black outline drawn behind the fill */
.cm .cm-card__name,
.cm .cm-rs__value span,
.cm .cm-cpa__value span span,
.cm .cm-hy__value span span {
  color: #fff;
  -webkit-text-stroke: 7px var(--cm-ink);
  paint-order: stroke fill;
}

/* ---------- Our options panel ---------- */
.cm .cm-options {
  width: 298.5px;
  height: 320px;
}
.cm .cm-options__panel {
  position: absolute;
  left: 10px;
  top: 5.37px;
  width: 280.154px;
  height: 315.161px;
}
.cm .cm-options__title {
  position: absolute;
  left: 32px;
  top: 62px;
  color: #fff;
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 44px;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 3.451px 3.451px 0 #7d0738;
}
.cm .cm-options__text {
  position: absolute;
  left: 32px;
  top: 172px;
  width: 224px;
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.cm .cm-options__text strong {
  display: block;
  font-weight: 700;
}
.cm .cm-options__hand {
  position: absolute;
  left: 204px;
  top: 160px;
  width: 93px;
  height: 59px;
}

/* ---------- Cards: shared ---------- */
.cm .cm-card {
  width: 336px;
  height: 277px;
  overflow: hidden;
}
.cm .cm-card__shape {
  position: absolute;
  left: 0;
  top: 0;
  width: 336px;
  height: 277px;
}
.cm .cm-card__clip {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--cm-mask) 0 0 / 336px 277px no-repeat;
  mask: var(--cm-mask) 0 0 / 336px 277px no-repeat;
}
.cm .cm-card--rs {
  --cm-mask: url('data:image/svg+xml,<svg width="336" height="277" viewBox="0 0 336 277" fill="none" xmlns="http://www.w3.org/2000/svg"><g transform="rotate%28180 168 138.5%29"><path id="Rectangle 1795851541" d="M24 1H304.855C319.939 1 330.941 15.2755 327.097 29.8613L266.783 258.72C264.105 268.883 254.878 275.938 244.368 275.858L23.8252 274.181C11.1913 274.085 1 263.816 1 251.182V24C1 11.2975 11.2975 1 24 1Z" fill="%23F2EDE1" stroke="%23232632" stroke-width="2"/></g></svg>');
}
.cm .cm-card--cpa {
  --cm-mask: url('data:image/svg+xml,<svg width="336" height="277" viewBox="0 0 336 277" fill="none" xmlns="http://www.w3.org/2000/svg"><g transform="translate%280 277%29 scale%281 -1%29"><path id="Rectangle 1795851541" d="M24 1H304.855C319.939 1 330.941 15.2755 327.097 29.8613L266.783 258.72C264.105 268.883 254.878 275.938 244.368 275.858L23.8252 274.181C11.1913 274.085 1 263.816 1 251.182V24C1 11.2975 11.2975 1 24 1Z" fill="%23F2EDE1" stroke="%23232632" stroke-width="2"/></g></svg>');
}
.cm .cm-card--hy {
  --cm-mask: url('data:image/svg+xml,<svg width="336" height="277" viewBox="0 0 336 277" fill="none" xmlns="http://www.w3.org/2000/svg"><g transform="translate%28336 0%29 scale%28-1 1%29"><path id="Rectangle 1795851541" d="M24 1H304.855C319.939 1 330.941 15.2755 327.097 29.8613L266.783 258.72C264.105 268.883 254.878 275.938 244.368 275.858L23.8252 274.181C11.1913 274.085 1 263.816 1 251.182V24C1 11.2975 11.2975 1 24 1Z" fill="%23F2EDE1" stroke="%23232632" stroke-width="2"/></g></svg>');
}
.cm .cm-card__dots {
  position: absolute;
  left: -8px;
  top: -5px;
  width: 731px;
  height: 455px;
  background: url("../img/commission/halftone-dots.png") center / cover
    no-repeat;
  opacity: 0.1;
}
.cm .cm-card__name {
  position: absolute;
  font-family: "Luckiest Guy", "Mackay", sans-serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 38px;
  white-space: nowrap;
  text-shadow: 3px 3px 0 var(--cm-ink);
}

/* ---------- Revenue Share ---------- */
.cm .cm-rs__name {
  right: 27.68px;
  top: 36px;
  line-height: 39px;
  text-align: right;
}
.cm .cm-rs__burst {
  position: absolute;
  left: 108.16px;
  top: 140.57px;
  width: 292.736px;
  height: 141.01px;
}
.cm .cm-rs__value {
  font-family: "Luckiest Guy", "Mackay", sans-serif;
  font-weight: 400;
}
.cm .cm-rs__upto {
  position: absolute;
  left: 172.81px;
  top: 171.14px;
  width: 135.908px;
  font-size: 39.727px;
  line-height: 41.732px;
  white-space: nowrap;
}
.cm .cm-rs__num {
  position: absolute;
  left: 172px;
  top: 183.68px;
  width: 175.773px;
  font-size: 76.338px;
  line-height: 123.528px;
  white-space: nowrap;
  -webkit-text-stroke-width: 9px;
}

/* ---------- CPA ---------- */
.cm .cm-cpa__name {
  right: 239.1px;
  top: 41px;
}
.cm .cm-cpa__coin {
  position: absolute;
  left: -17px;
  top: 96px;
  width: 184.841px;
  height: 170.189px;
  transform: scaleX(-1);
}
.cm .cm-cpa__string1,
.cm .cm-cpa__string2 {
  width: 72.042px;
  height: 118.723px;
}
.cm .cm-cpa__string1 {
  left: 158.17px;
  top: -18.17px;
}
.cm .cm-cpa__string2 {
  left: 205.08px;
  top: -6.46px;
}
.cm .cm-cpa__string-box {
  position: relative;
  width: 45.377px;
  height: 110.832px;
}
.cm .cm-cpa__string1 .cm-cpa__string-box {
  transform: rotate(14.72deg) scaleX(-1);
}
.cm .cm-cpa__string2 .cm-cpa__string-box {
  transform: rotate(14.72deg);
}
.cm .cm-cpa__string-box img {
  position: absolute;
  left: -0.268px;
  top: -1.031px;
  width: 47.645px;
  height: 113.843px;
}
.cm .cm-cpa__tag-shadow,
.cm .cm-cpa__tag {
  width: 173.961px;
  height: 191.171px;
}
.cm .cm-cpa__tag-shadow {
  left: 111.44px;
  top: 62.75px;
}
.cm .cm-cpa__tag {
  left: 121.17px;
  top: 59.86px;
}
.cm .cm-cpa__tag-img {
  width: 158.096px;
  height: 177.172px;
  transform: rotate(5.36deg);
}
.cm .cm-cpa__label {
  left: 133.41px;
  top: 135.64px;
  width: 144.478px;
  height: 103.727px;
}
.cm .cm-cpa__label-bg {
  display: block;
  width: 136.537px;
  height: 91.367px;
  border-radius: 9.578px;
  background: var(--cm-cream);
  transform: rotate(5.36deg);
}
.cm .cm-cpa__value {
  font-family: "Holtwood One SC", serif;
  font-weight: 400;
}
.cm .cm-cpa__value span span {
  display: block;
  white-space: nowrap;
  transform: rotate(5.36deg);
  -webkit-text-stroke-width: 4px;
}
.cm .cm-cpa__upto {
  left: 178.11px;
  top: 152.01px;
  width: 66.678px;
  height: 26.982px;
  font-size: 17.867px;
  line-height: 20.845px;
}
.cm .cm-cpa__upto span {
  text-shadow: -1.12px 0.77px 0 var(--cm-ink);
}
.cm .cm-cpa__num {
  left: 150.88px;
  top: 179px;
  width: 110.083px;
  height: 47.833px;
  font-size: 31.893px;
  line-height: 37.209px;
}
.cm .cm-cpa__num span {
  -webkit-text-stroke-width: 5px !important;
  text-shadow: -2.4px 1.35px 0 var(--cm-ink);
}

/* ---------- Hybrid ---------- */
.cm .cm-hy__name {
  left: 64.9px;
  top: 41px;
}
.cm .cm-hy__ribbon-shadow {
  left: 101.35px;
  top: 67.72px;
  width: 287.959px;
  height: 192.692px;
}
.cm .cm-hy__ribbon {
  left: 93px;
  top: 66px;
  width: 284.331px;
  height: 184.832px;
}
.cm .cm-hy__ribbon-box {
  position: relative;
  width: 267.1px;
  height: 151.933px;
}
.cm .cm-hy__ribbon-shadow .cm-hy__ribbon-box {
  transform: rotate(170.8deg);
}
.cm .cm-hy__ribbon .cm-hy__ribbon-box {
  transform: rotate(172.66deg);
}
.cm .cm-hy__ribbon-box img {
  position: absolute;
  left: -2.537px;
  top: -2.264px;
  width: 274.505px;
  height: 159.539px;
}
.cm .cm-hy__stamp-shadow,
.cm .cm-hy__stamp {
  width: 130.567px;
  height: 104.79px;
}
.cm .cm-hy__stamp-shadow {
  left: 142.32px;
  top: 89.02px;
}
.cm .cm-hy__stamp {
  left: 145.71px;
  top: 82.24px;
}
.cm .cm-hy__stamp-img {
  width: 113.588px;
  height: 74.373px;
  transform: rotate(-17.3deg);
}
.cm .cm-hy__value {
  font-family: "Alfa Slab One", serif;
  font-weight: 400;
}
.cm .cm-hy__value span span {
  display: block;
  white-space: nowrap;
}
.cm .cm-hy__cpa {
  left: 172.11px;
  top: 94.67px;
  width: 114.256px;
  height: 66.215px;
  font-size: 32.152px;
  line-height: 37.51px;
}
.cm .cm-hy__cpa span {
  width: 107.97px;
  transform: rotate(-15.96deg);
  -webkit-text-stroke-width: 6px !important;
  text-shadow: -1.18px 1.73px 0 var(--cm-ink);
}
.cm .cm-hy__life {
  left: 128.55px;
  top: 142.6px;
  width: 201.65px;
  height: 83.5px;
  font-size: 19px;
  line-height: 22px;
}
.cm .cm-hy__life span {
  transform: rotate(-19.4deg);
  -webkit-text-stroke-width: 4px !important;
  text-shadow: -1.2px 1.6px 0 var(--cm-ink);
}

/* ---------- Mobile: 2 × 2 grid, each piece scaled to its cell ---------- */
@media (max-width: 768px) {
  .cm {
    margin-bottom: 26px;
  }
  .cm__stage {
    display: grid;
    grid-template-columns: minmax(0, 298.5fr) minmax(0, 336fr);
    align-items: center;
    gap: 8px 4px;
    width: 100%;
    height: auto;
    zoom: 1;
  }
  .cm__cell {
    position: relative;
    left: auto !important;
    top: auto !important;
    min-width: 0;
  }
  .cm__cell--cpa,
  .cm__cell--hy {
    align-self: start;
  }
  .cm .cm-art {
    zoom: 0.48; /* ≈ 160 / 336 until JS measures */
  }
}

@media (max-width: 768px) {
  /* top row 298.5 : 336 (options + RS), bottom row 1 : 1 (CPA + Hybrid) */
  .cm__stage {
    grid-template-columns: minmax(0, 47.05fr) minmax(0, 2.95fr) minmax(0, 50fr);
  }
  .cm__cell--options {
    grid-column: 1;
  }
  .cm__cell--rs {
    grid-column: 2 / 4;
  }
  .cm__cell--cpa {
    grid-column: 1 / 3;
  }
  .cm__cell--hy {
    grid-column: 3;
  }
}