/* =============================================================================
   MEI sections · page-level CSS (Fase 4). Load after motion.css.
   Only what the design system leaves to the pages: the visuals of the home and of
   how-it-works taken from drafts/E (attempts, step illustrations, MyMEI window,
   tutor + supervisor diagram), page layouts (page head, single offer, FAQ block,
   prose with contents, related pages, posts), the page rhythm (joined sections,
   components on a different background) and the [TO CONFIRM] marker.
   Rules: only --mei-* tokens, only .mei- classes, only opacity/transform in motion.
   ========================================================================== */

/* ---------- 1. Page rhythm ---------- */
/* a section that continues the previous one (same background): no top padding */
.mei-section--join { padding-top: 0; }
.mei-section--join.mei-section--compact { padding-top: 0; }
/* footer right after a beige section */
.mei-ftr--rule { box-shadow: inset 0 1px 0 var(--mei-beige); }
/* tertiary link that closes a section ("All reviews", "More on how it works") */
.mei-sec-link { margin-top: var(--mei-space-10); }
.mei-section__head--center ~ .mei-sec-link,
.mei-sec-reviews .mei-sec-link,
.mei-sec-compare .mei-sec-link,
.mei-sec-offers .mei-sec-link { display: flex; width: max-content; max-width: 100%; margin-inline: auto; }

/* components that are white on beige keep an edge when the rhythm puts them on white */
.mei-section--light :is(.mei-review, .mei-badge, .mei-cmp-card:not(.mei-cmp-card--mei), .mei-eq__term) { background: var(--mei-beige-4); box-shadow: inset 0 0 0 1px var(--mei-border); }
.mei-section--light .mei-cmp { box-shadow: var(--mei-shadow-1), inset 0 0 0 1px var(--mei-border); }
.mei-section--beige .mei-step { background: var(--mei-white); }
.mei-section--beige .mei-hiw__n { background: var(--mei-white); }
.mei-section--beige .mei-offer { background: var(--mei-white); }
.mei-section--beige .mei-offer--co { background: var(--mei-beige-4); }
.mei-section--beige .mei-callout:not(.mei-callout--navy):not(.mei-callout--coral) { background: var(--mei-white); }

/* note with the coral dot (under the offers) */
.mei-note--dot { margin-top: var(--mei-space-9); text-align: center; font-weight: var(--mei-fw-semibold); color: var(--mei-text-2); }
.mei-note--dot::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--mei-coral); vertical-align: 2px; }

/* ---------- 2. [TO CONFIRM] / [DA CONFERMARE]: visible on purpose ---------- */
.mei-todo {
  padding: .05em .4em; border-radius: 6px; background: var(--mei-soft-bg); color: var(--mei-soft-fg);
  box-shadow: inset 0 0 0 1.5px currentColor; font-size: .9em; font-weight: var(--mei-fw-semibold);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- 3. Page head (inner pages) ---------- */
.mei-pagehead { overflow: hidden; }
.mei-pagehead__in { position: relative; }
.mei-pagehead .mei-h1 { max-width: 16em; }
.mei-pagehead .mei-lead { max-width: 38em; }
.mei-pagehead__doors { margin-top: var(--mei-space-8); }
.mei-pagehead__doors .mei-doors__note { margin-top: var(--mei-space-4); }
.mei-pagehead__meta { margin-top: var(--mei-space-8); gap: 8px; }
.mei-pagehead__meta span { padding: 6px 12px; border-radius: var(--mei-r-pill); background: var(--mei-white); color: var(--mei-text-2); box-shadow: inset 0 0 0 1px var(--mei-border); }
.mei-section--light .mei-pagehead__meta span { background: var(--mei-beige-3); }
/* the weekly-slot motif, quiet, on wide screens */
@media (min-width: 1024px) {
  .mei-pagehead__in::after {
    content: ""; position: absolute; right: var(--mei-gutter); top: 50%; width: 210px; height: 30px; translate: 0 -50%;
    background: radial-gradient(circle at 15px 15px, var(--mei-coral) 9px, transparent 10px) 30px 0 / 30px 30px no-repeat,
                radial-gradient(circle at 15px 15px, var(--mei-beige) 9px, transparent 10px) 0 0 / 30px 30px repeat-x;
    opacity: .9; pointer-events: none;
  }
  .mei-pagehead .mei-h1 { max-width: 13em; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) { .mei-pagehead__in::after { display: none; } }

/* ---------- 4. Problem (home): the crossed-out attempts, from E ---------- */
.mei-problem .mei-h2 { margin-bottom: clamp(40px, 5vw, 64px); }
.mei-tries { display: grid; gap: 12px; margin-bottom: clamp(56px, 7vw, 96px); }
.mei-try { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-radius: var(--mei-r-l); background: var(--mei-navy-2); }
.mei-try__v { font-size: clamp(1.125rem, 1.8vw, 1.375rem); font-weight: var(--mei-fw-semibold); line-height: 1.4; color: var(--mei-on-dark-2); }
.mei-try__v s { text-decoration: none; }
.mei-try__aside { display: block; margin-top: 4px; font-size: var(--mei-fs-body); font-weight: var(--mei-fw-regular); color: var(--mei-on-dark); }
.mei-try__w { position: relative; }
.mei-try__w::after {
  content: ""; position: absolute; left: 0; right: 0; top: 54%; height: 2px; border-radius: 2px; background: var(--mei-coral-soft);
  transform-origin: left; transition: transform var(--mei-dur-s) var(--mei-ease); transition-delay: calc(300ms + var(--mei-wi, 0) * 60ms);
}
.mei-js .mei-try:not(.mei-is-in) .mei-try__w::after { transform: scaleX(0); }
.mei-try__s { flex: none; background: rgba(255, 255, 255, .07); color: var(--mei-on-dark-2); }
.mei-problem .mei-statement { color: var(--mei-on-dark); }
.mei-problem__fix { margin-top: var(--mei-space-6); color: var(--mei-coral-soft); }
@media (max-width: 639.98px) {
  .mei-try { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mei-try__s { order: -1; }
}
@media (min-width: 640px) { .mei-try { padding: 24px 28px; } }

/* ---------- 5. How it works: side column and step illustrations, from E ---------- */
.mei-hiw__side .mei-h2 { margin-bottom: 0; }
.mei-hiw__link { margin-top: var(--mei-space-8); }
.mei-hiw__side .mei-hiw__link { display: inline-flex; }
.mei-step__meta { margin-top: var(--mei-space-5); }
.mei-is-pinned .mei-hiw__frame { background: inherit; }
.mei-section--light .mei-is-pinned .mei-hiw__frame { background: var(--mei-white); }
.mei-section--beige .mei-is-pinned .mei-hiw__frame { background: var(--mei-beige-3); }
.mei-step__viz > div { min-width: 0; }

/* call: avatar, title, language chips */
.mei-viz-call { display: grid; grid-template-columns: auto 1fr; gap: 16px 14px; align-items: center; }
.mei-viz-call__av { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--mei-navy); color: var(--mei-white); font-size: 1.25rem; font-weight: var(--mei-fw-bold); }
.mei-viz-call__t { display: grid; }
.mei-viz-call__t b { font-size: 1.125rem; }
.mei-viz-call__t span { font-size: var(--mei-fs-small); color: var(--mei-navy-4); }
.mei-viz-call__chips { grid-column: 1 / -1; }
.mei-viz-paths { display: grid; gap: 16px; }

/* match: you — Tue 19:00 — your tutor (pair: two people on the left) */
.mei-viz-match { display: grid; grid-template-columns: auto minmax(48px, 1fr) auto; align-items: center; gap: 10px; }
.mei-viz-match__duo { display: flex; }
.mei-viz-match__duo .mei-viz-match__p + .mei-viz-match__p { margin-left: -14px; box-shadow: 0 0 0 3px var(--mei-white); }
.mei-viz-match__p { display: grid; place-items: center; flex: none; width: 72px; height: 72px; padding: 6px; border-radius: 50%; background: var(--mei-navy-tint); font-size: .875rem; font-weight: var(--mei-fw-bold); line-height: 1.15; text-align: center; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
.mei-viz-match--pair .mei-viz-match__p { width: 64px; height: 64px; font-size: .75rem; }
.mei-viz-match__p--c { background: var(--mei-coral-tint); color: var(--mei-coral-ink); }
.mei-viz-match__p--t { background: var(--mei-navy); color: var(--mei-white); }
.mei-viz-match__l { position: relative; display: grid; place-items: center; height: 2px; background: var(--mei-navy-tint-2); }
.mei-viz-match__l b { position: absolute; top: 50%; left: 50%; translate: -50% -50%; padding: 5px 10px; border-radius: var(--mei-r-pill); background: var(--mei-coral); color: var(--mei-white); font-size: .8125rem; white-space: nowrap; }
.mei-viz-match__cap { grid-column: 1 / -1; margin-top: 8px; text-align: center; font-size: var(--mei-fs-small); color: var(--mei-navy-4); }

/* weeks: the same slot, four weeks in a row */
.mei-viz-weeks { display: grid; gap: 8px; }
.mei-viz-weeks li { display: grid; grid-template-columns: 1fr auto 24px; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--mei-r-m); background: var(--mei-beige-4); font-size: var(--mei-fs-small); }
.mei-viz-weeks li span { color: var(--mei-navy-4); font-weight: var(--mei-fw-medium); }
.mei-viz-weeks li .mei-ico { width: 22px; height: 22px; color: var(--mei-navy-3); }
.mei-viz-weeks li.mei-is-now { grid-template-columns: 1fr auto auto; background: var(--mei-navy); color: var(--mei-white); }
.mei-viz-weeks li.mei-is-now span { color: var(--mei-on-dark-2); }
.mei-viz-weeks li em { justify-self: end; padding: 3px 8px; border-radius: var(--mei-r-pill); background: var(--mei-coral); color: var(--mei-white); font-size: .75rem; font-style: normal; font-weight: var(--mei-fw-bold); }

/* cycle: a test every two months */
.mei-viz-cycle__line { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); }
.mei-viz-cycle__line::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 15px; height: 2px; background: var(--mei-navy-tint-2); }
.mei-viz-cycle__line li { position: relative; display: grid; justify-items: center; gap: 10px; font-size: var(--mei-fs-small); font-weight: var(--mei-fw-semibold); }
.mei-viz-cycle__line i { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--mei-navy-tint-2); background: var(--mei-white); }
.mei-viz-cycle__line .mei-is-done i { border-color: var(--mei-navy); background: var(--mei-navy); }
.mei-viz-cycle__line .mei-is-next i { border-color: var(--mei-coral); background: var(--mei-coral); box-shadow: 0 0 0 6px var(--mei-coral-tint); }
.mei-viz-cycle__cap { margin-top: 20px; text-align: center; font-size: var(--mei-fs-small); color: var(--mei-navy-4); }

