/* ── marketing chrome ────────────────────────────────────
   Public surface (_MarketingLayout). Brand register is the
   "editorial, calm, quietly premium" mode from the visual
   style guide — Cormorant Garamond for serif moments, Inter
   for navigation/UI, generous whitespace, no SaaS energy. */

/* ── topbar ──────────────────────────────────────────────── */
.mk-topbar {
  background: var(--warm-ivory);
  border-bottom: 1px solid var(--ivory-line);
}
.mk-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 56px;
  gap: 32px;
}
.mk-wordmark {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.mk-wm-logo {
  height: 30px;
  width: auto;
  display: block;
  opacity: 0.92;
}
.mk-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.mk-nav-link {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--deep-slate);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.mk-nav-link:hover { color: var(--muted-burgundy); }
.mk-nav-link.active {
  color: var(--muted-burgundy);
  border-bottom-color: var(--muted-burgundy);
}
.mk-nav-quiet {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--stone-gray);
  padding: 6px 0;
  transition: color 150ms ease;
}
.mk-nav-quiet:hover { color: var(--ink-navy); }
.mk-nav-cta {
  padding: 10px 18px;
  font-size: 11px;
}

/* Hamburger — hidden on desktop, shown on phones. Three flat bars in the
   editorial-ink color; no border or background so the topbar stays calm. */
.mk-nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  margin: -10px;            /* expand tap target without shifting layout */
  cursor: pointer;
  color: var(--ink-navy);
}
.mk-nav-toggle-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  margin: 5px 0;
  transition: transform 180ms ease, opacity 180ms ease;
}
.mk-nav-toggle:focus-visible {
  outline: 2px solid var(--muted-burgundy);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (max-width: 720px) {
  .mk-topbar-inner { padding: 14px 22px; gap: 12px; }

  .mk-nav-toggle { display: block; }

  /* Nav becomes a drop panel under the topbar. Collapsed by default; the
     .mk-nav-open class on the <header> drops it into view. Position
     absolute so it doesn't reflow the topbar height and the page content
     doesn't jump when the menu opens. */
  .mk-topbar { position: relative; }
  .mk-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--warm-ivory);
    border-bottom: 1px solid var(--ivory-line);
    padding: 6px 22px 18px;
    /* Collapsed state — kept in the DOM for screen readers but visually
       hidden and click-through. No display:none so transitions could be
       added later without re-architecting. */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 220ms ease, opacity 160ms ease;
    z-index: 20;
  }
  .mk-topbar.mk-nav-open .mk-nav {
    max-height: 80vh;
    opacity: 1;
    pointer-events: auto;
  }

  /* Stacked links get more vertical space than the inline row allowed.
     Burgundy underline on active link still reads at mobile scale. */
  .mk-nav-link,
  .mk-nav-quiet {
    font-size: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ivory-line);
  }
  .mk-nav-link:last-of-type,
  .mk-nav-quiet { border-bottom: none; }
  .mk-nav-quiet { padding-top: 16px; }

  .mk-nav-cta {
    align-self: flex-start;
    margin-top: 12px;
    padding: 12px 20px;
    font-size: 12px;
  }

  /* Animate the bars into an X when the menu is open — quiet,
     non-decorative, just enough to confirm the toggle. */
  .mk-topbar.mk-nav-open .mk-nav-toggle-bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .mk-topbar.mk-nav-open .mk-nav-toggle-bar:nth-child(2) { opacity: 0; }
  .mk-topbar.mk-nav-open .mk-nav-toggle-bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }
}

/* ── page-level shell ────────────────────────────────────── */
.mk-page {
  background: var(--warm-ivory);
  min-height: 60vh;
}

/* ── hero ────────────────────────────────────────────────── */
.mk-hero {
  padding: 96px 0 64px;
}
.mk-hero-inner {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
/* Two-column hero: editorial copy left, product tour right. */
.mk-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}
.mk-hero-grid .mk-hero-inner { max-width: 600px; }

