/* ==========================================================================
   media-kit.css — Sponsorship / Media Kit pages for My Wife Quit Her Job
   Palette pulled from the live theme (MyWifeQuitHerJobV3) CSS:
     --mk-blue       #013d7b  (primary royal blue — nav, footer, structure)
     --mk-blue-dark  #012a56  (darker blue for gradients/hover)
     --mk-green      #0c8442  (brand green — buttons / CTAs)
     --mk-green-hov  #41a62a  (bright green — link/hover accent)
     --mk-ink        #2b2b2b  (body text)
   Font: Lato (inherited from theme; declared here as a safe fallback).

   All selectors are scoped under .mediakit so this file can be enqueued
   site-wide without leaking styles into the rest of the theme.
   ========================================================================== */

.mediakit {
  --mk-blue: #013d7b;
  --mk-blue-dark: #012a56;
  --mk-green: #0c8442;
  --mk-green-dark: #0a6d37;
  --mk-green-hov: #41a62a;
  --mk-ink: #2b2b2b;
  --mk-muted: #5b6770;
  --mk-line: #e2e7ec;
  --mk-bg-soft: #f2f6fb;
  --mk-radius: 14px;
  --mk-shadow: 0 6px 24px rgba(1, 61, 123, 0.12);

  color: var(--mk-ink);
  font-family: Lato, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

.mediakit * { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 20px; }

.mk-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Hero (royal blue) ---------- */
.mk-hero {
  background: linear-gradient(135deg, var(--mk-blue) 0%, var(--mk-blue-dark) 100%);
  color: #fff;
  text-align: center;
  padding: 72px 20px 64px;
}
.mk-hero .mk-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 14px;
  opacity: 0.9;
  margin: 0 0 14px;
}
.mk-hero h1 {
  font-size: 46px;
  line-height: 1.12;
  margin: 0 auto 18px;
  max-width: 760px;
  color: #fff;
}
.mk-hero p {
  font-size: 20px;
  max-width: 680px;
  margin: 0 auto 28px;
  opacity: 0.95;
}

/* Split hero: copy on the left, headshot on the right */
.mk-hero--split { text-align: left; }
.mk-hero-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: center;
}
.mk-hero--split h1 { margin-left: 0; margin-right: 0; }
.mk-hero--split .mk-hero-copy p { margin-left: 0; margin-right: 0; }
.mk-hero-photo img {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  border: 6px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  display: block;
  margin: 0 auto;
}
/* Stage photo: taller rectangular treatment (blends with the blue hero) */
.mk-hero-photo--stage img {
  width: 300px;
  height: 356px;
  border-radius: 16px;
  object-fit: cover;
  object-position: center top;
  border: 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}
.mk-hero-cover img {
  width: 280px;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
  display: block;
  margin: 0 auto;
}
.mk-hero-art img { width: 340px; max-width: 100%; display: block; margin: 0 auto; }
.mk-hero-shot img {
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
  display: block;
  margin: 0 auto;
}
@media (max-width: 780px) {
  .mk-hero-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .mk-hero--split { text-align: center; }
  .mk-hero--split h1, .mk-hero--split .mk-hero-copy p { margin-left: auto; margin-right: auto; }
  .mk-hero-photo, .mk-hero-cover, .mk-hero-art, .mk-hero-shot { order: -1; }
  .mk-hero-photo img { width: 190px; height: 190px; }
  .mk-hero-cover img { width: 220px; }
}

/* ---------- Buttons (green CTA) ---------- */
.mk-btn {
  display: inline-block;
  background: var(--mk-green);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  padding: 15px 32px;
  border-radius: 999px;
  font-size: 17px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  box-shadow: 0 4px 14px rgba(12, 132, 66, 0.32);
}
.mk-btn:hover { transform: translateY(-2px); background: var(--mk-green-hov); color: #fff; }
.mk-btn--ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: none;
}
.mk-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
/* --solid kept as an alias so existing markup with mk-btn--solid still renders
   the green CTA (both classes now map to the same green button). */
