@font-face {
  font-family: "IRANSansX";
  src: url("../storefronts/modern_green/vendor/mlmgramfont/fonts/woff2/IRANSansX-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IRANSansX";
  src: url("../storefronts/modern_green/vendor/mlmgramfont/fonts/woff2/IRANSansX-DemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IRANSansX";
  src: url("../storefronts/modern_green/vendor/mlmgramfont/fonts/woff2/IRANSansX-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --card-primary: #0b6b50;
  --card-primary-hover: #075840;
  --card-accent: #21a978;
  --card-ink: #15251f;
  --card-muted: #65776f;
  --card-page: #eef4f1;
  --card-surface: #ffffff;
  --card-soft: #edf8f3;
  --card-soft-2: #f6faf8;
  --card-border: #dce8e2;
  --card-warning: #c97712;
  --card-shadow: 0 24px 70px rgba(19, 51, 39, 0.13);
  --card-focus: 0 0 0 4px rgba(11, 107, 80, 0.2);
}

@view-transition { navigation: auto; }

* { box-sizing: border-box; }

html {
  min-width: 320px;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background: var(--card-page);
}

body.mlmg-digital-card-page {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(33, 169, 120, 0.08), transparent 32%),
    var(--card-page);
  color: var(--card-ink);
  font-family: "IRANSansX", Tahoma, sans-serif;
  font-size: 15px;
  line-height: 1.7;
}

button, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, video:focus-visible { outline: 0; box-shadow: var(--card-focus); }

.mlmg-digital-card {
  width: 100%;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--card-surface);
}

.mlmg-card-shell { min-height: calc(100dvh - 54px); }

.mlmg-card-hero {
  position: relative;
  min-height: 300px;
  padding: max(18px, env(safe-area-inset-top)) 20px 30px;
  overflow: hidden;
  background: linear-gradient(145deg, #075a43 0%, #0b6b50 58%, #128461 100%);
  color: #fff;
  isolation: isolate;
}

.mlmg-card-hero::before,
.mlmg-card-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
}

.mlmg-card-hero::before {
  width: 370px;
  height: 175px;
  inset: auto -130px 16px auto;
  transform: rotate(-10deg);
}

.mlmg-card-hero::after {
  width: 430px;
  height: 210px;
  inset: auto auto -122px -180px;
  background: rgba(255, 255, 255, 0.055);
}

.mlmg-card-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mlmg-card-brand-logo {
  width: 92px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 26px rgba(2, 36, 25, 0.18);
}

.mlmg-card-brand-logo img { width: 100%; height: 100%; object-fit: contain; }

.mlmg-card-icon-action {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 21px;
  transition: transform 180ms ease, background-color 180ms ease;
}

.mlmg-card-icon-action:hover { background: rgba(255, 255, 255, 0.19); }
.mlmg-card-icon-action:active { transform: scale(0.95); }

.mlmg-card-person {
  margin-top: 34px;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 17px;
}

.mlmg-card-avatar {
  width: 112px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  background: #d9e8e1;
  color: var(--card-primary);
  box-shadow: 0 18px 34px rgba(0, 37, 25, 0.28);
  font-size: 32px;
  font-weight: 700;
}

.mlmg-card-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.mlmg-card-person-copy { min-width: 0; }

.mlmg-card-handle {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  padding: 3px 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(0, 35, 24, 0.22);
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mlmg-card-person-copy h1 {
  margin: 8px 0 4px;
  color: #fff;
  font-size: clamp(25px, 7vw, 35px);
  line-height: 1.28;
  letter-spacing: 0;
}

.mlmg-card-person-copy p {
  display: -webkit-box;
  max-width: 450px;
  margin: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.mlmg-card-main {
  position: relative;
  z-index: 2;
  margin-top: -16px;
  padding: 0 16px 22px;
  border-radius: 18px 18px 0 0;
  background: var(--card-surface);
}

.mlmg-card-availability {
  min-height: 64px;
  margin-bottom: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-soft-2);
}

.mlmg-card-availability-dot {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border: 3px solid #dbe5e0;
  border-radius: 50%;
  background: #84938c;
  box-shadow: 0 0 0 4px rgba(132, 147, 140, 0.1);
}

.mlmg-card-availability.is-online .mlmg-card-availability-dot {
  border-color: #c9f0df;
  background: #169b69;
  box-shadow: 0 0 0 4px rgba(22, 155, 105, 0.12);
}

.mlmg-card-availability.is-away .mlmg-card-availability-dot {
  border-color: #f6e4cc;
  background: var(--card-warning);
  box-shadow: 0 0 0 4px rgba(201, 119, 18, 0.1);
}

.mlmg-card-availability div { min-width: 0; display: grid; }
.mlmg-card-availability strong { font-size: 13px; line-height: 1.6; }
.mlmg-card-availability small { overflow: hidden; color: var(--card-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.mlmg-card-contact-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 8px;
}

.mlmg-card-contact-primary,
.mlmg-card-contact-secondary {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 8px;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.mlmg-card-contact-primary {
  padding: 9px 14px;
  justify-content: flex-start;
  background: var(--card-primary);
  color: #fff;
  box-shadow: 0 12px 26px rgba(11, 107, 80, 0.2);
}

.mlmg-card-contact-primary > i { font-size: 22px; }
.mlmg-card-contact-primary span { min-width: 0; display: grid; }
.mlmg-card-contact-primary strong { font-size: 13px; }
.mlmg-card-contact-primary small { direction: ltr; color: rgba(255, 255, 255, 0.76); font-size: 10px; }

.mlmg-card-contact-secondary {
  padding: 9px 11px;
  border: 1px solid var(--card-border);
  background: var(--card-soft);
  color: var(--card-primary);
  font-size: 12px;
  font-weight: 600;
}

.mlmg-card-contact-secondary > i { font-size: 20px; }
.mlmg-card-contact-primary:hover { background: var(--card-primary-hover); box-shadow: 0 15px 30px rgba(11, 107, 80, 0.25); }
.mlmg-card-contact-secondary:hover { border-color: #b8d9ca; background: #e3f4ec; }
.mlmg-card-contact-primary:active, .mlmg-card-contact-secondary:active { transform: scale(0.98); }

.mlmg-card-bento {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mlmg-card-bento-item {
  min-width: 0;
  min-height: 92px;
  padding: 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-soft-2);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.mlmg-card-bento-item.is-about { grid-row: span 2; min-height: 192px; align-content: center; grid-template-columns: 1fr; text-align: center; }
.mlmg-card-bento-item.is-about > i { display: none; }

.mlmg-card-bento-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--card-soft);
  color: var(--card-primary);
  font-size: 19px;
}

.mlmg-card-bento-item.is-about .mlmg-card-bento-icon { width: 52px; height: 52px; margin: 0 auto 5px; font-size: 24px; }
.mlmg-card-bento-item > span:nth-child(2) { min-width: 0; display: grid; }
.mlmg-card-bento-item strong { font-size: 13px; }
.mlmg-card-bento-item small { overflow: hidden; color: var(--card-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mlmg-card-bento-item > i { color: #9aaba3; font-size: 17px; }
.mlmg-card-bento-item:not(.is-disabled):hover { transform: translateY(-2px); border-color: #b9d9ca; background: #fff; box-shadow: 0 12px 26px rgba(18, 49, 37, 0.08); }
.mlmg-card-bento-item.is-disabled { opacity: 0.58; cursor: default; }

.mlmg-card-bento-item.is-about {
  border-color: #c5e2d4;
  background: #eff8f4;
}

.mlmg-card-bento-item.is-about .mlmg-card-bento-icon {
  background: #dcf1e7;
  color: #087a57;
}

.mlmg-card-bento-item.is-watch:not(.is-disabled) {
  border-color: #c7dfea;
  background: #f0f8fc;
}

.mlmg-card-bento-item.is-watch:not(.is-disabled) .mlmg-card-bento-icon {
  background: #dceff6;
  color: #247b98;
}

.mlmg-card-bento-item.is-watch:not(.is-disabled) > i {
  color: #6b9cae;
}

.mlmg-card-bento-item.is-shop:not(.is-disabled) {
  border-color: #ecc2d0;
  background: #fff2f6;
}

.mlmg-card-bento-item.is-shop:not(.is-disabled) .mlmg-card-bento-icon {
  background: #f9dce6;
  color: #a72b59;
}

.mlmg-card-bento-item.is-shop:not(.is-disabled) strong {
  color: #542238;
}

.mlmg-card-bento-item.is-shop:not(.is-disabled) > i {
  color: #c05a7d;
}

.mlmg-card-bento-item.is-about:hover {
  border-color: #99cbb4;
  background: #f8fcfa;
  box-shadow: 0 12px 26px rgba(8, 122, 87, 0.09);
}

.mlmg-card-bento-item.is-watch:not(.is-disabled):hover {
  border-color: #91bfd1;
  background: #f9fdff;
  box-shadow: 0 12px 26px rgba(36, 123, 152, 0.1);
}

.mlmg-card-bento-item.is-shop:not(.is-disabled):hover {
  border-color: #d88da7;
  background: #fff8fa;
  box-shadow: 0 12px 26px rgba(167, 43, 89, 0.1);
}

.mlmg-card-bento-item.is-disabled {
  border-color: #dfe7e3;
  background: #f4f7f5;
}

.mlmg-card-bento-item.is-disabled .mlmg-card-bento-icon {
  background: #e8eeeb;
  color: #82918b;
}

.mlmg-card-opportunity-shortcut {
  position: relative;
  min-height: 112px;
  margin-top: 10px;
  padding: 16px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
  border: 1px solid #ebca79;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff9e9 0%, #fff0c8 100%);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.mlmg-card-opportunity-shortcut::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  inset: -38px auto auto -22px;
  border: 18px solid rgba(222, 146, 31, 0.1);
  border-radius: 50%;
}

.mlmg-card-opportunity-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #bd6b13;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 9px 18px rgba(189, 107, 19, 0.19);
}

.mlmg-card-opportunity-shortcut div { min-width: 0; display: grid; align-content: center; }
.mlmg-card-opportunity-shortcut small { color: #a85c0c; font-size: 10px; font-weight: 700; }
.mlmg-card-opportunity-shortcut strong { color: #4e3517; font-size: 14px; line-height: 1.55; }
.mlmg-card-opportunity-shortcut p { margin: 3px 0 0; color: #735d40; font-size: 10px; line-height: 1.65; }
.mlmg-card-opportunity-action { grid-column: 2; color: #9b5208; font-size: 10px; font-weight: 700; }
.mlmg-card-opportunity-shortcut:hover { transform: translateY(-2px); border-color: #d8a941; box-shadow: 0 15px 32px rgba(189, 107, 19, 0.14); }

.mlmg-card-socials {
  margin-top: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--card-border);
}

.mlmg-card-socials > div { min-width: 0; }
.mlmg-card-socials small { color: var(--card-muted); font-size: 9px; }
.mlmg-card-socials h2 { margin: -2px 0 0; font-size: 12px; }
.mlmg-card-socials nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.mlmg-card-socials a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--card-border); border-radius: 50%; background: #fff; color: var(--card-primary); font-size: 18px; transition: transform 180ms ease, background-color 180ms ease, color 180ms ease; }
.mlmg-card-socials a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.mlmg-card-socials a:hover { transform: translateY(-2px); background: var(--card-primary); color: #fff; }

.mlmg-card-save-contact {
  min-height: 58px;
  margin-top: 4px;
  padding: 10px 13px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: #fff;
}

.mlmg-card-save-contact > i:first-child { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--card-soft); color: var(--card-primary); font-size: 18px; }
.mlmg-card-save-contact > span { display: grid; }
.mlmg-card-save-contact strong { font-size: 12px; }
.mlmg-card-save-contact small { color: var(--card-muted); font-size: 9px; }
.mlmg-card-save-contact > i:last-child { color: var(--card-primary); font-size: 18px; }

.mlmg-card-mobile-qr {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: #fff;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.mlmg-card-mobile-qr[open] { border-color: #abd3c2; background: var(--card-soft-2); box-shadow: 0 12px 26px rgba(18, 49, 37, 0.08); }
.mlmg-card-mobile-qr summary { min-height: 62px; padding: 10px 12px; display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; align-items: center; gap: 10px; list-style: none; cursor: pointer; touch-action: manipulation; user-select: none; }
.mlmg-card-mobile-qr summary::-webkit-details-marker { display: none; }
.mlmg-card-mobile-qr summary > span:first-child { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: var(--card-soft); color: var(--card-primary); font-size: 20px; }
.mlmg-card-mobile-qr summary > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.mlmg-card-mobile-qr summary strong { font-size: 12px; }
.mlmg-card-mobile-qr summary small { overflow: hidden; color: var(--card-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.mlmg-card-mobile-qr summary > i:last-child { color: var(--card-primary); font-size: 20px; transition: transform 180ms ease; }
.mlmg-card-mobile-qr[open] summary > i:last-child { transform: rotate(180deg); }
.mlmg-card-mobile-qr__body { padding: 12px; display: grid; grid-template-columns: 106px minmax(0, 1fr); align-items: center; gap: 12px; border-top: 1px solid var(--card-border); background: var(--card-soft-2); }
.mlmg-card-mobile-qr__copy { min-width: 0; }
.mlmg-card-mobile-qr__copy > strong { display: block; font-size: 12px; }
.mlmg-card-mobile-qr__copy p { margin: 3px 0 7px; color: var(--card-muted); font-size: 9px; line-height: 1.8; }
.mlmg-card-mobile-qr__copy code { max-width: 100%; display: block; overflow: hidden; color: var(--card-primary); font: 9px/1.6 monospace; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.mlmg-card-qr-frame { width: 106px; height: 106px; padding: 7px; display: grid; place-items: center; border: 1px solid var(--card-border); border-radius: 7px; background: #fff; }
.mlmg-card-qr-frame canvas, .mlmg-card-qr-frame img { width: 90px !important; height: 90px !important; display: block; }

.mlmg-card-qr-panel { display: none; }

.mlmg-card-footer {
  min-height: 54px;
  padding: 10px 18px max(10px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-top: 1px solid var(--card-border);
  background: var(--card-soft-2);
  color: var(--card-muted);
  font-size: 10px;
}

.mlmg-card-footer img { width: 66px; height: 28px; object-fit: contain; }

/* Detail pages. */
.is-detail-page .mlmg-digital-card { min-height: 100dvh; }
.mlmg-card-hero.is-compact { min-height: 176px; padding-bottom: 26px; }
.mlmg-card-hero.is-compact .mlmg-card-person { margin-top: 18px; grid-template-columns: 72px minmax(0, 1fr); }
.mlmg-card-hero.is-compact .mlmg-card-avatar { width: 72px; border-width: 3px; font-size: 22px; }
.mlmg-card-hero.is-compact .mlmg-card-person-copy h1 { margin-top: 5px; font-size: 21px; }

.mlmg-card-detail {
  position: relative;
  z-index: 2;
  margin: -14px 14px 22px;
  padding: 18px 16px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(18, 49, 37, 0.08);
}

.mlmg-card-section-heading { margin-bottom: 16px; display: flex; align-items: flex-start; gap: 11px; }
.mlmg-card-section-heading > span { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: var(--card-soft); color: var(--card-primary); font-size: 21px; }
.mlmg-card-section-heading > div { min-width: 0; }
.mlmg-card-section-heading small { color: var(--card-primary); font-size: 10px; font-weight: 600; }
.mlmg-card-section-heading h2 { margin: 0; font-size: 19px; line-height: 1.5; }
.mlmg-card-section-heading p { margin: 4px 0 0; color: var(--card-muted); font-size: 11px; }

.mlmg-card-video {
  width: 100%;
  margin: 0 auto 17px;
  overflow: hidden;
  border-radius: 8px;
  background: #101613;
  box-shadow: 0 12px 28px rgba(8, 20, 15, 0.13);
}

.mlmg-card-video video { width: 100%; max-height: 72vh; display: block; object-fit: contain; background: #101613; }
.mlmg-card-video.is-portrait { width: min(100%, 410px); aspect-ratio: 9 / 16; }
.mlmg-card-video.is-portrait video { width: 100%; height: 100%; }
.mlmg-card-video.is-landscape { aspect-ratio: 16 / 9; }
.mlmg-card-video.is-landscape video { width: 100%; height: 100%; }

.mlmg-card-rich-text { color: #34473f; font-size: 13px; line-height: 2.05; overflow-wrap: anywhere; }

.mlmg-card-detail.is-watch-page { width: calc(100% - 24px); margin: -14px auto 28px; padding: 18px 12px 12px; overflow: hidden; border-radius: 8px; }
.is-watch-page .mlmg-card-section-heading { padding-inline: 4px; }
.is-detail-page .mlmg-card-footer { border-top: 0; }
.mlmg-card-section-heading.is-watch-heading > span { background: #e8f5fa; color: #247b98; }

.mlmg-card-content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: clamp(170px, 49vw, 230px);
  gap: 2px;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
}

.mlmg-card-content-grid.is-sparse {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 7px;
  padding: 0 8px 8px;
}

.mlmg-card-content-grid.is-balanced {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: auto;
  gap: 6px;
}

.mlmg-card-content-item {
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #e9f2ee;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.mlmg-card-content-grid:not(.is-sparse):not(.is-balanced) .mlmg-card-content-item:nth-child(7n + 1) { grid-column: span 2; grid-row: span 2; }
.mlmg-card-content-grid.is-sparse .mlmg-card-content-item { border-radius: 8px; }
.mlmg-card-content-grid.is-balanced .mlmg-card-content-item { border-radius: 6px; }
.mlmg-card-content-grid.is-sparse .mlmg-card-content-item:only-child { width: 100%; max-width: 380px; grid-column: 1 / -1; justify-self: center; }

.mlmg-card-content-item figure { position: relative; width: 100%; height: 100%; margin: 0; overflow: hidden; background: linear-gradient(145deg, #deeee7, #f4f8f6); }
.mlmg-card-content-grid.is-sparse .mlmg-card-content-item figure { aspect-ratio: 9 / 16; }
.mlmg-card-content-grid.is-balanced .mlmg-card-content-item figure { aspect-ratio: 9 / 16; }
.mlmg-card-content-grid.is-sparse .mlmg-card-content-item:only-child figure { aspect-ratio: 9 / 16; }
.mlmg-card-content-item figure::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(6, 22, 17, 0.08) 12%, transparent 42%, rgba(6, 22, 17, 0.9) 100%); }
.mlmg-card-content-backdrop { position: absolute; z-index: 0; inset: -18px; overflow: hidden; background: #102019; pointer-events: none; }
.mlmg-card-content-backdrop img { width: 100%; height: 100%; display: block; object-fit: cover; filter: blur(16px) saturate(0.88) brightness(0.66); transform: scale(1.1); }
.mlmg-card-content-media { position: relative; z-index: 1; width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; transition: transform 500ms cubic-bezier(0.2, 0.75, 0.25, 1), filter 250ms ease, opacity 180ms ease; }
.mlmg-card-content-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: #4d8e75; font-size: 34px; }

.mlmg-card-content-type,
.mlmg-card-content-duration { position: absolute; z-index: 3; top: 7px; min-height: 24px; padding: 4px 7px; display: inline-flex; align-items: center; gap: 3px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; background: rgba(10, 28, 22, 0.72); color: #fff; font-size: 8px; line-height: 1.2; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mlmg-card-content-type { right: 7px; max-width: calc(100% - 14px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlmg-card-content-item.has-duration .mlmg-card-content-type { max-width: calc(100% - 66px); }
.mlmg-card-content-duration { left: 7px; max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlmg-card-content-duration i { color: #9ff0cf; font-size: 10px; }

.mlmg-card-content-play { position: absolute; z-index: 3; inset: 50% auto auto 50%; width: 38px; height: 38px; display: grid; place-items: center; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, 0.46); border-radius: 50%; background: rgba(7, 81, 58, 0.72); color: #fff; box-shadow: 0 8px 20px rgba(0, 35, 24, 0.22); opacity: 1; transition: opacity 180ms ease, transform 220ms ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mlmg-card-content-play i { margin-left: 2px; font-size: 19px; }
.mlmg-card-content-item.is-previewing .mlmg-card-content-play { opacity: 0.16; transform: translate(-50%, -50%) scale(0.84); }
.mlmg-card-content-item.is-previewing .mlmg-card-content-duration i { color: #fff; }

.mlmg-card-content-item figcaption { position: absolute; z-index: 3; inset: auto 0 0; padding: 34px 9px 9px; color: #fff; }
.mlmg-card-content-item h3 { display: -webkit-box; margin: 0; overflow: hidden; font-size: 10px; line-height: 1.65; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.35); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mlmg-card-content-item figcaption > span { margin-top: 3px; display: none; align-items: center; gap: 3px; color: #c9f7e5; font-size: 9px; font-weight: 700; }
.mlmg-card-content-grid.is-sparse .mlmg-card-content-item h3 { font-size: 12px; }
.mlmg-card-content-grid.is-balanced .mlmg-card-content-item h3 { font-size: 11px; }
.mlmg-card-content-grid.is-sparse .mlmg-card-content-item figcaption > span { display: inline-flex; }

.mlmg-card-content-item:focus-visible { position: relative; z-index: 5; outline: 3px solid rgba(8, 122, 87, 0.34); outline-offset: -3px; }
.mlmg-card-content-item:hover { z-index: 4; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(18, 49, 37, 0.18); }
.mlmg-card-content-item:hover .mlmg-card-content-media { transform: scale(1.025); filter: saturate(1.06); }

.mlmg-card-opportunity-steps { display: grid; gap: 10px; }
.mlmg-card-opportunity-steps section { padding: 13px; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--card-soft-2); }
.mlmg-card-opportunity-steps section > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--card-soft); color: var(--card-primary); font-size: 18px; }
.mlmg-card-opportunity-steps h3 { margin: 0 0 4px; font-size: 13px; }
.mlmg-card-opportunity-steps p { margin: 0; color: #42564d; font-size: 12px; line-height: 1.95; }

.mlmg-card-referral {
  min-height: 74px;
  margin-top: 14px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  align-items: center;
  border-radius: 8px;
  background: var(--card-primary);
  color: #fff;
  box-shadow: 0 14px 30px rgba(11, 107, 80, 0.2);
  transition: transform 180ms ease, background-color 180ms ease;
}
.mlmg-card-referral > span { display: flex; align-items: center; gap: 8px; }
.mlmg-card-referral > span i { font-size: 21px; }
.mlmg-card-referral > span b { font-size: 14px; }
.mlmg-card-referral small { grid-column: 1; color: rgba(255, 255, 255, 0.76); font-size: 10px; }
.mlmg-card-referral > i { grid-column: 2; grid-row: 1 / span 2; font-size: 19px; }
.mlmg-card-referral:hover { transform: translateY(-2px); background: var(--card-primary-hover); }

.mlmg-card-referral--home {
  margin-top: 9px;
}

/* Motion is progressive: content remains visible when JavaScript is unavailable. */
.is-js [data-card-reveal] { opacity: 0; transform: translateY(10px); }
.is-js.is-ready [data-card-reveal] { opacity: 1; transform: none; transition: opacity 420ms ease, transform 520ms cubic-bezier(0.2, 0.75, 0.25, 1); }
.is-js.is-ready [data-card-reveal="availability"] { transition-delay: 70ms; }
.is-js.is-ready [data-card-reveal="contact"] { transition-delay: 120ms; }
.is-js.is-ready [data-card-reveal="bento"] { transition-delay: 170ms; }
.is-js.is-ready [data-card-reveal="opportunity"] { transition-delay: 220ms; }
.is-js.is-ready [data-card-reveal="socials"], .is-js.is-ready [data-card-reveal="save"] { transition-delay: 260ms; }
.is-js.is-ready [data-card-reveal="qr-mobile"] { transition-delay: 300ms; }

@media (min-width: 620px) {
  .mlmg-digital-card { max-width: 720px; margin: 28px auto; min-height: auto; border: 1px solid var(--card-border); border-radius: 8px; box-shadow: var(--card-shadow); }
  .mlmg-card-content-grid:not(.is-sparse):not(.is-balanced) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(330px, 55vw, 400px); }
  .mlmg-card-content-grid.is-balanced { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  body.mlmg-digital-card-page { padding: 42px 24px; }
  .mlmg-digital-card { max-width: 1120px; min-height: 760px; margin: 0 auto; }
  .mlmg-card-shell { min-height: 704px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 0.86fr); direction: ltr; }
  .mlmg-card-hero { grid-column: 2; min-height: 704px; padding: 28px 34px; direction: rtl; display: flex; flex-direction: column; }
  .mlmg-card-person { margin: auto 0; grid-template-columns: 148px minmax(0, 1fr); gap: 24px; }
  .mlmg-card-avatar { width: 148px; }
  .mlmg-card-person-copy h1 { font-size: 30px; }
  .mlmg-card-person-copy p { font-size: 14px; -webkit-line-clamp: 5; }
  .mlmg-card-main { grid-column: 1; grid-row: 1; margin: 0; padding: 30px 34px 166px; border-radius: 0; direction: rtl; align-self: stretch; }
  .mlmg-card-bento-item.is-about { min-height: 192px; }
  .mlmg-card-mobile-qr { display: none; }
  .mlmg-card-qr-panel { position: relative; z-index: 3; grid-column: 1; grid-row: 1; align-self: end; margin: 0 34px 24px; padding: 13px; display: grid; grid-template-columns: 106px minmax(0, 1fr); align-items: center; gap: 14px; direction: rtl; border: 1px dashed #bdd6ca; border-radius: 8px; background: var(--card-soft-2); }
  .mlmg-card-qr-panel strong { font-size: 13px; }
  .mlmg-card-qr-panel p { margin: 2px 0; color: var(--card-muted); font-size: 10px; line-height: 1.65; }
  .mlmg-card-qr-panel code { max-width: 290px; display: block; overflow: hidden; direction: ltr; color: var(--card-primary); font: 10px/1.5 monospace; text-overflow: ellipsis; white-space: nowrap; }
  .mlmg-card-footer { min-height: 55px; }

  .is-detail-page .mlmg-digital-card { max-width: 980px; min-height: auto; }
  .is-detail-page .mlmg-card-shell { min-height: auto; display: block; direction: rtl; }
  .is-detail-page .mlmg-card-hero.is-compact { min-height: 184px; padding: 24px 36px; display: block; }
  .is-detail-page .mlmg-card-hero.is-compact .mlmg-card-person { max-width: 760px; margin: 18px auto 0; grid-template-columns: 78px minmax(0, 1fr); }
  .mlmg-card-detail { max-width: 850px; margin: -18px auto 34px; padding: 28px; }
  .mlmg-card-detail.is-watch-page { width: calc(100% - 64px); max-width: 900px; margin: -18px auto 44px; padding: 26px; border: 1px solid var(--card-border); border-radius: 8px; }
  .is-watch-page .mlmg-card-section-heading { padding-inline: 0; }
  .mlmg-card-content-grid:not(.is-sparse):not(.is-balanced) { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(350px, 38vw, 370px); gap: 5px; }
  .mlmg-card-content-grid.is-balanced { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .mlmg-card-content-grid.is-sparse { max-width: 620px; margin-inline: auto; padding: 0; }
  .mlmg-card-content-grid.is-sparse .mlmg-card-content-item h3 { font-size: 14px; }
  .mlmg-card-opportunity-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .mlmg-card-opportunity-steps section { grid-template-columns: 1fr; align-content: start; }
}

@media (max-width: 359px) {
  .mlmg-card-person { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
  .mlmg-card-avatar { width: 92px; }
  .mlmg-card-person-copy h1 { font-size: 23px; }
  .mlmg-card-contact-actions { grid-template-columns: 1fr; }
  .mlmg-card-bento-item { padding: 9px; }
  .mlmg-card-main { padding-inline: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .is-js [data-card-reveal] { opacity: 1; transform: none; }
}

/* Liquid Identity hero and the independent communication hub. */
.mlmg-card-hero {
  --liquid-x: 0px;
  --liquid-y: 0px;
  min-height: 310px;
  padding: max(17px, env(safe-area-inset-top)) 18px 25px;
  background:
    linear-gradient(145deg, #075d45 0%, #0b7656 48%, #16966d 100%);
  isolation: isolate;
}

.mlmg-card-hero::before {
  display: block;
  width: auto;
  height: auto;
  inset: 0;
  transform: none;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.08), transparent 34%, rgba(210, 255, 235, 0.08) 62%, transparent 82%);
}

.mlmg-card-hero::after {
  display: block;
  width: 31%;
  height: 120%;
  inset: -10% auto auto 9%;
  transform: skewX(-13deg);
  border: 0;
  border-inline: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  filter: blur(0.2px);
  transform-origin: center;
  animation: mlmg-liquid-spine-drift 16s ease-in-out infinite alternate;
}

.mlmg-card-liquid-scene {
  position: absolute;
  z-index: -1;
  inset: -22px;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(var(--liquid-x), var(--liquid-y), 0);
  transition: transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1);
  will-change: transform;
}

.mlmg-card-liquid-scene::before {
  content: "";
  position: absolute;
  inset: -11% -18%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 112% 72% at 98% 8%, transparent 0 45.5%, rgba(235, 255, 246, 0.11) 45.8%, transparent 46.15%),
    radial-gradient(ellipse 98% 66% at 4% 96%, transparent 0 42.5%, rgba(221, 255, 240, 0.09) 42.8%, transparent 43.2%),
    radial-gradient(ellipse 88% 54% at 73% 76%, transparent 0 48.5%, rgba(255, 255, 255, 0.075) 48.8%, transparent 49.2%),
    repeating-linear-gradient(104deg, transparent 0 104px, rgba(255, 255, 255, 0.045) 105px, transparent 106px 218px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  opacity: 0.74;
  transform: translate3d(-1.4%, -0.5%, 0) rotate(-0.4deg) scale(1.01);
  transform-origin: center;
  will-change: transform;
  animation: mlmg-liquid-contour-float 18s cubic-bezier(0.45, 0.05, 0.25, 0.98) infinite alternate;
}

.mlmg-card-liquid-sheet {
  position: absolute;
  display: block;
  width: 128%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(201, 255, 232, 0.025));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 24px 60px rgba(0, 69, 48, 0.08);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.mlmg-card-liquid-sheet.is-back {
  height: 132px;
  inset: 31px -28% auto auto;
  transform: rotate(-12deg);
  opacity: 0.44;
  animation: mlmg-liquid-back 13s ease-in-out infinite alternate;
}

.mlmg-card-liquid-sheet.is-middle {
  height: 155px;
  inset: auto auto 42px -25%;
  transform: rotate(9deg);
  opacity: 0.52;
  animation: mlmg-liquid-middle 15s ease-in-out infinite alternate;
}

.mlmg-card-liquid-sheet.is-front {
  height: 138px;
  inset: auto -18% -83px auto;
  transform: rotate(-5deg);
  background: linear-gradient(180deg, rgba(221, 255, 241, 0.17), rgba(255, 255, 255, 0.035));
  opacity: 0.72;
  animation: mlmg-liquid-front 11s ease-in-out infinite alternate;
}

.mlmg-card-liquid-caustic {
  position: absolute;
  width: 122%;
  height: 2px;
  inset: 48% -12% auto auto;
  transform: rotate(-11deg);
  background: linear-gradient(90deg, transparent, rgba(225, 255, 242, 0.64), rgba(255, 255, 255, 0.12), transparent);
  filter: blur(0.4px);
  opacity: 0.5;
  animation: mlmg-liquid-caustic 8s ease-in-out infinite;
}

.mlmg-card-hero-top {
  position: relative;
  z-index: 3;
  width: 100%;
  justify-content: center;
}

.mlmg-card-brand-logo {
  position: relative;
  isolation: isolate;
  width: 260px;
  height: 87px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  margin-inline: auto;
  perspective: 900px;
}

.mlmg-card-brand-logo::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -13% -7%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 54% 50%, rgba(245, 255, 252, 0.82) 0%, rgba(230, 251, 244, 0.6) 43%, rgba(213, 246, 235, 0.2) 68%, transparent 81%);
  filter: blur(10px);
  transform: translate3d(-12%, 0, 0) scale(0.92);
  opacity: 0.38;
  animation: mlmg-idgram-spotlight 4.8s cubic-bezier(0.45, 0, 0.2, 1) 920ms infinite alternate;
  pointer-events: none;
}

.mlmg-card-brand-logo::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -8% -5%;
  background:
    linear-gradient(90deg, transparent 4%, rgba(255, 255, 255, 0.54) 48%, transparent 92%) 50% 31% / 80% 1px no-repeat,
    linear-gradient(90deg, transparent 8%, rgba(173, 240, 221, 0.46) 52%, transparent 94%) 50% 76% / 72% 1px no-repeat;
  opacity: 0.64;
  filter: drop-shadow(0 0 5px rgba(223, 255, 246, 0.35));
  animation: mlmg-idgram-light-current 6.8s ease-in-out 920ms infinite alternate;
  pointer-events: none;
}

.mlmg-card-brand-logo img {
  position: absolute;
  z-index: 2;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 47, 34, 0.2));
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  animation: mlmg-idgram-flip-in 880ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mlmg-idgram-flip-in {
  0% { transform: translate3d(0, -8px, 0) rotateX(-92deg) scale(0.94); opacity: 0; }
  58% { transform: translate3d(0, 1px, 0) rotateX(8deg) scale(1.01); opacity: 1; }
  78% { transform: translate3d(0, 0, 0) rotateX(-2deg) scale(1); }
  100% { transform: translate3d(0, 0, 0) rotateX(0) scale(1); opacity: 1; }
}

@keyframes mlmg-idgram-spotlight {
  0% { transform: translate3d(calc(-12% + var(--liquid-x, 0px)), var(--liquid-y, 0px), 0) scale(0.92); opacity: 0.38; }
  48% { transform: translate3d(var(--liquid-x, 0px), calc(-1% + var(--liquid-y, 0px)), 0) scale(1.04); opacity: 0.82; }
  100% { transform: translate3d(calc(12% + var(--liquid-x, 0px)), calc(1% + var(--liquid-y, 0px)), 0) scale(0.96); opacity: 0.5; }
}

.mlmg-card-brand-pulse {
  position: absolute;
  pointer-events: none;
}

.mlmg-card-brand-pulse {
  z-index: 1;
  width: 37%;
  height: 100%;
  inset: 0 auto auto 0;
  border: 1px solid rgba(225, 255, 246, 0.7);
  border-radius: 50%;
  box-shadow:
    0 0 0 5px rgba(196, 247, 230, 0.12),
    0 0 28px rgba(220, 255, 244, 0.42);
  transform: scale(0.72);
  opacity: 0;
  animation: mlmg-idgram-identity-pulse 1.2s cubic-bezier(0.16, 1, 0.3, 1) 720ms both;
}

.mlmg-card-brand-logo.is-touch-pulse .mlmg-card-brand-pulse {
  animation: mlmg-idgram-touch-pulse 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes mlmg-idgram-identity-pulse {
  0%, 10% { transform: scale(0.72); opacity: 0; }
  32% { opacity: 0.72; }
  100% { transform: scale(1.34); opacity: 0; }
}

@keyframes mlmg-idgram-touch-pulse {
  0% { transform: scale(0.84); opacity: 0; }
  25% { opacity: 0.76; }
  100% { transform: scale(1.28); opacity: 0; }
}

@keyframes mlmg-idgram-light-current {
  0% { transform: translate3d(-3%, -1px, 0) skewY(-0.7deg); opacity: 0.44; }
  52% { opacity: 0.72; }
  100% { transform: translate3d(3%, 1px, 0) skewY(0.7deg); opacity: 0.56; }
}

.mlmg-card-person {
  position: relative;
  z-index: 2;
  margin-top: 25px;
  padding: 15px;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.31);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07) 56%, rgba(203, 255, 232, 0.1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 78, 54, 0.1),
    0 22px 46px rgba(0, 54, 38, 0.17);
  -webkit-backdrop-filter: blur(19px) saturate(145%);
  backdrop-filter: blur(19px) saturate(145%);
}

.mlmg-card-person::before {
  content: "";
  position: absolute;
  width: 68%;
  height: 240%;
  inset: -75% auto auto -28%;
  transform: rotate(24deg);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  animation: mlmg-liquid-panel-light 9s ease-in-out infinite;
}

.mlmg-card-avatar {
  position: relative;
  z-index: 1;
  width: 108px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  background: rgba(225, 244, 235, 0.93);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.3),
    0 12px 30px rgba(0, 49, 34, 0.24),
    inset 0 0 0 1px rgba(10, 107, 77, 0.12);
}

.mlmg-card-avatar::after {
  content: "";
  position: absolute;
  inset: 2px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  box-shadow: inset 8px 8px 16px rgba(255, 255, 255, 0.1);
}

.mlmg-card-person-copy {
  position: relative;
  z-index: 1;
}

.mlmg-card-handle {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(240, 255, 248, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

.mlmg-card-person-copy h1 {
  margin-top: 7px;
  text-shadow: 0 4px 18px rgba(0, 55, 38, 0.22);
}

.mlmg-card-person-copy p {
  color: rgba(255, 255, 255, 0.88);
}

.mlmg-card-hero.is-compact {
  min-height: 184px;
  padding-bottom: 22px;
}

.mlmg-card-hero.is-compact .mlmg-card-person {
  margin-top: 14px;
  padding: 9px;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 12px;
}

.mlmg-card-hero.is-compact .mlmg-card-avatar {
  width: 68px;
}

.mlmg-card-main {
  margin-top: 0;
  padding-top: 18px;
  border-radius: 0;
}

.mlmg-card-contact-hub {
  margin: 0 0 14px;
  padding: 8px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff, #f7fbf9);
  box-shadow:
    0 14px 32px rgba(18, 49, 37, 0.08),
    inset 0 1px 0 #fff;
}

.mlmg-card-availability {
  min-height: 52px;
  margin: 0 2px 8px;
  padding: 7px 8px 9px;
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr) 32px;
  border: 0;
  border-bottom: 1px solid #e5eee9;
  border-radius: 0;
  background: transparent;
}

.mlmg-card-availability > i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--card-soft);
  color: var(--card-primary);
  font-size: 16px;
}

.mlmg-card-availability-dot {
  align-self: center;
}

.mlmg-card-availability strong {
  font-size: 12px;
}

.mlmg-card-availability small {
  font-size: 10px;
}

.mlmg-card-contact-actions {
  gap: 7px;
}

.mlmg-card-contact-primary,
.mlmg-card-contact-secondary {
  min-height: 55px;
}

@keyframes mlmg-liquid-back {
  from { transform: translate3d(-7px, -4px, 0) rotate(-12deg); }
  to { transform: translate3d(14px, 7px, 0) rotate(-9deg); }
}

@keyframes mlmg-liquid-middle {
  from { transform: translate3d(5px, 5px, 0) rotate(9deg); }
  to { transform: translate3d(-13px, -7px, 0) rotate(6deg); }
}

@keyframes mlmg-liquid-front {
  from { transform: translate3d(-4px, 0, 0) rotate(-5deg); }
  to { transform: translate3d(12px, -5px, 0) rotate(-3deg); }
}

@keyframes mlmg-liquid-caustic {
  0%, 100% { opacity: 0.22; transform: translateX(-3%) rotate(-11deg); }
  50% { opacity: 0.62; transform: translateX(3%) rotate(-11deg); }
}

@keyframes mlmg-liquid-contour-float {
  0% { transform: translate3d(-1.4%, -0.5%, 0) rotate(-0.4deg) scale(1.01); }
  48% { transform: translate3d(1.5%, -1.2%, 0) rotate(0.6deg) scale(1.025); }
  100% { transform: translate3d(-0.4%, 1.1%, 0) rotate(-0.2deg) scale(1.015); }
}

@keyframes mlmg-liquid-spine-drift {
  0% { transform: translate3d(-5px, -1.5%, 0) skewX(-13deg); opacity: 0.72; }
  52% { transform: translate3d(9px, 1%, 0) skewX(-10deg); opacity: 1; }
  100% { transform: translate3d(2px, -0.4%, 0) skewX(-15deg); opacity: 0.78; }
}

@keyframes mlmg-liquid-panel-light {
  0%, 38% { transform: translateX(-20%) rotate(24deg); opacity: 0; }
  52% { opacity: 0.65; }
  70%, 100% { transform: translateX(190%) rotate(24deg); opacity: 0; }
}

@media (min-width: 960px) {
  .mlmg-card-brand-logo {
    width: 310px;
    height: 103px;
  }

  .mlmg-card-hero {
    min-height: 704px;
    padding: 28px 34px;
  }

  .mlmg-card-person {
    width: 100%;
    max-width: 445px;
    margin: auto;
    padding: 22px;
    grid-template-columns: 142px minmax(0, 1fr);
    gap: 22px;
  }

  .mlmg-card-avatar {
    width: 142px;
  }

  .mlmg-card-main {
    padding-top: 30px;
  }

  .is-detail-page .mlmg-card-hero.is-compact {
    min-height: 188px;
    padding: 24px 36px;
  }

  .is-detail-page .mlmg-card-hero.is-compact .mlmg-card-person {
    max-width: 760px;
    margin: 15px auto 0;
    padding: 10px 13px;
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .is-detail-page .mlmg-card-hero.is-compact .mlmg-card-avatar {
    width: 72px;
  }
}

@media (max-width: 359px) {
  .mlmg-card-brand-logo {
    width: 224px;
    height: 75px;
  }

  .mlmg-card-hero {
    min-height: 298px;
    padding-inline: 12px;
  }

  .mlmg-card-person {
    margin-top: 20px;
    padding: 11px;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 11px;
  }

  .mlmg-card-avatar {
    width: 88px;
  }

  .mlmg-card-person-copy h1 {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mlmg-card-brand-logo img,
  .mlmg-card-brand-logo::before,
  .mlmg-card-brand-logo::after,
  .mlmg-card-brand-pulse {
    transform: none;
    animation: none !important;
  }

  .mlmg-card-brand-logo img,
  .mlmg-card-brand-logo::before,
  .mlmg-card-brand-logo::after {
    opacity: 1;
  }

  .mlmg-card-brand-pulse {
    opacity: 0;
  }

  .mlmg-card-liquid-scene {
    transform: none;
    transition: none;
  }

  .mlmg-card-liquid-sheet,
  .mlmg-card-liquid-caustic,
  .mlmg-card-liquid-scene::before,
  .mlmg-card-hero::after,
  .mlmg-card-person::before {
    animation: none;
  }
}