/* ── hero video facade ───────────────────────────────────── */
.mk-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--ivory-line);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--ink-navy);
  box-shadow: 0 18px 50px -28px rgba(31, 42, 55, 0.55);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.mk-video:hover {
  box-shadow: 0 26px 60px -26px rgba(31, 42, 55, 0.62);
  transform: translateY(-2px);
}
.mk-video:focus-visible {
  outline: 2px solid var(--muted-burgundy);
  outline-offset: 3px;
}
.mk-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mk-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  border-radius: 50%;
  background: rgba(243, 241, 236, 0.92);
  color: var(--muted-burgundy);
  box-shadow: 0 6px 20px -6px rgba(31, 42, 55, 0.5);
  transition: background 160ms ease, transform 160ms ease;
}
.mk-video:hover .mk-video-play {
  background: var(--warm-ivory);
  transform: translate(-50%, -50%) scale(1.06);
}
.mk-video-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-ivory);
  text-align: left;
  background: linear-gradient(to top, rgba(31, 42, 55, 0.55), rgba(31, 42, 55, 0));
}
.mk-video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--ivory-line);
  border-radius: 10px;
  display: block;
}
.mk-hero .eyebrow { margin-bottom: 4px; }
.mk-hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 72px;
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--ink-navy);
  max-width: 720px;
}
.mk-hero h1 em {
  font-style: italic;
  color: var(--muted-burgundy);
  font-weight: 400;
}
/* Hero tagline: the 5-second handle, set as a beat between the headline
   and the lede. Sized between the lede (19px) and the H1 (72px), and
   tinted with the H1 accent color to tie it to "meetings." A step
   heavier than the lede; the flex-column gap supplies the vertical
   breathing room so we don't fight the layout primitive. */
.mk-hero .mk-hero-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 27px;
  line-height: 1.32;
  font-weight: 500;
  letter-spacing: -0.004em;
  color: var(--muted-burgundy);
  max-width: 600px;
}
.mk-hero .mk-lede {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px;
  line-height: 1.7;
  color: var(--deep-slate);
  max-width: 600px;
}
.mk-hero .mk-sub {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--stone-gray);
  letter-spacing: 0.01em;
  font-style: italic;
}
.mk-cta-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 12px;
}
.mk-cta-quiet {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--deep-slate);
  border-bottom: 1px solid var(--ivory-line);
  padding-bottom: 3px;
  transition: color 150ms ease, border-color 150ms ease;
}
.mk-cta-quiet:hover {
  color: var(--muted-burgundy);
  border-bottom-color: var(--muted-burgundy);
}

@media (max-width: 960px) {
  .mk-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .mk-hero-grid .mk-hero-inner { max-width: 600px; }
  .mk-hero-media { max-width: 560px; }
}

@media (max-width: 720px) {
  .mk-hero { padding: 56px 0 32px; }
  .mk-hero h1 { font-size: 44px; }
  .mk-hero .mk-hero-tagline { font-size: 22px; }
  .mk-hero .mk-lede { font-size: 17px; }
  .mk-cta-row { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ── section primitives ──────────────────────────────────── */
.mk-section {
  padding: 72px 0;
}
.mk-section.alt {
  background: var(--ivory-card);
  border-top: 1px solid var(--ivory-border);
  border-bottom: 1px solid var(--ivory-border);
}
.mk-section-head {
  max-width: 720px;
  margin-bottom: 48px;
}
.mk-section-head .eyebrow {
  margin-bottom: 18px;
}
.mk-section-head h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.008em;
  color: var(--ink-navy);
}
.mk-section-head h2 em {
  font-style: italic;
  color: var(--muted-burgundy);
  font-weight: 400;
}
.mk-section-head .mk-subhead {
  font-family: Georgia, serif;
  font-size: 17px;
  color: var(--deep-slate);
  line-height: 1.7;
  margin-top: 18px;
  max-width: 560px;
}

@media (max-width: 720px) {
  .mk-section { padding: 48px 0; }
  .mk-section-head h2 { font-size: 32px; }
  .mk-section-head .mk-subhead { font-size: 16px; }
}

/* ── screenshot sequence ─────────────────────────────────── */
/* Four steps, vertical stack on mobile, 2x2 grid on desktop.
   Each tile holds a real screenshot the user drops in via the
   data-screenshot attribute — for now we render a placeholder
   panel with the brand vocabulary so you can see the layout. */
.mk-shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 40px;
}
.mk-shot {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mk-shot-frame {
  background: var(--ivory-card);
  border: 1px solid var(--ivory-border);
  border-radius: 3px;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
/* Placeholder treatment — soft diagonal noise + the step number,
   so the layout reads as deliberate while screenshots are pending. */
.mk-shot-frame.empty::before {
  content: attr(data-step);
  position: absolute;
  top: 16px;
  left: 20px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 28px;
  color: var(--muted-burgundy);
}
.mk-shot-frame.empty::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-gray);
}
.mk-shot-frame img {
  width: 100%;
  height: 100%;
  /* `cover` fills the 4:3 frame edge to edge, cropping whatever spills
     past the frame's aspect ratio. The browser decides what to clip —
     usually the top/bottom for wider screenshots. */
  object-fit: cover;
  display: block;
}
/* Per-frame override: when the screenshot is taller than the frame
   (portrait UI captures), `cover` crops out the top/bottom which loses
   the title or the bottom rows. `.fit` lets the whole image show with
   ivory padding on the sides instead — apply on the .mk-shot-frame
   for that tile. */