.mk-btn--solid {
  background: var(--mk-green);
  color: #fff;
  box-shadow: 0 4px 14px rgba(12, 132, 66, 0.32);
}
.mk-btn--solid:hover { background: var(--mk-green-hov); color: #fff; }
/* On-blue CTA button (spoke-page hero + bottom CTA). White button, blue text.
   Green is reserved for Buy actions, so these navigation/contact CTAs are not green. */
.mk-btn--onblue {
  background: #fff;
  color: var(--mk-blue);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.mk-btn--onblue:hover { background: #eef4fb; color: var(--mk-blue); }

/* ---------- Sections ---------- */
.mk-section { padding: 56px 0; }
.mk-section--soft { background: var(--mk-bg-soft); }
.mk-section h2 {
  font-size: 32px;
  text-align: center;
  margin: 0 0 12px;
  color: var(--mk-blue);
}
.mk-section .mk-lead {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
  color: var(--mk-muted);
  font-size: 19px;
}

/* Dark band — used for the press-logo strip, whose logos are white-on-transparent */
.mk-section--dark { background: var(--mk-blue); }
.mk-section--dark h2 { color: #fff; }
.mk-section--dark .mk-lead { color: rgba(255, 255, 255, 0.82); }

/* ---------- Stat cards ---------- */
/* Default: flex + centered, so any number of cards (3, 5, etc.) centers and wraps. */
.mk-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.mk-stat {
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  padding: 30px 22px;
  text-align: center;
  box-shadow: var(--mk-shadow);
  flex: 0 1 190px;
}
/* Hub only: the 10-card grid stays a strict 5-wide, 2-row block. */
.mk-stats--grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.mk-stats--grid .mk-stat { flex: initial; }
@media (max-width: 900px) {
  .mk-stats--grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .mk-stats--grid { grid-template-columns: repeat(2, 1fr); }
}
.mk-stat .mk-num {
  font-size: 42px;
  font-weight: 900;
  color: var(--mk-blue);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.mk-stat .mk-label {
  font-size: 15px;
  color: var(--mk-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Sponsor option grid (hub page) ---------- */
/* Flex, not grid, so a partial last row CENTERS instead of hugging the left.
   Everything else on these pages is centered, and a grid row of 2 sitting
   left-aligned under a row of 3 reads as a mistake. Mirrors .mk-stats. */
.mk-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.mk-option {
  /* 3 per row inside the 1040px wrap: 330*3 + 24*2 gaps = 1038. Below that the
     min-width forces a wrap rather than letting three cards squeeze. */
  flex: 0 1 330px;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--mk-line);
  border-top: 4px solid var(--mk-green);
  border-radius: var(--mk-radius);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--mk-shadow);
}
/* Group heading above a .mk-options grid ("Advertising", "Guest spots").
   Splitting the options into groups is what keeps the grid off an orphan row:
   seven cards in a 3-wide grid land 3+3+1, whereas 5 and 2 land 3+2 and 2. */
.mk-options-group {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mk-muted);
  text-align: center;
  margin: 0 0 20px;
}
.mk-options + .mk-options-group { margin-top: 48px; }
/* One card per row on phones, full width. */
@media (max-width: 620px) {
  .mk-option { flex: 1 1 100%; min-width: 0; }
}
.mk-option h3 { font-size: 22px; margin: 0 0 6px; color: var(--mk-blue); }
.mk-option .mk-reach { color: var(--mk-green); font-weight: 800; margin: 0 0 12px; }
.mk-option p { color: var(--mk-muted); font-size: 16px; margin: 0 0 20px; }
.mk-option .mk-btn { margin-top: auto; align-self: flex-start; }

/* ---------- Featured guests ---------- */
.mk-guests {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
@media (max-width: 820px) { .mk-guests { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .mk-guests { grid-template-columns: repeat(2, 1fr); } }
.mk-guest {
  margin: 0;
  text-align: center;
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  padding: 16px 12px 14px;
  box-shadow: var(--mk-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mk-guest img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid var(--mk-bg-soft);
}
.mk-guest figcaption {
  margin-top: 10px;
  font-weight: 800;
  font-size: 14px;
  color: var(--mk-blue);
  line-height: 1.2;
}
.mk-guest figcaption span {
  display: block;
  font-weight: 600;
  font-size: 12px;
  color: var(--mk-muted);
  margin-top: 3px;
}
.mk-guest--text { justify-content: center; min-height: 150px; }
.mk-guest-name { font-weight: 800; font-size: 15px; color: var(--mk-blue); }
.mk-guest-sub { font-weight: 600; font-size: 12px; color: var(--mk-muted); margin-top: 4px; }

/* ---------- Demographic charts ---------- */
.mk-charts {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: stretch;
  margin: 8px 0 24px;
}
.mk-chart {
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  padding: 22px 26px 16px;
  margin: 0;
  box-shadow: var(--mk-shadow);
  flex: 0 1 300px;
  text-align: center;
}
.mk-chart--wide { flex: 0 1 460px; }
.mk-chart img { width: 100%; height: auto; display: block; }
.mk-chart figcaption {
  margin-top: 12px;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mk-muted);
}

/* ---------- Terms / stipulations fine print ---------- */
.mk-terms {
  max-width: 760px;
  margin: 28px auto 0;
  padding: 0;
  list-style: none;
  color: var(--mk-muted);
  font-size: 15px;
}
.mk-terms li {
  padding: 6px 0 6px 26px;
  position: relative;
}
.mk-terms li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mk-green);
}

/* ---------- Checkout card ---------- */
.mk-checkout {
  max-width: 620px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  padding: 8px 32px;
  box-shadow: var(--mk-shadow);
}
.mk-checkout-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--mk-line);
}
.mk-checkout-row:last-child { border-bottom: none; }
.mk-checkout-label { color: var(--mk-muted); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: 0.04em; }
.mk-checkout-total .mk-price { font-size: 24px; font-weight: 900; color: var(--mk-green); }

/* ---------- Application form fields ---------- */
.mk-form { max-width: 620px; margin: 0 auto; }
.mk-form-section-title {
  font-weight: 900;
  color: var(--mk-blue);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 28px 0 4px;
}
.mk-field { margin: 16px 0; }
.mk-field label {
  display: block;
  font-weight: 800;
  color: var(--mk-blue);
  font-size: 15px;
  margin-bottom: 6px;
}
.mk-field label .mk-req { color: var(--mk-green); margin-left: 3px; }
.mk-field input,
.mk-field textarea,
.mk-field select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--mk-line);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  color: var(--mk-ink);
  background: #fff;
}
.mk-field textarea { min-height: 96px; resize: vertical; }
.mk-field input:focus,
.mk-field textarea:focus,
.mk-field select:focus {
  outline: none;
  border-color: var(--mk-green);
  box-shadow: 0 0 0 3px rgba(12, 132, 66, 0.14);
}
.mk-field .mk-help { color: var(--mk-muted); font-size: 13px; margin: 6px 0 0; }
.mk-card-element {
  border: 1px solid var(--mk-line);
  border-radius: 10px;
  padding: 14px;
  background: #fff;
}

