/* Minimal Expanding Card — module only. No 100dvh.
   Self-contained box-sizing: the editor preview iframe has no global reset
   (the standalone HTML demo does). Without this, tile copy height:100% +
   padding overflows and overflow:hidden + radius clips titles. */
.ms-mce,
.ms-mce *,
.ms-mce *::before,
.ms-mce *::after { box-sizing: border-box; }
.ms-mce {
  --mce-cols: 4;
  --mce-gap: 8px;
  --mce-radius: 14px;
  --mce-span: 2;
  --mce-stage-w: 78%;
  --mce-ink: #141414;
  --mce-muted: #64625c;
  --mce-head: 28px;
  --mce-intro: 15px;
  --mce-label: 10px;
  --mce-title: 17px;
  --mce-desc: 13px;
  --mce-pad: max(14px, var(--mce-radius));
  width: 100%;
  padding: 2.4rem 1.25rem;
  color: var(--mce-ink);
  background-color: #ebe8e1;
  background-size: cover;
  background-position: center;
}

.ms-mce__head {
  width: min(var(--mce-stage-w), 920px);
  margin: 0 auto 1.4rem;
  text-align: var(--mce-head-align, left);
}
.ms-mce__head[hidden],
.ms-mce.is-nohead .ms-mce__head { display: none; }
.ms-mce__title {
  margin: 0;
  font-size: var(--mce-head);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--mce-heading-color, var(--mce-ink));
}
.ms-mce__intro {
  margin: 0.45rem 0 0;
  font-size: var(--mce-intro);
  line-height: 1.5;
  color: var(--mce-muted-color, var(--mce-muted));
}

.ms-mce__stage {
  position: relative;
  width: min(var(--mce-stage-w), 920px);
  margin: 0 auto;
}
.ms-mce__grid {
  display: grid;
  grid-template-columns: repeat(var(--mce-cols), 1fr);
  grid-auto-flow: dense;
  gap: var(--mce-gap);
  width: 100%;
  list-style: none;
  padding: 0;
}

.ms-mce__tile {
  --tile-tone: #141414;
  --tile-ink: #fff;
  --overlay: var(--tile-tone);
  --overlay-a: 0.45;
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--mce-radius);
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
  display: block;
  text-align: left;
  text-decoration: none;
  color: var(--tile-ink);
  background: var(--tile-tone);
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  outline: none;
  container-type: inline-size;
  container-name: mce-tile;
}
.ms-mce__tile.is-big {
  grid-column: span var(--mce-span);
  grid-row: span var(--mce-span);
}
.ms-mce__tile:focus-visible {
  outline: 2px solid var(--mce-ink);
  outline-offset: 3px;
}