.mk-shot-frame.fit img {
  object-fit: contain;
}
.mk-shot-caption {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--ink-navy);
  line-height: 1.35;
}

@media (max-width: 720px) {
  .mk-shots { grid-template-columns: 1fr; gap: 28px; }
  .mk-shot-caption { font-size: 18px; }
}

/* ── two-flow split ──────────────────────────────────────── */
.mk-flows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.mk-flow-card {
  padding: 36px 32px;
  background: var(--ivory-card);
  border: 1px solid var(--ivory-border);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mk-flow-card .mk-flow-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--stone-gray);
  font-weight: 500;
}
.mk-flow-card .mk-pro-pill {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-burgundy);
  border: 1px solid var(--burgundy-soft);
  padding: 2px 7px;
  border-radius: 2px;
  font-weight: 500;
}
.mk-flow-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  color: var(--ink-navy);
}
.mk-flow-card h3 em {
  font-style: italic;
  color: var(--muted-burgundy);
  font-weight: 400;
}
.mk-flow-card p {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--deep-slate);
}

@media (max-width: 720px) {
  .mk-flows { grid-template-columns: 1fr; gap: 24px; }
  .mk-flow-card { padding: 28px 24px; }
  .mk-flow-card h3 { font-size: 26px; }
}

/* ── live demo block ─────────────────────────────────────── */
.mk-demo-card {
  background: var(--ivory-card);
  border: 1px solid var(--ivory-border);
  border-radius: 3px;
  padding: 44px 40px;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mk-demo-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  color: var(--ink-navy);
}
.mk-demo-card h3 em {
  font-style: italic;
  color: var(--muted-burgundy);
  font-weight: 400;
}
.mk-demo-card p {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--deep-slate);
}
.mk-demo-form {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.mk-demo-form input[type="email"] {
  flex: 1;
  min-width: 260px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 14px 18px;
  background: var(--warm-ivory);
  border: 1px solid var(--ivory-line);
  border-radius: 2px;
  color: var(--ink-navy);
  outline: none;
  transition: border-color 180ms ease;
}
.mk-demo-form input[type="email"]:focus { border-color: var(--muted-burgundy); }
.mk-demo-note {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--stone-gray);
  font-style: italic;
}

/* ── pricing teaser ──────────────────────────────────────── */
.mk-price-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.mk-price-tile {
  background: var(--ivory-card);
  border: 1px solid var(--ivory-border);
  border-radius: 3px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mk-price-tile .mk-price-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 24px;
  color: var(--ink-navy);
}
.mk-price-tile .mk-price-amt {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted-burgundy);
  font-weight: 500;
}
.mk-price-tile .mk-price-line {
  font-family: Georgia, serif;
  font-size: 14px;
  color: var(--deep-slate);
  line-height: 1.6;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .mk-price-strip { grid-template-columns: 1fr; gap: 16px; }
}

