/* Married Today — Landing pages (Who we marry: /military/ first).
   Builds on tokens.css + homepage.css (.mt-home baseline: wrap/sec/serif/over/
   mt-btn/mt-card/mt-faq/mt-final). Mobile-first: base styles are the 375px view;
   min-width queries scale up.
   Every selector is scoped under .mt-landing: homepage.css carries resets like
   `.mt-home p { margin: 0 }` (0,1,1) that outweigh a bare class (0,1,0), so
   paragraph margins (including the margin:auto centering) silently lose without
   the extra scope. */

/* ---- shared landing primitives ---- */
.mt-landing .sec { padding: 44px 0; }
.mt-landing .narrow { max-width: 720px; }
.mt-landing .mt-l-h2 { font-size: 32px; line-height: 1.18; margin: 0; }
.mt-landing .mt-l-sub { font: 400 16px/1.55 var(--font-body); color: var(--ink-500); margin-top: 10px; }
.mt-landing .mt-l-body { font: 400 16px/1.65 var(--font-body); color: var(--ink-700); margin-top: 16px; }
.mt-landing .mt-l-hint { font: 400 14px/1.5 var(--font-body); color: var(--ink-500); text-align: center; margin-top: 18px; }
.mt-landing .mt-l-hint a { color: var(--accent-600); text-decoration: underline; }
.mt-landing .mt-l-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.mt-landing .mt-l-ctarow { display: flex; justify-content: center; margin-top: 26px; }

/* ---- hero ---- */
.mt-landing .mt-l-hero { padding: 40px 0 0; text-align: center; }
.mt-landing .mt-l-hero__h1 { font-size: 40px; line-height: 1.08; margin: 16px auto 0; max-width: 820px; }
.mt-landing .mt-l-hero__sub { font: 400 17px/1.6 var(--font-body); color: var(--ink-700); max-width: 620px; margin: 16px auto 0; }
.mt-landing .mt-l-hero__cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; }
.mt-landing .mt-l-hero__legal { font: 400 14px/1.4 var(--font-body); color: var(--ink-500); }
.mt-landing .mt-l-hero__legal a { color: var(--accent-600); text-decoration: underline; }
.mt-landing .mt-l-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.mt-landing .mt-l-chip { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--font-body); color: var(--ink-700); background: var(--paper-2); border-radius: var(--r-pill); padding: 8px 12px; }
.mt-landing .mt-l-chip .mt-ic { color: var(--accent-500); }
.mt-landing .mt-l-split { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-radius: var(--r-xl); overflow: hidden; margin: 24px auto 0; max-width: 720px; }
.mt-landing .mt-l-split__tile { margin: 0; aspect-ratio: 4 / 5; }
.mt-landing .mt-l-split__tile img { width: 100%; height: 100%; object-fit: cover; }