/* ---------- 6. Comparison: the five answers inside each mobile card ---------- */
.mei-cmp-card__rows { display: grid; gap: 8px; margin-top: var(--mei-space-4); padding-top: var(--mei-space-4); border-top: 1px solid var(--mei-border); }
.mei-cmp-card--mei .mei-cmp-card__rows { border-top-color: rgba(33, 27, 69, .12); }
.mei-cmp-card__row { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: var(--mei-fs-small); line-height: 1.4; color: var(--mei-navy-3); }
.mei-cmp-card__row--yes { color: var(--mei-navy); font-weight: var(--mei-fw-semibold); }
.mei-cmp-card__row .mei-mk { margin-top: -2px; }
.mei-cmp-card--mei .mei-cmp-card__row { color: var(--mei-navy); }
@media (min-width: 640px) and (max-width: 1023.98px) {
  .mei-cmp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mei-cmp-card--mei { grid-column: 1 / -1; }
}

/* ---------- 7. Offers: one format on its own page ---------- */
.mei-offers--2 { max-width: 860px; margin-inline: auto; }
@media (min-width: 1024px) { .mei-offers--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mei-offer-solo { display: grid; gap: var(--mei-space-10); align-items: center; }
.mei-offer-solo__txt .mei-lead { margin-top: var(--mei-space-6); }
.mei-offer-solo .mei-note--dot { text-align: left; }
.mei-offer-solo .mei-offer { max-width: 520px; }
@media (min-width: 1024px) {
  .mei-offer-solo { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 88px; }
  .mei-offer-solo .mei-offer { justify-self: end; width: 100%; }
}

/* ---------- 8. MyMEI, test, tutor + supervisor (the navy block, from E) ---------- */
.mei-mymei { display: grid; gap: 40px; align-items: center; }
.mei-mymei__lead { margin-bottom: var(--mei-space-6); font-size: var(--mei-fs-lead); line-height: var(--mei-lh-lead); color: var(--mei-text-2); }
.mei-mymei__txt .mei-ticks > li { color: var(--mei-text); }
.mei-ticks--cols { column-gap: var(--mei-gap); }
@media (min-width: 1024px) {
  .mei-mymei { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
  .mei-mymei--text { grid-template-columns: minmax(0, 1fr); max-width: 960px; margin-inline: auto; }
  .mei-ticks--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mei-app { margin: 0; text-align: center; }
.mei-app__win { overflow: hidden; border-radius: var(--mei-r-xl); background: var(--mei-white); color: var(--mei-navy); box-shadow: var(--mei-shadow-dark); text-align: left; }
.mei-app__bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--mei-beige-3); font-size: var(--mei-fs-small); }
.mei-app__bar b { font-weight: var(--mei-fw-black); letter-spacing: -.01em; }
.mei-app__bar span { color: var(--mei-navy-4); font-weight: var(--mei-fw-medium); }
.mei-app__next { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin: 16px; padding: 20px; border-radius: var(--mei-r-l); background: var(--mei-navy); color: var(--mei-white); }
.mei-app__next > div { display: grid; }
.mei-app__next :is(.mei-app__k, .mei-app__s) { color: var(--mei-on-dark-2); }
.mei-app__k { font-size: var(--mei-fs-xs); font-weight: var(--mei-fw-semibold); color: var(--mei-navy-4); }
.mei-app__big { font-size: 1.75rem; font-weight: var(--mei-fw-bold); letter-spacing: -.02em; line-height: 1.2; }
.mei-app__s { font-size: var(--mei-fs-xs); color: var(--mei-navy-4); }
.mei-app__btns { display: flex; gap: 8px; }
.mei-app__btns span { padding: 8px 14px; border-radius: 10px; background: rgba(255, 255, 255, .12); font-size: var(--mei-fs-xs); font-weight: var(--mei-fw-bold); }
.mei-app__btns span:last-child { background: var(--mei-coral); }
.mei-app__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 10px; padding: 0 16px 16px; }
.mei-app__tile { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 14px 16px; border: 1px solid var(--mei-border); border-radius: var(--mei-r-m); background: var(--mei-beige-4); }
.mei-app__tile b { font-size: 1.625rem; font-weight: var(--mei-fw-bold); letter-spacing: -.02em; line-height: 1.15; }
.mei-app__tile b.mei-app__b-s { font-size: 1.125rem; line-height: 1.5; }
.mei-app__tile--wide { grid-column: span 2; }
.mei-app__hist { display: grid; gap: 6px; margin-top: 8px; }
.mei-app__hist li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--mei-white); font-size: var(--mei-fs-xs); font-weight: var(--mei-fw-semibold); }
.mei-app__hist em { font-style: normal; font-weight: var(--mei-fw-medium); color: var(--mei-navy-4); }
.mei-app__bars { display: grid; gap: 8px; margin-top: 10px; }
.mei-app__bars > span { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; }
.mei-app__bars em { overflow: hidden; font-size: .75rem; font-style: normal; font-weight: var(--mei-fw-semibold); color: var(--mei-navy-4); text-overflow: ellipsis; white-space: nowrap; }
.mei-app__bars i { position: relative; display: block; height: 8px; overflow: hidden; border-radius: 4px; background: var(--mei-beige-2); }
.mei-app__bars i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--mei-navy); transform: scaleX(var(--v)); transform-origin: left; transition: transform var(--mei-dur-l) var(--mei-ease) 300ms; }
.mei-js .mei-app:not(.mei-is-in) .mei-app__bars i::after { transform: scaleX(0); }
@media (min-width: 640px) {
  .mei-app__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mei-app__tile--wide:last-child { grid-column: span 3; }
}

/* the two panels under MyMEI */
.mei-pair { display: grid; gap: 16px; margin-top: var(--mei-block-gap); }
.mei-panel { margin: 0; }
.mei-panel .mei-card__text { margin-bottom: 28px; }
.mei-panel .mei-card__text + * { margin-top: 0; }
.mei-panel--org .mei-org { margin-block: auto; }
.mei-sec-panel .mei-panel { max-width: 640px; margin-inline: auto; }
@media (min-width: 1024px) { .mei-pair { grid-template-columns: 1fr 1fr; gap: 24px; } }

