/* Shared split presentation. Original artwork stays whole and in proportion. */

.mcs4-page {
  width: 100%;
  max-width: 1192px;
  margin: 0 auto;
  padding: 30px 36px 64px;
}

.mcs4-back {
  display: inline-block;
  margin: 0 0 20px;
  color: #48647c;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.mcs4-back:hover { color: #245ed9; }

.mcs4-offer {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  overflow: hidden;
  border: 1px solid #dde6ed;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 14px 42px rgb(24 48 73 / 6%);
}

.mcs4-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 28px;
  border-right: 1px solid #e2eaf1;
  background: radial-gradient(ellipse at 15% 10%, #e4efff 0, #f0f5fb 45%, #f5f8fb 100%);
}

.mcs4-art { min-width: 0; max-width: 100%; margin: 0; }

.mcs4-art > .mcs4-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 480px;
  margin: 0 auto;
  border-radius: 12px;
  object-fit: contain;
  object-position: center;
}

.mcs4-copy {
  min-width: 0;
  padding: 38px 40px;
  color: #173344;
  overflow-wrap: break-word;
}

.mcs4-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  color: #36619a;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.mcs4-spark { font-size: 13px; line-height: 1; }

.mcs4-title {
  margin: 16px 0 17px;
  color: #12303e;
  font-size: clamp(31px, 3.1vw, 42px);
  font-weight: 750;
  letter-spacing: -.045em;
  line-height: 1.09;
  text-wrap: balance;
}

.mcs4-business {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #58707d;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.mcs4-business > span { min-width: 0; overflow-wrap: anywhere; }

.mcs4-logo {
  display: block;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  max-width: 27px;
  max-height: 27px;
  border-radius: 6px;
  object-fit: contain;
}

.mcs4-exact-offer {
  margin: 20px 0 16px;
  color: #334f60;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.6;
  white-space: pre-line;
}

.mcs4-body {
  margin: 0;
  color: #617481;
  font-size: 15px;
  line-height: 1.8;
  white-space: pre-line;
}

.mcs4-action { margin: 27px 0 0; }

.mcs4-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 50px;
  max-width: 100%;
  padding: 14px 18px;
  border: 1px solid #2457cb;
  border-radius: 11px;
  background: linear-gradient(140deg, #2869e9, #2056cc);
  box-shadow: 0 5px 13px rgb(35 89 206 / 16%);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background .15s ease, box-shadow .15s ease;
}

.mcs4-button-arrow {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: rgb(255 255 255 / 15%);
  font-size: 17px;
}

.mcs4-button:hover { color: #fff; background: #194ab9; box-shadow: 0 7px 17px rgb(35 89 206 / 22%); }
.mcs4-button:disabled { cursor: default; opacity: .8; }
.mcs4-button:focus-visible, .mcs4-back:focus-visible, .mcs4-card-link:focus-visible { outline: 3px solid #7aafff; outline-offset: 4px; }

.mcs4-preview-help { margin: 10px 0 0; color: #617481; font-size: 12px; line-height: 1.6; }

.mcs4-facts { display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 20px 0 0; }
.mcs4-facts > div { min-width: 0; max-width: 100%; }
.mcs4-facts dt { margin: 0 0 4px; color: #617481; font-size: 11px; font-weight: 600; }
.mcs4-facts dd { margin: 0; color: #26495e; font-size: 14px; font-weight: 650; }
.mcs4-facts small { display: block; margin-top: 5px; color: #617481; font-size: 11px; font-weight: 400; line-height: 1.5; }

.mcs4-fine-print { margin-top: 27px; padding-top: 22px; border-top: 1px dashed #d3dfe8; }
.mcs4-terms-title { margin: 0 0 7px; color: #4e6673; font-size: 12px; font-weight: 700; line-height: 1.5; }
.mcs4-terms-copy, .mcs4-availability-copy { margin: 0; color: #687c86; font-size: 12px; line-height: 1.75; white-space: pre-line; }
.mcs4-availability-copy { margin-top: 14px; }
.mcs4-availability-copy strong { color: #506a78; font-weight: 600; }

.mcs4-notice { margin: 0 0 18px; padding: 13px 16px; border: 1px solid #cedefa; border-radius: 11px; background: #edf4ff; color: #285182; font-size: 13px; line-height: 1.6; }
.mcs4-expired { border-color: #e4d5b5; background: #fff7e7; color: #7a5d2e; }
.mcs4-without-art { display: block; max-width: 800px; margin-inline: auto; }

.grid.mcr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.mcs4-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #dee7ee; border-radius: 19px; background: #fff; box-shadow: 0 5px 18px rgb(24 48 73 / 4%); }
.mcs4-card-visual { display: flex; align-items: center; justify-content: center; height: 220px; min-width: 0; padding: 18px; border-bottom: 1px solid #e5edf3; background: linear-gradient(135deg, #edf3fc, #f6f8fb); }
.mcs4-card-visual .mcs4-art { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.mcs4-card-visual .mcs4-image { max-height: 100%; max-width: 100%; width: auto; height: auto; border-radius: 8px; }
.mcs4-card-copy { display: flex; flex: 1; flex-direction: column; align-items: stretch; min-width: 0; padding: 22px; }
.mcs4-card-title { margin: 10px 0 12px; color: #173b4b; font-size: 23px; font-weight: 750; letter-spacing: -.03em; line-height: 1.2; overflow-wrap: anywhere; }
.mcs4-card .mcs4-business { font-size: 11px; }
.mcs4-card .mcs4-logo { flex-basis: 23px; width: 23px; height: 23px; max-width: 23px; max-height: 23px; }
.mcs4-card-offer { margin: 15px 0 20px; color: #596f7d; font-size: 14px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.mcs4-card-foot { margin-top: auto; }
.mcs4-card-expiry { display: block; margin: 0 0 12px; color: #6c7e88; font-size: 11px; line-height: 1.5; }
.mcs4-card-link { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 43px; padding: 10px 13px; border: 1px solid #d6e3f7; border-radius: 9px; background: #f1f6ff; color: #245bc8; font-size: 13px; font-weight: 700; line-height: 1.5; text-decoration: none; }
.mcs4-card-link:hover { background: #e5efff; color: #1949a8; }
.mcs4-no-art { padding: 22px; color: #436b9a; font-size: 22px; font-weight: 700; text-align: center; overflow-wrap: anywhere; }

@media (max-width: 1000px) {
  .mcs4-page { padding-inline: 24px; }
  .mcs4-copy { padding: 30px; }
  .mcs4-visual { padding: 22px; }
  .grid.mcr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .mcs4-offer { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  .mcs4-visual { min-height: 0; padding: 24px; border-right: 0; border-bottom: 1px solid #e2eaf1; }
  .mcs4-visual .mcs4-image { max-height: 300px; }
  .mcs4-copy { padding: 28px; }
  .mcs4-title { font-size: clamp(30px, 5.5vw, 39px); }
}

@media (max-width: 540px) {
  .mcs4-page { padding: 22px 16px 45px; }
  .mcs4-back { font-size: 12px; margin-bottom: 16px; }
  .mcs4-visual { padding: 18px; }
  .mcs4-visual .mcs4-image { max-height: 240px; }
  .mcs4-copy { padding: 25px 22px; }
  .mcs4-title { font-size: 31px; }
  .mcs4-exact-offer { font-size: 16px; }
  .mcs4-body { font-size: 14px; }
  .mcs4-button { width: 100%; }
  .grid.mcr-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (prefers-reduced-motion: reduce) { .mcs4-button { transition: none; } }