/* =====================================================================
   MentionShare — page & content components
   Reuses the same palette/fonts as styles.css. Loaded after styles.css.
   Palette: cream #f5f1ea · ink #1a1a1f · tan #ebe3d0 · brown #3a2e20
            footer/dark #100e0b · gold rgb(232,184,115)
   ===================================================================== */

/* ---- Section wrappers (alternate the theme backgrounds) --------------- */
.ms-sec { padding-top: 112px; padding-bottom: 112px; }
.ms-sec.cream { background: #f5f1ea; color: #1a1a1f; }
.ms-sec.tan   { background: #ebe3d0; color: #1a1a1f; }
.ms-sec.brown { background: #3a2e20; color: #f5f1ea; border-top: 0.5px solid rgba(245,241,234,0.08); }
.ms-sec.dark  { background: #100e0b; color: #f5f1ea; }
@media (max-width: 1023px) { .ms-sec { padding-top: 80px; padding-bottom: 80px; } }
@media (max-width: 767px)  { .ms-sec { padding-top: 64px; padding-bottom: 64px; } }

/* Sample-report action: centered text + button. Sits under "See full pricing" in
   the Pick-where-to-start section (a top hairline separates it there). */
.ms-strip-row { display: flex; align-items: center; justify-content: center; gap: 18px 30px; flex-wrap: wrap; text-align: center; }
.ms-strip-text { font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; line-height: 1.5; color: rgba(26,26,31,0.78); margin: 0; max-width: 500px; }

/* ---- Eyebrow (light + dark variants) --------------------------------- */
.ms-eyebrow { display: flex; align-items: center; gap: 20px; margin-bottom: 36px; }
.ms-eyebrow .line { width: 56px; height: 1px; background: rgba(26,26,31,0.45); flex: none; }
.ms-eyebrow .label {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(26,26,31,0.6);
}
.ms-sec.brown .ms-eyebrow .line, .ms-sec.dark .ms-eyebrow .line { background: rgba(232,184,115,0.7); }
.ms-sec.brown .ms-eyebrow .label, .ms-sec.dark .ms-eyebrow .label { color: rgba(232,184,115,0.85); }

/* ---- Hero video placeholder ------------------------------------------ */
.ms-hero-video { max-width: 760px; margin: 32px auto 4px; }
.ms-video-frame {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  padding: 0; border: 1px solid rgba(26,26,31,0.10); border-radius: 18px;
  overflow: hidden; cursor: pointer; background: #d8cfbf;
  box-shadow: 0 26px 64px rgba(58,46,32,0.18), 0 4px 14px rgba(58,46,32,0.10);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.ms-video-frame:hover { transform: translateY(-3px); box-shadow: 0 34px 78px rgba(58,46,32,0.24); }
.ms-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Native inline player variant (self-hosted video, no modal) */
.ms-video-frame.is-native { cursor: default; }
.ms-video-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-video-frame.is-native::after { pointer-events: none; }
.ms-video-frame.is-native .ms-video-btn { border: 0; cursor: pointer; font: inherit; }
.ms-video-frame.is-native.playing::after { display: none; }
.ms-video-frame.is-native.playing .ms-video-btn { display: none; }
.ms-video-frame.is-native.playing { transform: none; }
.ms-video-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(16,11,6,0.04), rgba(16,11,6,0.16)); }
.ms-video-btn {
  position: absolute; left: 50%; top: calc(50% + 25px); transform: translate(-50%,-50%); z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px 12px 16px; border-radius: 40px;
  background: #1a1a1f; color: #f5f1ea;
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.30);
  transition: transform 200ms ease, background-color 200ms ease;
}
.ms-video-frame:hover .ms-video-btn { transform: translate(-50%,-50%) scale(1.06); background: #000; }
.ms-video-btn .play { width: 14px; height: 14px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .ms-video-frame, .ms-video-btn { transition: none; }
  .ms-video-frame:hover { transform: none; }
  .ms-video-frame:hover .ms-video-btn { transform: translate(-50%,-50%); }
}
/* Video lightbox (opens on Watch video) */
.ms-video-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ms-video-modal[hidden] { display: none; }
.ms-video-modal-backdrop { position: absolute; inset: 0; background: rgba(16,11,6,0.82); }
.ms-video-modal-inner { position: relative; z-index: 1; width: 100%; max-width: 960px; }
.ms-video-modal-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.ms-video-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ms-video-close {
  position: absolute; top: -44px; right: 0; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(245,241,234,0.14); color: #f5f1ea; font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 200ms ease;
}
.ms-video-close:hover { background: rgba(245,241,234,0.28); }
@media (max-width: 600px) { .ms-video-close { top: -40px; } }

/* ---- Display heading + lead ------------------------------------------ */
.ms-h2 {
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(38px, 4.8vw, 68px);
  font-weight: 600; line-height: 1.06; letter-spacing: -0.02em;
  margin: 0 0 24px; max-width: 880px;
}
.ms-lead {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 21px; line-height: 1.55; color: rgba(26,26,31,0.8);
  max-width: 640px; margin: 0 0 8px;
}
.ms-sec.brown .ms-lead, .ms-sec.dark .ms-lead { color: rgba(245,241,234,0.72); }

/* ---- Prose (explainers, blog body) ----------------------------------- */
.ms-prose {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px; line-height: 1.7; color: rgba(26,26,31,0.86);
  max-width: 680px;
}
.ms-prose p { margin: 0 0 20px; }
.ms-prose h2 {
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: 30px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.18;
  margin: 44px 0 16px; color: #1a1a1f;
}
.ms-prose h3 {
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: 23px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2;
  margin: 36px 0 12px; color: #1a1a1f;
}
.ms-prose ul, .ms-prose ol { margin: 0 0 20px; padding-left: 22px; }
.ms-prose li { margin: 0 0 10px; }
.ms-prose strong { font-weight: 600; color: #1a1a1f; }
.ms-prose a { color: #1a1a1f; text-decoration: underline; text-underline-offset: 2px; }
.ms-prose a.engram-cta { color: #f5f1ea; text-decoration: none; }
.ms-sec.brown .ms-prose, .ms-sec.dark .ms-prose { color: rgba(245,241,234,0.82); }
.ms-sec.brown .ms-prose h2, .ms-sec.brown .ms-prose h3, .ms-sec.brown .ms-prose strong,
.ms-sec.dark  .ms-prose h2, .ms-sec.dark  .ms-prose h3, .ms-sec.dark  .ms-prose strong { color: #f5f1ea; }

/* ---- TL;DR / callout -------------------------------------------------- */
.ms-tldr {
  border-left: 3px solid rgba(232,184,115,0.9);
  background: rgba(232,184,115,0.08);
  padding: 18px 22px; border-radius: 0 10px 10px 0; margin: 0 0 30px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17px; line-height: 1.6; color: rgba(26,26,31,0.85);
}
.ms-tldr .k {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(26,26,31,0.5); display: block; margin-bottom: 6px;
}
.ms-tldr ul { margin: 4px 0 0; padding-left: 20px; }
.ms-tldr li { margin: 0 0 6px; }
.ms-tldr li:last-child { margin-bottom: 0; }
.ms-tldr li strong { font-weight: 600; color: #1a1a1f; }

/* ---- Tables (comparison / leaderboard) ------------------------------- */
.ms-table-wrap { overflow-x: auto; margin: 4px 0 24px; }
.ms-table { width: 100%; border-collapse: collapse; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; }
.ms-table th, .ms-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid rgba(26,26,31,0.12); }
.ms-table thead th {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(26,26,31,0.55); font-weight: 600;
}
.ms-table tbody tr:hover { background: rgba(26,26,31,0.03); }
.ms-table .you { font-weight: 600; }
/* Comparison-table polish (Snapshot vs Full Audit) */
.ms-table .na { color: rgba(26,26,31,0.32); }
.ms-table .yes { color: rgba(184,133,20,1); font-weight: 700; }
.ms-table.compare { min-width: 560px; table-layout: fixed; }
/* Equal-width Snapshot & Full Audit columns (label column narrower) so Snapshot
   never stretches wider than Full Audit; fixed layout enforces it whatever the text. */
.ms-table.compare th:first-child, .ms-table.compare td:first-child { width: 30%; }
.ms-table.compare th:nth-child(2), .ms-table.compare td:nth-child(2),
.ms-table.compare th:nth-child(3), .ms-table.compare td:nth-child(3) { width: 35%; }
/* Subtle emphasis on the Full Audit (3rd) column: a light tint + bolder header. */
.ms-table.compare th:nth-child(3), .ms-table.compare td:nth-child(3) { background: rgba(255,253,249,0.55); }
.ms-table.compare thead th:nth-child(3) { color: rgba(26,26,31,0.85); font-weight: 700; }
/* CTA row at the bottom of the table. */
.ms-table.compare .cta-row td { border-bottom: none; padding-top: 22px; vertical-align: top; }
.ms-table-cta {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  padding: 11px 14px; border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13.5px; font-weight: 600;
  text-decoration: none; transition: background-color .18s ease, color .18s ease;
}
.ms-table-cta.outline { border: 1px solid #1a1a1f; background: transparent; color: #1a1a1f; }
.ms-table-cta.outline:hover { background: #1a1a1f; color: #f5f1ea; }
.ms-table-cta.filled { border: 1px solid #1a1a1f; background: #1a1a1f; color: #f5f1ea; }
.ms-table-cta.filled:hover { background: #000; }
/* On phones the 560px min-width pushed the Full Audit column off-screen (only
   Snapshot showed, so it looked "way longer"). Drop the min-width and tighten
   spacing so all three columns fit and the table stops needing a sideways scroll. */
@media (max-width: 600px) {
  .ms-table.compare { min-width: 0; font-size: 12.5px; }
  .ms-table.compare th, .ms-table.compare td { padding: 9px 6px; }
  .ms-table.compare th:first-child, .ms-table.compare td:first-child { padding-left: 2px; }
  .ms-table-cta { font-size: 11.5px; padding: 9px 6px; }
}
.ms-sec.brown .ms-table th, .ms-sec.brown .ms-table td,
.ms-sec.dark  .ms-table th, .ms-sec.dark  .ms-table td { border-color: rgba(245,241,234,0.14); color: rgba(245,241,234,0.9); }
.ms-sec.brown .ms-table thead th, .ms-sec.dark .ms-table thead th { color: rgba(232,184,115,0.8); }
.ms-sec.brown .ms-table tbody tr:hover, .ms-sec.dark .ms-table tbody tr:hover { background: rgba(245,241,234,0.04); }

/* ---- "Four simple steps" static 2x2 step grid (no scroll animation) -------- */
/* Grid container centered on the page (margin auto); cell text stays left-aligned.
   Wider gaps than the header block so each step breathes. */
/* Grid shares the headline's content max-width (.ms-h2 is 880px) so the section
   reads as one centered column; cell text stays left-aligned. */
.ms-steps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 72px; max-width: 880px; margin: 48px auto 0; }
@media (max-width: 700px) { .ms-steps-grid { grid-template-columns: 1fr; gap: 36px; max-width: 460px; } }
/* Line-less eyebrow for centered headers, restyled to the hero's label convention
   (General Sans 16/600/-0.01em, 30px gap to the headline); gold via the dark-section
   override so it keeps contrast on the brown background. */
.ms-eyebrow-plain { justify-content: center; gap: 0; margin-bottom: 30px; }
.ms-eyebrow-plain .label { font-family: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
/* Duotone photo card atop each step (baked sepia JPGs from the graphics kit) */
.ms-step-photo {
  position: relative; border-radius: 12px; overflow: hidden; margin-bottom: 20px;
  border: 1px solid rgba(245,241,234,0.14);
}
.ms-step-photo img { display: block; width: 100%; height: auto; }
/* Ghost numeral (option A, photo-anchored): a huge translucent number sitting
   fully on the photo's bottom-left, clipped by the card's radius. Lives inside
   .ms-step-photo in the markup, so it costs no vertical space below. */
.ms-step-num {
  position: absolute; left: 12px; bottom: 0;
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 96px; font-weight: 700; letter-spacing: -0.04em; line-height: 0.95;
  color: rgba(245,241,234,0.26); pointer-events: none;
}
.ms-step-title {
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: #f5f1ea; margin: 0 0 8px;
}
.ms-step-desc {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15.5px; line-height: 1.55; color: rgba(245,241,234,0.62); margin: 0;
}
/* One-time entrance: opacity + transform only (compositor-friendly), plays once.
   .ms-anim-steps is added by JS so no-JS users see the steps immediately. */
.ms-anim-steps .ms-step { opacity: 0; transform: translateY(20px); transition: opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1); }
.ms-anim-steps .ms-step.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ms-anim-steps .ms-step { opacity: 1; transform: none; transition: none; }
}

/* ---- FAQ (details/summary) ------------------------------------------- */
.ms-faq { max-width: 780px; }
/* Landing FAQ (#faq): centered headline + centered, 720px-constrained accordion.
   Scoped so other FAQ blocks (pricing, blog) keep their left-aligned layout. */
#faq .ms-h2 { text-align: center; margin-left: auto; margin-right: auto; }
#faq .ms-faq { max-width: 720px; margin-left: auto; margin-right: auto; }
.ms-faq details { border-bottom: 1px solid rgba(26,26,31,0.14); }
.ms-faq summary {
  list-style: none; cursor: pointer; padding: 22px 0;
  font-family: 'General Sans', -apple-system, sans-serif; font-size: 19px; font-weight: 600;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.ms-faq summary::-webkit-details-marker { display: none; }
.ms-faq summary::after { content: "+"; font-family: -apple-system, sans-serif; font-size: 22px; color: rgba(26,26,31,0.5); flex: none; }
.ms-faq details[open] summary::after { content: "\2212"; }
.ms-faq .ms-faq-a {
  padding: 0 0 24px; max-width: 700px;
  font-family: 'Source Serif 4', Georgia, serif; font-size: 17px; line-height: 1.6; color: rgba(26,26,31,0.78);
}
.ms-sec.brown .ms-faq details, .ms-sec.dark .ms-faq details { border-color: rgba(245,241,234,0.16); }
.ms-sec.brown .ms-faq summary, .ms-sec.dark .ms-faq summary { color: #f5f1ea; }
.ms-sec.brown .ms-faq summary::after, .ms-sec.dark .ms-faq summary::after { color: rgba(245,241,234,0.55); }
.ms-sec.brown .ms-faq .ms-faq-a, .ms-sec.dark .ms-faq .ms-faq-a { color: rgba(245,241,234,0.72); }

/* ---- Two-column layout helper ---------------------------------------- */
.ms-two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 72px; align-items: center; }
.ms-two.narrow-left { grid-template-columns: minmax(0,45fr) minmax(0,55fr); }
@media (max-width: 1023px) { .ms-two, .ms-two.narrow-left { grid-template-columns: 1fr; gap: 48px; } }

/* ---- Pricing ---------------------------------------------------------- */
.ms-pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 1100px) { .ms-pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .ms-pricing-grid { grid-template-columns: 1fr; } }
.ms-plan {
  background: #fffdf9; border: 1px solid rgba(26,26,31,0.12); border-radius: 16px;
  padding: 28px 24px; display: flex; flex-direction: column;
}
.ms-plan.featured { background: #1a1a1f; color: #f5f1ea; border-color: #1a1a1f; box-shadow: 0 14px 44px rgba(26,26,31,0.22); }
.ms-plan-badge {
  align-self: flex-start;
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #1a1a1f;
  background: rgba(232,184,115,0.95); padding: 4px 11px; border-radius: 20px; margin-bottom: 14px;
}
.ms-plan-name { font-family: 'General Sans', -apple-system, sans-serif; font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.ms-plan-who { font-family: 'Source Serif 4', Georgia, serif; font-size: 14px; color: rgba(26,26,31,0.6); margin: 0 0 18px; min-height: 40px; }
.ms-plan.featured .ms-plan-who { color: rgba(245,241,234,0.62); }
.ms-plan-price { font-family: 'General Sans', -apple-system, sans-serif; font-size: 34px; font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.1; }
.ms-plan-per { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; color: rgba(26,26,31,0.55); margin: 2px 0 20px; }
.ms-plan.featured .ms-plan-per { color: rgba(245,241,234,0.55); }
.ms-plan-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 11px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14.5px; color: rgba(26,26,31,0.8); }
.ms-plan.featured .ms-plan-list { color: rgba(245,241,234,0.85); }
.ms-plan-list li { padding-left: 24px; position: relative; line-height: 1.4; }
.ms-plan-list li::before { content: "\2713"; position: absolute; left: 0; color: rgba(232,184,115,1); font-weight: 700; }
.ms-plan-cta {
  display: block; text-align: center; padding: 12px 18px; border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 600;
  text-decoration: none; border: 1px solid #1a1a1f; background: transparent; color: #1a1a1f;
  transition: background-color .18s ease, color .18s ease;
}
/* Snapshot has no guarantee line under its button; reserve the same space so the
   two buttons sit at the same height and the cards end flush. */
.ms-plan:not(.featured) .ms-plan-cta { margin-bottom: 27px; }
.ms-plan-cta:hover { background: #1a1a1f; color: #f5f1ea; }
.ms-plan.featured .ms-plan-cta { background: #f5f1ea; color: #1a1a1f; border-color: #f5f1ea; }
.ms-plan.featured .ms-plan-cta:hover { background: #fff; }
.ms-pricing-note { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; letter-spacing: 0; color: rgba(26,26,31,0.55); margin: 22px 0 0; text-align: center; }
.ms-pricing-note a { color: rgba(26,26,31,0.75); text-decoration: underline; text-underline-offset: 2px; }
.ms-pricing-note a:hover { color: #1a1a1f; }

/* Two-card layout: centered and balanced, stacks on mobile. Two-class selector
   so it overrides the base .ms-pricing-grid media queries regardless of order. */
.ms-pricing-grid.two { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin-left: auto; margin-right: auto; gap: 32px; }
@media (max-width: 640px) { .ms-pricing-grid.two { grid-template-columns: 1fr; max-width: 400px; } }
/* Outlined-tab restyle of the 2-up pricing cards, matching the homepage plan
   cards: 2px ink border on paper, pill tab breaking the top edge, hard offset
   shadow (tan for Snapshot, amber for the featured Full Audit). The featured
   card trades its dark ink fill for the amber pairing, so all its light-on-dark
   overrides are reset to ink below. */
.ms-pricing-grid.two .ms-plan {
  position: relative; background: #fffdf9; border: 2px solid #1a1a1f; border-radius: 22px;
  padding: 40px 30px 30px; margin-top: 16px; box-shadow: 8px 8px 0 #ebe3d0;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ms-pricing-grid.two .ms-plan:hover { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 #ebe3d0; }
.ms-pricing-grid.two .ms-plan.featured { background: #fffdf9; color: inherit; border-color: #1a1a1f; box-shadow: 8px 8px 0 #e8b873; }
.ms-pricing-grid.two .ms-plan.featured:hover { box-shadow: 10px 10px 0 #e8b873; }
@media (prefers-reduced-motion: reduce) { .ms-pricing-grid.two .ms-plan:hover { transform: none; } }
.ms-pricing-grid.two .ms-plan .ptab {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  background: #fffdf9; color: #1a1a1f; border: 2px solid #1a1a1f; border-radius: 999px;
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 6px 16px; white-space: nowrap;
}
.ms-pricing-grid.two .ms-plan.featured .ptab { background: #e8b873; }
/* Centered header block like the homepage cards; the feature lists stay
   left-aligned for readability. */
.ms-pricing-grid.two .ms-plan-name { text-align: center; font-size: 26px; letter-spacing: -0.02em; margin-bottom: 8px; }
.ms-pricing-grid.two .ms-plan-who { text-align: center; }
.ms-pricing-grid.two .ms-plan-price { text-align: center; margin-bottom: 20px; }
.ms-pricing-grid.two .ms-plan-list { flex: 1; }
/* Featured card is paper now, so its light-on-dark text colors reset to ink. */
.ms-pricing-grid.two .ms-plan.featured .ms-plan-who { color: rgba(26,26,31,0.6); }
.ms-pricing-grid.two .ms-plan.featured .ms-plan-per { color: rgba(26,26,31,0.55); }
.ms-pricing-grid.two .ms-plan.featured .ms-plan-list { color: rgba(26,26,31,0.8); }
.ms-pricing-grid.two .ms-plan.featured .ms-plan-guarantee { color: rgba(26,26,31,0.55); }
.ms-pricing-grid.two .ms-plan.featured .ms-plan-credit-note { color: rgba(26,26,31,0.6); }
.ms-pricing-grid.two .ms-plan.featured .ms-plan-addon { background: rgba(26,26,31,0.04); border-color: rgba(26,26,31,0.14); }
.ms-pricing-grid.two .ms-plan.featured .ms-plan-addon .addon-desc { color: rgba(26,26,31,0.62); }
.ms-pricing-grid.two .ms-plan.featured .ms-plan-addon .addon-perk { color: rgba(26,26,31,0.75); }
/* Buttons: uppercase pills; outline for Snapshot, solid ink for the featured card. */
.ms-pricing-grid.two .ms-plan-cta {
  border: 2px solid #1a1a1f; background: transparent; color: #1a1a1f;
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.ms-pricing-grid.two .ms-plan-cta:hover { background: #1a1a1f; color: #f5f1ea; }
.ms-pricing-grid.two .ms-plan.featured .ms-plan-cta { background: #1a1a1f; color: #f5f1ea; border-color: #1a1a1f; }
.ms-pricing-grid.two .ms-plan.featured .ms-plan-cta:hover { background: #000; }
@media (max-width: 640px) {
  .ms-pricing-grid.two { gap: 36px; }
  .ms-pricing-grid.two .ms-plan { box-shadow: 6px 6px 0 #ebe3d0; }
  .ms-pricing-grid.two .ms-plan.featured { box-shadow: 6px 6px 0 #e8b873; }
}

/* Monitoring add-on block inside the Full Audit card. Sits above the CTA as a
   visually separate module; tuned for the dark featured card but degrades on light. */
.ms-plan-addon {
  /* margin-top:auto pushes the info block (and the button below it) to the bottom,
     so the Snapshot block sits just above its button, level with the Full Audit block. */
  margin: auto 0 22px; padding: 14px 16px; border-radius: 10px;
  background: rgba(26,26,31,0.04); border: 1px solid rgba(26,26,31,0.10); text-align: left;
}
.ms-plan.featured .ms-plan-addon { background: rgba(245,241,234,0.07); border-color: rgba(245,241,234,0.18); }
.ms-plan-addon .addon-title { font-family: 'General Sans', -apple-system, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; margin: 0 0 2px; }
.ms-plan-addon .addon-price { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12.5px; font-weight: 600; margin: 0 0 8px; color: rgb(232,184,115); }
.ms-plan-addon .addon-desc { font-family: 'Source Serif 4', Georgia, serif; font-size: 12.5px; line-height: 1.5; margin: 0; color: rgba(26,26,31,0.62); }
.ms-plan.featured .ms-plan-addon .addon-desc { color: rgba(245,241,234,0.72); }
/* Extra "first month free" perk line under the monitoring add-on text. */
.ms-plan-addon .addon-perk { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12.5px; font-weight: 600; margin: 8px 0 0; color: rgba(26,26,31,0.75); }
.ms-plan.featured .ms-plan-addon .addon-perk { color: rgba(245,241,234,0.92); }

/* Small centered line under the pricing subheading. */
.ms-subnote { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; color: rgba(26,26,31,0.55); margin: 14px 0 0; text-align: center; }

/* Row that holds the plan badges (lets a second badge sit beside "Most popular"). */
.ms-plan-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ms-plan-badges .ms-plan-badge { margin-bottom: 0; }
/* Single highlight badge: solid gold with dark text. */
.ms-plan-badge.credit { background: rgba(232,184,115,0.95); color: #1a1a1f; border: none; }
/* Invisible badge-row spacer on the Snapshot card: matches the real badge row's
   height so both card titles align. Collapses to nothing when the cards stack. */
.ms-plan-badges.spacer { visibility: hidden; }
@media (max-width: 640px) { .ms-plan-badges.spacer { display: none; } }
/* Muted one-liner that makes the credit badge self-explanatory. */
.ms-plan-credit-note { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12.5px; line-height: 1.45; margin: -12px 0 18px; color: rgba(26,26,31,0.6); }
.ms-plan.featured .ms-plan-credit-note { color: rgba(245,241,234,0.6); }

/* Reassurance line kept inside the card, directly under the CTA. */
.ms-plan-guarantee { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12px; text-align: center; margin: 10px 0 0; color: rgba(26,26,31,0.55); }
.ms-plan.featured .ms-plan-guarantee { color: rgba(245,241,234,0.6); }

/* Body-font note variant (bottom strip), as opposed to the monospace .ms-pricing-note. */
.ms-note-body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; color: rgba(26,26,31,0.55); margin: 22px auto 0; max-width: 720px; text-align: center; }
.ms-note-body a { color: rgba(26,26,31,0.8); text-decoration: underline; text-underline-offset: 2px; }
.ms-note-body a:hover { color: #1a1a1f; }

/* ---- Blog index ------------------------------------------------------- */
/* Two banners per row; each card = image, meta row (chip / date / read time),
   title, clamped description. The media block holds the article banner; until
   a banner is generated it shows the sepia placeholder gradient. */
.ms-blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }
@media (max-width: 760px) { .ms-blog-grid { grid-template-columns: 1fr; gap: 40px; } }
.ms-blog-card {
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
}
.ms-card-media {
  aspect-ratio: 2 / 1; border-radius: 16px; overflow: hidden; position: relative;
  background: linear-gradient(135deg, #4a3a25 0%, #2c2317 55%, #6b543a 135%);
  margin-bottom: 18px; transition: transform .2s ease, box-shadow .2s ease;
}
.ms-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-blog-card:hover .ms-card-media { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(26,26,31,0.18); }
.ms-card-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.ms-card-ph::before { content: ""; width: 34px; height: 5px; border-radius: 99px; background: rgba(245,241,234,0.35); }
.ms-card-ph span { font-family: 'General Sans', -apple-system, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,241,234,0.45); }
.ms-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; }
.ms-card-meta .cat { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(184,133,20,1); background: rgba(184,133,20,0.1); padding: 4px 10px; border-radius: 999px; }
.ms-card-meta .meta-txt { font-family: 'General Sans', -apple-system, sans-serif; font-size: 13px; color: rgba(26,26,31,0.55); }
.ms-card-meta .meta-txt + .meta-txt::before { content: "\00B7"; margin-right: 14px; color: rgba(26,26,31,0.35); }
.ms-blog-card h2 { font-family: 'General Sans', -apple-system, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.2; margin: 0 0 10px; color: #1a1a1f; }
/* Blog listing is a semantic <ul>/<li>; keep the grid + equal-height cards. */
ul.ms-blog-grid { list-style: none; margin: 0; padding: 0; }
ul.ms-blog-grid > li { display: flex; }
ul.ms-blog-grid > li > .ms-blog-card { flex: 1; }
.ms-blog-card p { font-family: 'Source Serif 4', Georgia, serif; font-size: 15px; line-height: 1.55; color: rgba(26,26,31,0.7); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Blog article ----------------------------------------------------- */
.ms-article { max-width: 720px; margin: 0 auto; }
.ms-article-head { margin-bottom: 40px; }

/* Collapsible table of contents (CSS-only, checkbox toggle). Collapsed it
   shows roughly the first five rows behind a fade; the label expands it. */
.ms-toc { background: #ebe3d0; border: 1px solid rgba(26,26,31,0.08); border-radius: 16px; padding: 22px 28px 18px; margin: 0 0 36px; }
.ms-toc-title { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(184,133,20,1); }
.ms-toc input { display: none; }
.ms-toc-list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 232px; overflow: hidden; position: relative; }
.ms-toc-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(180deg, rgba(235,227,208,0), #ebe3d0); pointer-events: none; }
.ms-toc input:checked ~ .ms-toc-list { max-height: none; }
.ms-toc input:checked ~ .ms-toc-list::after { display: none; }
.ms-toc-list a { display: block; padding: 7px 0; font-family: 'General Sans', -apple-system, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.35; color: #1a1a1f; text-decoration: none; }
.ms-toc-list li.sub a { font-weight: 500; font-size: 14.5px; color: rgba(26,26,31,0.65); padding: 6px 0 6px 16px; border-left: 2px solid rgba(26,26,31,0.12); margin-left: 4px; }
.ms-toc-list a:hover { text-decoration: underline; }
.ms-toc-more { display: block; text-align: center; margin-top: 10px; cursor: pointer; font-family: 'General Sans', -apple-system, sans-serif; font-weight: 600; font-size: 14px; color: rgba(184,133,20,1); }
.ms-toc-more:hover { text-decoration: underline; }
.ms-toc .show-less, .ms-toc input:checked ~ .ms-toc-more .show-more { display: none; }
.ms-toc input:checked ~ .ms-toc-more .show-less { display: inline; }
.ms-article-hero { margin: 0 0 36px; }
.ms-article-hero img { width: 100%; height: auto; border-radius: 16px; display: block; }
.ms-article-cat { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(184,133,20,1); margin-bottom: 16px; }
.ms-article h1 { font-family: 'General Sans', -apple-system, sans-serif; font-size: clamp(34px, 4.4vw, 52px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; }
.ms-article-meta { display: flex; align-items: center; gap: 11px; }
.ms-author-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid rgba(26,26,31,0.12); }
.ms-author-name { font-family: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #1a1a1f; }
.ms-author-date { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.08em; color: rgba(26,26,31,0.5); }
.ms-author-date::before { content: "\00B7"; margin: 0 8px 0 6px; color: rgba(26,26,31,0.35); }
.ms-article .ms-prose { max-width: none; }
.ms-back { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; color: rgba(26,26,31,0.6); text-decoration: none; display: inline-block; margin-bottom: 28px; }
.ms-back:hover { color: #1a1a1f; }

/* ---- Small utility ---------------------------------------------------- */
.ms-center { text-align: center; }
.ms-center .ms-h2, .ms-center .ms-lead { margin-left: auto; margin-right: auto; }
.ms-center .ms-eyebrow { justify-content: center; }
.ms-mt-32 { margin-top: 32px; }

/* ---- Centered hero (Sumsub-style) --------------------------------- */
.ms-hero { background: #f5f1ea; text-align: center; padding: 108px 0 44px; }
.ms-hero-kicker {
  position: relative; display: inline-block;
  margin-bottom: 30px;
}
.ms-hero-kicker .kick-text {
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: #1a1a1f;
}
/* "visibility" resolves from blurred into focus, holds sharp, then gently drifts back.
   Blur + opacity only (no width change) so the rest of the line never reflows. */
.ms-hero-kicker .kick-focus {
  display: inline-block; will-change: filter, opacity;
  animation: kickFocus 5s ease-in-out infinite;
}
/* focus in (0-22%), hold sharp (22-85%), soften back (85-100%) */
@keyframes kickFocus {
  0%   { filter: blur(5px); opacity: 0.4; }
  22%  { filter: blur(0);   opacity: 1; }
  85%  { filter: blur(0);   opacity: 1; }
  100% { filter: blur(5px); opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-hero-kicker .kick-focus { animation: none; filter: none; opacity: 1; }
}
.ms-hero h1 {
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(38px, 5.4vw, 72px); font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.05; margin: 0 auto; max-width: 900px; text-wrap: balance; color: #1a1a1f;
}
/* ---- Hero engine rotator ------------------------------------------
   Shows one engine at a time. All five names are real text in the markup,
   so nothing here is hidden from crawlers — the animation only decides
   which one is on screen. The box has a fixed height and the items are
   stacked and absolutely positioned, so a swap can never reflow the hero
   (this sits next to the LCP element, and "Google AI Overviews" is far
   wider than "Claude"). */
.ms-hero-engines { position: relative; height: 58px; margin: 30px auto 0; }
.ms-hero-engines .eng-rot { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.ms-hero-engines .eng-item {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  opacity: 0; will-change: opacity, transform;
  animation: engCycle 12s ease-in-out infinite;
  animation-delay: calc(var(--i) * 2.4s);
}
.ms-hero-engines .eng-logo { width: 55px; height: 55px; flex: none; display: block; color: #1a1a1f; }
.ms-hero-engines .eng-name {
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 34px; font-weight: 600; letter-spacing: -0.01em; color: #1a1a1f; white-space: nowrap;
}
/* 5 engines x 2.4s = one 12s loop. Each holds ~1.9s; the fade-out runs slightly
   past its slot (18-22%) so it crossfades with the next rather than blinking. */
@keyframes engCycle {
  0%   { opacity: 0; transform: translateY(5px); }
  2%   { opacity: 1; transform: none; }
  18%  { opacity: 1; transform: none; }
  22%  { opacity: 0; transform: translateY(-5px); }
  100% { opacity: 0; transform: translateY(-5px); }
}
/* Static row instead — same content, no motion. Matches .kick-focus above. */
@media (prefers-reduced-motion: reduce) {
  .ms-hero-engines { height: auto; }
  .ms-hero-engines .eng-rot {
    position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px;
  }
  .ms-hero-engines .eng-item { position: static; inset: auto; opacity: 1; animation: none; transform: none; }
}
.ms-hero p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: rgba(26,26,31,0.74);
  max-width: 640px; margin: 26px auto 0;
}
.ms-hero-cta { margin-top: 38px; display: flex; gap: 14px 22px; justify-content: center; align-items: center; flex-wrap: wrap; }
/* Quiet secondary action next to the primary CTA: understated (muted text,
   underline only on hover) so it reads as available-if-you-want-it. */
.ms-cta-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px; font-weight: 500; color: rgba(26,26,31,0.6);
  text-decoration: none; padding: 6px 2px;
  transition: color .18s ease;
}
.ms-cta-secondary svg { width: 16px; height: 16px; flex: none; opacity: 0.7; transition: opacity .18s ease; }
/* Underline lives on the .lbl text only (never under the icon) and appears on hover. */
.ms-cta-secondary .lbl { text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(26,26,31,0.4); }
.ms-cta-secondary:hover { color: #1a1a1f; }
.ms-cta-secondary:hover svg { opacity: 1; }
.ms-cta-secondary:hover .lbl { text-decoration-line: underline; }
/* Email-only sample-report capture under the hero CTA: one connected pill,
   input on the left, soft tan CTA button flush right. Formspree posts just the
   email; the confirmation line replaces the pill on success. Kept visually
   subordinate to the dark "Get your audit" pill above (one primary per hero). */
.ms-sample-capture { max-width: 560px; margin: 18px auto 0; }
.ms-sample-group {
  display: flex; align-items: center; gap: 8px;
  background: #fffdf9; border: 1px solid rgba(26,26,31,0.14); border-radius: 999px;
  padding: 5px 5px 5px 8px; box-shadow: 0 1px 8px rgba(26,26,31,0.05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ms-sample-group:focus-within { border-color: rgba(232,184,115,0.95); box-shadow: 0 0 0 3px rgba(232,184,115,0.2); }
.ms-sample-group input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px;
  color: #1a1a1f; padding: 10px 8px 10px 14px;
}
.ms-sample-group input::placeholder { color: rgba(26,26,31,0.42); }
.ms-sample-group input:focus { outline: none; }
/* Secondary CTA: soft tan solid (house tan from the TOC cards) so it stays
   clearly clickable but yields to the dark primary pill. */
.ms-sample-group .engram-cta {
  flex: none; white-space: nowrap; padding: 11px 20px; font-size: 14px; cursor: pointer;
  background-color: #ebe3d0; color: #1a1a1f; border-color: rgba(26,26,31,0.16); box-shadow: none;
}
.ms-sample-group .engram-cta:hover { background-color: #e3d8bf; box-shadow: none; }
.ms-sample-group .engram-cta:disabled { opacity: 0.6; cursor: default; transform: none; }
.ms-sample-msg {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 1.55;
  color: #1a1a1f; margin: 12px auto 0; max-width: 480px;
}
.ms-sample-msg.is-err { color: #c7362f; }
/* Narrow screens: the connected pill can't fit both halves, so it opens into a
   stacked card and the button goes full width. */
@media (max-width: 560px) {
  .ms-sample-group { flex-direction: column; align-items: stretch; border-radius: 22px; padding: 8px; }
  .ms-sample-group input { padding: 10px 10px; text-align: center; }
  .ms-sample-group .engram-cta { justify-content: center; }
}
/* Ambient equalizer bars under the CTA — muted, contained, edges faded so it
   adds motion without competing with the button. Populated by tally.js. */
.ms-hero-tally {
  background: transparent; border-bottom: none;
  height: 48px; max-width: 560px; margin: 40px auto 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.ms-hero-tally .engram-footer-tally-run span { background: rgba(26,26,31,0.30); }
.ms-hero-trust { margin-top: 24px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.06em; color: rgba(26,26,31,0.5); }
@media (max-width: 767px) { .ms-hero { padding: 76px 0 56px; } }
/* Keep the widest rotator name ("Google AI Overviews") inside narrow viewports.
   It is absolutely positioned and white-space:nowrap, so at the desktop 34px it
   overflows the page and drags the whole hero and nav off-screen on phones. */
@media (max-width: 560px) {
  .ms-hero-engines { height: 44px; margin-top: 24px; }
  .ms-hero-engines .eng-item { gap: 11px; }
  .ms-hero-engines .eng-logo { width: 38px; height: 38px; }
  .ms-hero-engines .eng-name { font-size: 20px; }
}

/* ---- Product cards (from the pricing plans) ----------------------- */
.ms-prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 1000px) { .ms-prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ms-prod-grid { grid-template-columns: 1fr; } }
.ms-prod {
  position: relative; background: transparent; border: 1px solid rgba(26,26,31,0.1);
  border-radius: 14px; padding: 26px 24px; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; text-align: left;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
}
.ms-prod:hover {
  transform: scale(1.015); background: #fffdf9;
  border-color: rgba(26,26,31,0.22);
  box-shadow: 0 8px 26px rgba(26,26,31,0.08); z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .ms-prod { transition: box-shadow .3s ease, border-color .3s ease, background-color .3s ease; }
  .ms-prod:hover { transform: none; }
}

.ms-prod .pname { font-family: 'General Sans', -apple-system, sans-serif; font-size: 19px; font-weight: 600; margin: 0 0 8px; }
.ms-prod .pprice { font-family: 'General Sans', -apple-system, sans-serif; font-size: 27px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 12px; color: #1a1a1f; line-height: 1; }
.ms-prod .pprice span { font-size: 13px; font-weight: 500; color: rgba(26,26,31,0.5); font-family: -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: 0; }
.ms-prod .pdesc { font-family: 'Source Serif 4', Georgia, serif; font-size: 15px; line-height: 1.5; color: rgba(26,26,31,0.7); margin: 0 0 20px; flex: 1; }
.ms-prod .plink { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 600; color: #1a1a1f; }
.ms-prod:hover .plink { text-decoration: underline; }
/* Two-up variant (homepage preview after dropping the standalone Monitor card).
   Homepage cards are paper objects (warm white on cream) so the outline card
   no longer looks unfinished next to the dark featured one. */
.ms-prod-grid.two { grid-template-columns: repeat(2, 1fr); max-width: 700px; gap: 20px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .ms-prod-grid.two { grid-template-columns: 1fr; max-width: 380px; } }
.ms-prod-grid.two .ms-prod { padding: 28px 26px; }
/* Paper surface for the light card only: this selector outranks .ms-prod.featured,
   so the dark card must be excluded or it turns light until hover re-darkens it. */
.ms-prod-grid.two .ms-prod:not(.featured) {
  background: #fffdf9; border-color: rgba(26,26,31,0.12);
  box-shadow: 0 6px 22px rgba(26,26,31,0.06);
}
.ms-prod-grid.two .ms-prod .pprice { font-size: 34px; margin-bottom: 4px; }
/* Feature rows: hairline dividers instead of a prose blob, so the two offers
   compare line by line. */
.ms-prod .pfeat { list-style: none; margin: 0 0 18px; padding: 0; flex: 1; }
.ms-prod .pfeat li {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 15px; line-height: 1.45;
  color: rgba(26,26,31,0.75); padding: 9px 0; border-top: 1px solid rgba(26,26,31,0.08);
}
.ms-prod.featured .pfeat li { color: rgba(245,241,234,0.82); border-top-color: rgba(245,241,234,0.14); }
/* Delivery microline, same mono caption voice as the hero trust line. */
.ms-prod .pmeta {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; letter-spacing: 0.05em; color: rgba(26,26,31,0.5); margin: 0 0 16px;
}
.ms-prod.featured .pmeta { color: rgba(245,241,234,0.55); }
/* Amber chip on the featured card: says why it is the dark one. */
.ms-prod .ptag {
  position: absolute; top: -12px; right: 20px;
  background: #e8b873; color: #1a1a1f;
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(26,26,31,0.18);
}
/* =====================================================================
   Homepage plan cards, outlined-card style: 2px ink border, pill tab
   breaking the top edge, centered content, hard offset shadow in the
   house accents (tan for Snapshot, amber for the featured Full Audit).
   Separate from .ms-prod so the pricing page's 4-up grid is untouched.
   ===================================================================== */
.ms-prod-grid.two:has(.ms-gocard) { max-width: 760px; gap: 32px; }
.ms-gocard {
  position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; text-decoration: none; color: #1a1a1f;
  background: #fffdf9; border: 2px solid #1a1a1f; border-radius: 22px;
  padding: 40px 28px 30px; margin-top: 16px;
  box-shadow: 8px 8px 0 #ebe3d0;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ms-gocard:hover { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 #ebe3d0; }
.ms-gocard.featured { box-shadow: 8px 8px 0 #e8b873; }
.ms-gocard.featured:hover { box-shadow: 10px 10px 0 #e8b873; }
@media (prefers-reduced-motion: reduce) { .ms-gocard:hover { transform: none; } }
.ms-gocard .ptab {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  background: #fffdf9; color: #1a1a1f; border: 2px solid #1a1a1f; border-radius: 999px;
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 6px 16px; white-space: nowrap;
}
.ms-gocard.featured .ptab { background: #e8b873; }
.ms-gocard .picon { width: 26px; height: 26px; margin-bottom: 10px; }
.ms-gocard .pname {
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 12px;
}
.ms-gocard .pdesc {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15.5px; line-height: 1.55; color: rgba(26,26,31,0.75);
  margin: 0 0 20px; max-width: 300px; flex: 1;
}
.ms-gocard .pprice {
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; margin: 0 0 24px;
}
.ms-gocard .pprice span {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px; font-weight: 500; letter-spacing: 0; color: rgba(26,26,31,0.55);
}
.ms-gocard .pmeta {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; letter-spacing: 0.05em; color: rgba(26,26,31,0.5); margin: 0 0 22px;
}
.ms-gocard .pbtn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #1a1a1f; border-radius: 999px; padding: 12px 26px;
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: #1a1a1f; background: transparent; transition: background-color .18s ease, color .18s ease;
}
.ms-gocard.featured .pbtn { background: #1a1a1f; color: #f5f1ea; }
.ms-gocard:hover .pbtn { background: #1a1a1f; color: #f5f1ea; }
@media (max-width: 640px) {
  .ms-gocard { box-shadow: 6px 6px 0 #ebe3d0; }
  .ms-gocard.featured { box-shadow: 6px 6px 0 #e8b873; }
  .ms-prod-grid.two:has(.ms-gocard) { gap: 36px; }
}
/* Featured card borrows the pricing page's dark-ink palette (colors only, not the full pricing card layout). */
.ms-prod.featured {
  background: #1a1a1f; color: #f5f1ea; border-color: #1a1a1f;
  box-shadow: 0 14px 44px rgba(26,26,31,0.22);
}
.ms-prod.featured:hover {
  background: #1a1a1f; border-color: #1a1a1f;
  box-shadow: 0 18px 50px rgba(26,26,31,0.28);
}
.ms-prod.featured .pname { color: #f5f1ea; }
.ms-prod.featured .pprice { color: #f5f1ea; }
.ms-prod.featured .pprice span { color: rgba(245,241,234,0.55); }
.ms-prod.featured .pdesc { color: rgba(245,241,234,0.82); }
.ms-prod.featured .plink { color: rgb(232,184,115); }
.ms-prod .plink { margin-top: auto; }

/* =====================================================================
   STATS — "GEO audit by the numbers" (data-driven, scroll-animated).
   Palette: cream/tan band #ebe3d0 · cards #f7f2e7 · gold #C9971C→#E5B94E
   · ink #1a1a1f · warm-grey captions. Dependency-free (CSS + inline SVG).
   ===================================================================== */
.geo-stats-title {
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(28px, 3.4vw, 44px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.08; color: #1a1a1f;
  margin: 0 0 40px; max-width: 640px;
}
.geo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 900px) { .geo-stats { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 520px) { .geo-stats { grid-template-columns: 1fr; } }

.geo-card {
  background: #f7f2e7;
  border: 1px solid rgba(26,26,31,0.07);
  border-radius: 20px;
  padding: 30px 24px 26px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(120,86,20,0.10), 0 2px 6px rgba(120,86,20,0.06);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.geo-card:hover { transform: translateY(-4px); box-shadow: 0 18px 46px rgba(120,86,20,0.17); }


/* soft radial gold glow behind each graphic */
.geo-viz::before {
  content: ""; position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%);
  width: 150px; height: 112px; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(201,151,28,0.16), rgba(201,151,28,0) 72%);
}


/* Card 1 uses a raster glow image (carries its own glow, so drop the ::before) */

.geo-viz--img::before { display: none; }


/* Card 1 (photo variant): full-bleed dark image with text at the bottom.
   min-height keeps the cards tall (the old SVG card's 172px graphic zone used
   to set the row height; the image cards need their own height anchor). */
.geo-card--photo { position: relative; padding: 0; overflow: hidden; min-height: 356px; background: #16110a; border-color: rgba(0,0,0,0.16); }
/* Tablet 2-col and phone 1-col: the artwork is portrait, so the card must stay
   roughly portrait too or object-fit:cover crops the motif away. */
@media (max-width: 900px) { .geo-card--photo { min-height: max(320px, 52vw); } }
@media (max-width: 520px) {
  .geo-card--photo { min-height: 112vw; }
  /* phone-only: stat text ~30% larger for readability at arm's length */
  .geo-card--photo .geo-n { font-size: 52px; }
  .geo-card--photo .geo-l { font-size: 17.5px; }
}
.geo-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; z-index: 0; }
.geo-photo-inner {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 30px 24px 25px;
  /* light scrim over the clean dark floor keeps the text crisp */
  background: linear-gradient(to top, rgba(16,11,6,0.72) 0%, rgba(16,11,6,0.35) 22%, rgba(16,11,6,0) 40%);
}
.geo-card--photo .geo-n { color: #f5f1ea; }
.geo-card--photo .geo-n .geo-unit { color: #f5f1ea; }
.geo-card--photo .geo-l { color: #f5f1ea; }
/* Card 2's bars sit higher in its image, so bias the crop toward the bottom
   floor to leave the text clean space below them. */
.geo-card--photo2 .geo-photo { object-position: center 58%; }
/* Card 3's fingerprint arcs sit in the upper 2/3 of the artwork; a near-centered
   crop shows the full motif and leaves the plain floor below for the text. */
.geo-card--photo3 .geo-photo { object-position: center 45%; }
/* Card 4's calendar squares sit in the vertical middle; bias the crop toward
   the bottom so the dark floor gives the text clean space below. */
.geo-card--photo4 .geo-photo { object-position: center 70%; }



/* Card 1 photo variant: slow zoom-in of the image, text fades up after */
.geo-anim .geo-photo { opacity: 0; transform: scale(1.05); transition: opacity .9s ease, transform 1.1s cubic-bezier(.22,1,.36,1); }
.geo-anim .geo-card--photo.in .geo-photo { opacity: 1; transform: none; }
.geo-anim .geo-photo-inner { opacity: 0; transform: translateY(8px); transition: opacity .7s ease .2s, transform .7s ease .2s; }
.geo-anim .geo-card--photo.in .geo-photo-inner { opacity: 1; transform: none; }

.geo-n {
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: clamp(40px, 4.6vw, 58px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1; color: #1a1a1f;
  font-variant-numeric: tabular-nums;
}
.geo-n .geo-unit { font-size: 0.4em; font-weight: 500; letter-spacing: 0.01em; margin-left: 4px; color: rgba(26,26,31,0.68); }
.geo-l {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13.5px; line-height: 1.45; color: rgba(26,26,31,0.58); margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .geo-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-sec.tan .ms-stat { transition: box-shadow .3s ease, border-color .3s ease, background-color .3s ease; }
  .ms-sec.tan .ms-stat:hover { transform: none; }
}

/* ---- Contact form ------------------------------------------------- */
.ms-contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .ms-contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.ms-form { background: #fffdf9; border: 1px solid rgba(26,26,31,0.12); border-radius: 16px; padding: 32px; box-shadow: 0 6px 24px rgba(26,26,31,0.06); }
.ms-field { margin-bottom: 15px; }
.ms-field label { display: block; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; font-weight: 600; color: #1a1a1f; margin-bottom: 6px; }
.ms-field label .req { color: #c7362f; }
.ms-field label .opt { color: rgba(26,26,31,0.42); font-weight: 400; }
.ms-field input, .ms-field textarea, .ms-field select {
  width: 100%; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; color: #1a1a1f;
  background: #fff; border: 1px solid rgba(26,26,31,0.2); border-radius: 9px; padding: 11px 13px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ms-field input:focus, .ms-field textarea:focus, .ms-field select:focus {
  outline: none; border-color: rgba(232,184,115,0.95); box-shadow: 0 0 0 3px rgba(232,184,115,0.2);
}
.ms-field textarea { min-height: 110px; resize: vertical; }
/* Dropdown: matches the inputs, with a custom chevron; text greys out until a real option is picked. */
.ms-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a1a1f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.ms-field select:has(option[value='']:checked) { color: rgba(26,26,31,0.5); }
.ms-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .ms-form-row { grid-template-columns: 1fr; gap: 0; } }
.ms-consent { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 20px; }
.ms-consent input { margin-top: 3px; flex: none; }
.ms-consent label { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12.5px; line-height: 1.5; color: rgba(26,26,31,0.65); }
.ms-form button {
  width: 100%; border: 1px solid #1a1a1f; background: #1a1a1f; color: #f5f1ea;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; font-weight: 600;
  padding: 13px; border-radius: 999px; cursor: pointer; transition: background .18s ease;
}
.ms-form button:hover { background: #000; }
.ms-form-alt { text-align: center; margin: 14px 0 0; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13.5px; color: rgba(26,26,31,0.6); }
.ms-form-alt a { color: #1a1a1f; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(26,26,31,0.28); padding-bottom: 1px; transition: border-color .18s ease; }
.ms-form-alt a:hover { border-bottom-color: #1a1a1f; }
.ms-contact-points { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ms-contact-points li { font-family: 'Source Serif 4', Georgia, serif; font-size: 16px; color: rgba(26,26,31,0.75); padding-left: 26px; position: relative; }
.ms-contact-points li::before { content: "\2713"; position: absolute; left: 0; color: rgba(184,133,20,1); font-weight: 700; }
/* Numbered 3-step list (contact section) — gold badges matching the section accent */
.ms-contact-steps { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; counter-reset: cstep; --cstep-gap: 20px; }
.ms-contact-steps li {
  position: relative; display: flex; align-items: flex-start; gap: 16px;
  font-family: 'Source Serif 4', Georgia, serif; font-size: 16px; line-height: 1.5;
  color: rgba(26,26,31,0.75);
}
/* Solid gold badge with a dark number */
.ms-contact-steps li::before {
  counter-increment: cstep; content: counter(cstep);
  flex: none; position: relative; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%;
  background: #e5b94e; color: #1a1a1f;
  font-family: 'General Sans', -apple-system, sans-serif; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ---- Hero risk-reversal chips ------------------------------------- */
.ms-hero-badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.ms-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fffdf9; border: 1px solid rgba(26,26,31,0.12); border-radius: 12px;
  padding: 9px 15px; box-shadow: 0 1px 2px rgba(26,26,31,0.03);
}
.ms-badge svg { width: 19px; height: 19px; color: #a9781f; flex: none; }
.ms-badge span { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13.5px; font-weight: 600; color: #1a1a1f; letter-spacing: -0.005em; }
@media (max-width: 480px) { .ms-badge { padding: 8px 13px; } .ms-badge span { font-size: 12.5px; } }

/* ---- Trust / guarantee boxes (omnius-style, hover zoom) ----------- */
.ms-trust { }
.ms-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 900px) { .ms-trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ms-trust-grid { grid-template-columns: 1fr; } }
.ms-tbox {
  padding: 34px 26px; border-radius: 16px; text-align: center;
  border: 1px solid rgba(26,26,31,0.12);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
}
.ms-tbox:hover {
  transform: scale(1.015); background: #fffdf9;
  border-color: rgba(26,26,31,0.22);
  box-shadow: 0 8px 26px rgba(26,26,31,0.08); position: relative; z-index: 1;
}
.ms-tbox .tico { color: rgba(26,26,31,0.42); margin-bottom: 28px; display: flex; justify-content: center; }
.ms-tbox .tico svg { width: 104px; height: 104px; display: block; }
/* Full-bleed card graphic variant: artwork fills the box, text sits on the
   calm lower part of the image (artwork keeps its bottom 40% empty). */
.ms-tbox--photo { position: relative; padding: 0; overflow: hidden; min-height: 440px; }
.tbox-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.ms-tbox--photo .tbox-inner {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px 24px 30px;
}
.ms-tbox--photo p { color: rgba(26,26,31,0.82); }
@media (max-width: 520px) { .ms-tbox--photo { min-height: 104vw; } }
.ms-tbox h3 { font-family: 'General Sans', -apple-system, sans-serif; font-size: 19px; font-weight: 600; margin: 0 0 10px; color: #1a1a1f; text-wrap: balance; }
.ms-tbox p { font-family: 'Source Serif 4', Georgia, serif; font-size: 15px; line-height: 1.55; color: rgba(26,26,31,0.62); margin: 0 auto; max-width: 26ch; }
/* Dark duotone-photo variant: cream text over the shaded lower area */
.ms-tbox--photo.ms-tbox--dark h3 { color: #f5f1ea; }
.ms-tbox--photo.ms-tbox--dark p { color: rgba(245,241,234,0.80); }
/* Anchor the crop to the bottom so the dark text floor never gets cut off */
.ms-tbox--dark .tbox-photo { object-position: center bottom; }
/* Heading-only card: lift the lone heading off the bottom edge */
.ms-tbox--solo .tbox-inner { padding-bottom: 70px; }
.ms-tbox--solo h3 { font-size: 22px; }
/* Light duotone-photo variant: cream floor, default dark text */
.ms-tbox--light .tbox-photo { object-position: center bottom; }
/* Tint the photo's white floor toward the discovery-section cream (#ebe3d0) */
.ms-tbox--light .tbox-inner {
  background: linear-gradient(to top, rgba(235,227,208,0.85) 0%, rgba(235,227,208,0.45) 25%, rgba(235,227,208,0) 48%);
}
@media (prefers-reduced-motion: reduce) { .ms-tbox { transition: box-shadow .3s ease, background-color .3s ease; } .ms-tbox:hover { transform: none; } }

/* =====================================================================
   "Three pages from a real audit" (homepage, tan). Alternating shot/copy
   rows; sits directly above the tan stats band so the two read as one.
   ===================================================================== */
.ms-peek { padding-bottom: 24px; }
.ms-peek-intro { text-align: center; margin-bottom: 76px; }
.ms-peek-intro .ms-h2, .ms-peek-intro .ms-lead { margin-left: auto; margin-right: auto; }
/* One grid for every row: the image always owns the wide (60fr) column and the
   copy the narrow one, so all four shots render at the identical width and the
   text edges line up row to row. .rev only mirrors which side the wide column
   sits on; it never changes the ratio. */
.ms-peek-row {
  display: grid;
  grid-template-columns: minmax(0,60fr) minmax(0,40fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto 88px;
}
.ms-peek-row.rev { grid-template-columns: minmax(0,40fr) minmax(0,60fr); }
.ms-peek-row.rev .ms-peek-shot { order: 2; }
.ms-peek-row:last-of-type { margin-bottom: 48px; }
.ms-peek-shot {
  background: #fff;
  border: 1px solid rgba(26,26,31,0.1);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 16px 40px rgba(26,26,31,0.12);
}
.ms-peek-shot img { display: block; width: 100%; height: auto; border-radius: 8px; }
.ms-peek-copy h3 {
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600; letter-spacing: -0.015em; line-height: 1.18;
  margin: 0 0 14px; color: #1a1a1f;
}
.ms-peek-copy p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px; line-height: 1.65; color: rgba(26,26,31,0.82);
  margin: 0 0 14px;
}
.ms-peek-copy p:last-child { margin-bottom: 0; }
@media (max-width: 1023px) {
  .ms-peek-intro { margin-bottom: 56px; }
  .ms-peek-row, .ms-peek-row.rev { grid-template-columns: 1fr; gap: 26px; margin-bottom: 68px; }
  .ms-peek-row.rev .ms-peek-shot { order: 0; }
  /* Let the shots bleed ~3.5% into each side gutter on phones: ~7% larger
     image without touching the stacked text width. */
  .ms-peek-shot { margin-left: -3.5%; margin-right: -3.5%; }
}