.mei-org { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.mei-org::before { content: ""; position: absolute; left: 16%; right: 16%; top: 38px; height: 2px; background: var(--mei-border-strong); }
.mei-org li { position: relative; display: grid; justify-items: center; gap: 10px; font-size: var(--mei-fs-xs); font-weight: var(--mei-fw-semibold); color: var(--mei-text-3); transition: opacity var(--mei-dur-m) var(--mei-ease), transform var(--mei-dur-m) var(--mei-ease); }
.mei-org li:nth-child(2) { transition-delay: 150ms; }
.mei-org li:nth-child(3) { transition-delay: 300ms; }
.mei-js [data-mei-inview]:not(.mei-is-in) .mei-org li { opacity: 0; transform: translateY(10px); }
.mei-org__c { display: grid; place-items: center; width: 76px; height: 76px; padding: 8px; border: 2px solid rgba(255, 255, 255, .3); border-radius: 50%; background: var(--mei-navy); color: var(--mei-white); font-size: .875rem; font-weight: var(--mei-fw-bold); line-height: 1.15; }
@media (max-width: 639.98px) { .mei-org__c { width: 88px; height: 88px; padding: 4px; font-size: .75rem; hyphens: auto; } .mei-org::before { top: 44px; } }
.mei-org__c--t { border-color: var(--mei-coral); background: var(--mei-coral); }
.mei-org__c--s { border-color: var(--mei-white); background: var(--mei-white); color: var(--mei-navy); }
@media (min-width: 1024px) {
  .mei-org__c { width: 92px; height: 92px; }
  .mei-org::before { top: 46px; }
}
.mei-sec-features .mei-nums { margin-top: clamp(64px, 8vw, 112px); }
.mei-sec-numbers .mei-nums { padding-top: 0; border-top: 0; }
@media (min-width: 1024px) { .mei-nums__grid[style*="--mei-n"] { grid-template-columns: repeat(var(--mei-n), minmax(0, 1fr)); } }

/* ---------- 9. Reviews, person, fit ---------- */
.mei-reviews--2 { max-width: 960px; margin-inline: auto; }
@media (min-width: 1024px) { .mei-reviews--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mei-reviews--1 { max-width: 720px; margin-inline: auto; }
@media (min-width: 1024px) { .mei-reviews--1 { grid-template-columns: minmax(0, 1fr); } }
.mei-reviews__note { margin-top: var(--mei-space-8); }
.mei-person__h { margin-bottom: var(--mei-space-7); }
.mei-person__more { margin-top: var(--mei-space-6); }
.mei-sec-fit > .mei-wrap > .mei-sec-link { display: flex; width: max-content; margin-inline: auto; }

/* ---------- 10. Close: the two doors ---------- */
.mei-close__h { margin-bottom: 12px; }
.mei-close__call .mei-card__text { margin-bottom: 24px; }
.mei-close__call .mei-card__text + * { margin-top: 0; }
.mei-close__facts { margin-bottom: 32px; }
/* contact page: the booking calendar (Simply Schedule Appointments) arrives here in Fase 7 */
.mei-close__booking { display: grid; flex: 1; place-items: center; min-height: 140px; margin: 0 0 20px; padding: 16px; border: 1.5px dashed var(--mei-border-strong); border-radius: var(--mei-r-l); background: var(--mei-beige-4); text-align: center; }
.mei-close__booking .mei-ph-label { margin: 0; }
.mei-close__call > .mei-btn { margin-top: auto; padding-inline: 18px; }
.mei-close__form { margin-top: 12px; }
.mei-close__privacy { margin-top: 4px; }
.mei-close__privacy a { color: inherit; }
.mei-close__note { margin-top: var(--mei-space-9); }
.mei-form__out:empty { display: none; }

/* ---------- 11. Call-to-action band ---------- */
.mei-cta__in { display: grid; justify-items: center; text-align: center; }
.mei-cta .mei-h2 { max-width: 16em; }
.mei-cta .mei-lead { margin-top: var(--mei-space-5); }
.mei-cta .mei-doors { margin-top: var(--mei-space-8); justify-content: center; }
.mei-cta .mei-doors__note { margin-top: var(--mei-space-4); }

/* ---------- 12. FAQ block: title on the left, questions on the right ---------- */
.mei-faq-block { display: grid; gap: var(--mei-space-8); }
.mei-faq-block .mei-faq { max-width: none; }
@media (min-width: 1024px) {
  .mei-faq-block { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; align-items: start; }
  .mei-faq-block__head { position: sticky; top: calc(var(--mei-hdr-h) + 32px); }
}

/* ---------- 13. Prose with "on this page" ---------- */
.mei-sec-prose .mei-section__head { margin-bottom: var(--mei-space-10); }
.mei-prose-layout { display: grid; gap: var(--mei-space-8); }
.mei-prose-layout__aside { display: none; }
.mei-toc__h { margin-bottom: 12px; font-size: var(--mei-fs-small); font-weight: var(--mei-fw-bold); color: var(--mei-text-3); }
.mei-toc ol { display: grid; gap: 2px; border-left: 2px solid var(--mei-border); }
.mei-toc a { display: block; margin-left: -2px; padding: 6px 0 6px 16px; border-left: 2px solid transparent; font-size: var(--mei-fs-small); font-weight: var(--mei-fw-semibold); line-height: 1.4; color: var(--mei-text-2); text-decoration: none; }
.mei-toc a:hover { border-left-color: var(--mei-coral); color: var(--mei-text); }
@media (min-width: 1024px) {
  .mei-prose-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; align-items: start; }
  .mei-prose-layout__aside { display: block; position: sticky; top: calc(var(--mei-hdr-h) + 32px); }
}

/* ---------- 14. Related pages ---------- */
.mei-sec-links .mei-section__head { margin-bottom: var(--mei-space-9); }
.mei-relcards { display: grid; gap: 16px; }
.mei-relcards > li { display: flex; min-width: 0; }
.mei-relcard { flex: 1; text-decoration: none; }
.mei-relcard__t { font-size: 1.25rem; }
.mei-relcard .mei-card__text + * { margin-top: 0; }
.mei-relcard__ico { width: 24px; height: 24px; margin-top: auto; padding-top: var(--mei-space-5); box-sizing: content-box; color: var(--mei-text-accent); transition: transform var(--mei-dur-s) var(--mei-ease); }
.mei-relcard:hover .mei-relcard__ico { transform: translateX(4px); }
@media (min-width: 1024px) { .mei-relcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* ---------- 15. Blog: post cards (sample in the prototype) ---------- */
.mei-posts__sample { margin-bottom: var(--mei-space-9); }
.mei-posts { display: grid; gap: 16px; }
.mei-post { overflow: hidden; }
.mei-post__art { display: block; width: calc(100% + 48px); max-width: none; height: auto; margin: -28px -24px 20px; }
.mei-post__sample { margin: 0 0 12px; align-self: flex-start; }
.mei-post__t a { text-decoration: none; }
.mei-post__t a:hover { text-decoration: underline; text-decoration-color: var(--mei-coral); text-underline-offset: 4px; }
.mei-post__meta { margin-top: auto; padding-top: var(--mei-space-5); }
@media (min-width: 1024px) {
  .mei-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .mei-post__art { width: calc(100% + 80px); margin: -40px -40px 24px; }
}

/* ---------- 16. Legal pages still without text ---------- */
.mei-legal__todo { max-width: 720px; }

/* ---------- 17. Reduced motion: page-level hidden states shown ---------- */
@media (prefers-reduced-motion: reduce) {
  .mei-js .mei-try .mei-try__w::after, .mei-js [data-mei-inview] .mei-org li { opacity: 1 !important; transform: none !important; }
  .mei-js .mei-app .mei-app__bars i::after { transform: scaleX(var(--v)) !important; }
  .mei-relcard:hover .mei-relcard__ico { transform: none; }
}

/* ---------- 18. Hero: the slot caption sits below the stacked cards ---------- */
.mei-hero .mei-slot > .mei-ph-label { position: relative; z-index: var(--mei-z-raised); margin-top: 32px; }
@media (min-width: 1024px) { .mei-hero .mei-slot > .mei-ph-label { margin-top: 40px; } }

/* ---------- 19. Tutors (About): anonymous written profiles with an audio clip ---------- */
.mei-tutors { display: grid; gap: 16px; }
.mei-tutor { display: flex; flex-direction: column; gap: var(--mei-space-5); }
.mei-section--light .mei-tutor { background: var(--mei-beige-4); box-shadow: inset 0 0 0 1px var(--mei-border); }
.mei-section--light .mei-tutor__audio--ph { background: var(--mei-white); }
.mei-tutor__id { display: flex; align-items: center; gap: var(--mei-space-4); }
.mei-tutor__av { display: inline-grid; flex: none; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--mei-beige); color: var(--mei-navy); font-size: 1.25rem; font-weight: var(--mei-fw-black); }
.mei-tutor:nth-child(3n+2) .mei-tutor__av { background: var(--mei-coral-tint); color: var(--mei-coral-ink); }
.mei-tutor:nth-child(3n+3) .mei-tutor__av { background: var(--mei-navy-tint-2); }
.mei-tutor .mei-tutor__av--img { width: 88px; height: 88px; overflow: hidden; background: var(--mei-beige-2); box-shadow: 0 0 0 3px var(--mei-white), 0 0 0 4px var(--mei-border); }
.mei-tutor__av--img picture, .mei-tutor__av--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mei-tutor__t { margin: 0; }
.mei-tutor--ribbon { position: relative; overflow: hidden; }
.mei-tutor--ribbon .mei-tutor__id { padding-right: 44px; }
.mei-tutor__ribbon { position: absolute; top: 22px; right: -42px; width: 160px; padding: 6px 0; transform: rotate(45deg); background: var(--mei-coral); color: var(--mei-white); font-size: .75rem; font-weight: var(--mei-fw-bold); letter-spacing: .04em; line-height: 1.2; text-align: center; text-transform: uppercase; box-shadow: 0 2px 6px rgba(33, 27, 69, .18); pointer-events: none; }
.mei-tutor__years { margin: 2px 0 0; font-size: var(--mei-fs-small); font-weight: var(--mei-fw-semibold); color: var(--mei-text-3); }
.mei-tutor__focus { margin: 0; }
.mei-tutor__text { margin: 0; }
.mei-tutor__audio { margin: auto 0 0; padding-top: var(--mei-space-2); }
.mei-tutor__cap { margin-bottom: 8px; font-size: var(--mei-fs-small); font-weight: var(--mei-fw-semibold); color: var(--mei-text-2); }
.mei-tutor__audio audio { display: block; width: 100%; height: 44px; }
.mei-tutor__audio--ph { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border: 1.5px dashed var(--mei-border-strong); border-radius: var(--mei-r-m); background: var(--mei-beige-4); }
.mei-tutor__audio--ph .mei-ph-label { margin: 0; }
.mei-tutor__wave { display: inline-flex; align-items: center; gap: 3px; height: 20px; }
.mei-tutor__wave i { display: block; width: 3px; border-radius: 2px; background: var(--mei-navy-5); }
.mei-tutor__wave i:nth-child(1) { height: 8px; } .mei-tutor__wave i:nth-child(2) { height: 16px; } .mei-tutor__wave i:nth-child(3) { height: 20px; background: var(--mei-coral); } .mei-tutor__wave i:nth-child(4) { height: 12px; } .mei-tutor__wave i:nth-child(5) { height: 6px; }
.mei-tutors__note { margin-top: var(--mei-space-9); }
@media (min-width: 768px) { .mei-tutors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1024px) { .mei-tutors:not(.mei-tutors--2) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 20. WordPress: blog index, article, search, pagination, blocks in posts ---------- */
.mei-post__img { margin: -28px -24px 20px; }
.mei-post__img img, .mei-post__photo { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
@media (min-width: 1024px) { .mei-post__img { margin: -40px -40px 24px; } }
.mei-posts__empty { color: var(--mei-text-2); }
.mei-posts__search { max-width: 560px; margin-top: var(--mei-space-10); }
.mei-pager { margin-top: var(--mei-space-10); }
.mei-pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mei-pager :is(a, span).page-numbers { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: var(--mei-r-m); background: var(--mei-surface-card); color: var(--mei-text); font-weight: var(--mei-fw-semibold); text-decoration: none; transition: background-color var(--mei-dur-s) var(--mei-ease); }
.mei-pager a.page-numbers:hover { background: var(--mei-fill); }
.mei-pager .page-numbers.current { background: var(--mei-navy); color: #fff; }
.mei-pager .page-numbers.dots { background: transparent; }
.mei-pager__ico { width: 18px; height: 18px; }
.mei-pager__ico--prev { transform: scaleX(-1); }
.mei-search__row { display: flex; gap: 8px; margin-top: 8px; }
.mei-search__row .mei-input { flex: 1; min-width: 0; }
.mei-article { padding-top: calc(var(--mei-hdr-h) + var(--mei-space-10)); padding-bottom: var(--mei-space-13); }
.mei-article .mei-crumbs + * { margin-top: 28px; }
.mei-article__cat a { color: inherit; text-decoration: none; }
.mei-article__title { margin-top: 12px; }
.mei-article__meta { margin-top: var(--mei-space-5); }
.mei-article__img { margin: var(--mei-space-9) 0 0; }
.mei-article__img img { display: block; width: 100%; height: auto; border-radius: var(--mei-r-xl); }
.mei-article__body { margin: var(--mei-space-10) auto 0; }
.mei-relcards--2 { max-width: 860px; }
@media (min-width: 1024px) { .mei-relcards.mei-relcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* a MEI block inside an article is a whole section, full width, with the page's type scale */
.mei-prose > .mei-block { margin-block: 2.5em; font-size: var(--mei-fs-body); line-height: var(--mei-lh-body); }
.mei-prose > .mei-block .mei-section { padding-block: var(--mei-space-13); }

/* ==========================================================================
   Blog article: CTA inside the text column, image lightbox (Fase 6)
   ========================================================================== */
.mei-post-cta {
  margin-top: clamp(48px, 6vw, 72px);
  padding: clamp(28px, 4vw, 40px);
  border-radius: var(--mei-r-xl);
  background: var(--mei-navy);
}
.mei-post-cta__t { margin: 0 0 12px; }
.mei-post-cta__text { margin: 0 0 24px; color: var(--mei-on-dark-2); }
.mei-post-cta .mei-doors { flex-wrap: wrap; }
.mei-post-cta .mei-doors__note { margin-top: 16px; }

/* images that open large */
.mei-zoomable { cursor: zoom-in; }
.mei-zoomable:focus-visible { outline: 3px solid var(--mei-coral); outline-offset: 4px; }

.mei-lb {
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: clamp(16px, 4vw, 48px); border: 0;
  background: transparent;
  display: grid; place-items: center;
  cursor: zoom-out;
}
.mei-lb:not([open]) { display: none; }
.mei-lb::backdrop { background: rgba(33, 27, 69, .88); }
.mei-lb__img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border-radius: var(--mei-r-l);
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.mei-lb__close {
  position: fixed; top: 16px; right: 16px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #fff; color: var(--mei-navy);
  font: 400 28px/1 var(--mei-font-sans); cursor: pointer;
}
.mei-lb__close:focus-visible { outline: 3px solid var(--mei-coral); outline-offset: 3px; }
.mei-lb-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .mei-lb[open] .mei-lb__img { animation: mei-lb-in var(--mei-dur-m, 400ms) var(--mei-ease, cubic-bezier(.2,.7,.2,1)); }
  .mei-lb[open]::backdrop { animation: mei-lb-fade var(--mei-dur-m, 400ms) var(--mei-ease, cubic-bezier(.2,.7,.2,1)); }
}
@keyframes mei-lb-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mei-lb-fade { from { opacity: 0; } to { opacity: 1; } }

/* Old Spectra boxes left in imported articles ("📌 Did you know?"): a callout inside the
   text column, never full width. The Spectra CTA containers are removed by mei-migrate. */
.mei-prose > .wp-block-uagb-container.uagb-is-root-container {
  width: auto; max-width: none; margin: 40px 0;
  padding: clamp(24px, 4vw, 36px);
  background: var(--mei-beige-3);
  border-radius: var(--mei-r-xl);
}
.mei-prose .wp-block-uagb-container :first-child { margin-top: 0; }
.mei-prose .wp-block-uagb-container :last-child { margin-bottom: 0; }

/* ---------- Mini-form through MBForms (inc/forms.php; plugin CSS off: everything here) ----------
   The fields carry our classes (mei-field, mei-field__l, mei-input) from forms/mei-message.json;
   these rules cover the plugin's own structure: fields container, help, errors, messages, honeypot, states. */
.mei-close__msg .mbf-form-wrap { margin-top: 12px; }
.mbf-form__fields { display: grid; gap: 16px; }
.mbf-field__help { margin: 0; font-size: var(--mei-fs-xs); color: var(--mei-text-3); }
.mbf-field__required { margin-left: .2em; color: var(--mei-text-3); font-weight: var(--mei-fw-medium); }
.mbf-field__error { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--mei-fs-xs); font-weight: var(--mei-fw-semibold); color: var(--mei-text-error); }
.mbf-field__error[hidden], .mbf-field--hidden, .mbf-field[hidden] { display: none; }
.mbf-field--invalid .mei-input { border-color: var(--mei-text-error); border-width: 2px; }
.mbf-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mbf-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.mbf-form__messages:empty { display: none; }
.mbf-form__messages { margin-bottom: 16px; padding: 14px 16px; border-radius: var(--mei-r-m); font-size: var(--mei-fs-small); font-weight: var(--mei-fw-semibold); outline: none; }
.mbf-form__messages--error { color: var(--mei-text-error); background: var(--mei-soft-bg); }
.mbf-form__messages--success { color: var(--mei-text); background: var(--mei-fill); font-size: var(--mei-fs-body); }
.mbf-form--sending .mbf-form__submit { opacity: .7; cursor: progress; }
.mbf-form--done .mbf-form__fields, .mbf-form--done .mbf-form__actions { display: none; }
/* under the form: email first ("Or write to hello@…"), then WhatsApp, smaller, as the second "or" */
.mei-close__mail { margin-top: 20px; color: var(--mei-text-2); overflow-wrap: anywhere; }
.mei-close__mail .mei-link { font-size: min(1rem, 3.9vw); }
.mei-close__wa { margin-top: 10px; font-size: var(--mei-fs-small); }
.mei-close__wa .mei-link { font-size: inherit; font-weight: var(--mei-fw-medium); color: var(--mei-text-2); }
.mei-close__wa .mei-link__ico { width: 18px; height: 18px; }
.mei-close__wa .mei-link::after { left: 26px; }
/* "Want to add something?": a link-style button that opens the optional message */
.mei-more { justify-self: start; margin: -4px 0 0; padding: 2px 0; border: 0; background: none; font: inherit; font-size: var(--mei-fs-small); cursor: pointer; }
.mei-more::after { right: 0; }

/* ---------- Cookie banner (inc/consent.php) ----------
   Shown when <html> has .mei-cc-ask (set in <head> before paint, so no flash and no layout shift).
   Not modal: the page stays usable. Accept and Reject have the same weight. */
.mei-cc { display: none; }
.mei-cc-ask .mei-cc {
  display: block; position: fixed; z-index: var(--mei-z-overlay); left: 12px; right: 12px; bottom: 12px;
  max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain;
  padding: 20px 20px 18px; border: 1px solid var(--mei-border); border-radius: var(--mei-r-l);
  background: var(--mei-white); color: var(--mei-navy); box-shadow: var(--mei-shadow-2);
  --mei-text: var(--mei-navy); --mei-text-2: var(--mei-navy-3); --mei-text-3: var(--mei-navy-4);
  --mei-focus: var(--mei-coral); --mei-focus-ring: rgba(216, 51, 77, .2); --mei-fill: var(--mei-navy-tint); --mei-border: #e8e5da;
}
@media (min-width: 640px) { .mei-cc-ask .mei-cc { left: 24px; right: auto; bottom: 24px; width: min(440px, calc(100vw - 48px)); padding: 24px; } }
.mei-cc__t { margin: 0 40px 8px 0; font-size: var(--mei-fs-h4); font-weight: var(--mei-fw-bold); line-height: var(--mei-lh-snug); }
.mei-cc__x { margin: 0; font-size: var(--mei-fs-small); line-height: 1.55; color: var(--mei-navy-3); }
.mei-cc__x a { color: inherit; text-decoration-color: var(--mei-coral); text-underline-offset: 3px; }
.mei-cc__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--mei-navy); cursor: pointer; }
.mei-cc__close:hover { background: var(--mei-fill); }
.mei-cc__close:focus-visible { outline: 3px solid var(--mei-focus); outline-offset: 1px; }
.mei-cc__close-ico { width: 20px; height: 20px; transform: rotate(45deg); }
.mei-cc__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mei-cc__acts .mei-btn { flex: 1 1 auto; justify-content: center; }
.mei-cc__acts .mei-btn[hidden] { display: none; }
.mei-cc__panel { display: grid; gap: 4px; margin-top: 14px; }
.mei-cc__panel[hidden] { display: none; }
.mei-cc__cat { padding: 12px 0; border-top: 1px solid var(--mei-border); }
.mei-cc__cat-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mei-cc__lbl { font-size: var(--mei-fs-small); font-weight: var(--mei-fw-semibold); cursor: pointer; }
.mei-cc__d { margin: 4px 0 0; font-size: var(--mei-fs-xs); line-height: 1.5; color: var(--mei-navy-3); }
/* switch: a native checkbox with role="switch" */
.mei-cc__sw {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0;
  border: 2px solid var(--mei-navy-5); border-radius: var(--mei-r-pill); background: var(--mei-white); cursor: pointer;
  transition: background-color var(--mei-dur-s) var(--mei-ease), border-color var(--mei-dur-s) var(--mei-ease);
}
.mei-cc__sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--mei-navy-4);
  transition: transform var(--mei-dur-s) var(--mei-ease), background-color var(--mei-dur-s) var(--mei-ease);
}
.mei-cc__sw:checked { border-color: var(--mei-navy); background: var(--mei-navy); }
.mei-cc__sw:checked::after { transform: translateX(18px); background: var(--mei-white); }
.mei-cc__sw:disabled { opacity: .55; cursor: not-allowed; }
.mei-cc__sw:focus-visible { outline: 3px solid var(--mei-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mei-cc__sw, .mei-cc__sw::after { transition: none; } }
/* footer: "Cookie settings" looks like the legal links next to it */
.mei-ftr__cc { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mei-ftr__cc:hover { text-decoration-color: var(--mei-coral); }

/* ---------- calc: monthly estimate (Pricing) ---------- */
.mei-calc { display: grid; gap: 24px; padding: var(--mei-card-pad); border: 1px solid var(--mei-card-border); border-radius: var(--mei-r-xl); background: var(--mei-white); box-shadow: var(--mei-shadow-1); }
.mei-calc__in { display: grid; gap: 24px; align-content: start; }
.mei-calc__f { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.mei-calc__f > legend { margin-bottom: 10px; padding: 0; }
/* segmented choice: native radios */
.mei-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.mei-seg__o { position: relative; }
.mei-seg__o input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mei-seg__o span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1.5px solid var(--mei-border-input); border-radius: var(--mei-r-pill); font-size: var(--mei-fs-small); font-weight: var(--mei-fw-semibold); color: var(--mei-text-2); transition: background-color var(--mei-dur-s) var(--mei-ease), border-color var(--mei-dur-s) var(--mei-ease), color var(--mei-dur-s) var(--mei-ease); }
.mei-seg__o:hover span { border-color: var(--mei-text-2); }
.mei-seg__o input:checked + span { border-color: var(--mei-navy); background: var(--mei-navy); color: var(--mei-white); }
.mei-seg__o input:focus-visible + span { outline: 3px solid var(--mei-focus); outline-offset: 2px; }
/* stepper: − [n] + */
.mei-stepper { display: inline-grid; grid-template-columns: 48px 72px 48px; align-items: center; gap: 8px; }
.mei-stepper__b { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--mei-border-input); border-radius: 50%; background: var(--mei-white); color: var(--mei-navy); cursor: pointer; }
.mei-stepper__b:hover { border-color: var(--mei-navy); }
.mei-stepper__b:disabled { opacity: .4; cursor: not-allowed; }
.mei-stepper__b:focus-visible { outline: 3px solid var(--mei-focus); outline-offset: 2px; }
.mei-stepper__b .mei-ico { width: 18px; height: 18px; }
.mei-stepper__v { min-height: 48px; padding: 8px; text-align: center; font-weight: var(--mei-fw-bold); -moz-appearance: textfield; }
.mei-stepper__v::-webkit-outer-spin-button, .mei-stepper__v::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* result */
.mei-calc__out { display: grid; gap: 8px; align-content: center; padding: 24px; border-radius: var(--mei-r-l); background: var(--mei-beige-4); }
.mei-calc__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.mei-calc__num { font-size: var(--mei-fs-price); font-weight: var(--mei-fw-black); line-height: 1; letter-spacing: -.03em; color: var(--mei-navy); font-variant-numeric: tabular-nums; }
.mei-calc__unit { font-weight: var(--mei-fw-semibold); color: var(--mei-navy-3); }
.mei-calc__sum, .mei-calc__pair { margin: 0; font-weight: var(--mei-fw-semibold); color: var(--mei-navy); }
.mei-calc__five { margin: 4px 0 0; font-size: var(--mei-fs-small); color: var(--mei-navy-3); }
.mei-calc__note { margin-top: 20px; max-width: 46em; }
@media (min-width: 1024px) {
  .mei-calc { grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
}
/* the live calendar (mei-booking) replaces the placeholder: no dashed frame */
.mei-close__booking--live { display: block; min-height: 0; margin: 4px 0 0; padding: 0; border: 0; border-radius: 0; background: none; text-align: left; }
/* "Русский" among the call languages: outside Russian pages it uses the system font, so the Cyrillic
   webfont files (unicode-range) are not downloaded for seven letters. */
html:not(:lang(ru)) .mei-chip:lang(ru) { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* ---------- apply: the tutor application (MBForms, grid layout) ---------- */
.mei-apply { max-width: 820px; }
.mei-apply__intro { margin: 0 0 var(--mei-block-gap); color: var(--mei-text-2); }
.mei-apply .mbf-form--grid .mbf-form__fields { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 24px; }
.mei-apply .mbf-form--grid .mbf-field { grid-column: 1 / -1; display: grid; gap: 8px; align-content: start; }
@media (min-width: 640px) {
  .mei-apply .mbf-field--width-half { grid-column: span 3; }
  .mei-apply .mbf-field--width-third { grid-column: span 2; }
}
.mei-apply__h { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--mei-border); font-size: var(--mei-fs-h4, 1.25rem); }
.mei-apply .mbf-field--html:first-child .mei-apply__h { margin-top: 0; padding-top: 0; border-top: 0; }
.mei-apply__note { margin: 0; padding: 12px 16px; border-radius: var(--mei-r-m); background: var(--mei-soft-bg); color: var(--mei-text-error); font-size: var(--mei-fs-small); font-weight: var(--mei-fw-semibold); }
.mei-apply .mbf-field__fieldset { display: grid; gap: 10px; }
.mei-apply .mbf-field__choices { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.mei-apply .mbf-field--checkbox_group .mbf-field__choices { display: grid; gap: 10px; }
.mei-apply .mbf-field__choice { display: flex; align-items: center; gap: 10px; }
.mei-apply .mbf-field__choice-label { font-weight: var(--mei-fw-medium); cursor: pointer; }
.mei-apply .mbf-field__choice input {
  appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--mei-border-strong, var(--mei-text-3)); background: var(--mei-input-bg); cursor: pointer;
  transition: border-color var(--mei-dur-fast, .2s) var(--mei-ease, ease), background-color var(--mei-dur-fast, .2s) var(--mei-ease, ease);
}
.mei-apply .mbf-field__choice input[type="checkbox"] { border-radius: 6px; }
.mei-apply .mbf-field__choice input[type="radio"] { border-radius: 50%; }
.mei-apply .mbf-field__choice input:hover { border-color: var(--mei-text-2); }
.mei-apply .mbf-field__choice input[type="checkbox"]:checked { border-color: var(--mei-coral); background: var(--mei-coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8'/%3E%3C/svg%3E") center / 18px no-repeat; }
.mei-apply .mbf-field__choice input[type="radio"]:checked { border-color: var(--mei-coral); background: var(--mei-coral); box-shadow: inset 0 0 0 4px var(--mei-input-bg); }
.mei-apply .mbf-field__choice input:focus-visible { outline: 3px solid var(--mei-focus); outline-offset: 2px; }
.mei-apply .mbf-field--consent { grid-template-columns: auto 1fr; align-items: start; }
.mei-apply .mbf-field--consent .mbf-field__choice { order: -1; padding-top: 2px; }
.mei-apply .mbf-field--consent .mbf-field__label { font-weight: var(--mei-fw-medium); font-size: var(--mei-fs-small); }
.mei-apply .mbf-field--consent .mbf-field__error { grid-column: 1 / -1; }
.mei-apply .mbf-field__input--file { padding: 10px; }
.mei-apply .mbf-field--invalid .mei-textarea, .mei-apply .mbf-field--invalid .mei-select { border-color: var(--mei-text-error); border-width: 2px; }
.mei-apply__static { padding: 20px 24px; border: 1.5px dashed var(--mei-border); border-radius: var(--mei-r-m); color: var(--mei-text-2); }

/* ---------- 12. Main menu: one level of submenu (For companies → the course pages) ---------- */
.mei-nav__has-sub { position: relative; display: flex; align-items: center; gap: 2px; }
.mei-nav__more { display: grid; place-items: center; width: 22px; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--mei-navy); cursor: pointer; }
.mei-nav__more .mei-ico { width: 16px; height: 16px; transform: rotate(90deg); transition: transform var(--mei-dur-fast, .2s) var(--mei-ease); }
.mei-nav__more[aria-expanded="true"] .mei-ico, .mei-nav__has-sub:hover .mei-nav__more .mei-ico { transform: rotate(-90deg); }
.mei-nav .mei-nav__sub {
  position: absolute; top: calc(100% + 8px); left: -12px; z-index: 5; display: grid; gap: 2px; min-width: 260px; padding: 10px; border: 1px solid var(--mei-border);
  border-radius: var(--mei-r-l); background: var(--mei-white); box-shadow: var(--mei-shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--mei-dur-fast, .2s) var(--mei-ease), transform var(--mei-dur-fast, .2s) var(--mei-ease), visibility 0s linear var(--mei-dur-fast, .2s);
}
.mei-nav__has-sub:hover .mei-nav__sub, .mei-nav__has-sub:focus-within .mei-nav__sub, .mei-nav__has-sub.mei-is-open .mei-nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mei-nav__has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } /* keeps the hover while the pointer crosses the gap */
.mei-nav__sub li { border: 0; }
.mei-nav__sub a { padding: 9px 12px; border-radius: var(--mei-r-m); white-space: normal; }
.mei-nav__sub a::after { display: none; }
.mei-nav__sub a:hover, .mei-nav__sub a:focus-visible { background: var(--mei-navy-tint); }
.mei-nav__sub a[aria-current="page"] { color: var(--mei-coral-ink); }
/* the mobile panel: the sub-pages indented under their parent, always visible */
.mei-mnav .mei-nav__has-sub { display: block; }
.mei-mnav .mei-nav__more { display: none; }
.mei-mnav .mei-nav__sub, .mei-mnav .mei-nav .mei-nav__sub { position: static; display: grid; gap: 0; min-width: 0; padding: 0 0 8px 20px; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
.mei-mnav .mei-nav__sub a { padding: 8px 0; font-size: 1.0625rem; font-weight: var(--mei-fw-semibold); color: var(--mei-navy-3); }
.mei-mnav .mei-nav__sub a[aria-current="page"] { color: var(--mei-coral-ink); }
.mei-mnav .mei-nav__sub-self { display: none; } /* the overview entry repeats the parent link, already in the panel */
.mei-nav .mei-nav__sub-self a { font-weight: var(--mei-fw-bold); }
.mei-nav .mei-nav__sub-self { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--mei-border); }

/* ---------- 13. Corporate workshops: formats + group calculator ---------- */
.mei-ws { display: grid; gap: var(--mei-gap); }
.mei-ws__formats { display: grid; gap: 16px; margin: 0; padding: 0; border: 0; }
.mei-ws__fmt { position: relative; display: block; cursor: pointer; }
.mei-ws__fmt-in { display: grid; gap: 12px; height: 100%; padding: var(--mei-card-pad); border: 1.5px solid var(--mei-border); border-radius: var(--mei-r-xl); background: var(--mei-white); color: var(--mei-navy); transition: border-color var(--mei-dur-fast, .2s) var(--mei-ease), box-shadow var(--mei-dur-fast, .2s) var(--mei-ease), transform var(--mei-dur-m) var(--mei-ease); }
.mei-ws__fmt:hover .mei-ws__fmt-in { border-color: var(--mei-navy-5); }
.mei-ws__fmt input:checked + .mei-ws__fmt-in { border-color: var(--mei-navy); box-shadow: 0 0 0 1.5px var(--mei-navy), var(--mei-shadow-1); }
.mei-ws__fmt input:focus-visible + .mei-ws__fmt-in { outline: 3px solid var(--mei-focus); outline-offset: 3px; }
.mei-ws__fmt-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mei-ws__fmt-name { font-size: 1.5rem; font-weight: var(--mei-fw-bold); letter-spacing: -.02em; line-height: 1.2; }
.mei-ws__fmt-mark { flex: none; width: 24px; height: 24px; border: 2px solid var(--mei-border-strong); border-radius: 50%; background: var(--mei-white); transition: border-color var(--mei-dur-fast, .2s) var(--mei-ease), background-color var(--mei-dur-fast, .2s) var(--mei-ease); }
.mei-ws__fmt input:checked + .mei-ws__fmt-in .mei-ws__fmt-mark { border-color: var(--mei-coral); background: var(--mei-coral); box-shadow: inset 0 0 0 5px var(--mei-white); }
.mei-ws__fmt-tag { font-family: var(--mei-font-serif); font-style: italic; font-size: 1.375rem; line-height: 1.3; color: var(--mei-coral-ink); }
.mei-ws__chips { margin-top: 4px; }
.mei-ws__fmt-text { color: var(--mei-navy-3); }
.mei-ws__fmt-for { font-size: var(--mei-fs-small); font-weight: var(--mei-fw-semibold); color: var(--mei-navy-4); }
.mei-ws__calc-t { margin: 0 0 4px; font-size: 1.25rem; font-weight: var(--mei-fw-bold); letter-spacing: -.01em; }
.mei-ws__cta { justify-self: start; }
.mei-ws__ps { font-weight: var(--mei-fw-medium); color: var(--mei-navy-3); }
.mei-ws__inc { margin-top: var(--mei-space-8); padding-top: var(--mei-space-8); border-top: 1px solid var(--mei-border); }
.mei-ws__inc-t { margin-bottom: var(--mei-space-6); }
@media (min-width: 640px) { .mei-ws__formats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* "Taking it as a professional?" + the LinkedIn invite dialog (mei_workshop_solo) */
.mei-ws__solo { display: grid; gap: 18px; align-items: center; padding: var(--mei-card-pad); border: 1.5px dashed var(--mei-border-strong); border-radius: var(--mei-r-xl); background: var(--mei-white); }
.mei-ws__solo-t { margin: 0 0 6px; font-size: 1.25rem; font-weight: var(--mei-fw-bold); letter-spacing: -.01em; line-height: 1.25; }
.mei-ws__solo-tx p { margin: 0; color: var(--mei-text-2); max-width: 44em; }
.mei-ws__solo-btn { justify-self: start; }
.mei-ws__solo-btn .mei-ico--in { color: var(--mei-linkedin); }
@media (min-width: 768px) { .mei-ws__solo { grid-template-columns: minmax(0, 1fr) auto; gap: var(--mei-gap); } }
.mei-inv { width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: var(--mei-r-2xl); background: var(--mei-white); color: var(--mei-navy); box-shadow: var(--mei-shadow-dark); overflow: auto; }
.mei-inv::backdrop { background: rgba(33, 27, 69, .72); }
.mei-inv__in { position: relative; display: grid; gap: 14px; padding: clamp(22px, 4vw, 36px); }
.mei-inv__t { margin: 0; padding-right: 44px; font-size: 1.5rem; font-weight: var(--mei-fw-bold); letter-spacing: -.02em; line-height: 1.2; }
.mei-inv__lead { margin: 0; color: var(--mei-text-2); }
.mei-inv__tx { width: 100%; min-height: 270px; resize: vertical; font: inherit; font-size: .9375rem; line-height: 1.5; }
.mei-inv__acts { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 639px) { .mei-inv__acts .mei-btn { flex: 1 1 100%; } }
.mei-inv__hint { margin: 0; }
.mei-inv__x { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--mei-beige-3); color: var(--mei-navy); font: 400 28px/1 var(--mei-font-sans); cursor: pointer; }
.mei-inv__x:hover { background: var(--mei-beige); }
.mei-inv__x:focus-visible { outline: 3px solid var(--mei-coral); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .mei-inv[open] { animation: mei-lb-in var(--mei-dur-m, 400ms) var(--mei-ease, cubic-bezier(.2,.7,.2,1)); }
  .mei-inv[open]::backdrop { animation: mei-lb-fade var(--mei-dur-m, 400ms) var(--mei-ease, cubic-bezier(.2,.7,.2,1)); }
}
@media (min-width: 1024px) { .mei-ws__formats { gap: var(--mei-gap); } }

/* ---------- 14. The dossier: pitch, mock cover, request form (navy section) ---------- */
.mei-dossier { display: grid; gap: var(--mei-space-10); }
.mei-dossier__txt .mei-lead { margin-top: var(--mei-space-6); }
.mei-dossier__ct { margin: var(--mei-space-8) 0 var(--mei-space-5); font-size: var(--mei-fs-small); font-weight: var(--mei-fw-bold); letter-spacing: .02em; text-transform: uppercase; color: var(--mei-on-dark-2); }
.mei-dossier__list > li { color: var(--mei-text); }
.mei-dossier__side { display: grid; gap: 24px; }
.mei-dossier__cover {
  position: relative; display: grid; align-content: end; gap: 6px; aspect-ratio: 1 / 1.3; max-width: 240px; padding: 22px; overflow: hidden;
  border-radius: 10px; background: var(--mei-beige-3); color: var(--mei-navy); box-shadow: var(--mei-shadow-dark); rotate: -3deg;
  background-image: linear-gradient(var(--mei-navy-tint-2) 1px, transparent 1px), linear-gradient(90deg, var(--mei-navy-tint-2) 1px, transparent 1px); background-size: 34px 34px; background-position: 7px 7px;
}
.mei-dossier__logo { position: absolute; top: 18px; left: 22px; font-size: 1.25rem; font-weight: var(--mei-fw-black); letter-spacing: -.03em; }
.mei-dossier__logo i { font-style: normal; color: var(--mei-coral); }
.mei-dossier__k { font-size: var(--mei-fs-xs); font-weight: var(--mei-fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--mei-navy-4); }
.mei-dossier__t { font-size: 1.125rem; font-weight: var(--mei-fw-bold); line-height: 1.2; letter-spacing: -.01em; }
.mei-dossier__for { font-family: var(--mei-font-serif); font-style: italic; font-size: 1.0625rem; color: var(--mei-coral-ink); }
.mei-dossier__dot { position: absolute; top: 24px; right: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--mei-coral); }
.mei-dossier__card { color: var(--mei-navy); }
.mei-dossier__form { margin-top: 4px; }
.mei-dossier__note { margin: 16px 0 0; font-size: var(--mei-fs-small); font-weight: var(--mei-fw-semibold); color: var(--mei-navy-3); }
.mei-dossier__privacy { margin-top: 10px; }
@media (min-width: 1024px) {
  .mei-dossier { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: start; }
  .mei-dossier__side { grid-template-columns: 1fr; }
  .mei-dossier__cover { max-width: 220px; margin-left: 12px; }
}

/* ---------- 15. The reviews wall: controlled chaos, deterministic ---------- */
.mei-wall { columns: 1; column-gap: 20px; }
.mei-wall__card { display: flex; flex-direction: column; gap: 18px; break-inside: avoid; margin: 0 0 20px; padding: 26px 24px; border-radius: var(--mei-r-xl); background: var(--mei-beige-4); color: var(--mei-navy); box-shadow: inset 0 0 0 1px var(--mei-border); }
.mei-wall__q { flex: 1; margin: 0; }
.mei-wall__q p { line-height: 1.5; color: var(--mei-navy-3); }
.mei-wall__card--q .mei-wall__q p { font-family: var(--mei-font-serif); font-style: italic; font-size: 1.75rem; line-height: 1.25; letter-spacing: -.01em; color: var(--mei-navy); }
.mei-wall__card--q .mei-wall__q::before { content: "\201C"; display: block; margin-bottom: 4px; font-family: var(--mei-font-serif); font-style: italic; font-size: 3rem; line-height: .6; color: var(--mei-coral); }
.mei-wall__card--s .mei-wall__q p { font-size: 1.1875rem; font-weight: var(--mei-fw-medium); color: var(--mei-navy); }
.mei-wall__card--m .mei-wall__q p { font-size: 1rem; }
.mei-wall__card--l .mei-wall__q p { font-size: var(--mei-fs-small); line-height: 1.55; }
.mei-wall__card--beige { background: var(--mei-beige-3); box-shadow: none; }
.mei-wall__card--navy { background: var(--mei-navy); color: var(--mei-white); box-shadow: none; }
.mei-wall__card--navy .mei-wall__q p, .mei-wall__card--navy .mei-review__name { color: var(--mei-white); }
.mei-wall__card--navy .mei-review__role { color: var(--mei-on-dark-2); }
.mei-wall__card--navy .mei-wall__q::before { color: var(--mei-coral-soft); }
.mei-wall__card--navy .mei-review__src { background: rgba(255, 255, 255, .12); color: var(--mei-white); }
.mei-wall__card--navy .mei-review__av { border-color: transparent; background: rgba(255, 255, 255, .14); color: var(--mei-white); }
.mei-section--beige .mei-wall__card:not(.mei-wall__card--navy):not(.mei-wall__card--beige) { background: var(--mei-white); box-shadow: none; }
/* "Read the whole review" / "Read the original": a quiet link under the text */
.mei-wall__more { margin: -6px 0 0; font-size: var(--mei-fs-small); }
.mei-wall__more > summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; font-weight: var(--mei-fw-semibold); color: inherit; cursor: pointer; list-style: none; text-decoration: underline; text-decoration-color: var(--mei-coral); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mei-wall__more > summary::-webkit-details-marker { display: none; }
.mei-wall__more > summary::after { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(90deg); transition: transform .3s var(--mei-ease); }
.mei-wall__more[open] > summary::after { transform: rotate(-90deg); }
.mei-wall__more > p { margin: 10px 0 0; line-height: 1.55; color: var(--mei-navy-3); }
.mei-wall__more .mei-wall__orig { margin-top: 12px; }
.mei-wall__card--navy .mei-wall__more > p { color: var(--mei-on-dark-2); }
.mei-wall__card--navy .mei-wall__more > summary { text-decoration-color: var(--mei-coral-soft); }
.mei-wall__orig > p { font-style: italic; }
/* the wall, a couple of screens at a time (mei.js) */
.mei-wall__clip.mei-is-clipped { position: relative; overflow: hidden; transition: max-height .6s var(--mei-ease); }
.mei-wall__clip.mei-is-clipped::after { content: ""; position: absolute; inset: auto 0 0; height: 160px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--mei-wall-fade, var(--mei-white))); pointer-events: none; }
.mei-section--beige .mei-wall__clip { --mei-wall-fade: var(--mei-beige-3); }
.mei-wall__next { display: flex; justify-content: center; margin: 8px 0 8px; }
.mei-wall__chev { rotate: 90deg; } /* "rotate", not transform: the button hover moves the icon with transform */
@media (prefers-reduced-motion: reduce) { .mei-wall__clip.mei-is-clipped { transition: none; } }
/* mei.js lays the cards in columns in reading order (initWallMasonry); the CSS columns are the no-JS fallback */
.mei-wall.mei-wall--js { display: flex; align-items: flex-start; gap: 20px; columns: auto; }
.mei-wall__col { flex: 1 1 0; min-width: 0; }
@media (min-width: 1024px) { .mei-wall.mei-wall--js { gap: 24px; } }
@media (min-width: 640px) { .mei-wall { columns: 2; } }
@media (min-width: 1024px) { .mei-wall { columns: 3; column-gap: 24px; } .mei-wall__card { margin-bottom: 24px; padding: 32px 30px; } .mei-wall__card--q { padding: 36px 32px; } }
@media (min-width: 1280px) { .mei-wall__card--q .mei-wall__q p { font-size: 2rem; } }