/* ---- section 2: sound like you ---- */
.mt-landing .mt-l-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.mt-landing .mt-l-card { display: flex; align-items: flex-start; gap: 12px; background: var(--paper); border-radius: var(--r-md); box-shadow: var(--ring-subtle); padding: 16px; transition: var(--transition-colors), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.mt-landing .mt-l-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mt-landing .mt-l-card > .mt-ic { color: var(--accent-500); margin-top: 2px; flex: 0 0 auto; }
.mt-landing .mt-l-card__body { display: block; }
.mt-landing .mt-l-card__body strong { display: block; font: 600 16px/1.3 var(--font-body); color: var(--ink-900); margin-bottom: 4px; }
.mt-landing .mt-l-card__body span { font: 400 14px/1.55 var(--font-body); color: var(--ink-500); }
.mt-landing .mt-l-card__chev { color: var(--ink-400); margin-top: 4px; margin-left: auto; flex: 0 0 auto; }

/* ---- panels, checklists, quotes, notes ---- */
.mt-landing .mt-l-panel { padding: 20px; margin-top: 20px; }
.mt-landing .mt-l-panel__label { font: 500 12px/1 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 14px; }
.mt-landing .mt-l-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mt-landing .mt-l-check li { display: flex; align-items: flex-start; gap: 10px; font: 400 15px/1.5 var(--font-body); color: var(--ink-900); }
.mt-landing .mt-l-check .mt-ic { color: var(--success); margin-top: 2px; flex: 0 0 auto; }
.mt-landing .mt-l-check--accent .mt-ic { color: var(--accent-500); }
.mt-landing .mt-l-quote { background: var(--accent-50); border-radius: var(--r-md); padding: 18px 20px; margin-top: 14px; }
.mt-landing .mt-l-quote__text { font-size: 18px; line-height: 1.45; color: var(--ink-900); }
.mt-landing .mt-l-quote--lead .mt-l-quote__text { font-size: 21px; }
.mt-landing .mt-l-quote__meta { font: 400 13px/1.4 var(--font-body); color: var(--ink-500); margin-top: 8px; }
.mt-landing .mt-l-note { background: var(--accent-50); border-radius: var(--r-md); padding: 18px 20px; margin-top: 20px; }
.mt-landing .mt-l-note p { font: 400 15px/1.55 var(--font-body); color: var(--ink-900); margin-bottom: 12px; }
.mt-landing .mt-l-note .mt-l-check { margin-bottom: 12px; }
.mt-landing .mt-l-note__small { font-size: 14px; color: var(--ink-500); margin-bottom: 0 !important; }

/* ---- section 4: steps + timeline ---- */
.mt-landing .mt-l-steps { list-style: none; margin: 24px 0 0; padding: 0; }
.mt-landing .mt-l-step { display: flex; gap: 14px; position: relative; padding-bottom: 22px; }
.mt-landing .mt-l-step:last-child { padding-bottom: 0; }
.mt-landing .mt-l-step::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 2px; background: var(--line); }
.mt-landing .mt-l-step:last-child::before { display: none; }
.mt-landing .mt-l-step__num { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-500); color: var(--text-on-accent); display: flex; align-items: center; justify-content: center; font: 600 14px/1 var(--font-body); position: relative; z-index: 1; }
.mt-landing .mt-l-step__body strong { display: block; font: 600 16px/1.3 var(--font-body); color: var(--ink-900); }
.mt-landing .mt-l-step__body p { font: 400 14px/1.55 var(--font-body); color: var(--ink-500); margin: 5px 0 8px; }
.mt-landing .mt-l-badge { display: inline-flex; align-items: center; gap: 5px; font: 500 12px/1 var(--font-body); color: var(--success); background: var(--success-bg); border-radius: var(--r-pill); padding: 6px 10px; }
.mt-landing .mt-l-timeline { display: flex; flex-direction: column; gap: 8px; }
.mt-landing .mt-l-timeline__row { display: flex; justify-content: space-between; gap: 12px; font: 400 14px/1.45 var(--font-body); color: var(--ink-900); }
.mt-landing .mt-l-timeline__row strong { color: var(--success); font-weight: 600; white-space: nowrap; }
.mt-landing .mt-l-panel__note { font: 400 13px/1.55 var(--font-body); color: var(--ink-500); margin-top: 12px; }

/* ---- section 5: plan list ---- */
.mt-landing .mt-l-plan { margin-top: 20px; }
.mt-landing .mt-l-plan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mt-landing .mt-l-plan__list li { display: flex; align-items: flex-start; gap: 10px; font: 400 15px/1.55 var(--font-body); color: var(--ink-900); }
.mt-landing .mt-l-plan__num { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper-2); color: var(--ink-900); display: flex; align-items: center; justify-content: center; font: 600 12px/1 var(--font-body); margin-top: 1px; }

/* ---- section 7: stories ---- */
.mt-landing .mt-l-stories__list { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.mt-landing .mt-l-story { padding: 20px; }
.mt-landing .mt-l-tag { display: inline-block; font: 500 11px/1 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-600); background: var(--accent-100); border-radius: var(--r-pill); padding: 6px 10px; margin-bottom: 10px; }
.mt-landing .mt-l-story > p { font: 400 15px/1.6 var(--font-body); color: var(--ink-700); }
.mt-landing .mt-l-story__quote { font-size: 17px; line-height: 1.45; color: var(--ink-900); margin-top: 12px; }
.mt-landing .mt-l-story__meta { font: 400 13px/1.4 var(--font-body); color: var(--ink-500); margin-top: 8px; }
.mt-landing .mt-l-trustpilot { display: flex; justify-content: center; margin-top: 24px; }

/* ---- section 8: pricing ---- */
.mt-landing .mt-l-price { border: 2px solid var(--accent-500); border-radius: var(--r-lg); background: var(--paper); padding: 22px 20px; margin-top: 20px; }
.mt-landing .mt-l-price__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mt-landing .mt-l-price__top strong { font: 600 17px/1.2 var(--font-body); color: var(--ink-900); }
.mt-landing .mt-l-price__amount { font-size: 30px; color: var(--ink-900); }
.mt-landing .mt-l-price .mt-l-badge { margin: 10px 0 14px; }
.mt-landing .mt-l-price__btn { width: 100%; margin-top: 18px; }
.mt-landing .mt-l-group { margin-top: 30px; margin-bottom: 10px; }
.mt-landing .mt-l-addons { display: flex; flex-direction: column; gap: 8px; }
.mt-landing .mt-l-addon { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px; }
.mt-landing .mt-l-addon strong { font: 600 15px/1.3 var(--font-body); color: var(--ink-900); }
.mt-landing .mt-l-addon p { font: 400 13px/1.5 var(--font-body); color: var(--ink-500); margin-top: 3px; }
.mt-landing .mt-l-addon__price { font: 600 15px/1.2 var(--font-body); color: var(--ink-900); white-space: nowrap; }
.mt-landing .mt-l-guarantee { display: flex; align-items: flex-start; gap: 10px; background: var(--success-bg); border-radius: var(--r-md); padding: 16px 18px; margin-top: 20px; }
.mt-landing .mt-l-guarantee .mt-ic { color: var(--success); margin-top: 1px; }
.mt-landing .mt-l-guarantee p { font: 400 15px/1.5 var(--font-body); color: var(--ink-900); }