/* ── letter teaser ───────────────────────────────────────── */
.mk-letter-teaser {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mk-letter-teaser blockquote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 26px;
  line-height: 1.4;
  color: var(--ink-navy);
  border-left: 2px solid var(--muted-burgundy);
  padding-left: 24px;
}
.mk-letter-teaser .mk-letter-attr {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--stone-gray);
}

/* ── long-form pages (why, not-for, privacy, terms) ──────── */
.mk-longform {
  max-width: 680px;
  margin: 0 auto;
  padding: 96px 24px 96px;
}
.mk-longform .mk-letter-eyebrow {
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--stone-gray);
  margin-bottom: 24px;
}
.mk-longform h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.008em;
  color: var(--ink-navy);
  margin-bottom: 24px;
}
.mk-longform h1 em {
  font-style: italic;
  color: var(--muted-burgundy);
  font-weight: 400;
}
.mk-longform h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 26px;
  color: var(--ink-navy);
  margin-top: 44px;
  margin-bottom: 14px;
}
.mk-longform p {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--deep-slate);
  margin-bottom: 22px;
}
.mk-longform a {
  color: var(--ink-navy);
  border-bottom: 1px solid var(--burgundy-soft);
}
.mk-longform a:hover { color: var(--muted-burgundy); border-bottom-color: var(--muted-burgundy); }
/* Button links inside longform articles (e.g. the blog CTA) must keep
   their component styling, not inherit the prose link color/underline. */
.mk-longform a.btn { color: var(--warm-ivory); border-bottom: none; }
.mk-longform a.btn:hover { color: var(--warm-ivory); border-bottom: none; }
.mk-longform a.btn-secondary,
.mk-longform a.btn-secondary:hover { color: var(--ink-navy); }
.mk-longform .mk-sig {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mk-longform .mk-sig .name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--ink-navy);
}
.mk-longform .mk-sig .role,
.mk-longform .mk-sig .date {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--stone-gray);
}
.mk-longform .mk-draft-flag {
  background: rgba(107,58,58,0.06);
  border: 1px solid var(--burgundy-soft);
  border-radius: 2px;
  padding: 14px 18px;
  margin-bottom: 36px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--muted-burgundy);
  font-style: italic;
}

@media (max-width: 720px) {
  .mk-longform { padding: 56px 22px 64px; }
  .mk-longform h1 { font-size: 36px; }
  .mk-longform h2 { font-size: 22px; margin-top: 32px; }
  .mk-longform p { font-size: 16px; }
}

/* ── pricing full page ───────────────────────────────────── */
.mk-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.mk-pricing-card {
  background: var(--ivory-card);
  border: 1px solid var(--ivory-border);
  border-radius: 3px;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.mk-pricing-card.featured {
  border-color: var(--muted-burgundy);
}
.mk-pricing-card.featured::before {
  content: "Most chosen";
  position: absolute;
  top: -10px;
  left: 28px;
  background: var(--muted-burgundy);
  color: var(--warm-ivory);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  font-weight: 500;
}
.mk-pricing-card .mk-pricing-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--ink-navy);
}
.mk-pricing-card .mk-pricing-amt {
  font-family: Georgia, serif;
  font-size: 18px;
  color: var(--muted-burgundy);
}
.mk-pricing-card .mk-pricing-amt small {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--stone-gray);
}
.mk-pricing-card .mk-pricing-blurb {
  font-family: Georgia, serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--deep-slate);
  margin: 8px 0 18px;
}
.mk-pricing-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.mk-pricing-card li {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ink-navy);
  padding-left: 22px;
  position: relative;
  line-height: 1.55;
}
.mk-pricing-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 1.5px;
  background: var(--muted-burgundy);
}
.mk-pricing-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

.mk-pricing-faq {
  margin-top: 96px;
  max-width: 760px;
}
.mk-pricing-faq dt {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  color: var(--ink-navy);
  margin-top: 28px;
}
.mk-pricing-faq dd {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--deep-slate);
  margin-top: 8px;
}

@media (max-width: 720px) {
  .mk-pricing-grid { grid-template-columns: 1fr; gap: 20px; }
  .mk-pricing-faq dt { font-size: 19px; }
}

