/* MedExPrep flat redesign (preview). Loads after mxp-flat-gen.css. Everything scoped to body.mxflat.
   Look: white and light-gray sections, one teal, navy text, square-ish corners, hard teal offset shadow. */

body.mxflat {
  --mxf-teal: #0f7c79; --mxf-teal-d: #0b6663; --mxf-ink: #0b1b33; --mxf-text: #2f3d52; --mxf-muted: #5d6b80;
  --mxf-line: #d9dfe7; --mxf-paper: #f4f6f8; --mxf-shadow: 6px 6px 0 0 var(--mxf-teal);
  --mxi-accent: #46c3bd;
}
body.mxflat .mxh, body.mxflat .mxh-foot { --teal: #0f7c79; --teal-d: #0b6663; --teal-l: #0f7c79; --teal-bg: #e7f3f2; --ink: #0b1b33; --text: #2f3d52; --muted: #5d6b80; --line: #dde3ea; --bg: #f4f6f8; --r: 8px; --r-lg: 10px; --serif: var(--sans); }

/* ── new icons ── */
body.mxflat svg.mxi { width: 1em; height: 1em; flex: none; color: var(--mxf-ink); overflow: visible; }

/* ── drop template patterns ── */
body.mxflat .mxh-eyebrow, body.mxflat .mxc-eyebrow { display: none !important; }
body.mxflat .mxh-h2 span, body.mxflat .mxc-h2 span, body.mxflat .mxw-h1 em, body.mxflat .mxh-hero__title em,
body.mxflat .mxc-hero__title em, body.mxflat .mxh-final h2 em, body.mxflat .mxc-final h2 em, body.mxflat .mxw-final h2 em {
  font-family: var(--sans) !important; font-style: normal !important; color: inherit !important; letter-spacing: inherit !important; font-weight: inherit !important;
}
body.mxflat .mxh-h2, body.mxflat .mxc-h2 { letter-spacing: -.02em; font-weight: 750; }
body.mxflat .mxh-head { margin-bottom: 40px; }
body.mxflat [class*="__glow"], body.mxflat .mxh-badge, body.mxflat .mxh-float, body.mxflat .mxh-hero::before,
body.mxflat .mxc-hero::before, body.mxflat .mxw-hero::after, body.mxflat .mxl-hero::before { display: none !important; }

/* ── buttons: flat, square-ish ── */
body.mxflat .mxh-btn, body.mxflat .mxc-btn { border-radius: 6px !important; box-shadow: none !important; transform: none !important; font-weight: 650; }
body.mxflat .mxh-btn--primary, body.mxflat .mxc-btn--primary { background: var(--mxf-teal) !important; color: #fff !important; }
body.mxflat .mxh-btn--primary:hover, body.mxflat .mxc-btn--primary:hover { background: var(--mxf-teal-d) !important; }
body.mxflat .mxh-btn--ghost { background: #fff !important; border: 1.5px solid var(--mxf-ink) !important; color: var(--mxf-ink) !important; }
body.mxflat .mxh-btn--ghost:hover { background: var(--mxf-ink) !important; color: #fff !important; }
body.mxflat .mxh-btn:hover .mxh-i { transform: translateX(2px); }

/* ── signature card: thin border + hard teal offset shadow ── */
body.mxflat :is(.mxh-pillar, .mxh-plan-card, .mxh-demo__card, .mxh-app, .mxh-shot img, .mxh-quote,
  .mxw-tabs, .mxw-app, .mxw-table, .mxw-xp__q, .mxw-xp__tb,
  .mxc-popcard, .mxc-price, .mxl-price, .mxl-float,
  .mxi-card, .mxi-tier, .mxi-dash, .mxi-gets__grid, .mxi-int,
  .mxf-nav__card, .mxc-card:has(#mxcForm)) {
  border: 1px solid var(--mxf-line) !important; border-radius: 8px !important; box-shadow: var(--mxf-shadow) !important;
}
body.mxflat .mxi-tier.is-hl { border-color: var(--mxf-ink) !important; }
body.mxflat .mxh-plan-card--team { box-shadow: 6px 6px 0 0 var(--mxf-ink) !important; }

/* ── dark "glow" heroes become light, flat paper ── */
body.mxflat .mxw-hero { background: var(--mxf-paper) !important; color: var(--mxf-ink); border-bottom: 1px solid var(--mxf-line); }
body.mxflat .mxw-hero .mxw-h1 { color: var(--mxf-ink); letter-spacing: -.03em; font-weight: 800; }
body.mxflat .mxw-hero .mxw-lead { color: var(--mxf-text); }
body.mxflat .mxw-hero .mxw-hero__fine { color: var(--mxf-muted); }
body.mxflat .mxw-hero .mxh-btn--glass { background: #fff !important; color: var(--mxf-ink) !important; border: 1.5px solid var(--mxf-ink) !important; backdrop-filter: none; }
body.mxflat .mxw-hero .mxh-btn--glass:hover { background: var(--mxf-ink) !important; color: #fff !important; }
body.mxflat .mxw-hero .mxw-stats { border-top-color: var(--mxf-line) !important; }
body.mxflat .mxw-hero .mxw-stats > div { border-color: var(--mxf-line) !important; }
body.mxflat .mxw-hero .mxw-stats dt { color: var(--mxf-ink); }
body.mxflat .mxw-hero .mxw-stats dd { color: var(--mxf-muted); }
/* institutions */
body.mxflat .mxi-trust li { color: var(--mxf-text); }
body.mxflat .mxi-trust .mxh-i { color: var(--mxf-teal); }
/* FAQ */
body.mxflat .mxf-search input[type="search"] { border: 1.5px solid var(--mxf-ink) !important; border-radius: 6px !important; box-shadow: var(--mxf-shadow) !important; }
body.mxflat .mxf-pop { color: var(--mxf-muted); }
body.mxflat .mxf-pop a { background: #fff !important; border: 1px solid var(--mxf-line) !important; color: var(--mxf-ink) !important; border-radius: 6px !important; }
body.mxflat .mxf-pop a:hover { border-color: var(--mxf-teal) !important; color: var(--mxf-teal) !important; }
body.mxflat .mxf--medexprep .mxf-hero { background: var(--mxf-paper) !important; }
body.mxflat .mxf-cta, body.mxflat .mxf-nav__help { background: var(--mxf-ink) !important; border-radius: 8px !important; }
/* contact */
body.mxflat .mxc-hero .mxc-info { border-top-color: var(--mxf-line); }
body.mxflat .mxc-hero .mxc-info li { color: var(--mxf-text); border-bottom-color: var(--mxf-line); }
body.mxflat .mxc-hero .mxc-info small { color: var(--mxf-muted); }
body.mxflat .mxc-hero .mxc-info a { color: var(--mxf-ink) !important; }
body.mxflat .mxc-hero .mxc-info a:hover { color: var(--mxf-teal) !important; }
body.mxflat .mxc-hero .mxc-info__i { background: transparent; color: var(--mxf-ink); font-size: 30px; width: 40px; height: 40px; border-radius: 0; }
body.mxflat .mxc-hero .mxc-quick { color: var(--mxf-muted); }
body.mxflat .mxc-hero .mxc-quick a { color: var(--mxf-teal) !important; text-decoration-color: currentColor !important; }

/* ── homepage hero: white, plain ── */
body.mxflat .mxh-hero { background: #fff !important; border-bottom: 1px solid var(--mxf-line); }
body.mxflat .mxh-hero__title { letter-spacing: -.03em; font-weight: 800; }
body.mxflat .mxh-hero__img { border-radius: 8px; box-shadow: var(--mxf-shadow); }
body.mxflat .mxh-exam { border-radius: 6px !important; box-shadow: none !important; }
body.mxflat .mxh-exam:hover { border-color: var(--mxf-teal) !important; transform: none !important; box-shadow: 4px 4px 0 0 var(--mxf-teal) !important; }

/* ── dark sections: solid navy, no glow ── */
body.mxflat :is(.mxh-audio, .mxh-inst, .mxw-audio, .mxc-inc, .mxi-gov) { background: var(--mxf-ink) !important; }
body.mxflat .mxh-final__box, body.mxflat .mxw-inst__box { background: var(--mxf-ink) !important; border-radius: 8px !important; box-shadow: var(--mxf-shadow) !important; }
body.mxflat .mxh-inst__cards > div { border-radius: 6px !important; }

/* ── feature icons (swapped in by mxp-flat.js) ── */
body.mxflat .mxf-swap { background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; width: auto !important; height: auto !important; display: inline-flex !important; }
body.mxflat .mxf-swap svg.mxi { width: 52px !important; height: 52px !important; }
body.mxflat .mxf-swap--sm svg.mxi { width: 36px !important; height: 36px !important; }
body.mxflat .mxf-swap--xs svg.mxi { width: 30px !important; height: 30px !important; }
body.mxflat .mxh-dark-ico svg.mxi, body.mxflat :is(.mxh-inst, .mxh-audio, .mxw-audio, .mxc-inc, .mxw-inst__box, .mxi-gov) svg.mxi { color: #fff; }
/* catalog profession tiles: big line icon instead of colored square */
body.mxflat .mxc-prof { border-radius: 6px !important; box-shadow: none !important; }
body.mxflat .mxc-prof:hover { border-color: var(--mxf-ink) !important; box-shadow: 5px 5px 0 0 var(--mxf-teal) !important; transform: none !important; }
body.mxflat .mxc-prof .mxc-prof__ico { width: 54px; height: 54px; }
body.mxflat .mxc-prof .mxc-prof__ico svg.mxi { width: 50px; height: 50px; }

/* ── design sheet page ── */
.mxd { background: #fff; color: #0b1b33; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.mxd-wrap { max-width: 1200px; margin: 0 auto; padding: 48px 24px 96px; }
.mxd h1 { font-size: 40px; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.mxd h2 { font-size: 24px; font-weight: 750; letter-spacing: -.02em; margin: 56px 0 18px; padding-bottom: 10px; border-bottom: 1px solid #d9dfe7; }
.mxd p { color: #2f3d52; font-size: 16px; line-height: 1.6; max-width: 760px; }
.mxd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.mxd-ic { border: 1px solid #d9dfe7; border-radius: 6px; padding: 18px 8px 12px; text-align: center; background: #fff; }
.mxd-ic svg { width: 56px; height: 56px; color: #0b1b33; }
.mxd-ic small { display: block; margin-top: 8px; font-size: 12px; color: #5d6b80; }
.mxd-ic code { display: block; margin-top: 2px; font-size: 10.5px; color: #8a96a8; }
.mxd-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.mxd-sw { width: 150px; }
.mxd-sw i { display: block; height: 70px; border-radius: 6px; border: 1px solid #d9dfe7; }
.mxd-sw b { display: block; margin-top: 8px; font-size: 13.5px; }
.mxd-sw small { font-size: 12px; color: #5d6b80; }
.mxd-card { width: 340px; padding: 24px; border: 1px solid #d9dfe7; border-radius: 8px; background: #fff; box-shadow: 6px 6px 0 0 #0f7c79; }
.mxd-card h3 { margin: 12px 0 6px; font-size: 19px; }
.mxd-card p { margin: 0; font-size: 15px; }
.mxd-card svg { width: 52px; height: 52px; color: #0b1b33; }
.mxd-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 6px; font: 650 15px/1 "Inter", sans-serif; text-decoration: none; }
.mxd-btn--p { background: #0f7c79; color: #fff; }
.mxd-btn--o { border: 1.5px solid #0b1b33; color: #0b1b33; background: #fff; }
.mxd-dark { background: #0b1b33; color: #fff; padding: 32px; border-radius: 8px; }
.mxd-dark svg { width: 52px; height: 52px; color: #fff; }
.mxd-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mxd-ba > div { border: 1px solid #d9dfe7; border-radius: 8px; padding: 20px; }
.mxd-ba b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #5d6b80; margin-bottom: 8px; }
.mxd-ba .is-old { font-family: Georgia, serif; font-style: italic; color: #5d6b80; }
@media (max-width: 640px) { .mxd-ba { grid-template-columns: 1fr; } .mxd h1 { font-size: 30px; } }
body.mxflat .mxh-hero__title { font-size: clamp(36px, 4.4vw, 54px) !important; line-height: 1.08 !important; }
body.mxflat .mxh-hero__img.is-shot { width: 100%; height: auto; border: 1px solid var(--mxf-line); }
/* Why steps: icons sit on a white tile so the connector line stops at each icon */
body.mxflat .mxw-steps::before { background: var(--mxf-line) !important; height: 1px; }
body.mxflat .mxw-steps__i.mxf-swap { display: grid !important; place-items: center; width: 60px !important; height: 60px !important; margin: 16px auto 12px !important; background: #fff !important; padding: 6px; }
body.mxflat .mxw-steps__i.mxf-swap svg.mxi { width: 44px !important; height: 44px !important; }
/* Why "quality" pipeline: same fix, icons on a tile so the vertical line stops at each one */
body.mxflat .mxw-pipe::before { background: var(--mxf-line) !important; width: 1px; left: 26px; }
body.mxflat .mxw-pipe__i.mxf-swap { display: grid !important; place-items: center; width: 52px !important; height: 52px !important; background: var(--mxf-paper) !important; padding: 4px; }
body.mxflat .mxw-pipe__i.mxf-swap svg.mxi { width: 44px !important; height: 44px !important; }
/* original hero art is a transparent cut-out: no frame or shadow */
body.mxflat .mxh-hero__img:not(.is-shot) { box-shadow: none !important; border-radius: 0; }
/* catalog profession tiles: no dark square behind the line icon; neutral count badge */
body.mxflat .mxc-prof .mxc-prof__ico { background: none !important; box-shadow: none !important; border-radius: 0 !important; color: var(--mxf-ink) !important; }
body.mxflat .mxc-prof .mxc-prof__ico svg.mxi { color: var(--mxf-ink); }
body.mxflat .mxc-prof .mxc-prof__n { background: var(--mxf-paper) !important; color: var(--mxf-ink) !important; border: 1px solid var(--mxf-line); border-radius: 6px !important; }
/* catalog "Most popular" photos: light backdrop behind the cut-out portraits */
body.mxflat .mxc-popcard__media { background: #e8eef2 !important; }

/* Readiness card: keep the ring and bar fills (the generator flattened them to plain gray). */
body.mxflat .mxh-ready__ring { background: radial-gradient(closest-side, #fff 80%, transparent 81% 100%), conic-gradient(#0f7c79 calc(var(--p) * 1%), #e3e8ef 0) !important; }
body.mxflat .mxh-ready__bars i { background: linear-gradient(#0f7c79, #0f7c79) 0 0 / var(--w) 100% no-repeat, #edf1f5 !important; }
body.mxflat .mxh-ready__bars .is-weak i { background: linear-gradient(#d97706, #d97706) 0 0 / var(--w) 100% no-repeat, #edf1f5 !important; }