/* ---- section 9: FAQ (reuses .mt-faq machinery from homepage.css) ---- */
.mt-landing .mt-l-faq .mt-l-h2 { margin-bottom: 20px; }

/* ---- homepage-fundamentals alignment (v2) ----
   Full-bleed band backgrounds like the front page (sand via the shared
   .mt-legal class, cream via this local class), with quote cards flipping
   to paper so they stay visible on the tinted bands. */
.mt-landing .mt-l-band--cream { background: var(--accent-50); }
.mt-landing .mt-legal .mt-l-quote, .mt-landing .mt-l-band--cream .mt-l-quote { background: var(--paper); box-shadow: var(--ring-subtle); }
.mt-landing .mt-head { margin-bottom: 40px; }
.mt-landing .mt-gallery { margin-top: 24px; }


/* ---- section 10: final panel additions ---- */
.mt-landing .mt-l-final .mt-final__panel h2 { font-size: 34px; }
.mt-landing .mt-l-final__cta { display: flex; justify-content: center; }
.mt-landing .mt-l-final__phone { font: 400 15px/1.5 var(--font-body); color: #C7D0C9; margin-top: 18px; }
.mt-landing .mt-l-final__phone a { color: #F4F1EB; font-weight: 600; text-decoration: underline; }
.mt-landing .mt-l-final__phone .mt-ic { color: var(--brand-100); }
.mt-landing .mt-l-final__micro { font: 400 12px/1.5 var(--font-body); color: #A99C9B; margin-top: 14px; }

/* ---- sticky mobile CTA — removed 2026-07-20 (Craig) ----
   The .mt-l-sticky markup still exists in the LIVE /military/ and /lgbtq/ page
   content (DB); this rule keeps it fully hidden at every width until that
   markup is stripped in the page editor. Safe to delete this rule once no
   page content carries .mt-l-sticky. */
.mt-landing .mt-l-sticky { display: none; }

/* ---- scale up ---- */
@media (min-width: 768px) {
  .mt-landing .sec { padding: 68px 0; }
  .mt-landing .mt-l-hero { padding: 72px 0 0; }
  .mt-landing .mt-l-hero__h1 { font-size: 58px; }
  .mt-landing .mt-l-hero__sub { font-size: 19px; }
  .mt-landing .mt-l-h2 { font-size: 40px; }
  .mt-landing .mt-l-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .mt-landing .mt-l-stories__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .mt-landing .mt-l-final .mt-final__panel h2 { font-size: 44px; }
}

/* ---- Long-Distance page: section closer line ----
   Serif punch line that ends the recognition section ("Your whole relationship
   lives on this screen. Your wedding can too."). Display voice, centered,
   larger than body but below H2, so it reads as a turn rather than a hint. */
.mt-landing .mt-l-apart .mt-l-closer { font: 500 20px/1.35 var(--font-display); letter-spacing: -0.02em; color: var(--ink-900); text-align: center; max-width: 26ch; margin: 26px auto 0; }

/* ---- LGBTQ+ page: restore serif quote treatment inside story cards ----
   The `.mt-l-story > p` font shorthand (0,2,1) outweighs the shared .serif
   class (0,2,0), so story-card quotes silently render as 15px body sans.
   Scoped to the LGBTQ+ sections only so the military page is untouched
   until that page gets its own review. */
.mt-landing .mt-l-words .mt-l-story .mt-l-story__quote,
.mt-landing .mt-l-couples .mt-l-story .mt-l-story__quote,
.mt-landing .mt-l-proof .mt-l-story .mt-l-story__quote { font: 500 17px/1.45 var(--font-display); letter-spacing: -0.02em; color: var(--ink-900); }
.mt-landing .mt-l-words .mt-l-story .mt-l-story__quote { color: var(--accent-600); font-style: italic; }
/* Together For Years page opts into the same serif restore via its own
   section class; the bare .mt-l-stories (military) stays deferred. */
.mt-landing .mt-l-tfy-stories .mt-l-story .mt-l-story__quote { font: 500 17px/1.45 var(--font-display); letter-spacing: -0.02em; color: var(--ink-900); }