/* ── footer ──────────────────────────────────────────────── */
.mk-footer {
  background: var(--warm-ivory);
  border-top: 1px solid var(--ivory-line);
  padding: 64px 0 32px;
}
.mk-footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 60px;
  padding-bottom: 40px;
}
.mk-footer-brand {
  display: flex;
  flex-direction: column;
  /* Without flex-start, column-flex children get stretched on the cross
     axis. That blockifies the <img> and makes width:auto expand to the
     full column width — turning a 28px-tall mark into a giant wordmark. */
  align-items: flex-start;
  gap: 16px;
}
.mk-foot-logo {
  height: 28px;
  width: auto;
  display: block;
  opacity: 0.9;
}
.mk-foot-tag {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  color: var(--stone-gray);
}
.mk-foot-tag em {
  font-style: italic;
  color: var(--muted-burgundy);
}
.mk-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.mk-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mk-foot-eyebrow {
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--stone-gray);
  font-weight: 500;
  margin-bottom: 4px;
}
.mk-footer-col a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--deep-slate);
  padding: 2px 0;
  transition: color 150ms ease;
}
.mk-footer-col a:hover { color: var(--muted-burgundy); }

.mk-footer-rule { padding-top: 24px; }
.mk-footer-line {
  height: 1px;
  background: var(--ivory-line);
  margin-bottom: 20px;
}
.mk-footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--stone-gray);
}
.mk-foot-attr {
  font-style: italic;
}

@media (max-width: 720px) {
  .mk-footer-inner { grid-template-columns: 1fr; gap: 36px; }
  .mk-footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .mk-footer-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── /calendly-alternative ───────────────────────────────────
   The comparison page reuses .mk-page, .mk-hero, .mk-section,
   .mk-section-head, .eyebrow, .mk-lede, .mk-subhead, .btn and
   .mk-cta-row for all structure and headline treatment. This block
   adds ONLY what the existing component set has no equivalent for:
   in-section body prose, the use-case list, and the comparison
   table — the marketing site had no <table> styling at all. No new
   colors or fonts: every value references an existing custom
   property or font stack already used above. The table falls back
   to horizontal scroll on small screens (the brief's stated default
   when no table convention exists), not a card redesign. ───────── */
.mk-ca-body {
  max-width: 720px;
}
.mk-ca-body p {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--deep-slate);
  margin-bottom: 20px;
}
.mk-ca-body p:last-child {
  margin-bottom: 0;
}
.mk-ca-close {
  font-style: italic;
  color: var(--ink-navy);
}
.mk-ca-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  margin: 4px 0 24px;
}
.mk-ca-list li {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--deep-slate);
  padding-left: 22px;
  position: relative;
}
.mk-ca-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 12px;
  height: 1.5px;
  background: var(--muted-burgundy);
}

/* comparison table — semantic <table>, plain factual cells, no
   shading / icons / winner highlighting. Horizontal scroll wrapper
   keeps it intact on mobile rather than restructuring as cards. */
.mk-ca-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.mk-ca-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 620px;
}
.mk-ca-table th,
.mk-ca-table td {
  text-align: left;
  vertical-align: top;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ivory-border);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--deep-slate);
}
.mk-ca-table thead th {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  color: var(--ink-navy);
  border-bottom: 1px solid var(--ivory-line);
}
.mk-ca-table tbody th {
  font-weight: 500;
  color: var(--ink-navy);
  width: 28%;
}
.mk-ca-table tr:last-child td,
.mk-ca-table tr:last-child th {
  border-bottom: none;
}
.mk-ca-aside {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--stone-gray);
  margin-top: 18px;
}
.mk-ca-aside a {
  color: var(--ink-navy);
  border-bottom: 1px solid var(--burgundy-soft);
}
.mk-ca-aside a:hover {
  color: var(--muted-burgundy);
  border-bottom-color: var(--muted-burgundy);
}

@media (max-width: 720px) {
  .mk-ca-body p,
  .mk-ca-list li { font-size: 16px; }
}