/* Rate-table Buy button */
.mk-buy {
  display: inline-block;
  background: var(--mk-green);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  white-space: nowrap;
}
.mk-buy:hover { background: var(--mk-green-hov); color: #fff; }
/* Contact variant: for products that require approval before purchase (blue, not green) */
.mk-buy--contact { background: var(--mk-blue); }
.mk-buy--contact:hover { background: var(--mk-blue-dark); }

/* ---------- Pricing table ---------- */
.mk-table-wrap { overflow-x: auto; }
.mk-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--mk-radius);
  overflow: hidden;
  box-shadow: var(--mk-shadow);
}
.mk-table th, .mk-table td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--mk-line);
  /* The browser's own rule is `td, th { vertical-align: inherit }`, so a cell
     inherits from <tr>, whose UA default is `middle`. V3 never hit that because
     the old Meyer reset forced `baseline` onto table/tbody/tr/td; V4's modern
     reset leaves them alone. Without this line the price sits above the Buy
     button instead of level with it. Stated explicitly so the rendering does
     not depend on which reset happens to be loaded. */
  vertical-align: baseline;
}
.mk-table thead th {
  background: var(--mk-blue);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mk-table tbody tr:last-child td { border-bottom: none; }
.mk-table td.mk-price { font-weight: 800; color: var(--mk-green); white-space: nowrap; }
.mk-table .mk-price { font-weight: 800; color: var(--mk-green); white-space: nowrap; display: inline-block; margin-right: 8px; }
.mk-price-unit { font-weight: 700; font-size: 13px; color: var(--mk-green); }
.mk-price-total { display: block; font-weight: 600; font-size: 12px; color: var(--mk-muted); margin-top: 2px; }
.mk-cell-sub { color: var(--mk-muted); font-weight: 600; font-size: 13px; display: block; }
/* Sub-text inside the dark table header needs to be light to be legible */
.mk-table thead .mk-cell-sub { color: rgba(255, 255, 255, 0.75); text-transform: none; letter-spacing: 0; }

/* ---------- Rate tables on phones ----------
   A 4-column rate table cannot work in a 350px column. Left as a table it
   overflowed to 477-651px wide, so it scrolled sideways, the prose wrapped
   at 4-5 words a line, and rows grew 337-465px tall with the price and Buy
   button stranded at the top of all that whitespace.

   Under 640px each row becomes its own card instead: placement as the
   heading, everything after it labelled with its column header and stacked
   underneath. Shrinking the type was the other option and it does not work,
   a 164px column is still only a handful of words wide however small you
   set it, and the table is harder to read for the trouble.

   The header labels are stamped on as data-mk-label by the small script in
   page-templates/media-kit.php. They matter most on the pack-matrix tables
   (/advertise-newsletter/, /advertise-podcast/) where the column header is
   the product, so three bare prices would otherwise be unreadable. */
@media (max-width: 640px) {
  .mk-table-wrap { overflow-x: visible; }
  .mk-table { display: block; width: 100%; background: transparent; box-shadow: none; border-radius: 0; }
  .mk-table thead { display: none; }
  .mk-table tbody, .mk-table tr, .mk-table td { display: block; width: auto; }

  .mk-table tr {
    background: #fff;
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius);
    box-shadow: var(--mk-shadow);
    padding: 16px 18px;
    margin-bottom: 14px;
  }
  .mk-table tbody tr:last-child { margin-bottom: 0; }
  .mk-table td, .mk-table tbody tr:last-child td { border-bottom: none; padding: 0; }

  /* Placement name carries the row */
  .mk-table td:first-child { font-weight: 800; font-size: 18px; line-height: 1.3; }

  /* Every later cell is its own labelled block, divided from the one above */
  .mk-table td + td {
    border-top: 1px solid var(--mk-line);
    margin-top: 14px;
    padding-top: 14px;
  }
  .mk-table td[data-mk-label]::before {
    content: attr(data-mk-label);
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mk-muted);
  }

  /* Price sits big, then a full-width tap target under it */
  .mk-table .mk-price { display: block; margin-right: 0; font-size: 20px; }
  .mk-table .mk-buy {
    display: block;
    margin-top: 12px;
    padding: 12px 18px;
    text-align: center;
    font-size: 15px;
  }
}

