/* ==========================================================================
   Geervanee shared design system — colors, type, base reset, header/footer.
   Previously duplicated (with drift) inside every page's own <style> block.
   Page-specific section styles stay inline per page for now.
   ========================================================================== */

:root {
  --bg: #f1f4fa;
  --card: #f7f9fc;
  --border: #d6deec;
  --ink: #2e2647;
  --ink-soft: #5b527a;
  --gold: #b8860b;
  --pink: #d46b9e;
  --cream: #fbf8f1;
  --meta-live: #e14c4c;
  --meta-soon: #b0563f;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Metric-matched fallback faces — Aug 2026. Sized and positioned (via
   size-adjust/ascent-override/descent-override) to occupy exactly the same
   space as the real webfont at the same font-size, so that font-display:
   swap (see header.php) can show the real font the instant it's ready
   with no reflow: the fallback already occupies the real font's footprint,
   so there's no visible shift when the swap happens.
   First attempt used local("Times New Roman")/local("Arial") — correct on
   a real visitor's own Windows/macOS/iOS machine, but PageSpeed's own test
   run showed CLS unchanged (0.584), which only makes sense if its test
   environment doesn't have those exact fonts installed and local() was
   silently failing to resolve there, falling through to an unadjusted
   generic serif/sans-serif. Self-hosting instead — Arimo and Tinos,
   Google's own metric-compatible clones of Arial/Times New Roman
   (assets/fonts/) — removes that uncertainty: the exact same font file is
   used everywhere, on every platform and test runner, no local-font
   lottery. Overrides below are computed from Arimo/Tinos's own real
   metrics (fontTools), not assumed from Arial/Times New Roman, since
   Arimo/Tinos's glyph-width compatibility with those doesn't extend to
   every OS/2 metric field.
   Referenced as separate files (url(), not inlined as base64 data URIs) —
   inlining was tried and measurably made mobile LCP worse (two separate
   PageSpeed runs both ~9.5-9.9s vs ~4.4-5.5s before), because it roughly
   tripled style.css's size and style.css is a render-blocking stylesheet:
   growing it delays first paint of the ENTIRE page, not just text. Font
   files loaded via font-display: swap never block first paint in the
   first place — the fallback paints immediately regardless — so there was
   no blocking cost here to save, only one to create. */
@font-face {
  font-family: "Fraunces Fallback";
  src: url("/assets/fonts/tinos-fallback.woff2") format("woff2");
  size-adjust: 109.06%;
  ascent-override: 89.67%;
  descent-override: 23.38%;
}
@font-face {
  font-family: "Work Sans Fallback";
  src: url("/assets/fonts/arimo-fallback.woff2") format("woff2");
  size-adjust: 113.42%;
  ascent-override: 82%;
  descent-override: 21.42%;
}
@font-face {
  font-family: "Noto Serif Devanagari Fallback";
  src: url("/assets/fonts/tinos-fallback.woff2") format("woff2");
  size-adjust: 88.8%;
  ascent-override: 104.73%;
  descent-override: 70.38%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Work Sans", "Work Sans Fallback", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sa {
  font-family: "Noto Serif Devanagari", "Noto Serif Devanagari Fallback", serif;
}

h1, h2, h3, .display {
  font-family: "Fraunces", "Fraunces Fallback", serif;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
}

/* ===== Banner strip ===== */
.banner {
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  padding: 8px 12px;
  font-family: "Noto Serif Devanagari", serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  position: relative;
}
.banner::after {
  content: "";
  display: block;
  height: 3px;
  margin-top: 8px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 14px);
  opacity: 0.55;
}

/* ===== Header ===== */
header {
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  gap: 24px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo-img {
  display: block;
  height: 52px;
  width: auto;
}
.logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--gold);
  box-shadow: inset 0 0 0 3px var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  font-family: "Noto Serif Devanagari", serif;
  font-weight: 700;
  font-size: 17px;
}
.logo-text {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
}
.logo-text small {
  display: block;
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-top: 2px;
}