.ms-mce__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.ms-mce__veil {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: color-mix(in srgb, var(--overlay) calc(var(--overlay-a) * 100%), transparent);
}
.ms-mce__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  padding: var(--mce-pad);
  gap: 0.28rem;
  min-width: 0;
  pointer-events: none;
}
.ms-mce__label {
  display: block;
  font-size: var(--mce-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.72;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.ms-mce__tile h2,
.ms-mce__tile .ms-mce__name {
  display: block;
  margin: 0;
  font-size: var(--mce-title);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.15;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.ms-mce__tile p {
  display: none;
  margin: 0;
  font-size: var(--mce-desc);
  line-height: 1.4;
  opacity: 0.82;
  max-width: min(28ch, 100%);
  overflow-wrap: anywhere;
}
.ms-mce__tile.is-big .ms-mce__name {
  font-size: clamp(var(--mce-title), 7.2cqw, calc(var(--mce-title) * 1.65));
}
.ms-mce__tile.is-big p { display: block; }
.ms-mce__tile.is-big .ms-mce__copy {
  padding: max(20px, calc(var(--mce-radius) + 8px));
}
@container mce-tile (max-width: 170px) {
  .ms-mce__label { font-size: max(8px, calc(var(--mce-label) * 0.88)); letter-spacing: 0.08em; }
  .ms-mce__name { font-size: max(12px, calc(var(--mce-title) * 0.82)); }
}

.ms-mce.is-face-image .ms-mce__tile img,
.ms-mce.is-face-both .ms-mce__tile img { display: block; }
.ms-mce.is-face-image .ms-mce__veil,
.ms-mce.is-face-both .ms-mce__veil { display: block; }
.ms-mce.is-face-image .ms-mce__copy,
.ms-mce.is-face-both .ms-mce__copy { color: #fff; }
.ms-mce.is-face-image .ms-mce__tile p,
.ms-mce.is-face-image .ms-mce__tile.is-big p { display: none; }

@media (max-width: 640px) {
  .ms-mce__grid { width: 100%; }
}

.ms-mce__modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  visibility: hidden;
  pointer-events: none;
}
.ms-mce__modal.is-open { visibility: visible; pointer-events: auto; }
.ms-mce__back {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--tile-tone, #141414) 42%, #0a0a0c);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.ms-mce__modal.is-shown .ms-mce__back { opacity: 1; }
.ms-mce__panel {
  position: relative;
  width: min(640px, 100%);
  max-height: min(88vh, 860px);
  display: flex;
  flex-direction: column;
  border-radius: calc(var(--mce-radius) + 10px);
  overflow: hidden;
  background: #f6f4ef;
  color: #18181b;
  box-shadow: 0 18px 48px rgba(20, 20, 20, 0.28);
  transform: translateY(28px) scale(0.96);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.ms-mce__modal.is-shown .ms-mce__panel { transform: none; opacity: 1; }
.ms-mce__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #18181b;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  box-shadow: none;
  appearance: none;
}
.ms-mce__close svg { width: 1.1rem; height: 1.1rem; }
.ms-mce__mhead {
  padding: 2.2rem 2.2rem 1.6rem;
  background: var(--tile-tone);
  color: var(--tile-ink);
}
.ms-mce__kicker {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
  margin: 0 0 0.55rem;
}
.ms-mce__mhead h2,
.ms-mce__mhead .ms-mce__mtitle {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.ms-mce__msub { margin: 0.65rem 0 0; font-size: 0.95rem; line-height: 1.5; opacity: 0.88; }
.ms-mce__mbody { padding: 1.6rem 2.2rem 2rem; overflow: auto; }
.ms-mce__mcopy p { font-size: 0.95rem; line-height: 1.6; color: #3f3f46; margin: 0 0 0.85rem; }
.ms-mce__bullets { list-style: none; display: grid; gap: 0.7rem; margin: 1rem 0 1.3rem; padding: 0; }
.ms-mce__bullets li { background: #fff; border-radius: 16px; padding: 0.85rem 1rem; }
.ms-mce__bullets strong { display: block; font-size: 0.9rem; margin-bottom: 0.2rem; }
.ms-mce__bullets span { font-size: 0.82rem; color: #71717a; line-height: 1.4; }
.ms-mce__cta {
  display: inline-flex;
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 650;
  text-decoration: none;
  background: var(--tile-tone);
  color: var(--tile-ink);
  box-shadow: none;
}
.ms-mce__nav { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.ms-mce__nav button {
  flex: 1;
  border: 0;
  border-radius: 16px;
  padding: 0.75rem 0.9rem;
  background: #fff;
  color: #18181b;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
  appearance: none;
  box-shadow: none;
}
.ms-mce__nav small { display: block; font-weight: 500; color: #71717a; font-size: 0.68rem; margin-bottom: 0.15rem; }

body.ms-mce-locked { overflow: hidden; }

.ms-mce.is-reduced .ms-mce__modal.is-shown .ms-mce__back,
.ms-mce.is-reduced .ms-mce__modal.is-shown .ms-mce__panel {
  transition: none;
}