/* ---------- Ad-placement diagrams (newsletter: top slot vs bottom classified) ---------- */
.mk-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
}
.mk-slot {
  margin: 0;
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  padding: 24px 28px;
  box-shadow: var(--mk-shadow);
  text-align: center;
  max-width: 300px;
}
.mk-slot img { width: 180px; height: auto; display: block; margin: 0 auto 14px; }
.mk-slot figcaption strong { display: block; color: var(--mk-blue); font-size: 18px; margin-bottom: 4px; }
.mk-slot figcaption span { color: var(--mk-muted); font-size: 15px; }

/* ---------- Logo strip (as seen in / sponsors) ---------- */
.mk-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 46px;
  justify-content: center;
  align-items: center;
}
.mk-logos .mk-logo {
  font-weight: 800;
  font-size: 20px;
  color: var(--mk-muted);
  opacity: 0.85;
}
.mk-logos img {
  height: 34px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.7;
  transition: opacity 0.15s ease, filter 0.15s ease;
}
.mk-logos img:hover { filter: grayscale(0); opacity: 1; }

/* Press logos are white-on-transparent; on the dark band show them clean & bright */
/* Press logos are white-on-transparent; brightness(0) recolors them to solid dark
   so they read on the light-blue tint band. */
.mk-logos--press img { filter: brightness(0); opacity: 0.62; height: 30px; }
.mk-logos--press img:hover { opacity: 0.85; }

/* ---------- Sponsor logo grid (uniform white tiles) ---------- */
.mk-brandgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .mk-brandgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .mk-brandgrid { grid-template-columns: repeat(2, 1fr); } }
.mk-brand {
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: 10px;
  min-height: 120px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 16px;
  box-shadow: 0 2px 8px rgba(1, 61, 123, 0.06);
}
.mk-brand img {
  max-height: 40px;
  max-width: 110px;
  width: auto;
  object-fit: contain;
}
.mk-brand figcaption {
  font-weight: 700;
  font-size: 13px;
  color: var(--mk-muted);
  text-align: center;
  line-height: 1.2;
}