nav {
  display: flex;
  gap: 26px;
}
nav .navitem {
  position: relative;
}
nav a.mainlink {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 0 3px;
  text-align: center;
}
nav a.mainlink .gloss {
  display: block;
  font-family: "Noto Serif Devanagari", serif;
  font-size: 9.5px;
  color: #482E7B;
  margin-top: 1px;
  font-weight: 400;
}
nav .navitem.active a.mainlink,
nav a.mainlink:hover {
  color: var(--ink);
}
nav .navitem.active a.mainlink::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 16px;
}
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 15px;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: background 0.15s ease;
}
.nav-toggle {
  display: none;
}
.icon-btn:hover {
  background: rgba(46, 38, 71, 0.06);
}

/* ===== Courses mega-menu ===== */
.mega {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 640px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 30px 60px -30px rgba(46, 38, 71, 0.4);
  padding: 26px 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.1fr;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 60;
}
.navitem:hover .mega,
.navitem:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mega-col {
  padding: 0 18px;
  border-right: 1px solid var(--border);
}
.mega-col:last-child {
  border-right: none;
}
.mega-col-title {
  font-family: "Fraunces", serif;
  font-size: 13.5px;
  font-weight: 600;
  margin: 0 0 10px;
}
.mega-col a {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  padding: 5px 0;
}
.mega-col a:hover {
  color: var(--gold);
}
.mega-upcoming .up-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
  padding: 5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mega-upcoming .up-empty {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-style: italic;
  opacity: 0.75;
}
.mega-upcoming .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pink);
  flex-shrink: 0;
}
.mega-viewall {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.mega-viewall a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold);
}

/* ===== Apps nav dropdown ===== */
.apps-dropdown {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 260px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 30px 60px -30px rgba(46, 38, 71, 0.4);
  padding: 10px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 60;
}
.navitem:hover .apps-dropdown,
.navitem:focus-within .apps-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.apps-dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
}
.apps-dropdown a:hover {
  background: var(--card);
}
.apps-dropdown-name {
  display: block;
  font-family: "Fraunces", serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.apps-dropdown a:hover .apps-dropdown-name {
  color: var(--gold);
}
.apps-dropdown-desc {
  display: block;
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ===== Google reviews slider (above footer) ===== */
.reviews-section {
  background: var(--bg);
  padding: 32px 28px;
  text-align: center;
}
.reviews-inner {
  max-width: 460px;
  margin: 0 auto;
}
.reviews-head {
  margin-bottom: 20px;
}
.reviews-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.reviews-stars {
  color: var(--gold);
  font-size: 18px;
  letter-spacing: 2px;
}
.reviews-score {
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
}
.reviews-sub {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 3px;
}
.reviews-track-wrap {
  overflow: hidden;
  border-radius: 16px;
}
.reviews-track {
  display: flex;
  transition: transform 0.5s ease;
}
.review-card {
  flex: 0 0 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px 20px;
  text-align: left;
}
.review-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.review-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
}
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
}
.review-google-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 15px;
  height: 15px;
  background: var(--card);
  border-radius: 50%;
  padding: 1px;
  box-shadow: 0 0 0 1.5px var(--card);
}
.review-meta {
  font-size: 10.5px;
  color: var(--ink-soft);
  margin-top: 1px;
}
.review-stars {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}
.review-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 0;
}
.review-author {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ink);
}
.reviews-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 16px;
}
.reviews-cta {
  display: inline-block;
  margin-top: 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  border-bottom: 1px solid transparent;
}
.reviews-cta:hover {
  border-bottom-color: var(--gold);
}