/* ---------- pace: same hours, different progress (marketplaces page) ---------- */
.mei-pace { margin: 0; padding: 28px 24px; border-radius: var(--mei-r-l); background: #fff; box-shadow: var(--mei-shadow-card, 0 1px 3px rgba(33, 27, 69, .08)); }
.mei-pace__axis { margin-bottom: 18px; font-size: var(--mei-fs-xs); font-weight: var(--mei-fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--mei-text-2); }
.mei-pace__list { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.mei-pace__row { display: grid; gap: 8px; }
.mei-pace__lab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--mei-fs-small); }
.mei-pace__lab strong { font-weight: var(--mei-fw-bold); color: var(--mei-text); }
.mei-pace__lab span { color: var(--mei-text-2); }
.mei-pace__track { height: 14px; }
.mei-pace__track > i { background: var(--mei-navy-5); }
.mei-pace__row--mei .mei-pace__track > i { background: var(--mei-coral); }
.mei-pace__row--mei .mei-pace__lab strong { color: var(--mei-coral-ink); }
.mei-pace__note { max-width: 62ch; margin: 16px auto 0; text-align: center; }
@media (min-width: 640px) {
  .mei-pace { padding: 36px 40px; }
  .mei-pace__row { grid-template-columns: 220px 1fr; align-items: center; gap: 20px; }
  .mei-pace__lab { display: grid; gap: 2px; }
}