/* Legacy wordmark pills (kept in case any page still uses them) */
.mk-sponsors { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; }
.mk-sponsor { background: #fff; border: 1px solid var(--mk-line); border-radius: 999px; padding: 10px 20px; font-weight: 700; font-size: 16px; color: var(--mk-blue); }

/* ---------- About block (photo + text) ---------- */
.mk-about {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: center;
}
.mk-about-photo img {
  width: 100%;
  border-radius: var(--mk-radius);
  box-shadow: var(--mk-shadow);
  display: block;
}
.mk-about-text p { margin: 0 0 16px; color: var(--mk-ink); font-size: 18px; }
.mk-about-text p:last-child { margin-bottom: 0; }
.mk-about-text a { color: var(--mk-green); font-weight: 700; }
.mk-about-text a:hover { color: var(--mk-green-hov); }
@media (max-width: 720px) {
  .mk-about { grid-template-columns: 1fr; gap: 24px; }
  .mk-about-photo { max-width: 320px; margin: 0 auto; }
}

/* ---------- Book callout (WSJ bestseller) ---------- */
.mk-book {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  padding: 36px 40px;
  box-shadow: var(--mk-shadow);
}
.mk-book-cover img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(1, 61, 123, 0.28);
  display: block;
}
.mk-book-flag {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  font-size: 13px;
  color: var(--mk-green);
  margin: 0 0 6px;
}
.mk-book-body h3 { font-size: 26px; margin: 0 0 12px; color: var(--mk-blue); }
.mk-book-body p { color: var(--mk-muted); font-size: 17px; margin: 0 0 20px; }
.mk-book-body a.mk-btn { margin-top: 4px; }
.mk-book-body > a[href]:not(.mk-btn) { color: var(--mk-green); font-weight: 700; }
@media (max-width: 640px) {
  .mk-book { grid-template-columns: 1fr; gap: 24px; text-align: center; padding: 28px 24px; }
  .mk-book-cover { max-width: 200px; margin: 0 auto; }
}

/* ---------- Feature / bullet list ---------- */
.mk-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mk-features li {
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  padding: 22px 24px;
}
.mk-features li strong { color: var(--mk-blue); display: block; margin-bottom: 6px; font-size: 18px; }

/* Icon variant: a green icon badge at the top of each feature card */
.mk-features--icons li { padding-top: 26px; }
.mk-feat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(12, 132, 66, 0.10);
  color: var(--mk-green);
  margin-bottom: 14px;
}
.mk-feat-icon svg { width: 26px; height: 26px; }