/* ===== Footer ===== */
footer {
  background: var(--ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
footer::before {
  content: "गीर्वाणी";
  position: absolute;
  right: -20px;
  bottom: -40px;
  font-family: "Noto Serif Devanagari", serif;
  font-size: 160px;
  color: var(--cream);
  opacity: 0.05;
  pointer-events: none;
}
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 52px 28px 28px;
  display: grid;
  grid-template-columns: 1.1fr 0.85fr 0.85fr 0.85fr 1.35fr;
  gap: 32px;
  position: relative;
}

/* ===== Footer "Apps from Geervanee" column ===== */
.app-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app-list-item {
  border-left: 2px solid rgba(184, 134, 11, 0.4);
  padding-left: 10px;
}
.app-list-name {
  font-family: "Fraunces", serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
  display: inline-block;
  margin-bottom: 3px;
}
.app-list-name:hover {
  color: var(--gold);
}
.app-list-desc {
  font-size: 11.5px;
  color: #c9bee0;
  line-height: 1.4;
  margin: 0;
}
.app-list-note {
  font-size: 10px;
  color: #7c72a0;
  font-style: italic;
  margin-top: 12px;
  line-height: 1.4;
}
.footer-inner h4 {
  font-family: "Fraunces", serif;
  font-size: 13.5px;
  margin: 0 0 14px;
  color: var(--cream);
}
.footer-inner p,
.footer-inner a {
  font-size: 13px;
  color: #c9beE0;
  margin: 0 0 8px;
  display: block;
}
.footer-inner a:hover {
  color: var(--cream);
}
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.social-row a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(184, 134, 11, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex: 0 0 auto;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.social-row a:hover {
  background: rgba(184, 134, 11, 0.15);
  border-color: var(--gold);
}
.social-row svg {
  width: 15px;
  height: 15px;
}
.footer-bottom {
  border-top: 1px solid rgba(184, 134, 11, 0.25);
  padding: 16px 28px;
  text-align: center;
  font-size: 11.5px;
  color: #9f93bc;
  position: relative;
}

/* ===== Floating WhatsApp / PWA-install bubbles =====
   bottom offset stacks this cluster directly above the AI शिक्षकः embed
   widget's own launcher button (ai.geervanee.in/embed.js's .aig-fab,
   60px tall, anchored bottom:20px/right:20px with a z-index of
   2147483000 — the max possible, so it always wins if the two overlap).
   Same right edge, positioned just above it, so both stay visible rather
   than the widget silently covering the WhatsApp bubble. */
.float-cluster {
  position: fixed;
  right: 20px;
  bottom: 92px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 90;
  align-items: flex-end;
}
.bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.4);
}
.bubble.wa {
  background: var(--ink);
  color: var(--cream);
  border: 1.5px solid var(--gold);
}
.bubble.pwa {
  background: var(--gold);
  color: var(--cream);
}
.bubble.pwa.hidden {
  display: none;
}

/* ===== Engagement popups (game-subscribe prompt, new-course announcement) —
   bottom-corner card, shown via initEngagementPopup() in engagement-popup.js */
.geer-popup {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 95;
  width: min(340px, calc(100vw - 40px));
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 4px 16px 16px 16px;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.35);
  padding: 18px 18px 16px;
  transform: translateY(24px) scale(0.97);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.geer-popup.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.geer-popup.right {
  left: auto;
  right: 20px;
}
.geer-popup-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
}
.geer-popup-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.geer-popup-title {
  font-family: 'Fraunces', serif;
  font-size: 16.5px;
  color: var(--ink);
  margin-bottom: 6px;
  padding-right: 18px;
}
.geer-popup-body {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 14px;
}
.geer-popup-actions {
  display: flex;
  gap: 10px;
}
.geer-popup-btn {
  flex: 1;
  text-align: center;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
}
.geer-popup-btn.primary {
  background: var(--ink);
  color: var(--cream);
}
.geer-popup-btn.ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--border);
}

@media (max-width: 480px) {
  .geer-popup { left: 12px; right: 12px; width: auto; bottom: 12px; }
}