/* ── /blog ───────────────────────────────────────────────────
   The index header reuses .mk-hero; both CTAs reuse .mk-demo-card;
   the article body reuses .mk-longform (max-width, h1/h2/p/a, body
   font + leading already match /why). This block adds ONLY what no
   existing component covers: the index post list, the article meta
   line, the Markdig elements .mk-longform does not style (h3/h4,
   lists, blockquote, code, hr), the author block, and prev/next.
   No new colors or fonts — existing custom properties only. ───── */
.blog-empty {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  color: var(--stone-gray);
  font-style: italic;
}
.blog-list {
  display: flex;
  flex-direction: column;
  max-width: 720px;
}
.blog-card {
  padding: 28px 0;
  border-bottom: 1px solid var(--ivory-border);
}
.blog-card:first-child { padding-top: 0; }
.blog-card:last-child { border-bottom: none; padding-bottom: 0; }
.blog-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.006em;
  margin-bottom: 10px;
}
.blog-card-title a {
  color: var(--ink-navy);
  transition: color 150ms ease;
}
.blog-card-title a:hover { color: var(--muted-burgundy); }
.blog-card-meta,
.blog-article-meta {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--stone-gray);
}
.blog-card-meta { margin-bottom: 10px; }
.blog-dot { margin: 0 8px; opacity: 0.6; }
.blog-card-desc {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--deep-slate);
  max-width: 620px;
}

/* Article header bits not in .mk-longform */
.blog-eyebrow-link {
  display: inline-block;
  transition: color 150ms ease;
}
.blog-eyebrow-link:hover { color: var(--muted-burgundy); }
.blog-article h1 { margin-bottom: 14px; }
.blog-article-meta { margin-bottom: 40px; }
.blog-body { margin-bottom: 8px; }

/* Markdig output that .mk-longform (h1/h2/p/a only) doesn't style */
.blog-body h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink-navy);
  margin-top: 36px;
  margin-bottom: 12px;
}
.blog-body h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stone-gray);
  margin-top: 30px;
  margin-bottom: 10px;
}
.blog-body ul,
.blog-body ol {
  margin: 0 0 22px;
  padding-left: 26px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--deep-slate);
}
.blog-body li { margin-bottom: 8px; }
.blog-body li::marker { color: var(--muted-burgundy); }
.blog-body blockquote {
  margin: 0 0 24px;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--burgundy-soft);
  font-style: italic;
  color: var(--ink-navy);
}
.blog-body blockquote p { margin-bottom: 0; }
.blog-body code {
  font-family: 'Cascadia Code', 'Consolas', monospace;
  font-size: 0.88em;
  background: var(--ivory-card);
  border: 1px solid var(--ivory-border);
  border-radius: 3px;
  padding: 1px 5px;
}
.blog-body pre {
  background: var(--ivory-card);
  border: 1px solid var(--ivory-border);
  border-radius: 4px;
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0 0 24px;
}
.blog-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
}
.blog-body hr {
  border: none;
  border-top: 1px solid var(--ivory-line);
  margin: 36px 0;
}

/* Article footer: divider, author block, CTA spacing, prev/next */
.blog-divider {
  border: none;
  border-top: 1px solid var(--ivory-line);
  margin: 48px 0 32px;
}
.blog-author {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}
.blog-author-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}
.blog-author-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 20px;
  color: var(--ink-navy);
}
.blog-author-bio {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--stone-gray);
  margin-top: 2px;
}
.blog-cta { margin-bottom: 40px; }
.blog-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--ivory-line);
  padding-top: 28px;
}
.blog-nav-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 48%;
}
.blog-nav-next {
  margin-left: auto;
  text-align: right;
}
.blog-nav-dir {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone-gray);
}
.blog-nav-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  color: var(--ink-navy);
  transition: color 150ms ease;
}
.blog-nav-link:hover .blog-nav-title { color: var(--muted-burgundy); }

@media (max-width: 720px) {
  .blog-card-title { font-size: 24px; }
  .blog-card-desc,
  .blog-body ul,
  .blog-body ol { font-size: 16px; }
  .blog-nav { flex-direction: column; }
  .blog-nav-link { max-width: 100%; }
  .blog-nav-next { text-align: left; margin-left: 0; }
}