/* ---------- Final CTA band (royal blue) ---------- */
.mk-cta {
  background: linear-gradient(135deg, var(--mk-blue) 0%, var(--mk-blue-dark) 100%);
  color: #fff;
  text-align: center;
  padding: 60px 20px;
}
.mk-cta h2 { color: #fff; font-size: 30px; margin: 0 0 12px; }
.mk-cta p { font-size: 19px; opacity: 0.95; max-width: 620px; margin: 0 auto 26px; }
.mk-cta a.mk-email { color: #fff; font-weight: 800; text-decoration: underline; }
.mk-cta-email { color: #fff; font-size: 19px; margin: 0; }
.mk-cta-email strong { font-weight: 800; }

/* ---------- Back link on subpages ---------- */
.mk-back {
  display: inline-block;
  margin: 24px 0 0;
  color: var(--mk-green);
  font-weight: 700;
  text-decoration: none;
}
.mk-back:hover { text-decoration: underline; color: var(--mk-green-hov); }

/* ---------- How it works (numbered process steps) ---------- */
.mk-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  counter-reset: mk-step;
}
.mk-steps li {
  position: relative;
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  padding: 26px 22px 22px;
  text-align: center;
}
.mk-steps li::before {
  counter-increment: mk-step;
  content: counter(mk-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--mk-green);
  color: #fff;
  font-weight: 900;
  font-size: 18px;
}
.mk-steps li strong { color: var(--mk-blue); display: block; margin-bottom: 6px; font-size: 17px; }
.mk-steps li span { color: var(--mk-muted); font-size: 15px; line-height: 1.5; display: block; }

/* ---------- FAQ (objection handling) ---------- */
.mk-faq {
  max-width: 760px;
  margin: 28px auto 0;
}
.mk-faq details {
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
}
.mk-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 24px;
  font-weight: 800;
  color: var(--mk-blue);
  font-size: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after {
  content: "+";
  color: var(--mk-green);
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  flex: 0 0 auto;
}
.mk-faq details[open] summary::after { content: "\2013"; }
.mk-faq details > p {
  margin: 0;
  padding: 0 24px 20px;
  color: var(--mk-ink);
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .mediakit { font-size: 17px; }
  .mk-hero { padding: 52px 18px 46px; }
  .mk-hero h1 { font-size: 34px; }
  .mk-hero p { font-size: 18px; }
  .mk-section h2 { font-size: 26px; }
  .mk-stat .mk-num { font-size: 34px; }
  .mk-steps { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------
   wpautop-proofing (added at install): standalone CTA buttons in the
   page HTML are wrapped in <p class="mk-btn-row"> so WordPress's
   wpautop filter has nothing to wrap itself. The wrapper is kept
   layout-neutral so buttons render exactly as originally designed.
   ------------------------------------------------------------------ */
.mediakit p.mk-btn-row { margin: 0; max-width: none; opacity: 1; }
.mk-option p.mk-btn-row { margin: auto 0 0; } /* keep flex bottom-pinning of card buttons */
.mk-option p.mk-btn-row .mk-btn { margin-top: 0; }

/* ------------------------------------------------------------------
   Full-bleed layout for the "Media Kit Page" template. The theme caps
   .site-content at 780px and .site-main at 1200px; these pages bring
   their own .mk-wrap (1080px) inner container, so let the hero/section
   backgrounds span the full viewport width.
   ------------------------------------------------------------------ */
.page-template-media-kit #main.site-main,
.page-template-page-sponsor-checkout #main.site-main { max-width: none; }
.page-template-media-kit .site-content { margin: 0 !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; }
.page-template-media-kit .content-area { padding-top: 0 !important; float: none; width: 100%; }
.page-template-media-kit .main-content { width: 100%; }

/* ------------------------------------------------------------------
   Checkout layout: "How It Works" steps rail on the left, the order
   summary + application form on the right. Stacks on mobile.
   ------------------------------------------------------------------ */
.mk-checkout-layout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* equal columns */
  gap: 28px;
  align-items: start;
  max-width: 1020px;
  margin: 0 auto;
}
.mk-checkout-layout .mk-checkout { max-width: none; margin: 0; }
.mk-checkout-layout .mk-form { max-width: none; }
.mk-checkout-steps {
  position: sticky;
  top: 24px;
  background: #fff;
  border: 1px solid var(--mk-line);
  border-top: 4px solid var(--mk-green);
  border-radius: var(--mk-radius);
  box-shadow: var(--mk-shadow);
  padding: 26px 24px;
}
.mk-checkout-steps h3 { margin: 0 0 18px; color: var(--mk-blue); font-size: 21px; }
.mk-checkout-steps ol { list-style: none; margin: 0; padding: 0; counter-reset: mkstep; }
.mk-checkout-steps ol li { counter-increment: mkstep; position: relative; padding: 0 0 18px 46px; }
.mk-checkout-steps ol li:last-child { padding-bottom: 0; }
.mk-checkout-steps ol li::before {
  content: counter(mkstep);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mk-green);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mk-checkout-steps ol li strong { display: block; color: var(--mk-blue); font-size: 15.5px; margin-bottom: 2px; }
.mk-checkout-steps ol li span { display: block; color: var(--mk-muted); font-size: 14.5px; line-height: 1.5; }
.mk-checkout-steps .mk-steps-blurb { color: var(--mk-muted); font-size: 15px; line-height: 1.55; margin: 0 0 18px; }
.mk-checkout-steps .mk-steps-heading {
  font-weight: 900;
  color: var(--mk-blue);
  text-transform: uppercase;
  font-size: 13.5px;
  letter-spacing: 0.05em;
  margin: 20px 0 10px;
}
.mk-includes { list-style: none; margin: 0; padding: 0; }
.mk-includes li { position: relative; padding: 0 0 8px 26px; font-size: 14.5px; line-height: 1.5; }
.mk-includes li::before { content: "\2713"; position: absolute; left: 0; color: var(--mk-green); font-weight: 900; }
.mk-steps-note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--mk-line);
  color: var(--mk-muted);
  font-size: 13px;
  line-height: 1.5;
}
@media (max-width: 860px) {
  .mk-checkout-layout { grid-template-columns: 1fr; }
  /* collapsed: the form comes first, the info panel drops below it */
  .mk-checkout-steps { position: static; order: 2; }
  .mk-checkout-main { order: 1; }
}