/* ---------- Scorecard: the price comparison + pace bars, compact, inside a prose column (Pricing) ---------- */
.mei-sc { margin: var(--mei-space-6, 24px) 0 var(--mei-space-8, 32px); padding: 18px 14px 16px; border: 1px solid var(--mei-border); border-radius: var(--mei-r-l); background: var(--mei-white); }
.mei-sc__t { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--mei-fs-xs); line-height: 1.35; }
.mei-sc__t th, .mei-sc__t td { padding: 8px 3px; border: 0; text-align: center; vertical-align: middle; background: none; }
.mei-sc__t tbody th { padding: 8px 10px 8px 0; text-align: left; font-weight: var(--mei-fw-semibold); color: var(--mei-text); }
.mei-sc__t tbody tr + tr > * { border-top: 1px solid var(--mei-border); }
.mei-sc__t thead th { padding-bottom: 12px; vertical-align: bottom; }
/* phones: column names stand up (read bottom to top), so the row labels keep the width */
@media (max-width: 639px) {
  .mei-sc { margin-inline: 0; padding: 0; border: 0; background: none; }
  .mei-sc__t thead td { width: auto; }
  .mei-sc__t th, .mei-sc__t td { width: 46px; }
  .mei-sc__t tbody th { width: auto; }
  .mei-sc__h { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); max-inline-size: 150px; text-align: left; font-size: .75rem; line-height: 1.2; }
  .mei-sc__name, .mei-sc__meta { display: inline; }
  .mei-sc__meta { margin: 0; }
}
.mei-sc__name { display: block; font-weight: var(--mei-fw-bold); color: var(--mei-navy); }
.mei-sc__meta { display: block; margin-top: 2px; font-weight: var(--mei-fw-medium); color: var(--mei-text-3); }
.mei-sc__t .mei-sc__mei { background: var(--mei-surface-strong); }
.mei-sc__t thead .mei-sc__mei { border-radius: 10px 10px 0 0; padding-top: 10px; }
.mei-sc__t tr:last-child .mei-sc__mei { border-radius: 0 0 10px 10px; }
.mei-sc__t .mei-sc__mei .mei-sc__name { color: var(--mei-coral-ink); }
.mei-sc__t .mei-mk--s { --mei-mk: 20px; }
.mei-sc__pace > * { vertical-align: bottom; padding-top: 14px; }
.mei-sc__pace th { color: var(--mei-text-2); font-weight: var(--mei-fw-semibold); }
.mei-sc__bar { position: relative; display: block; width: 20px; height: 84px; margin: 0 auto; border-radius: 6px; background: var(--mei-track); overflow: hidden; }
.mei-sc__bar > i { position: absolute; inset: 0; border-radius: inherit; background: var(--mei-navy-5); transform: scaleY(var(--v, 0)); transform-origin: bottom; transition: transform var(--mei-dur-l) var(--mei-ease); }
.mei-sc__mei .mei-sc__bar { background: var(--mei-white); }
.mei-sc__mei .mei-sc__bar > i { background: var(--mei-coral); }
.mei-js [data-mei-inview]:not(.mei-is-in) .mei-sc__bar > i { transform: scaleY(0); }
.mei-sc .mei-cmp__legend { justify-content: flex-start; gap: 8px 18px; margin-top: 14px; font-size: var(--mei-fs-xs); }
.mei-sc .mei-cmp__legend .mei-mk--s { --mei-mk: 18px; }
.mei-sc__note { margin: 8px 0 0; font-size: var(--mei-fs-xs); }
@media (min-width: 640px) {
  .mei-sc { padding: 22px 24px 18px; }
  .mei-sc__t { font-size: var(--mei-fs-small); }
  .mei-sc__t thead td { width: 31%; }
  .mei-sc__t thead th { hyphens: auto; }
  .mei-sc__t th, .mei-sc__t td { padding: 9px 6px; }
  .mei-sc__t thead th { font-size: var(--mei-fs-xs); }
  .mei-sc__t .mei-mk--s { --mei-mk: 22px; }
  .mei-sc__bar { width: 26px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .mei-js [data-mei-inview] .mei-sc__bar > i { transform: scaleY(var(--v, 0)) !important; transition: none; }
}