@media (max-width: 860px) {
  .header-inner {
    flex-wrap: wrap;
  }
  .nav-toggle {
    display: flex;
  }
  nav {
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }
  header.nav-open nav {
    max-height: 600px;
  }
  nav .navitem {
    border-top: 1px solid var(--border);
  }
  nav a.mainlink {
    padding: 12px 4px;
    text-align: left;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  nav a.mainlink .gloss {
    margin-top: 0;
  }
  /* Hover-based mega-menus don't work with touch — Courses and Apps become
     plain links on mobile, same as every other nav item. */
  .mega,
  .apps-dropdown {
    display: none !important;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 560px) {
  .app-list-desc {
    font-size: 11px;
  }
}

/* ===== Shared "More Details" course popup (courses.php + homepage) ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(46,38,71,.55); display: none; align-items: center; justify-content: center; z-index: 200; padding: 24px; }
.modal-overlay.open { display: flex; }
.modal { background: var(--cream); border-radius: 22px; max-width: 760px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 0; position: relative; }
.modal-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; }
.modal-video { height: 280px; background: var(--ink); border-radius: 22px 22px 0 0; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: pointer; }
.modal-video .play-btn { width: 60px; height: 60px; border-radius: 50%; background: var(--pink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.modal-video .demo-tag { position: absolute; bottom: 16px; left: 20px; color: #fff; font-size: 12px; background: rgba(255,255,255,.15); padding: 5px 12px; border-radius: 999px; }
.modal-video.playing { cursor: default; }
.modal-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal-body { padding: 32px 36px 36px; }
.modal-level { color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-bottom: 8px; }
.modal-body h3 { font-size: 26px; margin-bottom: 14px; }
.modal-price-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.modal-price { font-family: 'Fraunces'; font-weight: 700; color: var(--gold); font-size: 24px; }
.modal-price s { color: var(--ink-soft); font-weight: 400; font-size: 15px; }
.modal-desc { color: var(--ink-soft); font-size: 14.5px; line-height: 1.75; margin-bottom: 24px; white-space: pre-line; }
.modal-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.meta-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.meta-item .k { font-size: 11px; text-transform: uppercase; color: var(--ink-soft); letter-spacing: .06em; margin-bottom: 4px; }
.meta-item .v { font-size: 14px; font-weight: 600; }
.modal-section { margin-bottom: 24px; }
.modal-section h4 { font-family: 'Fraunces'; font-size: 15px; margin-bottom: 10px; }
.modal-section div { color: var(--ink-soft); font-size: 14px; line-height: 1.75; white-space: pre-line; }
.modal-section ul { margin: 0 0 0 20px; padding: 0; }
.modal-section li { margin-bottom: 6px; }
.modal-cta { display: flex; gap: 12px; }
.modal-cta .buy-primary { flex: 1; background: var(--ink); color: var(--cream); text-align: center; padding: 14px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; }
.sync-note { margin-top: 20px; font-size: 11.5px; color: var(--ink-soft); text-align: center; font-style: italic; border-top: 1px dashed var(--border); padding-top: 16px; }

.batch-select-label { font-family: 'Fraunces'; font-size: 15px; margin-bottom: 12px; }
.batch-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.batch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1.5px solid var(--border); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: border-color .15s; }
.batch-row:hover { border-color: var(--gold); }
.batch-row.selected { border-color: var(--gold); background: #FBF3E3; }
.batch-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); flex: 0 0 auto; position: relative; }
.batch-row.selected .batch-radio { border-color: var(--gold); }
.batch-row.selected .batch-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold); }
.batch-info { flex: 1; }
.batch-time { font-weight: 600; font-size: 13.5px; margin-bottom: 2px; }
.batch-medium { font-size: 12px; color: var(--ink-soft); }
.batch-when { font-size: 12px; text-align: right; color: var(--ink-soft); flex: 0 0 auto; }
.batch-when.soon { color: var(--meta-soon); font-weight: 600; }
.self-paced-note { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 24px; }

@media (max-width: 900px) {
  .modal-video { height: 200px; }
  .modal-body { padding: 24px 22px 28px; }
  .modal-meta-grid { grid-template-columns: 1fr; }
}