/* =========================================================================
   Veteran Strong — Public marketing pages (pre-registration)
   Layered on top of styles.css: reuses fonts + olive token, adds the
   bigger marketing type scale and the dark hero nav.
   ========================================================================= */

:root {
  /* ============================================================
     Typography scale — Veteran Strong premium system
     Built around real Graphik weights (400 / 500 / 600 / 700).
     No synthetic light (300 → blurry). Editorial cadence: large
     headlines with tight tracking, comfortable body sizes.

     SEMANTIC USAGE (visual sizes vary per context):
     - H1: hero page title             → --vs-mkt-h1 (80px)
     - H2: standard section heading    → --vs-mkt-h2 (72px)
     - H2: compact section (verbose)   → --vs-mkt-h3 (56px)
     - H3: large card title            → --vs-mkt-h5 (30px)
     - H3: standard card title         → --vs-mkt-h6 (24px)
     - H3: small card / FAQ            → --vs-mkt-h7 (22px)
     ============================================================ */

  /* Desktop sizes */
  --vs-mkt-h1: 80px;     /* hero (was 100) */
  --vs-mkt-h2: 72px;     /* section heading, standard (was 92) */
  --vs-mkt-h3: 56px;     /* section heading, compact / verbose (was 63) */
  --vs-mkt-h4: 40px;     /* sub-section (was 45) */
  --vs-mkt-h5: 30px;     /* large card title (was 31) */
  --vs-mkt-h6: 24px;     /* standard card title (unchanged) */
  --vs-mkt-h7: 22px;     /* small card / FAQ question (NEW) */

  /* Description tiers bumped ~10-15% (Pastel review 2026-07-09 — "description
     fonts too small" across pages). Single point of change: every lead / body /
     card-copy / caption rule reads these tokens. */
  --vs-mkt-body-l: 22px; /* section lead (was 19) */
  --vs-mkt-body: 20px;   /* default body (was 18) */
  --vs-mkt-small: 18px;  /* card copy (was 16) */
  --vs-mkt-tiny: 16px;   /* caption, byline role (was 14) */

  --vs-mkt-overline: 18px;  /* eyebrow / category label (was 14; Pastel #236-257
                               — Li called the 18px concierge eyebrow "a good
                               size" and every 13/14px one "still too small") */
  /* Slav (2026-08-02): every marketing eyebrow now matches the "DEDICATED
     SERVICE" treatment on /services (.mkt-concierge__eyebrow) — the one Li
     approved in Pastel #256 — 18px, tight 0.111em tracking. Weight landed on
     600: the reference's 400 read too light once every eyebrow shared it, and
     the old 700 / 0.32em read as shouting. Four tokens, one lever. */
  --vs-mkt-overline-weight: 600;
  --vs-mkt-overline-ls: 0.111em;
  --vs-mkt-overline-lh: 1.2;
  --vs-mkt-button: 22px;
  --vs-mkt-tag-tab: 20px;
  --vs-mkt-benefit-l: 29px;
  --vs-mkt-benefit-s: 18px;
  --vs-mkt-stat: 73px;

  /* Mobile sizes (use via media query) */
  --vs-mkt-h1-m: 44px;
  --vs-mkt-h2-m: 40px;
  --vs-mkt-h3-m: 36px;
  --vs-mkt-h4-m: 30px;
  --vs-mkt-h5-m: 24px;
  --vs-mkt-h6-m: 22px;
  --vs-mkt-h7-m: 20px;
  --vs-mkt-body-m: 20px;
  --vs-mkt-body-l-m: 20px;
  --vs-mkt-overline-m: 16px;
  --vs-mkt-stat-m: 60px;

  /* Per-level line-height + letter-spacing.
     Display levels get tight LH for editorial feel.
     Card levels get more breathing room for readability. */
  --vs-mkt-h1-lh: 1.02;
  --vs-mkt-h2-lh: 1;
  --vs-mkt-h3-lh: 1.05;
  --vs-mkt-h4-lh: 1.1;
  --vs-mkt-h5-lh: 1.15;
  --vs-mkt-h6-lh: 1.18;
  --vs-mkt-h7-lh: 1.2;

  --vs-mkt-h1-tracking: -2.4px;
  --vs-mkt-h2-tracking: -2px;
  --vs-mkt-h3-tracking: -1.8px;
  --vs-mkt-h4-tracking: -1.2px;
  --vs-mkt-h5-tracking: -0.6px;
  --vs-mkt-h6-tracking: -0.4px;
  --vs-mkt-h7-tracking: -0.3px;

  /* Legacy aliases (used in old rules) — point at the new system */
  --vs-mkt-h-tracking: -2px;
  --vs-mkt-stat-tracking: -2px;

  /* ===== Style guide colors ===== */
  --vs-mkt-black: #000000;
  --vs-mkt-black-80: #000000cc;
  --vs-mkt-black-60: #00000099;
  --vs-mkt-white: #ffffff;
  --vs-mkt-white-40: #ffffff66;
  --vs-mkt-army-green: #576038;       /* CTA */
  --vs-mkt-platinum: #e6e6e0;          /* Background */
  --vs-mkt-platinum-60: #e6e6e099;
  --vs-mkt-platinum-40: #e6e6e066;
  --vs-mkt-muted-olive: #696959;       /* Supporting 1 */
  --vs-mkt-muted-olive-60: #69695999;
  --vs-mkt-ash: #9b9b90;               /* Supporting 2 */
  --vs-mkt-dark-khaki: #7e6f3b;        /* Supporting 3 */
  --vs-mkt-strike-yellow: #fff45b;     /* Supporting 4 */
  --vs-mkt-grey-1: #e0e0dc;
  --vs-mkt-grey-2: #bebeb9;
  --vs-mkt-grey-3: #797878;
  --vs-mkt-grey-4: #494949;
  --vs-mkt-grey-5: #333333;
  --vs-mkt-grey-6: #1d1d16;

  /* Legacy aliases */
  --vs-mkt-panel: #0e1410;
  --vs-mkt-on-dark: #ffffff;
}

/* Public marketing pages opt out of the platform body bg. */
.vs-mkt-page {
  background: #ffffff;
  color: var(--vs-ink);
}

.vs-mkt-page .vs-main {
  padding-top: 0;
}

/* -------------------- Marketing top nav (dark, floating) -------------------- */

.mkt-nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  pointer-events: none;
  z-index: 100;
  /* Hide-on-scroll-down, show-on-scroll-up. The wrap translates as a unit
     so the floating capsule slides up off-screen cleanly. */
  transform: translateY(0);
  transition:
    transform 360ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    opacity 280ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  opacity: 1;
}

.mkt-nav-wrap[data-nav-hidden] {
  transform: translateY(calc(-100% - 16px));
  opacity: 0;
  pointer-events: none;
}

.mkt-nav {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 80px);
  max-width: 1652px;
  /* 3-col grid: equal-width side rails + auto-width centred brand.
     justify-content: space-between can't truly center the brand when the
     left links group and the right buttons group have different widths. */
  /* Flex layout with the brand absolutely centred. 3-col grid (1fr auto 1fr)
     looks like it would centre the brand but in practice 1fr columns grow
     to fit min-content first, so unequal left/right widths still skew the
     centre. Pulling the brand out of normal flow guarantees true centring. */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  background: rgba(14, 20, 16, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  /* Symmetric horizontal padding so the centred brand sits true centre. */
  padding: 12px 32px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  /* Specific properties only — no transition: all */
  transition:
    top var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    width var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    background-color var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    border-color var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    box-shadow var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

/* Stuck state: page has been scrolled past the hero top */
.mkt-nav-wrap[data-nav-stuck] .mkt-nav {
  top: 14px;
  width: calc(100% - 48px);
  background: rgba(14, 20, 16, 0.78);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   Light theme — for pages with a white/bone hero (services,
   about, contact). The dark capsule reads as a heavy block on
   light backgrounds; the light variant uses a frosted bone
   capsule with dark text and subtle border. */

.mkt-nav-wrap[data-nav-theme="light"] .mkt-nav {
  background: #F0F0EC;
  border-color: transparent;
  box-shadow: 0 8px 32px -16px rgba(14, 15, 12, 0.12);
}

.mkt-nav-wrap[data-nav-theme="light"][data-nav-stuck] .mkt-nav {
  background: #F0F0EC;
  border-color: transparent;
  box-shadow: 0 12px 40px -12px rgba(14, 15, 12, 0.18);
}

.mkt-nav-wrap[data-nav-theme="light"] .mkt-nav__link {
  color: rgba(14, 15, 12, 0.7);
}
.mkt-nav-wrap[data-nav-theme="light"] .mkt-nav__link::after {
  background: var(--vs-ink);
}

@media (hover: hover) and (pointer: fine) {
  .mkt-nav-wrap[data-nav-theme="light"] .mkt-nav__link:hover {
    color: var(--vs-ink);
  }
}

.mkt-nav-wrap[data-nav-theme="light"] .mkt-nav__link--active {
  color: var(--vs-ink);
}

.mkt-nav-wrap[data-nav-theme="light"] .mkt-nav__brand,
.mkt-nav-wrap[data-nav-theme="light"] .mkt-nav__brand:hover,
.mkt-nav-wrap[data-nav-theme="light"] .mkt-nav__brand:focus {
  color: var(--vs-ink);
}

.mkt-nav-wrap[data-nav-theme="light"] .mkt-btn--ghost {
  color: var(--vs-ink);
  border-color: rgba(14, 15, 12, 0.25);
}

.mkt-nav-wrap[data-nav-theme="light"] .mkt-btn--ghost:hover {
  background: rgba(14, 15, 12, 0.04);
  border-color: var(--vs-ink);
  color: var(--vs-ink);
}

.mkt-nav__left {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* Absolutely centred. left + right columns stay in flex flow. */
.mkt-nav__brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mkt-nav__link {
  position: relative;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.118em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
  padding-block: 8px;
  transition: color 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

/* Underline bar — scales in from center on hover, full width on active. */
.mkt-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 260ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

@media (hover: hover) and (pointer: fine) {
  .mkt-nav__link:hover {
    color: #ffffff;
  }
  .mkt-nav__link:hover::after {
    transform: scaleX(0.6);
  }
}

.mkt-nav__link--active {
  color: #ffffff;
}
.mkt-nav__link--active::after {
  transform: scaleX(1);
}
@media (hover: hover) and (pointer: fine) {
  .mkt-nav__link--active:hover::after {
    transform: scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mkt-nav__link::after { transition: none; }
}

.mkt-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
}

.mkt-nav__brand-mark {
  width: 43px;
  height: 32px;
  display: grid;
  place-items: center;
}

.mkt-nav__brand-mark svg { width: 100%; height: 100%; }

.mkt-nav__brand-word {
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mkt-nav__right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.mkt-btn {
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 22px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}

/* Ghost button — flat, no shadow, no glow. Hover only adjusts the
   surface alpha and border opacity so the press feels confident, not
   showy. No icon movement (the leading icon shouldn't drift). */
.mkt-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.75);
}

.mkt-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
  color: #fff;
}

/* Primary button — flat solid colour, single 1px border, no gradients,
   no outer halo. Hover deepens the fill only; the arrow translate (below)
   provides the directional cue. Press uses scale(0.97) from the press
   feedback rule already in place. */
.mkt-btn--primary {
  background: #576038;
  color: #fff;
  border: 1px solid #576038;
}

.mkt-btn--primary:hover {
  background: #4a5230;
  border-color: #4a5230;
  color: #fff;
}

/* Arrow micro-translate on hover, scoped to primary only. The ghost LOGIN
   button has a leading icon (user silhouette) — moving it sideways would
   make the icon feel detached from its label. */
.mkt-btn__icon {
  transition: transform var(--dur-fast, 180ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

@media (hover: hover) and (pointer: fine) {
  .mkt-btn--primary:hover .mkt-btn__icon {
    transform: translateX(3px);
  }
}

.mkt-btn--lg {
  padding: 22px 32px;
  font-size: 22px;
  border-radius: 12px;
  gap: 18px;
}

/* Icon proportional to text: ~16/20 ratio in standard btn, ~22/22 in lg
   so the arrow has visual weight equal to the type. Wrapper sets the box;
   inline SVG fills it. */
.mkt-btn__icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

.mkt-btn--lg .mkt-btn__icon {
  width: 22px;
  height: 22px;
}

.mkt-btn__icon svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .mkt-nav {
    top: 16px;
    width: calc(100% - 32px);
    padding: 12px 16px;
    gap: 12px;
  }
  .mkt-nav__left {
    display: none;
  }
  .mkt-btn {
    padding: 12px 14px;
    font-size: 16px;
  }
}

/* -------------------- Hero -------------------- */

.mkt-hero {
  padding: 16px;
  width: 100%;
}

.mkt-hero__inner {
  position: relative;
  width: 100%;
  min-height: 1034px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 180px 100px 80px;
  color: #fff;
  isolation: isolate;
  background: #000;
}

.mkt-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-color: #08081a;
  background-image: url("../img/home/hero-tv-scene.png");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* Hide the ghost "VETERAN STRONG" text now that the photo is the visual anchor. */
.mkt-hero__bg::before {
  content: none;
}

.mkt-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Stronger graded darken at the top-left so the H1 always sits on a
     near-solid surface for full readability — the previous veil left a
     soft fade right behind the title that made some letters fight the
     photo. Layered: bottom-up vignette, left-side ramp, deep top-left
     radial pool focused on where the title block lives. */
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 0.5) 38%, rgba(0, 0, 0, 0.08) 70%),
    linear-gradient(-90deg, rgba(3, 8, 22, 0) 22%, rgba(3, 8, 22, 0.65) 55%, rgba(3, 8, 22, 0.95) 100%),
    radial-gradient(ellipse 70% 80% at 18% 35%, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 70%);
}

.mkt-hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/home/hero-glow.png");
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0.45;
  pointer-events: none;
}

.mkt-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* Narrower copy column. Forces the H1 to break ("Your service has" /
     "its benefits.") and prevents the lead paragraph from running 60+
     characters per line, which felt loose on the original layout. */
  max-width: 620px;
  position: relative;
  z-index: 2;
}

.mkt-hero__title {
  font-family: var(--vs-font-body);
  /* H1 — page hero. Graphik 400 (lightest weight we ship; requesting 300
     forces a synthesised thin which renders inconsistently). */
  font-weight: 400;
  font-size: var(--vs-mkt-h1);
  line-height: var(--vs-mkt-h1-lh);
  letter-spacing: var(--vs-mkt-h1-tracking);
  margin: 0;
  color: #fff;
}

/* Trademark superscript on the slogan. Sized so the ™ sits high and reads
   as an attribution mark, not a typographic feature. Tracking matches the
   parent h1 so it doesn't widen the optical break. */
.mkt-hero__tm {
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: super;
  margin-left: 0.08em;
  line-height: 0;
  opacity: 0.92;
}

.mkt-hero__title strong {
  font-weight: 500;
}

.mkt-hero__lead {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-body);
  line-height: 1.55;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  max-width: 440px;
}

.mkt-hero__lead strong {
  font-weight: 700;
}

.mkt-hero__cta-row {
  display: flex;
}

/* Floating partner-card stack on hero (right side, over imagery) */

.mkt-hero__stack {
  position: absolute;
  top: 180px;
  right: 60px;
  display: grid;
  gap: 16px;
  z-index: 2;
  width: 280px;
}

.mkt-hero-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  padding: 10px 14px 10px 10px;
  box-shadow:
    0 24px 48px -20px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 240ms ease-out, background-color 240ms ease-out;
}

.mkt-hero-card:hover {
  transform: translateX(-6px);
  background: rgba(255, 255, 255, 0.18);
}

.mkt-hero-card__visual {
  height: 64px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  padding: 0 16px;
  flex: 1;
  min-width: 0;
}

.mkt-hero-card--equifax .mkt-hero-card__visual {
  background: linear-gradient(135deg, #2a2520 0%, #6b5a48 100%);
}
.mkt-hero-card--fox .mkt-hero-card__visual {
  background: linear-gradient(135deg, #1a294a 0%, #07112a 100%);
}
.mkt-hero-card--taxhawk .mkt-hero-card__visual {
  background: linear-gradient(135deg, #2c4f7a 0%, #18324d 100%);
}
.mkt-hero-card--statefarm .mkt-hero-card__visual {
  background: linear-gradient(135deg, #b91c1c 0%, #6e0c0c 100%);
}

.mkt-hero-card__brand {
  font-family: var(--vs-font-body);
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 18px;
  text-align: center;
  line-height: 1;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.mkt-hero-card--fox .mkt-hero-card__brand { font-size: 12px; }

.mkt-hero-card--fox .mkt-hero-card__brand span {
  display: block;
  border-bottom: 2px solid #c9203b;
  padding-bottom: 2px;
  margin-bottom: 2px;
  font-size: 14px;
}

.mkt-hero-card__pill {
  position: absolute;
  top: -8px;
  left: 12px;
  background: var(--vs-olive);
  color: #fff;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1;
}

.mkt-hero-card__caret {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--vs-ink);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

@media (max-width: 1280px) {
  .mkt-hero__stack {
    top: 140px;
    right: 32px;
    width: 240px;
  }
  .mkt-hero-card__visual { height: 56px; }
}

@media (max-width: 980px) {
  .mkt-hero__stack { display: none; }
}

.mkt-hero__ticker-wrap {
  position: absolute;
  bottom: 150px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.mkt-hero__ticker-logo {
  width: 168px;
  height: 160px;
  border-radius: 5px;
  object-fit: contain;
  display: block;
}

.mkt-hero__ticker {
  width: 100%;
  overflow: hidden;
  height: 44px;
  display: flex;
  align-items: center;
  /* Wider fade (20% each side) so the ticker emerges from and sinks into
     the surrounding hero darkness — no hard strip edges. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}

.mkt-hero__ticker-track {
  display: flex;
  gap: 22px;
  align-items: center;
  white-space: nowrap;
  /* Slower (90s) so the text reads as a calm undercurrent, not urgent
     motion. Pauses on hover (below) for interactivity. */
  animation: mkt-ticker 90s linear infinite;
}

@media (hover: hover) and (pointer: fine) {
  .mkt-hero__ticker:hover .mkt-hero__ticker-track {
    animation-play-state: paused;
  }
}

.mkt-hero__ticker-text {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

.mkt-hero__ticker-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  flex: 0 0 4px;
}

@keyframes mkt-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .mkt-hero__ticker-track { animation: none; }
}

@media (max-width: 1280px) {
  .mkt-hero__inner {
    padding: 160px 60px 80px;
    min-height: 760px;
  }
  .mkt-hero__title { font-size: 72px; }
}

@media (max-width: 768px) {
  .mkt-hero {
    padding: 8px;
  }
  .mkt-hero__inner {
    padding: 120px 24px 60px;
    min-height: 600px;
    border-radius: 12px;
  }
  .mkt-hero__title { font-size: 48px; }
  .mkt-hero__lead { font-size: 18px; }
  .mkt-hero__ticker-wrap { bottom: 30px; }
  .mkt-hero__ticker-logo { width: 116px; height: 110px; font-size: 14px; }
  .mkt-hero__ticker-text { font-size: 16px; letter-spacing: 0.2em; }
}

/* -------------------- Veteran Strong & Fox Nation (split + FAQ) -------------------- */

.mkt-vs-fox {
  background: #fff;
  padding: 120px 16px 80px;
}

.mkt-vs-fox__inner {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: start;
}

.mkt-vs-fox__copy {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 819px;
  /* Children hug content rather than stretching to column width — keeps
     the CTA button at its natural size instead of spanning full column. */
  align-items: flex-start;
}

/* vs-fox override removed — falls through to canonical .mkt-section-title
   (56px h3 token). Was redundant. */
.mkt-vs-fox__copy .mkt-section-title {
  font-weight: 400;
}

.mkt-vs-fox__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-body);
  line-height: 1.55;
  margin: 0;
  color: var(--vs-ink-muted);
}

/* Top-align the FAQ column with the big title rather than the small eyebrow
   above it. Only in the 2-column layout (>1280px); below that the FAQ stacks
   under the copy. Offset = eyebrow height + the copy column's 40px gap. */
@media (min-width: 1281px) {
  .mkt-vs-fox__inner .mkt-faq { margin-top: 81px; }
}

.mkt-play {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: transparent;
  border: 1px solid var(--vs-ink);
  border-radius: 999px;
  padding: 16px 28px 16px 16px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vs-ink);
  cursor: pointer;
  transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}

.mkt-play:hover {
  background: var(--vs-ink);
  color: #fff;
}

.mkt-play__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vs-olive);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mkt-play:hover .mkt-play__icon {
  background: var(--vs-olive-deep);
}

/* FAQ accordion */
.mkt-faq {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--vs-line);
}

.mkt-faq__item {
  border-bottom: 1px solid var(--vs-line);
}

.mkt-faq__q {
  width: 100%;
  background: none;
  border: 0;
  padding: 28px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--vs-mkt-h7);
  line-height: var(--vs-mkt-h7-lh);
  letter-spacing: var(--vs-mkt-h7-tracking);
  color: var(--vs-ink);
  cursor: pointer;
  text-align: left;
  transition: color 200ms ease-out;
}

.mkt-faq__q:hover { color: var(--vs-olive-deep); }

.mkt-faq__caret {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--vs-line-strong);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--vs-ink);
  transition:
    transform 320ms var(--ease-soft, cubic-bezier(0.16, 1, 0.3, 1)),
    background-color 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    color 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    border-color 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.mkt-faq__q[aria-expanded="true"] .mkt-faq__caret {
  transform: rotate(180deg);
  background: var(--vs-olive);
  color: #fff;
  border-color: var(--vs-olive);
}

/* Smooth open via grid-rows trick — same pattern as mkt-have-q. */
.mkt-faq__a {
  display: grid;
  grid-template-rows: 1fr;
  padding: 0 8px 32px;
  max-width: 580px;
  opacity: 1;
  transition:
    grid-template-rows 380ms var(--ease-soft, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    padding-bottom 380ms var(--ease-soft, cubic-bezier(0.16, 1, 0.3, 1));
}

.mkt-faq__a > p {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--vs-ink-muted);
  margin: 0;
  overflow: hidden;
  min-height: 0;
}

.mkt-faq__a[hidden] {
  display: grid !important;
  grid-template-rows: 0fr;
  padding-bottom: 0;
  opacity: 0;
}

/* VS & Fox Nation — feature cards row (under the split) */

.mkt-vs-fox__cards {
  list-style: none;
  margin: 80px auto 0;
  padding: 0 100px;
  max-width: 1720px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.mkt-vs-fox-card {
  position: relative;
  /* Reduced from 4:5 (very tall) to 5:4 (landscape rectangle). Combined
     with the hover-reveal pattern below, the cards now read as elegant
     image tiles rather than oversized overlay walls. */
  aspect-ratio: 5 / 4;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}

.mkt-vs-fox-card__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transition: transform 600ms var(--ease-soft, cubic-bezier(0.16, 1, 0.3, 1));
}

.mkt-vs-fox-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.78) 100%);
  transition: background 380ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.mkt-vs-fox-card__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mkt-vs-fox-card__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--vs-mkt-h5);
  line-height: var(--vs-mkt-h5-lh);
  letter-spacing: var(--vs-mkt-h5-tracking);
  margin: 0;
  color: #fff;
  /* Border removed — the hover-reveal pattern handles the visual hierarchy
     between title (always visible) and body (revealed). */
}

/* Body fades up + reveals on hover. Resting: collapsed and translucent.
   On hover: full opacity, settled in. */
.mkt-vs-fox-card__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  max-width: 520px;
  opacity: 0;
  transform: translateY(8px);
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 320ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    transform 380ms var(--ease-soft, cubic-bezier(0.16, 1, 0.3, 1)),
    max-height 380ms var(--ease-soft, cubic-bezier(0.16, 1, 0.3, 1));
}

@media (hover: hover) and (pointer: fine) {
  .mkt-vs-fox-card:hover .mkt-vs-fox-card__media {
    transform: scale(1.04);
  }
  .mkt-vs-fox-card:hover::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.85) 100%);
  }
  .mkt-vs-fox-card:hover .mkt-vs-fox-card__body {
    opacity: 1;
    transform: translateY(0);
    max-height: 200px;
  }
}

/* Touch devices: always show the body so tap users see all info. */
@media not all and (hover: hover) {
  .mkt-vs-fox-card__body {
    opacity: 1;
    transform: none;
    max-height: 200px;
  }
}

/* Cashback card */

.mkt-vs-fox-card--cashback .mkt-vs-fox-card__media {
  background-image: url("../img/home/vs-fox-cashback.png");
  background-size: cover;
  background-position: center;
}

/* Concierge card */

.mkt-vs-fox-card--concierge .mkt-vs-fox-card__media {
  background-image: url("../img/home/vs-fox-concierge.png");
  background-size: cover;
  background-position: center;
}

@media (max-width: 1280px) {
  .mkt-vs-fox__cards { padding: 0 40px; gap: 16px; }
  .mkt-vs-fox-card__overlay { padding: 32px; }
  .mkt-vs-fox-card__title { font-size: 26px; }
}

@media (max-width: 768px) {
  .mkt-vs-fox__cards { padding: 0; grid-template-columns: 1fr; }
  .mkt-vs-fox-card { aspect-ratio: 3 / 4; border-radius: 12px; }
  .mkt-vs-fox-card__overlay { padding: 24px; }
  .mkt-vs-fox-card__title { font-size: 22px; }
}

@media (max-width: 1280px) {
  .mkt-vs-fox { padding: 80px 16px 48px; }
  .mkt-vs-fox__inner {
    padding: 0 40px;
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .mkt-vs-fox__copy .mkt-section-title { font-size: 56px; }
  .mkt-faq__q { font-size: 24px; padding: 24px 4px; }
}

@media (max-width: 768px) {
  .mkt-vs-fox { padding: 48px 16px 32px; }
  .mkt-vs-fox__inner { padding: 0; gap: 40px; }
  .mkt-vs-fox__copy .mkt-section-title { font-size: 40px; }
  .mkt-faq__q { font-size: 20px; }
}

/* -------------------- Save the moment / Nice — story cards -------------------- */

.mkt-moments {
  padding: 0 16px 16px;
  background: #fff;
}

.mkt-moments__inner {
  max-width: 1720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mkt-moment {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}

.mkt-moment__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}

.mkt-moment::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.85) 100%);
}

.mkt-moment--save .mkt-moment__media {
  background-image:
    linear-gradient(135deg, rgba(20, 14, 10, 0.4) 0%, rgba(60, 40, 24, 0.2) 100%),
    url("../img/home/hero-bg.png");
  background-position: 50% 30%;
  filter: saturate(0.85) contrast(0.95);
}

.mkt-moment--nice .mkt-moment__media {
  background:
    radial-gradient(800px 600px at 50% 35%, #2a2a32 0%, #0e1014 70%);
}

.mkt-moment--nice::before {
  content: "";
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, #d8c2a4 0%, #6b4f36 60%, #2a1d12 100%);
  filter: blur(2px);
  opacity: 0.85;
  z-index: -1;
}

.mkt-moment__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 1;
}

.mkt-moment__eyebrow {
  line-height: var(--vs-mkt-overline-lh);
  font-family: var(--vs-font-body);
  font-weight: var(--vs-mkt-overline-weight);
  font-size: var(--vs-mkt-overline);
  letter-spacing: var(--vs-mkt-overline-ls);
  text-transform: uppercase;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

.mkt-moment__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 80px;
  line-height: 0.95;
  letter-spacing: -2px;
  margin: 0;
  color: #fff;
}

.mkt-moment__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
  max-width: 520px;
}

.mkt-moment__byline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 16px 0 0;
  font-family: var(--vs-font-body);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

.mkt-moment__byline strong {
  font-weight: 500;
  color: #fff;
  font-size: 18px;
  letter-spacing: -0.2px;
}

@media (max-width: 1280px) {
  .mkt-moment__overlay { padding: 40px; }
  .mkt-moment__title { font-size: 56px; }
}

@media (max-width: 768px) {
  .mkt-moments { padding: 0 8px 8px; }
  .mkt-moments__inner { grid-template-columns: 1fr; gap: 8px; }
  .mkt-moment { aspect-ratio: 3 / 4; border-radius: 12px; }
  .mkt-moment__overlay { padding: 24px; gap: 12px; }
  .mkt-moment__title { font-size: 40px; }
  .mkt-moment__body { font-size: 18px; }
}

/* -------------------- Benefit cards row -------------------- */

.mkt-benefits {
  padding: 0 16px 80px;
  background: transparent;
  margin-top: -120px;
  position: relative;
  z-index: 2;
}

.mkt-benefits__inner {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 100px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.mkt-benefit-card {
  background: var(--vs-mkt-platinum);
  border: 2px solid #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mkt-benefit-card__visual {
  position: relative;
  height: 318px;
  overflow: hidden;
  background: #2a2520;
  isolation: isolate;
}

.mkt-benefit-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Bottom gradient — anchors the bottom-left logo in a darker band so it
   reads cleanly on any photo background. Mirror of the portal-benefit-card
   Sprint 9l treatment. */
.mkt-benefit-card__visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: linear-gradient(to top,
    rgba(14, 15, 12, 0.55) 0%,
    rgba(14, 15, 12, 0.18) 50%,
    rgba(14, 15, 12, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Brand logo — anchored bottom-left of the visual, with a double drop-shadow
   that gives white-on-transparent partner marks a soft halo for legibility on
   any photo. Per-brand height calibration below balances visual mass across
   wide wordmarks (Equifax / State Farm) and stacked marks (Fox / AFBA). */
.mkt-benefit-card__logo-img {
  position: absolute;
  bottom: 28px;
  left: 32px;
  z-index: 2;
  height: 48px;
  width: auto;
  max-width: 60%;
  object-fit: contain;
  object-position: left center;
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55))
    drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
}
.mkt-benefit-card__logo-img[alt="Equifax"]    { height: 32px; }
.mkt-benefit-card__logo-img[alt="State Farm"] { height: 32px; }
.mkt-benefit-card__logo-img[alt="AFBA"]       { height: 48px; }
.mkt-benefit-card__logo-img[alt="Fox Nation"] { height: 56px; }
.mkt-benefit-card__logo-img[alt="TaxHawk"]    { height: 44px; }

.mkt-benefit-card__body {
  padding: 32px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.mkt-benefit-card__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--vs-mkt-h6);
  line-height: var(--vs-mkt-h6-lh);
  letter-spacing: var(--vs-mkt-h6-tracking);
  margin: 0;
  color: var(--vs-ink);
  /* Two-line min-height so all four cards align across the row regardless
     of title length. */
  min-height: calc(var(--vs-mkt-h6) * var(--vs-mkt-h6-lh) * 2);
}

.mkt-benefit-card__body-text {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.45;
  margin: 0;
  color: var(--vs-ink-muted);
}

/* Refined FREE label — small olive eyebrow-style accent + muted subline.
   No dark ash band. Sits at the bottom of the card, separated by a
   hairline, integrated with the rest of the body. */
.mkt-benefit-card__price {
  background: transparent;
  color: var(--vs-ink);
  padding: 20px 28px 28px;
  margin: 0 0 0;
  /* Stack the price label + sub vertically. Previous row layout broke
     the moment we replaced the 4-char "FREE" with the longer compliance
     phrase "At no cost" — the sub text "for Veteran Strong members"
     no longer fit on the same line. Stacked reads cleaner anyway. */
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  text-align: left;
  border-top: 1px solid var(--vs-line);
}

.mkt-benefit-card__price-main {
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  /* Tighter tracking than the old 0.32em — "AT NO COST" at the old
     tracking would dominate the card; this keeps the optical weight
     comparable to the original "FREE" treatment. */
  letter-spacing: 0.18em;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
  color: var(--vs-olive);
}

.mkt-benefit-card__price-sub {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
  color: var(--vs-ink-muted);
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 1280px) {
  .mkt-benefits__inner {
    padding: 0 40px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .mkt-benefits {
    padding: 40px 8px;
  }
  .mkt-benefits__inner {
    padding: 0;
    grid-template-columns: 1fr;
  }
  .mkt-benefit-card__visual { height: 200px; }
}

/* -------------------- How it works -------------------- */

.mkt-how {
  padding: 120px 16px 80px;
  background: #fff;
}

.mkt-how__inner {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 100px;
}

.mkt-how__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 80px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--vs-line);
}

.mkt-eyebrow {
  font-family: var(--vs-font-body);
  font-weight: var(--vs-mkt-overline-weight);
  font-size: var(--vs-mkt-overline);
  letter-spacing: var(--vs-mkt-overline-ls);
  text-transform: uppercase;
  color: var(--vs-olive);
  margin: 0 0 28px;
  line-height: var(--vs-mkt-overline-lh);
}

.mkt-eyebrow--on-dark { color: var(--vs-mkt-platinum); }

/* Compact section H2 — for verbose / multi-line section titles
   (vs-fox sentence, trusted-reviews band). Uses the H3 token (56px).
   Standard section H2 uses .mkt-meaningful__title etc. at H2 token (72px). */
.mkt-section-title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-h3);
  line-height: var(--vs-mkt-h3-lh);
  letter-spacing: var(--vs-mkt-h3-tracking);
  margin: 0;
  color: var(--vs-ink);
}

.mkt-section-title strong { font-weight: 600; }

.mkt-section-lead {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-body-l);
  line-height: 1.4;
  color: var(--vs-ink-muted);
  margin: 0;
  max-width: 580px;
}

.mkt-how__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px;
}

.mkt-step {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 32px;
  border-top: 2px solid var(--vs-ink);
}

.mkt-step__num {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--vs-ink);
  margin: 0;
}

.mkt-step__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--vs-mkt-h5);
  line-height: 1.15;
  margin: 0;
  color: var(--vs-ink);
}

.mkt-step__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-body-l);
  line-height: 1.4;
  color: var(--vs-ink-muted);
  margin: 0;
}

@media (max-width: 1280px) {
  .mkt-how__inner { padding: 0 40px; }
  .mkt-how__head {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
  }
  .mkt-section-title { font-size: 56px; }
  .mkt-how__steps { gap: 40px; }
  .mkt-step__num { font-size: 72px; }
}

@media (max-width: 768px) {
  .mkt-how { padding: 60px 16px 40px; }
  .mkt-how__inner { padding: 0; }
  .mkt-how__head { margin-bottom: 48px; padding-bottom: 24px; }
  .mkt-section-title { font-size: 40px; }
  .mkt-how__steps { grid-template-columns: 1fr; gap: 32px; }
  .mkt-step__num { font-size: 56px; }
}

/* -------------------- About / mission (dark) -------------------- */

.mkt-about {
  margin: 0 16px 16px;
  background: var(--vs-mkt-panel);
  color: #fff;
  border-radius: 20px;
  padding: 120px 100px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.mkt-about::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 600px at 85% 15%, rgba(90, 107, 63, 0.18) 0%, transparent 60%),
    radial-gradient(700px 500px at 10% 90%, rgba(201, 162, 74, 0.08) 0%, transparent 65%);
}

.mkt-about__inner {
  max-width: 1520px;
  margin: 0 auto;
  display: grid;
  gap: 80px;
}

.mkt-about__statement {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-h2);
  line-height: 1;
  letter-spacing: -2px;
  margin: 0;
  color: #fff;
  max-width: 1320px;
}

.mkt-about__statement strong { font-weight: 500; color: var(--vs-mkt-platinum); }

.mkt-about__statement em {
  font-style: normal;
  font-weight: 500;
  color: var(--vs-gold);
}

.mkt-about__copy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.mkt-about__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-body-l);
  line-height: 1.5;
  color: var(--vs-mkt-platinum);
  margin: 0;
}

.mkt-about__sig {
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--vs-mkt-grey-2);
  margin: 24px 0 0;
}

.mkt-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 60px;
}

.mkt-stat {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 40px;
}

.mkt-stat + .mkt-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: 40px;
  padding-right: 40px;
}

.mkt-stat__num {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 88px;
  line-height: 0.95;
  letter-spacing: -2px;
  color: #fff;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.mkt-stat__num span {
  font-size: 56px;
  color: var(--vs-mkt-platinum);
}

.mkt-stat__label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--vs-mkt-grey-2);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 1280px) {
  .mkt-about { padding: 80px 48px; }
  .mkt-about__statement { font-size: 64px; letter-spacing: -1px; }
  .mkt-about__copy { grid-template-columns: 1fr; gap: 32px; }
  .mkt-stat__num { font-size: 64px; }
  .mkt-stat__num span { font-size: 40px; }
}

@media (max-width: 768px) {
  .mkt-about {
    margin: 0 8px 8px;
    padding: 48px 24px;
    border-radius: 12px;
  }
  .mkt-about__inner { gap: 48px; }
  .mkt-about__statement { font-size: 40px; }
  .mkt-stats { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
  .mkt-stat,
  .mkt-stat + .mkt-stat {
    border: 0;
    padding: 0 0 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }
  .mkt-stats .mkt-stat:last-child { border-bottom: 0; padding-bottom: 0; }
  .mkt-stat__num { font-size: 56px; }
}

/* -------------------- Resources / blog -------------------- */

.mkt-blog {
  padding: 120px 16px;
  background: #fff;
}

.mkt-blog__inner {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 100px;
}

.mkt-blog__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 80px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--vs-line);
}

.mkt-blog__head-copy { max-width: 720px; }

.mkt-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.mkt-article {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--vs-line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 240ms ease-out, box-shadow 240ms ease-out, border-color 240ms ease-out;
  text-decoration: none;
  color: inherit;
}

.mkt-article:hover {
  transform: translateY(-4px);
  border-color: var(--vs-olive);
  box-shadow: 0 24px 48px -24px rgba(14, 20, 16, 0.18);
}

.mkt-article:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 4px;
}

.mkt-article__media {
  height: 240px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--vs-line);
}

.mkt-article__media--olive { background: var(--vs-olive); color: #fff; }
.mkt-article__media--bone { background: var(--vs-bg); color: var(--vs-ink); }
.mkt-article__media--ink { background: var(--vs-mkt-panel); color: #fff; }

.mkt-article__glyph {
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 120px;
  line-height: 0.85;
  letter-spacing: -4px;
  margin: 0;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}

.mkt-article__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  flex: 1;
}

.mkt-article__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vs-olive);
}

.mkt-article__meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--vs-line-strong);
}

.mkt-article__meta-time { color: var(--vs-ink-subtle); }

.mkt-article__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  margin: 0;
  color: var(--vs-ink);
}

.mkt-article__body-text {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  color: var(--vs-ink-muted);
}

.mkt-article__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vs-ink);
}

.mkt-article__cta svg {
  transition: transform 240ms ease-out;
}

.mkt-article:hover .mkt-article__cta svg {
  transform: translateX(4px);
}

@media (max-width: 1280px) {
  .mkt-blog { padding: 80px 16px; }
  .mkt-blog__inner { padding: 0 40px; }
  .mkt-blog__head {
    flex-direction: column;
    align-items: start;
    margin-bottom: 48px;
  }
  .mkt-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkt-article__glyph { font-size: 88px; }
}

@media (max-width: 768px) {
  .mkt-blog { padding: 60px 16px; }
  .mkt-blog__inner { padding: 0; }
  .mkt-blog__grid { grid-template-columns: 1fr; gap: 24px; }
  .mkt-article__media { height: 180px; }
  .mkt-article__title { font-size: 24px; }
}

/* -------------------- Contact + final CTA -------------------- */

.mkt-contact {
  padding: 0 16px 80px;
  background: #fff;
}

.mkt-contact__inner {
  max-width: 1720px;
  margin: 0 auto;
  background: var(--vs-mkt-platinum);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
}

.mkt-cta {
  padding: 96px 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 80px;
  background: var(--vs-mkt-panel);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.mkt-cta::after {
  content: "STRONG";
  position: absolute;
  bottom: -32px;
  right: -16px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 240px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  line-height: 1;
}

.mkt-cta__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-h3);
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 0;
  color: #fff;
  position: relative;
}

.mkt-cta__title strong { font-weight: 500; }

.mkt-cta__row {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  position: relative;
}

.mkt-cta__hint {
  font-family: var(--vs-font-body);
  font-size: 18px;
  color: var(--vs-mkt-grey-2);
  margin: 0;
}

.mkt-contact-info {
  padding: 80px 64px;
  display: grid;
  gap: 48px;
  align-content: start;
}

.mkt-contact-info__title {
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--vs-olive);
  margin: 0;
}

.mkt-contact-list {
  display: grid;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mkt-contact-item {
  display: grid;
  gap: 8px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--vs-line-strong);
}

.mkt-contact-item:last-child { border-bottom: 0; padding-bottom: 0; }

.mkt-contact-item__label {
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vs-ink-muted);
  margin: 0;
}

.mkt-contact-item__value {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  margin: 0;
  color: var(--vs-ink);
  text-decoration: none;
}

a.mkt-contact-item__value:hover { color: var(--vs-olive-deep); }

.mkt-contact-item__sub {
  font-family: var(--vs-font-body);
  font-size: 16px;
  color: var(--vs-ink-muted);
  margin: 0;
}

@media (max-width: 1280px) {
  .mkt-contact__inner { grid-template-columns: 1fr; }
  .mkt-cta { padding: 64px 48px; gap: 48px; }
  .mkt-cta__title { font-size: 56px; }
  .mkt-cta::after { font-size: 160px; }
  .mkt-contact-info { padding: 48px; }
}

@media (max-width: 768px) {
  .mkt-contact { padding: 0 8px 40px; }
  .mkt-contact__inner { border-radius: 12px; }
  .mkt-cta { padding: 48px 24px; gap: 32px; }
  .mkt-cta__title { font-size: 40px; }
  .mkt-cta::after { font-size: 120px; bottom: -16px; }
  .mkt-contact-info { padding: 32px 24px; gap: 32px; }
  .mkt-contact-item__value { font-size: 22px; }
}

/* -------------------- Get even more — tabbed visual + content -------------------- */

.mkt-more {
  padding: 120px 0 0;
  background: #fff;
}

.mkt-more__head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 64px;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.mkt-more__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-h3);
  line-height: 1.2;
  letter-spacing: -1px;
  margin: 0;
  color: var(--vs-ink);
}

.mkt-more__lead {
  font-family: var(--vs-font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--vs-ink-muted);
  margin: 0;
  max-width: 720px;
}

.mkt-more__split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  background: var(--vs-bg);
  padding: 32px;
}

/* Left side — visual card with tabs + brands overlay */

.mkt-more__visual {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  min-height: 720px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 40px 0;
  color: #fff;
}

.mkt-more__visual-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transition: background-image 280ms ease-out, opacity 280ms ease-out;
}

.mkt-more__visual-bg[data-bg="housing"],
.mkt-more__visual-bg[data-bg="homeownership"] {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%),
    url("../img/home/get-more-housing.png"),
    radial-gradient(900px 700px at 50% 50%, #2a2a2e 0%, #0e0e10 70%);
}

.mkt-more__visual-bg[data-bg="automotive"] {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%),
    url("../img/home/get-more-automotive.png"),
    radial-gradient(900px 700px at 50% 50%, #1a1f2e 0%, #07112a 70%);
}

.mkt-more__visual-bg[data-bg="daycare"] {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%),
    url("../img/home/get-more-daycare.png"),
    radial-gradient(900px 700px at 50% 50%, #4a4538 0%, #1a1812 70%);
}

.mkt-more__visual-bg[data-bg="education"],
.mkt-more__visual-bg[data-bg="career"] {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%),
    url("../img/home/get-more-education.png"),
    radial-gradient(900px 700px at 50% 50%, #2a3024 0%, #0e1410 70%);
}

.mkt-more__visual-bg[data-bg="credit"] {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%),
    url("../img/portal/benefit-equifax.jpg"),
    radial-gradient(900px 700px at 50% 50%, #1c2626 0%, #0a1414 70%);
}

.mkt-more__visual-bg[data-bg="safety"] {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%),
    url("../img/home/mb-adt-bg.jpg"),
    radial-gradient(900px 700px at 50% 50%, #1a2028 0%, #0a1018 70%);
}

.mkt-more__visual-bg[data-bg="discounts"] {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%),
    url("../img/home/mb-newzip-bg.jpg"),
    radial-gradient(900px 700px at 50% 50%, #2a1f2a 0%, #14101c 70%);
}

.mkt-more__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 42%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.65) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

.mkt-more__tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 1;
}

.mkt-more__tab {
  background: transparent;
  border: 0;
  /* Uniform left indent reserves room for the selection caret so rows
     never shift when the selection moves (Pastel #31 — the caret tells
     visitors these are clickable tabs, not a static list). */
  padding: 8px 0 8px 44px;
  position: relative;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -1px;
  color: rgba(255, 255, 255, 0.68);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  text-align: left;
  transition: color 240ms ease-out;
  display: block;
  width: 100%;
}

/* Selection caret — chevron pointing at the active category. Hover shows
   a ghost caret on the other rows to imply interactivity. */
.mkt-more__tab::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -11px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 240ms ease-out;
}

.mkt-more__tab:hover {
  color: rgba(255, 255, 255, 0.9);
}
.mkt-more__tab:hover::before {
  opacity: 0.45;
}

.mkt-more__tab[aria-selected="true"] {
  color: #fff;
  font-weight: 600;
}
.mkt-more__tab[aria-selected="true"]::before {
  opacity: 1;
}

.mkt-more__tab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Brand logos at the bottom of the visual */

.mkt-more__brands {
  margin: 48px -40px 0;
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.mkt-more__brand-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.mkt-more__brand-list[hidden] { display: none; }

.mkt-more__brand-list .mkt-more__brand {
  flex: 1 1 0;
  min-width: 0;
}

.mkt-more__brand {
  display: grid;
  place-items: center;
  padding: 28px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  min-height: 100px;
}

.mkt-more__brand:last-child { border-right: 0; }

.mkt-more__brand img {
  max-height: 48px;
  max-width: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* Right side — content panels */

.mkt-more__content {
  padding: 16px 0 16px 24px;
  display: flex;
  flex-direction: column;
}

.mkt-more__panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mkt-more__panel > .mkt-btn {
  width: calc(50% - 6px);
  align-self: flex-start;
  justify-content: center;
}

@media (max-width: 768px) {
  .mkt-more__panel > .mkt-btn { width: 100%; }
}

.mkt-more__panel[hidden] { display: none; }

.mkt-more__subtitle {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-h3);
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
}

.mkt-more__subtitle strong { font-weight: 600; }

.mkt-more__sub-body {
  font-family: var(--vs-font-body);
  /* Tokenized + bumped per Pastel #39 (was hard-coded 18px) */
  font-size: var(--vs-mkt-body);
  line-height: 1.5;
  color: var(--vs-ink-muted);
  margin: 0;
  max-width: 620px;
}

.mkt-cat-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mkt-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid var(--vs-line-strong);
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vs-ink);
  background: #fff;
  transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}

.mkt-cat-pill:hover {
  background: var(--vs-ink);
  color: #fff;
  border-color: var(--vs-ink);
}

/* Legacy mkt-cat-pill kept for backwards compat with other sections */
.mkt-cat-pill--active {
  background: var(--vs-olive);
  color: #fff;
  border-color: var(--vs-olive);
}
.mkt-cat-pill--active:hover { background: var(--vs-olive-deep); border-color: var(--vs-olive-deep); }

.mkt-brand-row {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  border-top: 1px solid var(--vs-line);
}

.mkt-brand {
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--vs-ink-muted);
  text-transform: uppercase;
}

.mkt-features {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mkt-feature {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--vs-line);
  border-radius: 12px;
}

.mkt-feature__icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--vs-ink);
  color: #fff;
  display: grid;
  place-items: center;
}

.mkt-feature__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  /* Tokenized + bumped per Pastel #39 (was hard-coded 18px) */
  font-size: var(--vs-mkt-tag-tab);
  line-height: 1.2;
  letter-spacing: -0.2px;
  margin: 0;
  color: var(--vs-ink);
}

.mkt-feature__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  /* Tokenized + bumped per Pastel #39 (was hard-coded 15px) */
  font-size: var(--vs-mkt-small);
  line-height: 1.45;
  margin: 0;
  color: var(--vs-ink-muted);
}

@media (max-width: 1280px) {
  .mkt-more { padding: 80px 0 0; }
  .mkt-more__head { padding: 0 24px; margin-bottom: 48px; }
  .mkt-more__title { font-size: 56px; }
  .mkt-more__split { grid-template-columns: 1fr; gap: 24px; padding: 16px; }
  .mkt-more__visual { min-height: 520px; padding: 32px 28px 0; }
  .mkt-more__tab { font-size: 40px; }
  .mkt-more__brands { margin: 32px -28px 0; }
  .mkt-more__content { padding: 16px 8px; }
  .mkt-more__subtitle { font-size: 40px; }
}

@media (max-width: 768px) {
  .mkt-more__title { font-size: 40px; }
  .mkt-more__visual { min-height: 420px; padding: 24px 20px 0; }
  .mkt-more__tab { font-size: 28px; }
  .mkt-more__brand { font-size: 14px; padding: 18px 8px; }
  .mkt-more__content { padding: 16px 4px; }
  .mkt-more__subtitle { font-size: 32px; }
  .mkt-features { grid-template-columns: 1fr; }
}

/* -------------------- Discounts — logo marquee + centered overlay -------------------- */

.mkt-discounts {
  position: relative;
  background: #fff;
  padding: 96px 0;
  overflow: hidden;
  isolation: isolate;
}

.mkt-discounts__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mkt-discount-row {
  height: 64px;
  overflow: hidden;
  position: relative;
}

.mkt-discount-row__track {
  display: flex;
  gap: 0;
  height: 100%;
  width: max-content;
  will-change: transform;
  align-items: center;
}

@keyframes mkt-discount-marquee-ltr {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes mkt-discount-marquee-rtl {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* Each row a different speed and direction so the wall doesn't feel like
   four locked tracks. Range 100–160s — deliberately slow so the marquee
   reads as a calm undercurrent (like a credits roll) rather than
   urgent motion. Hovering an individual card pauses the row. */
.mkt-discount-row--ltr .mkt-discount-row__track {
  animation: mkt-discount-marquee-ltr 110s linear infinite;
}

.mkt-discount-row--rtl .mkt-discount-row__track {
  animation: mkt-discount-marquee-rtl 140s linear infinite;
}

.mkt-discount-row:nth-of-type(2) .mkt-discount-row__track {
  animation-duration: 160s;
}

.mkt-discount-row:nth-of-type(4) .mkt-discount-row__track {
  animation-duration: 125s;
}

/* Pause the track when the user hovers a card — implicit "explore the
   wall" gesture without snap controls. */
@media (hover: hover) and (pointer: fine) {
  .mkt-discount-row:hover .mkt-discount-row__track {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mkt-discount-row--ltr .mkt-discount-row__track,
  .mkt-discount-row--rtl .mkt-discount-row__track { animation: none; }
}

/* No card chrome — logos float on the page background as a continuous
   brand ribbon. Each card auto-sizes to its logo + breathing room, so
   the row never reads as "elongated rectangles with tiny logos centred"
   (the previous platinum-bg approach). This is the brand-wall pattern
   used by Linear, Vercel, and Stripe's partner pages. */
.mkt-discount-card {
  flex: 0 0 auto;
  height: 56px;
  background: transparent;
  border-radius: 0;
  display: grid;
  place-items: center;
  padding: 0 32px;
}

/* Grayscale by default → full colour on hover. Uniform 28px logo height
   means all marks sit on a single baseline regardless of natural aspect
   ratio. */
.mkt-discount-card img {
  height: 28px;
  width: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0.55;
  filter: grayscale(100%);
  transition:
    opacity 280ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    filter 320ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

@media (hover: hover) and (pointer: fine) {
  .mkt-discount-card:hover img {
    opacity: 1;
    filter: grayscale(0%);
  }
}

/* Side fade gradients to bleed into white */
.mkt-discounts__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 456px;
  z-index: 1;
  pointer-events: none;
}

.mkt-discounts__fade--left {
  left: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.mkt-discounts__fade--right {
  right: 0;
  background: linear-gradient(-90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

/* Soft radial glow behind the centered text */
.mkt-discounts__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1030px;
  height: 1030px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff 0%, rgba(255, 255, 255, 0.95) 35%, rgba(255, 255, 255, 0) 65%);
  z-index: 1;
  pointer-events: none;
}

/* Overlay text block */
.mkt-discounts__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 58px;
  width: min(965px, calc(100% - 80px));
  text-align: center;
}

.mkt-discounts__title {
  font-family: var(--vs-font-body);
  font-size: 92px;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  white-space: nowrap;
}

.mkt-discounts__title-1 {
  font-weight: 400;
  line-height: 0.98;
}

.mkt-discounts__title-2 {
  font-weight: 500;
  line-height: 1;
}

.mkt-discounts__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0;
  color: var(--vs-ink);
  max-width: 965px;
}

@media (max-width: 1280px) {
  .mkt-discounts { padding: 64px 0; }
  .mkt-discounts__rows { gap: 16px; }
  .mkt-discount-row { height: 100px; }
  .mkt-discount-card { flex-basis: 240px; height: 100px; padding: 20px 28px; }
  .mkt-discounts__fade { width: 280px; }
  .mkt-discounts__glow { width: 760px; height: 760px; }
  .mkt-discounts__title { font-size: 64px; letter-spacing: -1px; }
  .mkt-discounts__overlay { gap: 40px; }
  .mkt-discounts__body { font-size: 20px; }
}

@media (max-width: 768px) {
  .mkt-discounts { padding: 40px 0; }
  .mkt-discount-row { height: 80px; }
  .mkt-discount-card { flex-basis: 180px; height: 80px; padding: 16px 20px; }
  .mkt-discounts__fade { width: 120px; }
  .mkt-discounts__glow { width: 460px; height: 460px; }
  .mkt-discounts__title { font-size: 40px; }
  .mkt-discounts__overlay { gap: 24px; width: calc(100% - 32px); }
  .mkt-discounts__body { font-size: 17px; }
}

/* -------------------- Secure portal — dark panel + iMac mockup -------------------- */

.mkt-portal {
  padding: 80px 16px 16px;
  background: #fff;
}

.mkt-portal__panel {
  position: relative;
  margin: 0 auto;
  max-width: 1888px;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  aspect-ratio: 1888 / 1034;
  min-height: 720px;
  display: flex;
  align-items: center;
  padding: 80px 100px;
}

.mkt-portal__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("../img/home/portal-bg-texture.jpg");
  background-size: cover;
  background-position: center;
}

.mkt-portal__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 44%, #000 100%),
    linear-gradient(102deg, rgba(0, 0, 0, 0.85) 12%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

.mkt-portal__glow {
  position: absolute;
  pointer-events: none;
  z-index: -2;
}

.mkt-portal__glow--right {
  top: 22%;
  right: -8%;
  width: 60%;
  max-width: 880px;
  transform: rotate(37deg);
  opacity: 0.85;
}

.mkt-portal__glow--top {
  top: -50%;
  right: -20%;
  width: 70%;
  max-width: 1200px;
  opacity: 0.65;
}

.mkt-portal__imac {
  position: absolute;
  left: 36.9%;
  top: 21.7%;
  width: 65%;
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.mkt-portal__play {
  position: absolute;
  left: 70.3%;
  top: 49%;
  transform: translate(-50%, -50%);
  width: clamp(72px, 7.25%, 140px);
  aspect-ratio: 137 / 140;
  height: auto;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  transition: transform 200ms ease-out;
}

.mkt-portal__play:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

.mkt-portal__play img,
.mkt-portal__play svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mkt-portal__play:hover svg circle {
  fill: rgba(0, 0, 0, 0.7);
}

.mkt-portal__copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* Pastel #84 — the copy's fixed 640px ran under the %-positioned iMac
     as the panel narrowed. Cap it proportionally so text and screen
     never collide (640px still wins at the full 1888px design width). */
  max-width: min(640px, 38%);
  align-items: flex-start;
}

.mkt-portal__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: var(--vs-mkt-overline-weight);
  font-size: var(--vs-mkt-overline);
  line-height: var(--vs-mkt-overline-lh);
  letter-spacing: var(--vs-mkt-overline-ls);
  text-transform: uppercase;
  color: var(--vs-mkt-platinum);
  margin: 0 0 28px;
}

.mkt-portal__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-h2);
  line-height: var(--vs-mkt-h2-lh);
  letter-spacing: var(--vs-mkt-h2-tracking);
  color: #fff;
  margin: 0;
}

.mkt-portal__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-body-l);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 520px;
}

/* -------- Live portal preview (Pastel #160, services only) --------
   The monitor frame stays the approved iMac PNG; a clipped, scaled
   iframe of the real portal is layered over the screen glass and
   auto-scrolled by the inline controller in services.html. Scoped to
   --live so the shared component (home-backup) is untouched. */
.mkt-portal__panel--live .mkt-portal__device {
  position: absolute;
  left: 36.9%;
  top: 21.7%;
  width: 65%;
  z-index: 1;
}
.mkt-portal__panel--live .mkt-portal__imac {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  display: block;
  z-index: 1;
}
.mkt-portal__screen {
  position: absolute;
  /* Glass rectangle within the iMac art (fractions of the image box).
     Sits ABOVE the PNG so it hides the baked mock; the bezel frames it. */
  left: 12.85%;
  top: 2.4%;
  width: 74.3%;
  height: 57.4%;
  overflow: hidden;
  z-index: 2;
  background: #f5f3ee;
  border-radius: 2px;
}
.mkt-portal__screen-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 3600px;
  border: 0;
  transform-origin: top left;
  transform: scale(0.4);
  pointer-events: none;
  will-change: transform;
}

@media (max-width: 1280px) {
  .mkt-portal { padding: 48px 16px 16px; }
  .mkt-portal__panel { padding: 56px 48px; aspect-ratio: auto; min-height: 0; }
  .mkt-portal__title { font-size: 64px; }
  .mkt-portal__body { font-size: 20px; }
  .mkt-portal__imac { left: auto; right: -10%; top: 50%; width: 90%; transform: translateY(-44%); }
  .mkt-portal__panel--live .mkt-portal__device { left: auto; right: -10%; top: 50%; width: 90%; transform: translateY(-44%); }
  .mkt-portal__play { left: auto; right: 6%; top: 44%; width: 100px; height: 102px; transform: translateY(-50%); }
  .mkt-portal__play:hover { transform: translateY(-50%) scale(1.05); }
  .mkt-portal__veil {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 44%, #000 100%),
      linear-gradient(102deg, rgba(0, 0, 0, 0.92) 18%, rgba(0, 0, 0, 0.4) 80%);
  }
}

@media (max-width: 768px) {
  .mkt-portal { padding: 32px 8px 8px; }
  .mkt-portal__panel {
    padding: 40px 24px 360px;
    border-radius: 12px;
    flex-direction: column;
    align-items: flex-start;
  }
  .mkt-portal__title { font-size: 40px; letter-spacing: -0.5px; }
  .mkt-portal__body { font-size: 17px; }
  .mkt-portal__copy { gap: 24px; }
  .mkt-portal__imac {
    position: absolute;
    bottom: 16px;
    top: auto;
    right: -16%;
    left: -16%;
    width: 132%;
    max-width: none;
    transform: none;
  }
  .mkt-portal__panel--live .mkt-portal__device {
    bottom: 16px;
    top: auto;
    right: -16%;
    left: -16%;
    width: 132%;
    transform: none;
  }
  .mkt-portal__panel--live .mkt-portal__imac {
    position: relative;
    bottom: auto;
    right: auto;
    left: auto;
    width: 100%;
  }
  .mkt-portal__play { display: none; }
}

/* -------------------- A Unified Front — Stronger Together -------------------- */

.mkt-unified {
  padding: 0 16px 40px;
  background: #fff;
}

.mkt-unified__panel {
  position: relative;
  background: var(--vs-mkt-platinum);
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  height: 510px;
  padding: 40px 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.mkt-unified__photo {
  position: absolute;
  left: -23px;
  top: -54px;
  width: 784px;
  height: 642px;
  object-fit: cover;
  object-position: 0% center;
  z-index: 0;
  filter: drop-shadow(0 100px 80px rgba(78, 67, 23, 0.11))
          drop-shadow(0 22px 18px rgba(78, 67, 23, 0.07));
  pointer-events: none;
}

.mkt-unified__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  max-width: 787px;
}

.mkt-unified__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: var(--vs-mkt-overline-weight);
  font-size: var(--vs-mkt-overline);
  line-height: var(--vs-mkt-overline-lh);
  letter-spacing: var(--vs-mkt-overline-ls);
  text-transform: uppercase;
  color: var(--vs-ink);
  margin: 0;
  white-space: nowrap;
}

.mkt-unified__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 63px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
  white-space: nowrap;
}

.mkt-unified__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--vs-ink);
  margin: 0;
}

@media (max-width: 1280px) {
  .mkt-unified__panel {
    padding: 40px 56px;
    height: 460px;
  }
  .mkt-unified__photo { width: 580px; height: 480px; left: -16px; top: -16px; }
  .mkt-unified__title { font-size: 48px; }
  .mkt-unified__body { font-size: 20px; }
  .mkt-unified__copy { gap: 24px; max-width: 560px; }
}

@media (max-width: 900px) {
  .mkt-unified { padding: 0 8px 24px; }
  .mkt-unified__panel {
    height: auto;
    padding: 0;
    align-items: stretch;
    flex-direction: column;
  }
  .mkt-unified__photo {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 280px;
    object-position: center;
  }
  .mkt-unified__copy {
    padding: 32px 24px;
    gap: 20px;
    max-width: none;
  }
  .mkt-unified__title { font-size: 36px; white-space: normal; }
}

/* -------------------- Exclusive Partnerships — carousel -------------------- */

.mkt-partnerships {
  padding: 160px 0 100px;
  background: #fff;
}

.mkt-partnerships__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
  margin-bottom: 80px;
  padding: 0 100px;
}

.mkt-partnerships__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: var(--vs-mkt-overline-weight);
  font-size: var(--vs-mkt-overline);
  line-height: var(--vs-mkt-overline-lh);
  letter-spacing: var(--vs-mkt-overline-ls);
  text-transform: uppercase;
  color: var(--vs-olive);
  margin: 0 0 28px;
}

.mkt-partnerships__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-h2);
  line-height: var(--vs-mkt-h2-lh);
  letter-spacing: var(--vs-mkt-h2-tracking);
  color: var(--vs-ink);
  margin: 0;
  max-width: 900px;
}

.mkt-partnerships__slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.mkt-partnerships__track {
  display: flex;
  gap: 40px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 max(16px, calc(50% - 783px));
  scroll-behavior: smooth;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.mkt-partnerships__track[data-dragging] {
  cursor: grabbing;
  scroll-behavior: auto;
}

.mkt-partnerships__track[data-dragging] .mkt-partner-card,
.mkt-partnerships__track[data-dragging] img {
  pointer-events: none;
}

.mkt-partnerships__track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mkt-partnerships__track { scroll-behavior: auto; }
}

.mkt-partner-card {
  flex: 0 0 1566px;
  max-width: 100%;
  scroll-snap-align: center;
  background: var(--vs-mkt-platinum);
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 75px;
  padding: 20px 20px 20px 80px;
}

.mkt-partner-card__copy {
  display: flex;
  flex-direction: column;
  gap: 60px;
  flex-shrink: 0;
  width: 547px;
}

.mkt-partner-card__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--vs-mkt-h5);
  line-height: var(--vs-mkt-h5-lh);
  letter-spacing: var(--vs-mkt-h5-tracking);
  color: var(--vs-ink);
  margin: 0;
}

.mkt-partner-card__text {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--vs-ink);
  margin: 0;
}

.mkt-partner-card__media {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 501px;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  background: #e4e4e4;
}

.mkt-partner-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.mkt-partner-card__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.92) 100%);
  pointer-events: none;
}

.mkt-partner-card__brand {
  position: absolute;
  bottom: 32px;
  left: 33px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  z-index: 1;
}

.mkt-partner-card__brand-mark {
  width: 34px;
  height: 26px;
  display: block;
}

.mkt-partner-card__brand-word {
  height: 48px;
  width: auto;
  display: block;
}

.mkt-partner-card__partner-logo {
  position: absolute;
  bottom: 30px;
  right: 40px;
  height: 39px;
  width: auto;
  z-index: 1;
}

/* Pagination dots */

.mkt-partnerships__dots {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mkt-partnerships__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--vs-ink);
  padding: 0;
  cursor: pointer;
  transition: background-color 200ms ease-out;
}

.mkt-partnerships__dot:hover {
  background: var(--vs-ink-subtle);
}

.mkt-partnerships__dot[aria-selected="true"] {
  background: var(--vs-ink);
}

.mkt-partnerships__dot:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 4px;
}

@media (max-width: 1280px) {
  .mkt-partnerships { padding: 80px 0 64px; }
  .mkt-partnerships__head { margin-bottom: 48px; padding: 0 40px; gap: 24px; }
  .mkt-partnerships__title { font-size: 56px; }
  .mkt-partnerships__track { padding: 0 max(16px, calc(50% - 600px)); gap: 24px; }
  .mkt-partner-card { flex-basis: min(1200px, calc(100vw - 64px)); padding: 16px 16px 16px 56px; gap: 40px; }
  .mkt-partner-card__copy { width: 380px; gap: 32px; }
  .mkt-partner-card__title { font-size: 32px; }
  .mkt-partner-card__text { font-size: 18px; }
  .mkt-partner-card__media { height: 380px; }
}

@media (max-width: 768px) {
  .mkt-partnerships { padding: 48px 0 40px; }
  .mkt-partnerships__head { padding: 0 24px; }
  .mkt-partnerships__title { font-size: 40px; }
  .mkt-partnerships__track { padding: 0 max(16px, calc(50% - 320px)); }
  .mkt-partner-card {
    flex-direction: column;
    flex-basis: calc(100vw - 32px);
    padding: 16px;
    gap: 24px;
  }
  .mkt-partner-card__copy { width: auto; gap: 16px; padding: 16px; }
  .mkt-partner-card__title { font-size: 28px; }
  .mkt-partner-card__text { font-size: 16px; }
  .mkt-partner-card__media { height: 280px; width: 100%; }
  .mkt-partner-card__brand-word { height: 32px; }
  .mkt-partner-card__partner-logo { height: 28px; bottom: 20px; right: 24px; }
}

.mkt-partnerships__hero {
  margin: 0;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  color: #fff;
}

.mkt-partnerships__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 100%),
    linear-gradient(135deg, #1f2a3a 0%, #2c3e5e 50%, #0e1410 100%);
}

.mkt-partnerships__hero::before {
  content: "";
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 35%;
  border-radius: 50% 50% 35% 35%;
  background: linear-gradient(180deg, #c4c8cc 0%, #6b7480 100%);
  opacity: 0.55;
  z-index: -1;
  filter: blur(1px);
}

.mkt-partnerships__caption {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  width: 100%;
}

.mkt-partnerships__caption-eyebrow {
  line-height: var(--vs-mkt-overline-lh);
  font-family: var(--vs-font-body);
  font-weight: var(--vs-mkt-overline-weight);
  font-size: var(--vs-mkt-overline);
  letter-spacing: var(--vs-mkt-overline-ls);
  text-transform: uppercase;
  color: var(--vs-mkt-platinum);
  margin: 0;
}

.mkt-partnerships__caption-title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.4px;
  color: #fff;
  margin: 0;
}

.mkt-partnerships__caption-body {
  font-family: var(--vs-font-body);
  font-size: 18px;
  line-height: 1.45;
  color: var(--vs-mkt-platinum);
  margin: 8px 0 0;
  max-width: 520px;
}

.mkt-partnerships__brands {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-content: stretch;
}

.mkt-brand-tile {
  display: grid;
  place-items: center;
  background: var(--vs-bg);
  border-radius: 16px;
  padding: 32px 16px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vs-ink);
  transition: background-color 200ms ease-out, transform 200ms ease-out;
}

.mkt-brand-tile:hover {
  background: var(--vs-ink);
  color: #fff;
  transform: translateY(-2px);
}


/* -------------------- Have Questions — split + pill list -------------------- */

.mkt-have-q {
  padding: 0 16px;
  background: #fff;
}

.mkt-have-q__inner {
  max-width: 1888px;
  margin: 0 auto;
  padding: 80px 100px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.mkt-have-q__copy {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: flex-start;
  flex-shrink: 0;
}

.mkt-have-q__head {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}

.mkt-have-q__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: var(--vs-mkt-overline-weight);
  font-size: var(--vs-mkt-overline);
  line-height: var(--vs-mkt-overline-lh);
  letter-spacing: var(--vs-mkt-overline-ls);
  text-transform: uppercase;
  color: var(--vs-olive);
  margin: 0 0 28px;
}

.mkt-have-q__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-h2);
  line-height: var(--vs-mkt-h2-lh);
  letter-spacing: var(--vs-mkt-h2-tracking);
  color: var(--vs-ink);
  margin: 0;
  white-space: nowrap;
}

.mkt-have-q__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-body-l);
  line-height: 1.55;
  color: var(--vs-ink-muted);
  margin: 0;
  max-width: 480px;
}

.mkt-have-q__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 881px;
}

.mkt-have-q__list > li {
  background: rgba(230, 230, 224, 0.4);
  border-radius: 12px;
  overflow: hidden;
  transition: background-color 200ms ease-out;
}

.mkt-have-q__list > li:hover {
  background: rgba(230, 230, 224, 0.7);
}

.mkt-have-q__item {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  text-align: left;
}

.mkt-have-q__item:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: -4px;
}

.mkt-have-q__q {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--vs-mkt-h7);
  line-height: var(--vs-mkt-h7-lh);
  letter-spacing: var(--vs-mkt-h7-tracking);
  color: var(--vs-ink);
}

.mkt-have-q__icon {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: block;
}

/* Both icons live in the same position; we crossfade + rotate between
   the plus and close states rather than display:none-ing them. Far more
   refined than an instant swap. */
.mkt-have-q__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition:
    opacity 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    transform 280ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.mkt-have-q__icon img.mkt-have-q__icon-plus {
  opacity: 1;
  transform: rotate(0deg);
}

.mkt-have-q__icon img.mkt-have-q__icon-close {
  opacity: 0;
  transform: rotate(-45deg);
}

.mkt-have-q__item[aria-expanded="true"] img.mkt-have-q__icon-plus {
  opacity: 0;
  transform: rotate(45deg);
}

.mkt-have-q__item[aria-expanded="true"] img.mkt-have-q__icon-close {
  opacity: 1;
  transform: rotate(0deg);
}

/* Smooth open/close via grid-rows trick — animates from 0fr → 1fr without
   needing to know the panel's final height. Combined with padding and
   opacity transitions for a soft reveal. */
.mkt-have-q__a {
  display: grid;
  grid-template-rows: 1fr;
  padding: 0 30px 24px;
  opacity: 1;
  transition:
    grid-template-rows 380ms var(--ease-soft, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    padding-bottom 380ms var(--ease-soft, cubic-bezier(0.16, 1, 0.3, 1));
}

.mkt-have-q__a > p {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--vs-ink-muted);
  margin: 0;
  max-width: 760px;
  overflow: hidden;
  min-height: 0;
}

/* Override the browser default `[hidden] { display: none }` so the panel
   stays in the layout and the grid-rows transition can play. */
.mkt-have-q__a[hidden] {
  display: grid !important;
  grid-template-rows: 0fr;
  padding-bottom: 0;
  opacity: 0;
}

@media (max-width: 1280px) {
  .mkt-have-q__inner {
    padding: 56px 40px;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }
  .mkt-have-q__copy { gap: 32px; }
  .mkt-have-q__head { gap: 24px; }
  .mkt-have-q__title { font-size: 64px; white-space: normal; }
  .mkt-have-q__body { font-size: 20px; }
  .mkt-have-q__list { max-width: none; }
  .mkt-have-q__q { font-size: 22px; }
  .mkt-have-q__plus { width: 36px; height: 36px; }
}

@media (max-width: 768px) {
  .mkt-have-q__inner { padding: 32px 16px; gap: 32px; }
  .mkt-have-q__title { font-size: 40px; }
  .mkt-have-q__body { font-size: 17px; }
  .mkt-have-q__item { padding: 18px 20px; }
  .mkt-have-q__q { font-size: 18px; letter-spacing: -0.4px; }
  .mkt-have-q__plus { width: 32px; height: 32px; }
}

/* -------------------- Hear from other Veterans -------------------- */

.mkt-hear {
  padding: 20px 16px;
  background: #fff;
}

.mkt-hear__panel {
  position: relative;
  margin: 0 auto;
  max-width: 1888px;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  height: 721px;
  padding: 80px 100px;
  display: flex;
  align-items: center;
  color: #fff;
}

.mkt-hear__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mkt-hear__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(11, 10, 0, 0.9) 0%, rgba(11, 10, 0, 0.55) 35%, rgba(11, 10, 0, 0) 65%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
}

.mkt-hear__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  max-width: 594px;
}

.mkt-hear__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: var(--vs-mkt-overline-weight);
  font-size: var(--vs-mkt-overline);
  line-height: var(--vs-mkt-overline-lh);
  letter-spacing: var(--vs-mkt-overline-ls);
  text-transform: uppercase;
  color: var(--vs-mkt-platinum);
  margin: 0 0 28px;
}

.mkt-hear__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-h2);
  line-height: var(--vs-mkt-h2-lh);
  letter-spacing: var(--vs-mkt-h2-tracking);
  color: #fff;
  margin: 0;
}

.mkt-hear__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-body-l);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 460px;
}

.mkt-hear__play {
  position: absolute;
  left: 64.5%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 3;
  filter: drop-shadow(0 71px 40px rgba(0, 0, 0, 0.33))
          drop-shadow(0 8px 5px rgba(0, 0, 0, 0.17));
  transition: transform 200ms ease-out;
}

.mkt-hear__play:hover {
  transform: translateY(-50%) scale(1.04);
}

.mkt-hear__play-icon {
  position: relative;
  width: 137px;
  height: 140px;
  display: block;
}

.mkt-hear__play-rim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.mkt-hear__play-tri-wrap {
  position: absolute;
  top: 33.04%;
  bottom: 33.04%;
  left: 33.77%;
  right: 32.31%;
  display: block;
  overflow: hidden;
}

.mkt-hear__play-tri {
  position: absolute;
  top: 8.56%;
  bottom: 8.56%;
  left: 14.59%;
  right: 8.83%;
  width: auto;
  height: auto;
  display: block;
}

.mkt-hear__play-tri-wrap img.mkt-hear__play-tri {
  width: calc(100% - 14.59% - 8.83%);
  height: calc(100% - 8.56% - 8.56%);
}

.mkt-hear__play-label {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.4;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mkt-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  transition: border-color 200ms ease-out, transform 200ms ease-out;
}

.mkt-link:hover {
  border-color: #fff;
}

.mkt-link svg {
  transition: transform 200ms ease-out;
}

.mkt-link:hover svg { transform: translateX(4px); }

@media (max-width: 1280px) {
  .mkt-hear__panel { padding: 64px 48px; height: 560px; }
  .mkt-hear__title { font-size: 64px; }
  .mkt-hear__body { font-size: 20px; }
  .mkt-hear__copy { gap: 24px; max-width: 480px; }
  .mkt-hear__play { left: auto; right: 8%; }
  .mkt-hear__play-icon { width: 100px; height: 102px; }
  .mkt-hear__play-label { font-size: 18px; }
  .mkt-hear__veil {
    background:
      linear-gradient(90deg, rgba(11, 10, 0, 0.92) 0%, rgba(11, 10, 0, 0.65) 50%, rgba(11, 10, 0, 0.2) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5) 100%);
  }
}

@media (max-width: 768px) {
  .mkt-hear { padding: 8px; }
  .mkt-hear__panel {
    height: auto;
    min-height: 480px;
    padding: 40px 24px;
    border-radius: 12px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
  }
  .mkt-hear__title { font-size: 40px; letter-spacing: -0.5px; }
  .mkt-hear__body { font-size: 17px; }
  .mkt-hear__play { position: relative; right: auto; top: auto; transform: none; margin-top: 24px; }
  .mkt-hear__play:hover { transform: scale(1.04); }
  .mkt-hear__play-icon { width: 80px; height: 82px; }
}

/* -------------------- Trusted reviews -------------------- */

.mkt-trusted {
  padding: 120px 16px 96px;
  background: #fff;
}

.mkt-trusted__inner {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 100px;
}

.mkt-trusted__head {
  text-align: center;
  margin-bottom: 64px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.mkt-reviews {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.mkt-review {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 40px 36px;
  background: var(--vs-bg);
  border-radius: 18px;
  border: 1px solid transparent;
}

.mkt-review__stars {
  display: flex;
  gap: 4px;
}

.mkt-review__stars span {
  width: 20px;
  height: 20px;
  background: var(--vs-olive);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.mkt-review__quote {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--vs-ink);
  margin: 0;
  flex: 1;
  letter-spacing: -0.1px;
}

.mkt-review__byline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 24px;
  border-top: 1px solid var(--vs-line);
}

.mkt-review__name {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.1px;
  color: var(--vs-ink);
  margin: 0;
}

.mkt-review__role {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--vs-ink-muted);
  margin: 0;
  letter-spacing: 0;
}

@media (max-width: 1280px) {
  .mkt-trusted { padding: 80px 16px 64px; }
  .mkt-trusted__inner { padding: 0 40px; }
  .mkt-trusted__head .mkt-section-title { font-size: 56px; }
  .mkt-reviews { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .mkt-trusted { padding: 48px 16px 40px; }
  .mkt-trusted__inner { padding: 0; }
  .mkt-trusted__head .mkt-section-title { font-size: 40px; }
  .mkt-review { padding: 24px; }
}

/* -------------------- Marketing footer (light) -------------------- */

.mkt-footer {
  background: linear-gradient(180deg, rgba(245, 245, 243, 0) 0%, #f5f5f3 100%);
  /* Pastel #49 — tightened (was 120px top / 84px gap) after the ghost
     watermark between the link columns and the legal row was removed. */
  padding: 80px 110px 40px;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  color: var(--vs-ink);
  overflow: clip;
}

.mkt-footer__inner {
  max-width: 1700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.mkt-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 64px;
  width: 100%;
}

/* Newsletter (left) */

.mkt-footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: min(645px, 100%);
  flex-shrink: 0;
}

.mkt-footer__newsletter-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mkt-footer__newsletter-title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 31px;
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 0;
}

.mkt-footer__newsletter-sub {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.4;
  color: var(--vs-ink);
  margin: 0;
}

.mkt-footer__newsletter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--vs-mkt-platinum);
  border-radius: 12px;
  padding: 12px 12px 12px 30px;
  gap: 12px;
  width: 100%;
}

.mkt-footer__input {
  flex: 1 1 0;
  background: transparent;
  border: 0;
  color: var(--vs-ink);
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -1px;
  outline: none;
  min-width: 0;
}

.mkt-footer__input::placeholder {
  color: var(--vs-ink);
  opacity: 0.4;
}

.mkt-footer__subscribe {
  background: var(--vs-ink);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 16px 20px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms ease-out;
  white-space: nowrap;
}

.mkt-footer__subscribe:hover {
  background: var(--vs-olive-deep);
}

.mkt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sitemap / Contact / Social columns (right) */

.mkt-footer__cols {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 55px;
  flex-wrap: wrap;
}

.mkt-footer__col {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.mkt-footer__col-title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vs-ink);
  opacity: 0.4;
  margin: 0;
}

.mkt-footer__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mkt-footer__col-list a {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  color: var(--vs-ink);
  text-decoration: none;
  transition: opacity 200ms ease-out;
}

.mkt-footer__col-list a:hover { opacity: 0.6; }

/* Contact column */

.mkt-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mkt-footer__address {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 0;
  width: 368px;
  max-width: 100%;
}

.mkt-footer__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  color: var(--vs-ink);
  text-decoration: none;
  transition: opacity 200ms ease-out;
}

.mkt-footer__contact-link:first-of-type span { text-decoration: underline; }

.mkt-footer__contact-link:hover { opacity: 0.7; }

.mkt-footer__contact-link img,
.mkt-footer__contact-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--vs-ink);
}

/* Social column */

.mkt-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
}

.mkt-footer__social a {
  width: 48px;
  height: 49px;
  display: block;
  transition: opacity 200ms ease-out;
}

.mkt-footer__social a:hover { opacity: 0.75; }

.mkt-footer__social img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Bottom area — the ghost watermark (Pastel #37/#38) was removed in
   Pastel #49; the footer tightened up with it. */

.mkt-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.mkt-footer__legal {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vs-ink);
  opacity: 0.4;
  margin: 0;
}

.mkt-footer__legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mkt-footer__legal-links a {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vs-ink);
  text-decoration: underline;
  opacity: 0.8;
  transition: opacity 200ms ease-out;
}

.mkt-footer__legal-links a:hover { opacity: 1; }

@media (max-width: 1024px) {
  .mkt-footer__top { flex-direction: column; gap: 56px; }
  .mkt-footer__newsletter { width: 100%; }
  .mkt-footer__cols { width: 100%; justify-content: space-between; gap: 32px; flex-wrap: nowrap; }
}

@media (max-width: 1280px) {
  .mkt-footer { padding: 64px 48px 32px; border-top-left-radius: 32px; border-top-right-radius: 32px; }
  .mkt-footer__inner { gap: 48px; }
  .mkt-footer__newsletter-title { font-size: 28px; }
  .mkt-footer__newsletter-sub { font-size: 18px; }
  .mkt-footer__input { font-size: 18px; }
}

@media (max-width: 768px) {
  .mkt-footer { padding: 48px 24px 24px; border-top-left-radius: 24px; border-top-right-radius: 24px; }
  .mkt-footer__inner { gap: 40px; }
  .mkt-footer__cols { flex-direction: column; gap: 32px; }
  .mkt-footer__col { width: 100%; }
  .mkt-footer__newsletter-row { padding: 8px 8px 8px 20px; }
  .mkt-footer__input { font-size: 16px; }
  .mkt-footer__subscribe { font-size: 14px; padding: 12px 16px; }
  .mkt-footer__bottom { flex-direction: column; align-items: flex-start; }
  .mkt-footer__legal-links { justify-content: flex-start; gap: 16px 24px; }
}

/* -------------------- Services page: centered hero -------------------- */

.mkt-services-hero {
  padding: 16px;
  background: #fff;
}

.mkt-services-hero__inner {
  max-width: 1888px;
  margin: 0 auto;
  min-height: 807px;
  padding: 136px 100px 20px;
  background: #ffffff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
  justify-content: center;
}

.mkt-services-hero__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: var(--vs-mkt-overline-weight);
  font-size: var(--vs-mkt-overline);
  letter-spacing: var(--vs-mkt-overline-ls);
  text-transform: uppercase;
  color: var(--vs-olive);
  margin: 0 0 8px;
  line-height: var(--vs-mkt-overline-lh);
}

.mkt-services-hero__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-h1);
  line-height: var(--vs-mkt-h1-lh);
  letter-spacing: var(--vs-mkt-h1-tracking);
  text-align: center;
  color: var(--vs-ink);
  margin: 0;
  max-width: 1042px;
}

.mkt-services-hero__lead {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-body-l);
  line-height: 1.55;
  color: var(--vs-ink-muted);
  text-align: center;
  margin: 0;
  max-width: 720px;
}

.mkt-services-hero__lead strong {
  font-weight: 700;
}

@media (max-width: 1280px) {
  .mkt-services-hero__inner { padding: 120px 48px 32px; min-height: 640px; gap: 40px; }
  .mkt-services-hero__title { font-size: 72px; }
  .mkt-services-hero__lead { font-size: 20px; }
}

@media (max-width: 768px) {
  .mkt-services-hero__inner { padding: 96px 24px 24px; min-height: 520px; gap: 32px; border-radius: 16px; }
  .mkt-services-hero__title { font-size: 44px; line-height: 1.05; }
  .mkt-services-hero__lead { font-size: 18px; }
  .mkt-services-hero__eyebrow { font-size: 16px; }
}

/* -------------------- Meaningful benefits — header + 2x2 cards grid -------------------- */

.mkt-meaningful {
  padding: 96px 16px 80px;
  background: #fff;
}

.mkt-meaningful__head {
  max-width: 832px;
  margin: 0 auto 64px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

.mkt-meaningful__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: var(--vs-mkt-overline-weight);
  font-size: var(--vs-mkt-overline);
  letter-spacing: var(--vs-mkt-overline-ls);
  text-transform: uppercase;
  color: var(--vs-ink);
  margin: 0;
  line-height: var(--vs-mkt-overline-lh);
}

.mkt-meaningful__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-h2);
  line-height: var(--vs-mkt-h2-lh);
  letter-spacing: var(--vs-mkt-h2-tracking);
  text-align: center;
  color: var(--vs-ink);
  margin: 0;
}

.mkt-meaningful__lead {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-body-l);
  line-height: 1.3;
  color: var(--vs-ink);
  text-align: center;
  margin: 0;
  max-width: 700px;
}

.mkt-meaningful__pills {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.mkt-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--vs-mkt-platinum);
  color: var(--vs-ink);
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}

.mkt-pill:hover {
  background: var(--vs-mkt-grey-2);
}

.mkt-pill--active,
.mkt-pill--active:hover {
  background: var(--vs-olive);
  color: #fff;
}

.mkt-pill__icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
}

.mkt-pill__icon svg { width: 16px; height: 16px; }

.mkt-meaningful__grid {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1280px) {
  .mkt-meaningful { padding: 64px 12px 64px; }
  .mkt-meaningful__head { margin-bottom: 48px; }
  .mkt-meaningful__title { font-size: 64px; }
  .mkt-meaningful__lead { font-size: 20px; }
  .mkt-meaningful__grid { padding: 0 24px; gap: 20px; }
}

@media (max-width: 768px) {
  .mkt-meaningful { padding: 48px 8px; }
  .mkt-meaningful__head { padding: 0 16px; gap: 16px; margin-bottom: 32px; }
  .mkt-meaningful__title { font-size: 40px; }
  .mkt-meaningful__lead { font-size: 18px; }
  .mkt-meaningful__pills { gap: 8px; }
  .mkt-pill { padding: 10px 14px; font-size: 12px; }
  .mkt-meaningful__grid { padding: 0 16px; grid-template-columns: 1fr; gap: 16px; }
}

/* -------------------- Personal Concierge — dark panel with photo -------------------- */

.mkt-concierge {
  padding: 0 16px;
  background: #fff;
}

.mkt-concierge__panel {
  position: relative;
  max-width: 1888px;
  margin: 0 auto;
  min-height: 480px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--vs-mkt-panel);
  isolation: isolate;
}

.mkt-concierge__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
}

.mkt-concierge__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 20, 16, 0.94) 0%, rgba(14, 20, 16, 0.86) 30%, rgba(14, 20, 16, 0.55) 52%, rgba(14, 20, 16, 0.18) 72%, rgba(14, 20, 16, 0) 100%);
  z-index: 1;
}

.mkt-concierge__copy {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 80px 88px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  color: var(--vs-mkt-on-dark);
}

.mkt-concierge__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: var(--vs-mkt-overline-weight);
  font-size: var(--vs-mkt-overline);
  letter-spacing: var(--vs-mkt-overline-ls);
  text-transform: uppercase;
  color: var(--vs-mkt-on-dark);
  margin: 0;
  line-height: var(--vs-mkt-overline-lh);
  opacity: 0.9;
}

.mkt-concierge__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--vs-mkt-on-dark);
  margin: 0;
}

.mkt-concierge__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: var(--vs-mkt-on-dark);
  margin: 0;
  opacity: 0.92;
}

.mkt-concierge__list {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mkt-concierge__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--vs-mkt-on-dark);
}

.mkt-concierge__check {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--vs-mkt-on-dark);
  color: var(--vs-mkt-panel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 1280px) {
  .mkt-concierge__copy { padding: 64px 56px; max-width: 560px; gap: 20px; }
  .mkt-concierge__title { font-size: 44px; }
  .mkt-concierge__body { font-size: 18px; }
}

@media (max-width: 768px) {
  .mkt-concierge { padding: 0 8px; }
  .mkt-concierge__panel { min-height: 0; border-radius: 16px; }
  .mkt-concierge__photo { position: relative; height: 240px; object-position: center; }
  .mkt-concierge__veil { background: linear-gradient(180deg, rgba(14, 20, 16, 0) 0%, rgba(14, 20, 16, 0.6) 60%, rgba(14, 20, 16, 0.96) 100%); }
  .mkt-concierge__copy { padding: 32px 24px 40px; max-width: 100%; }
  .mkt-concierge__title { font-size: 36px; }
  .mkt-concierge__body { font-size: 16px; }
  .mkt-concierge__item { font-size: 16px; }
}

/* =========================================================================
   About Us page — composition-only sections (Figma node 5437-382)
   Reuses .mkt-have-q (FAQ) and .mkt-footer wholesale.
   ========================================================================= */

/* -------------------- Hero -------------------- */
.mkt-about-hero {
  background: #ffffff;
  padding: 200px 16px 96px;
}
.mkt-about-hero__inner {
  max-width: 1002px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.mkt-about-hero__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: var(--vs-mkt-overline-weight);
  font-size: var(--vs-mkt-overline);
  letter-spacing: var(--vs-mkt-overline-ls);
  text-transform: uppercase;
  color: var(--vs-olive);
  margin: 0 0 8px;
  line-height: var(--vs-mkt-overline-lh);
}
.mkt-about-hero__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-h1);
  line-height: var(--vs-mkt-h1-lh);
  letter-spacing: var(--vs-mkt-h1-tracking);
  color: var(--vs-ink);
  margin: 0;
}
.mkt-about-hero__lead {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-body-l);
  line-height: 1.55;
  color: var(--vs-ink-muted);
  max-width: 720px;
  margin: 8px 0 16px;
}

/* -------------------- Image slider -------------------- */
.mkt-about-slider {
  background: #ffffff;
  padding: 16px 16px 96px;
  overflow: hidden;
}
.mkt-about-slider__track {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  animation: mkt-about-slide 60s linear infinite;
}
.mkt-about-slider__item {
  flex: 0 0 auto;
  width: 480px;
  height: 600px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--vs-line);
}
.mkt-about-slider__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
@keyframes mkt-about-slide {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 12px)); }
}
@media (prefers-reduced-motion: reduce) {
  .mkt-about-slider__track { animation: none; }
}

/* -------------------- Our Story -------------------- */
.mkt-about-story {
  background: #ffffff;
  padding: 96px 0;
}
.mkt-about-story__inner {
  max-width: 1520px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: start;
}
.mkt-about-story__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Use canonical h2 token (72px) — was hardcoded 92px outlier */
.mkt-about-story__head .mkt-section-title {
  font-size: var(--vs-mkt-h2);
  line-height: var(--vs-mkt-h2-lh);
  letter-spacing: var(--vs-mkt-h2-tracking);
  margin: 0;
}
.mkt-about-story__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.mkt-about-story__lead {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.5;
  color: var(--vs-ink);
  margin: 0;
}
/* Pastel #93 — enlarged from 18px and lifted from ink-muted to ink so
   the story reads as body copy, not a footnote. */
.mkt-about-story__copy {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.6;
  color: var(--vs-ink);
  margin: 0;
}

/* -------------------- Stats row -------------------- */
.mkt-about-stats {
  background: #ffffff;
  padding: 0 0 80px;
}
.mkt-about-stats__grid {
  max-width: 1520px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  /* Pastel #82 — 4th box removed; three boxes share the row. */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mkt-about-stat {
  background: #e6e6e0;
  border-radius: 16px;
  padding: 34px 30px;
  min-height: 185px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.mkt-about-stat__value {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 73px;
  line-height: 1;
  color: var(--vs-ink);
  margin: 0;
  letter-spacing: -1px;
}
/* Pastel #92 — enlarged again (22 → 24) for senior readability. */
.mkt-about-stat__label {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.4;
  color: var(--vs-ink);
  margin: 0;
}

/* -------------------- Fox Nation banner -------------------- */
.mkt-about-fox {
  padding: 0 16px;
  background: #ffffff;
}
.mkt-about-fox__inner {
  max-width: 1888px;
  margin: 0 auto;
  border-radius: 20px;
  padding: 48px 80px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
  background:
    linear-gradient(89.999deg, rgba(9, 12, 56, 0.85) 13%, rgba(9, 12, 56, 0.5) 67%, rgba(140, 30, 50, 0.65) 100%),
    radial-gradient(ellipse at top right, rgba(180, 40, 60, 0.6), transparent 60%),
    #0a1140;
  color: #ffffff;
}
.mkt-about-fox__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mkt-about-fox__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  color: #ffffff;
  margin: 0;
}
.mkt-about-fox__title strong {
  font-weight: 500;
}
.mkt-about-fox__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #ffffff;
  opacity: 0.9;
  margin: 0;
  max-width: 540px;
}
.mkt-about-fox__logos {
  display: flex;
  align-items: center;
  gap: 32px;
}
.mkt-about-fox__logo {
  height: 96px;
  width: auto;
  display: block;
}
.mkt-about-fox__mark {
  height: 96px;
  width: auto;
  display: block;
}

/* -------------------- Mission -------------------- */
.mkt-about-mission {
  padding: 96px 16px;
  background: #ffffff;
}
.mkt-about-mission__inner {
  position: relative;
  max-width: 1888px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  min-height: 561px;
  display: flex;
  align-items: center;
}
.mkt-about-mission__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.mkt-about-mission__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 22, 14, 0.85) 0%, rgba(20, 22, 14, 0.6) 45%, rgba(20, 22, 14, 0) 70%);
  z-index: 1;
}
.mkt-about-mission__copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: #ffffff;
}
.mkt-about-mission__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.3;
  color: #ffffff;
  margin: 0;
}
.mkt-about-mission__quote {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.3;
  color: #ffffff;
  margin: 0;
}
.mkt-about-mission__attr {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  margin: 16px 0 0;
}
.mkt-about-mission__attr-dash {
  width: 16px;
  height: 1px;
  background: rgba(255, 255, 255, 0.85);
  display: block;
}

/* -------------------- Veterans Journal -------------------- */
.mkt-about-journal {
  padding: 100px 16px 120px;
  background: #ffffff;
}
.mkt-about-journal__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 80px;
}
.mkt-about-journal__head .mkt-section-title {
  font-size: 92px;
  line-height: 1.05;
  margin: 0;
}
.mkt-about-journal__grid {
  max-width: 1720px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 70px;
}
.mkt-journal-card {
  display: flex;
}
.mkt-journal-card__link {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
.mkt-journal-card__media {
  width: 100%;
  height: 388px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--vs-line);
}
.mkt-journal-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease-out;
}
.mkt-journal-card__link:hover .mkt-journal-card__media img {
  transform: scale(1.04);
}
.mkt-journal-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mkt-journal-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mkt-journal-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--vs-line);
  display: block;
}
.mkt-journal-card__byline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mkt-journal-card__name {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--vs-ink);
  margin: 0;
}
.mkt-journal-card__date {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 13px;
  color: #797878;
  margin: 0;
}
.mkt-journal-card__tag {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7e6f3b;
  background: #e6e6e0;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.mkt-journal-card__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 0;
}
.mkt-journal-card__excerpt {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--vs-ink-muted);
  margin: 0;
}
.mkt-journal-card__cta {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 16px;
  color: #7e6f3b;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-top: 8px;
}

/* -------------------- Responsive — About -------------------- */
@media (max-width: 1200px) {
  .mkt-about-hero__title { font-size: 72px; }
  .mkt-about-story__head .mkt-section-title { font-size: 64px; }
  .mkt-about-journal__head .mkt-section-title { font-size: 64px; }
  .mkt-about-fox__inner { padding: 40px 48px; }
  .mkt-about-mission__copy { padding: 64px 48px; }
}

@media (max-width: 900px) {
  .mkt-about-hero { padding: 160px 24px 64px; }
  .mkt-about-hero__title { font-size: 52px; }
  .mkt-about-hero__lead { font-size: 18px; }
  .mkt-about-slider__item { width: 320px; height: 400px; }
  .mkt-about-story { padding: 64px 24px; }
  .mkt-about-story__inner { grid-template-columns: 1fr; gap: 32px; }
  .mkt-about-story__head .mkt-section-title { font-size: 44px; }
  .mkt-about-stats { padding: 0 24px 64px; }
  .mkt-about-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .mkt-about-stat__value { font-size: 56px; }
  .mkt-about-fox__inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 40px 32px;
    gap: 32px;
  }
  .mkt-about-fox__title { font-size: 24px; }
  .mkt-about-fox__logos { justify-content: center; }
  .mkt-about-fox__logo,
  .mkt-about-fox__mark { height: 64px; }
  .mkt-about-mission { padding: 64px 24px; }
  .mkt-about-mission__copy { padding: 48px 32px; max-width: 100%; }
  .mkt-about-mission__title,
  .mkt-about-mission__quote { font-size: 24px; }
  .mkt-about-journal { padding: 64px 24px 80px; }
  .mkt-about-journal__head .mkt-section-title { font-size: 44px; }
  .mkt-about-journal__head { margin-bottom: 48px; }
  .mkt-about-journal__grid { grid-template-columns: 1fr; gap: 48px; }
}

/* =========================================================================
   Veterans Journal — public marketing blog page (Figma node 5628-1748)
   Reuses .mkt-nav and .mkt-footer wholesale; everything else is page-local.
   ========================================================================= */

/* -------------------- Hero -------------------- */
.mkt-jp-hero {
  background: #ffffff;
  padding: 200px 16px 64px;
}
.mkt-jp-hero__inner {
  max-width: 1042px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 56px;
}
.mkt-jp-hero__eyebrow {
  line-height: var(--vs-mkt-overline-lh);
  font-family: var(--vs-font-body);
  font-weight: var(--vs-mkt-overline-weight);
  font-size: var(--vs-mkt-overline);
  letter-spacing: var(--vs-mkt-overline-ls);
  text-transform: uppercase;
  color: var(--vs-ink);
  margin: 0;
}
.mkt-jp-hero__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 100px;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
}
.mkt-jp-hero__lead {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  color: var(--vs-ink);
  margin: 0;
  max-width: 1017px;
}

/* -------------------- Filter bar -------------------- */
.mkt-jp-filter {
  background: #ffffff;
  padding: 32px 16px 56px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}
.mkt-jp-filter__label {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--vs-ink);
  opacity: 0.6;
  margin: 0;
}
.mkt-jp-filter__select {
  position: relative;
}
.mkt-jp-filter__button {
  appearance: none;
  background: var(--vs-mkt-platinum);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 20px 24px;
  width: 368px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-family: var(--vs-font-body);
  font-size: 22px;
  color: var(--vs-ink);
  transition: border-color 200ms ease-out, background-color 200ms ease-out;
}
.mkt-jp-filter__button:hover {
  border-color: rgba(14, 15, 12, 0.15);
}
.mkt-jp-filter__button:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 4px;
}
.mkt-jp-filter__current {
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.85;
}
.mkt-jp-filter__chev {
  width: 20px;
  height: 10px;
  display: inline-grid;
  place-items: center;
  color: var(--vs-ink);
  transition: transform 200ms ease-out;
}
.mkt-jp-filter__button[aria-expanded="true"] .mkt-jp-filter__chev {
  transform: rotate(180deg);
}
.mkt-jp-filter__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #ffffff;
  border: 1px solid var(--vs-line);
  border-radius: 12px;
  box-shadow: 0 24px 48px -16px rgba(14, 15, 12, 0.18);
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mkt-jp-filter__menu[hidden] { display: none; }
.mkt-jp-filter__menu li {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 18px;
  color: var(--vs-ink);
  padding: 14px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 160ms ease-out;
}
.mkt-jp-filter__menu li:hover,
.mkt-jp-filter__menu li:focus-visible {
  background: var(--vs-mkt-platinum);
  outline: none;
}
.mkt-jp-filter__menu li[aria-selected="true"] {
  background: rgba(87, 96, 56, 0.08);
  color: var(--vs-olive);
  font-weight: 500;
}

/* -------------------- Article grid -------------------- */
.mkt-jp-feed {
  padding: 24px 16px 80px;
  background: #ffffff;
}
.mkt-jp-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0 100px;
  max-width: 1888px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 80px 70px;
}
.mkt-jp-grid__cell {
  display: flex;
}
.mkt-jp-grid__cell[hidden] {
  display: none;
}

.mkt-jp-card {
  width: 100%;
  display: flex;
}
.mkt-jp-card__link {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
.mkt-jp-card__media {
  width: 100%;
  height: 388px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--vs-line);
}
.mkt-jp-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mkt-jp-card__link:hover .mkt-jp-card__media img,
.mkt-jp-card__link:focus-visible .mkt-jp-card__media img {
  transform: scale(1.04);
}
.mkt-jp-card__link:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 6px;
  border-radius: 8px;
}
.mkt-jp-card__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mkt-jp-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.mkt-jp-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mkt-jp-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  background: var(--vs-line);
  flex-shrink: 0;
}
.mkt-jp-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mkt-jp-card__byline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mkt-jp-card__name {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: #333333;
  margin: 0;
}
.mkt-jp-card__date {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: #797878;
  margin: 0;
}
.mkt-jp-card__tag {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7e6f3b;
  background: var(--vs-mkt-platinum);
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
}
.mkt-jp-card__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 31px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
}
.mkt-jp-card__excerpt {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: var(--vs-ink);
  margin: 0;
}
.mkt-jp-card__cta {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: #7e6f3b;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  margin-top: auto;
  align-self: flex-start;
}
.mkt-jp-card__link:hover .mkt-jp-card__cta {
  color: #5a5028;
}

/* Inline newsletter CTA card sitting in the article grid. */
.mkt-jp-grid__cell--cta { align-self: stretch; }
.mkt-jp-cta {
  background: var(--vs-mkt-platinum);
  border-radius: 20px;
  padding: 80px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  width: 100%;
  text-align: center;
}
.mkt-jp-cta__head {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}
.mkt-jp-cta__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 45px;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
}
.mkt-jp-cta__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: var(--vs-ink);
  margin: 0;
  max-width: 432px;
}
.mkt-jp-cta__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 416px;
}
.mkt-jp-cta__input {
  appearance: none;
  width: 100%;
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 22px 30px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: var(--vs-ink);
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.mkt-jp-cta__input::placeholder {
  color: rgba(14, 15, 12, 0.4);
}
.mkt-jp-cta__input:focus-visible {
  outline: none;
  border-color: var(--vs-olive);
  box-shadow: 0 0 0 4px rgba(87, 96, 56, 0.18);
}
.mkt-jp-cta__btn {
  appearance: none;
  width: 100%;
  background: var(--vs-olive);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 22px 24px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms ease-out;
}
.mkt-jp-cta__btn:hover { background: var(--vs-olive-deep, #3F4828); }
.mkt-jp-cta__btn:disabled { opacity: 0.7; cursor: default; }

/* Empty-state when filter has no matching articles. */
.mkt-jp-feed__empty {
  margin: 24px auto 0;
  padding: 40px 24px;
  max-width: 720px;
  border: 1px dashed var(--vs-line);
  border-radius: 16px;
  text-align: center;
  font-family: var(--vs-font-body);
  font-size: 18px;
  color: var(--vs-ink-muted);
}

/* Load more — centered olive button with + glyph. */
.mkt-jp-feed__more {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}
.mkt-jp-load {
  appearance: none;
  background: var(--vs-olive);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 24px 40px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  transition: background-color 200ms ease-out, transform 200ms ease-out;
}
.mkt-jp-load:hover { background: var(--vs-olive-deep, #3F4828); }
.mkt-jp-load:active { transform: translateY(1px); }
.mkt-jp-load:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 4px;
}
.mkt-jp-load:disabled { opacity: 0.6; cursor: default; }
.mkt-jp-load__plus {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
}

/* -------------------- Stay Connected — full-width hero band -------------------- */
.mkt-jp-stay {
  padding: 16px;
  background: #ffffff;
}
.mkt-jp-stay__inner {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  padding: 96px 100px;
  display: grid;
  place-items: center;
  isolation: isolate;
  min-height: 480px;
}
.mkt-jp-stay__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.mkt-jp-stay__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mkt-jp-stay__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(70deg, rgba(0, 0, 0, 0.78) 12%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.15) 100%);
}
.mkt-jp-stay__copy {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 884px;
  width: 100%;
}
.mkt-jp-stay__eyebrow {
  line-height: var(--vs-mkt-overline-lh);
  font-family: var(--vs-font-body);
  font-weight: var(--vs-mkt-overline-weight);
  font-size: var(--vs-mkt-overline);
  letter-spacing: var(--vs-mkt-overline-ls);
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
}
.mkt-jp-stay__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 92px;
  line-height: 1;
  letter-spacing: -1px;
  color: #ffffff;
  margin: 0;
}
.mkt-jp-stay__lead {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  max-width: 784px;
}
.mkt-jp-stay__form {
  margin-top: 8px;
  background: rgba(230, 230, 224, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 12px 12px 12px 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 720px;
}
.mkt-jp-stay__input {
  appearance: none;
  flex: 1;
  background: transparent;
  border: 0;
  padding: 14px 0;
  font-family: var(--vs-font-body);
  font-size: 20px;
  line-height: 1.3;
  color: var(--vs-ink);
  min-width: 0;
}
.mkt-jp-stay__input::placeholder {
  color: rgba(14, 15, 12, 0.4);
}
.mkt-jp-stay__input:focus-visible {
  outline: none;
}
.mkt-jp-stay__btn {
  appearance: none;
  background: var(--vs-olive);
  color: #ffffff;
  border: 0;
  border-radius: 6px;
  padding: 16px 28px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms ease-out;
}
.mkt-jp-stay__btn:hover { background: var(--vs-olive-deep, #3F4828); }
.mkt-jp-stay__btn:disabled { opacity: 0.7; cursor: default; }

/* -------------------- Follow us -------------------- */
.mkt-jp-follow {
  background: #ffffff;
  padding: 80px 16px 96px;
}
.mkt-jp-follow__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}
.mkt-jp-follow__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 92px;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
}
.mkt-jp-follow__lead {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  color: var(--vs-ink);
  margin: 0;
  max-width: 880px;
}
.mkt-jp-follow__icons {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 560px;
}
.mkt-jp-follow__icon {
  width: 100%;
  height: 80px;
  background: #0e0f0c;
  color: #ffffff;
  border-radius: 8px;
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: background-color 240ms ease-out, transform 240ms ease-out;
}
.mkt-jp-follow__icon:hover {
  background: var(--vs-olive);
  transform: translateY(-2px);
}
.mkt-jp-follow__icon:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 4px;
}
.mkt-jp-follow__icon svg {
  pointer-events: none;
}

/* -------------------- Responsive — Veterans Journal -------------------- */
@media (max-width: 1280px) {
  .mkt-jp-hero { padding: 168px 24px 56px; }
  .mkt-jp-hero__title { font-size: 80px; }
  .mkt-jp-grid {
    padding: 0 40px;
    gap: 56px 40px;
  }
  .mkt-jp-card__media { height: 320px; }
  .mkt-jp-cta { padding: 56px 32px; gap: 40px; }
  .mkt-jp-cta__title { font-size: 36px; }
  .mkt-jp-stay__inner { padding: 80px 56px; }
  .mkt-jp-stay__title,
  .mkt-jp-follow__title { font-size: 72px; }
}

@media (max-width: 900px) {
  .mkt-jp-hero { padding: 152px 24px 40px; }
  .mkt-jp-hero__title { font-size: 56px; }
  .mkt-jp-hero__lead { font-size: 19px; }
  .mkt-jp-hero__inner { gap: 32px; }
  .mkt-jp-filter {
    flex-direction: column;
    gap: 12px;
    padding: 16px 24px 40px;
  }
  .mkt-jp-filter__button {
    width: 100%;
    max-width: 480px;
    font-size: 18px;
    padding: 16px 20px;
  }
  .mkt-jp-grid {
    padding: 0 24px;
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .mkt-jp-card__media { height: 280px; }
  .mkt-jp-card__title { font-size: 26px; }
  .mkt-jp-card__excerpt { font-size: 18px; }
  .mkt-jp-card__name { font-size: 16px; }
  .mkt-jp-card__date { font-size: 14px; }
  .mkt-jp-card__tag { font-size: 12px; padding: 6px 10px; }
  .mkt-jp-cta { padding: 48px 32px; gap: 32px; }
  .mkt-jp-cta__title { font-size: 32px; }
  .mkt-jp-cta__body { font-size: 17px; }
  .mkt-jp-feed__more { margin-top: 56px; }
  .mkt-jp-load { padding: 18px 28px; font-size: 18px; }
  .mkt-jp-load__plus { width: 24px; height: 24px; }
  .mkt-jp-stay__inner {
    padding: 64px 32px;
    min-height: 420px;
  }
  .mkt-jp-stay__title { font-size: 56px; }
  .mkt-jp-stay__lead { font-size: 18px; }
  .mkt-jp-stay__form {
    flex-direction: column;
    padding: 16px;
    gap: 12px;
    align-items: stretch;
  }
  .mkt-jp-stay__input { padding: 8px 12px; }
  .mkt-jp-stay__btn { width: 100%; padding: 18px 24px; }
  .mkt-jp-follow { padding: 56px 24px 80px; }
  .mkt-jp-follow__title { font-size: 56px; }
  .mkt-jp-follow__lead { font-size: 18px; }
  .mkt-jp-follow__icon { height: 64px; }
}

@media (max-width: 560px) {
  .mkt-jp-hero__title { font-size: 44px; }
  .mkt-jp-stay__title { font-size: 44px; }
  .mkt-jp-follow__title { font-size: 44px; }
  .mkt-jp-card__title { font-size: 22px; }
  .mkt-jp-cta__title { font-size: 28px; }
  .mkt-jp-follow__icons { max-width: 360px; }
}

/* =========================================================================
   Veterans Journal — article detail page (Figma node 5628-2524)
   Reuses .mkt-nav, .mkt-footer, and .mkt-jp-card (related articles).
   ========================================================================= */

.mkt-art {
  background: #ffffff;
  width: 100%;
}

/* -------------------- Article header (title + meta row) -------------------- */
.mkt-art-head {
  padding: 200px 16px 56px;
}
.mkt-art-head__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.mkt-art-head__back {
  margin: 0 0 8px;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vs-ink-muted);
}
.mkt-art-head__back a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 200ms ease-out;
}
.mkt-art-head__back a:hover { color: var(--vs-olive); }
.mkt-art-head__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 92px;
  line-height: 0.98;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
}
.mkt-art-head__subtitle {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
}
.mkt-art-meta {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-top: 1px solid var(--vs-ink);
  border-bottom: 1px solid var(--vs-ink);
  padding: 20px 0;
}
.mkt-art-meta__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.mkt-art-meta__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mkt-art-meta__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--vs-line);
  flex-shrink: 0;
  display: block;
}
.mkt-art-meta__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mkt-art-meta__byline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mkt-art-meta__name {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: 18px;
  color: #333333;
  margin: 0;
}
.mkt-art-meta__date {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 16px;
  color: #797878;
  margin: 0;
}
.mkt-art-meta__share {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mkt-art-meta__share-label {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: 18px;
  color: #333333;
  margin: 0;
}
.mkt-art-meta__share-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.mkt-art-share {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: #0e0f0c;
  color: #ffffff;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 200ms ease-out, transform 200ms ease-out;
}
.mkt-art-share--platinum {
  background: var(--vs-mkt-platinum);
  color: var(--vs-ink);
}
.mkt-art-share:hover {
  background: var(--vs-olive);
  color: #ffffff;
  transform: translateY(-2px);
}
.mkt-art-share:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 4px;
}

/* -------------------- Body — sticky sidebar + article column -------------------- */
.mkt-art-body { padding: 32px 16px 80px; }
.mkt-art-body__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 351px minmax(0, 1fr);
  gap: 64px;
}
.mkt-art-side {
  position: relative;
  height: 100%;
}
.mkt-art-side__sticky {
  position: sticky;
  top: 140px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* TOC */
.mkt-art-toc {
  background: rgba(230, 230, 224, 0.4);
  border-radius: 20px;
  padding: 32px 30px;
}
.mkt-art-toc__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: var(--vs-ink);
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--vs-line);
}
.mkt-art-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: art-toc;
}
.mkt-art-toc__list li {
  counter-increment: art-toc;
  padding: 14px 0;
  border-bottom: 1px solid var(--vs-line);
  display: flex;
}
.mkt-art-toc__list li:last-child { border-bottom: 0; }
.mkt-art-toc__link {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--vs-ink);
  text-decoration: none;
  display: flex;
  gap: 12px;
  align-items: baseline;
  transition: color 200ms ease-out;
  width: 100%;
}
.mkt-art-toc__link::before {
  content: counter(art-toc, decimal-leading-zero);
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--vs-ink-subtle);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.mkt-art-toc__link:hover { color: var(--vs-olive); }
.mkt-art-toc__link:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 4px;
  border-radius: 4px;
}
.mkt-art-toc__link--active {
  color: var(--vs-olive);
  font-weight: 500;
}
.mkt-art-toc__link--active::before { color: var(--vs-olive); }

/* Sidebar CTA card */
.mkt-art-side-cta {
  background: var(--vs-mkt-platinum);
  border-radius: 20px;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.mkt-art-side-cta__title {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--vs-ink);
  margin: 0;
}
.mkt-art-side-cta__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.4;
  color: var(--vs-ink);
  margin: 0;
}
.mkt-art-side-cta__btn {
  appearance: none;
  width: 100%;
  background: var(--vs-olive);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 18px 22px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background-color 200ms ease-out, transform 200ms ease-out;
}
.mkt-art-side-cta__btn:hover { background: var(--vs-olive-deep, #3F4828); }
.mkt-art-side-cta__btn:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 4px;
}
.mkt-art-side-cta__arrow {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  transition: transform 200ms ease-out;
}
.mkt-art-side-cta__btn:hover .mkt-art-side-cta__arrow {
  transform: translateX(4px);
}

/* -------------------- Article content column -------------------- */
.mkt-art-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}
.mkt-art-figure {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--vs-line);
}
.mkt-art-figure img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  display: block;
}
.mkt-art-prose {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.mkt-art-prose p {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.45;
  color: var(--vs-ink);
  margin: 0;
}
.mkt-art-prose strong {
  font-weight: 600;
  color: var(--vs-ink);
}
.mkt-art-prose__h2 {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 31px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 24px 0 0;
  scroll-margin-top: 140px;
}

/* Inline mid-article CTA */
.mkt-art-cta {
  background: var(--vs-mkt-platinum);
  border-radius: 20px;
  padding: 56px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  margin-top: 16px;
}
.mkt-art-cta__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 31px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
}
.mkt-art-cta__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.35;
  color: var(--vs-ink);
  margin: 0;
  max-width: 720px;
}
.mkt-art-cta__btn {
  appearance: none;
  background: var(--vs-olive);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 22px 36px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  transition: background-color 200ms ease-out;
}
.mkt-art-cta__btn:hover { background: var(--vs-olive-deep, #3F4828); }
.mkt-art-cta__btn:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 4px;
}
.mkt-art-cta__arrow {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  transition: transform 200ms ease-out;
}
.mkt-art-cta__btn:hover .mkt-art-cta__arrow {
  transform: translateX(4px);
}

/* Author bio at end of article */
.mkt-art-author {
  background: rgba(230, 230, 224, 0.4);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mkt-art-author__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mkt-art-author__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--vs-line);
  flex-shrink: 0;
  display: block;
}
.mkt-art-author__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mkt-art-author__byline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mkt-art-author__name {
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: 18px;
  color: #333333;
  margin: 0;
}
.mkt-art-author__date {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 16px;
  color: #797878;
  margin: 0;
}
.mkt-art-author__bio {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: var(--vs-ink);
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--vs-line);
}

/* -------------------- Related articles -------------------- */
.mkt-art-related {
  background: #ffffff;
  padding: 80px 16px 96px;
}
.mkt-art-related__head {
  text-align: center;
  margin-bottom: 64px;
}
.mkt-art-related__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
}
.mkt-art-related__grid {
  /* Override journal-page padding for the related row. */
  padding: 0 100px;
}

/* -------------------- Responsive — Article -------------------- */
@media (max-width: 1280px) {
  .mkt-art-head { padding: 168px 32px 48px; }
  .mkt-art-head__title { font-size: 72px; }
  .mkt-art-head__subtitle { font-size: 40px; }
  .mkt-art-body { padding: 32px 32px 64px; }
  .mkt-art-body__inner {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 48px;
  }
  .mkt-art-cta { padding: 48px 32px; }
  .mkt-art-cta__title { font-size: 28px; }
  .mkt-art-related__grid { padding: 0 32px; }
  .mkt-art-related__title { font-size: 44px; }
}

@media (max-width: 900px) {
  .mkt-art-head { padding: 152px 24px 40px; }
  .mkt-art-head__title { font-size: 48px; }
  .mkt-art-head__subtitle { font-size: 26px; }
  .mkt-art-body { padding: 24px 24px 64px; }
  .mkt-art-body__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .mkt-art-side__sticky {
    position: static;
    gap: 16px;
  }
  .mkt-art-content { gap: 32px; }
  .mkt-art-prose p { font-size: 19px; }
  .mkt-art-prose__h2 { font-size: 26px; }
  .mkt-art-toc { padding: 24px 24px; }
  .mkt-art-side-cta { padding: 32px 24px; }
  .mkt-art-cta { padding: 40px 24px; }
  .mkt-art-cta__title { font-size: 24px; }
  .mkt-art-cta__body { font-size: 18px; }
  .mkt-art-cta__btn { font-size: 18px; padding: 18px 28px; }
  .mkt-art-meta__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .mkt-art-related { padding: 56px 24px 80px; }
  .mkt-art-related__head { margin-bottom: 40px; }
  .mkt-art-related__title { font-size: 36px; }
  .mkt-art-related__grid {
    padding: 0;
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .mkt-art-figure img { max-height: 320px; }
}

@media (max-width: 560px) {
  .mkt-art-head__title { font-size: 36px; }
  .mkt-art-head__subtitle { font-size: 22px; }
  .mkt-art-share { width: 44px; height: 44px; }
  .mkt-art-cta__title { font-size: 22px; }
  .mkt-art-cta__body { font-size: 17px; }
}

/* =========================================================================
   Contact — public marketing page (Figma node 5618-647)
   Reuses .mkt-nav, .mkt-footer, .mkt-have-q (FAQ), .mkt-jp-stay, .mkt-jp-follow.
   ========================================================================= */

/* -------------------- Hero -------------------- */
.mkt-ct-hero {
  background: #ffffff;
  padding: 200px 16px 64px;
}
.mkt-ct-hero__inner {
  max-width: 1094px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 48px;
}
.mkt-ct-hero__eyebrow {
  font-family: var(--vs-font-body);
  font-weight: var(--vs-mkt-overline-weight);
  font-size: var(--vs-mkt-overline);
  letter-spacing: var(--vs-mkt-overline-ls);
  text-transform: uppercase;
  color: var(--vs-olive);
  margin: 0 0 8px;
  line-height: var(--vs-mkt-overline-lh);
}
.mkt-ct-hero__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-h1);
  line-height: var(--vs-mkt-h1-lh);
  letter-spacing: var(--vs-mkt-h1-tracking);
  color: var(--vs-ink);
  margin: 0;
}
.mkt-ct-hero__lead {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-body-l);
  line-height: 1.55;
  color: var(--vs-ink-muted);
  margin: 0;
  max-width: 720px;
}
.mkt-ct-hero__contacts {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 60px;
}
.mkt-ct-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--vs-font-body);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.3;
  color: var(--vs-ink);
  transition: color 200ms ease-out;
}
.mkt-ct-hero__link:hover { color: var(--vs-olive); }
.mkt-ct-hero__icon {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  color: var(--vs-ink);
}
.mkt-ct-hero__link:hover .mkt-ct-hero__icon { color: var(--vs-olive); }

/* -------------------- Contact form section -------------------- */
.mkt-ct-form {
  background: var(--vs-mkt-platinum);
  padding: 32px 16px 32px;
}
.mkt-ct-form__inner {
  max-width: 1888px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: stretch;
}

/* Dark photo card — left column */
.mkt-ct-help {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #1c1f1a;
  isolation: isolate;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 60px 40px;
}
.mkt-ct-help__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  z-index: -2;
}
.mkt-ct-help__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 18%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0) 90%);
  z-index: -1;
}
.mkt-ct-help__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: #ffffff;
}
.mkt-ct-help__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--vs-mkt-h3);
  line-height: 1.1;
  letter-spacing: -1px;
  color: #ffffff;
  margin: 0;
}
.mkt-ct-help__body {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  max-width: 480px;
}

/* Form card — right column */
.mkt-ct-msg {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 60px 60px 60px 0;
}
.mkt-ct-msg__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--vs-ink);
  margin: 0;
}
.mkt-ct-msg__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mkt-ct-msg__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.mkt-ct-field {
  position: relative;
  display: block;
}
.mkt-ct-field input,
.mkt-ct-field textarea,
.mkt-ct-field select {
  width: 100%;
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 24px 28px;
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: var(--vs-ink);
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
  appearance: none;
}
.mkt-ct-field textarea {
  resize: vertical;
  min-height: 168px;
  font-family: var(--vs-font-body);
}
.mkt-ct-field--select select {
  cursor: pointer;
  padding-right: 56px;
}
.mkt-ct-field input::placeholder,
.mkt-ct-field textarea::placeholder {
  color: rgba(14, 15, 12, 0.4);
}
.mkt-ct-field input:focus-visible,
.mkt-ct-field textarea:focus-visible,
.mkt-ct-field select:focus-visible {
  outline: none;
  border-color: var(--vs-olive);
  box-shadow: 0 0 0 4px rgba(87, 96, 56, 0.18);
}
.mkt-ct-field--select { position: relative; }
.mkt-ct-field__chev {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 10px;
  display: grid;
  place-items: center;
  color: var(--vs-ink);
  pointer-events: none;
}
.mkt-ct-msg__submit {
  appearance: none;
  margin-top: 4px;
  background: var(--vs-olive);
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  padding: 22px 24px;
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms ease-out;
}
.mkt-ct-msg__submit:hover { background: var(--vs-olive-deep, #3F4828); }
.mkt-ct-msg__submit:focus-visible {
  outline: 2px solid var(--vs-olive);
  outline-offset: 4px;
}
.mkt-ct-msg__submit:disabled {
  opacity: 0.7;
  cursor: default;
}
.mkt-ct-msg__ack {
  margin: 0;
  padding: 16px 20px;
  background: rgba(87, 96, 56, 0.12);
  color: var(--vs-olive-deep, #3F4828);
  border-radius: 12px;
  font-family: var(--vs-font-body);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
}

/* -------------------- Responsive — Contact -------------------- */
@media (max-width: 1280px) {
  .mkt-ct-hero { padding: 168px 32px 56px; }
  .mkt-ct-hero__title { font-size: 80px; }
  .mkt-ct-form { padding: 24px 16px 24px; }
  .mkt-ct-form__inner { gap: 40px; }
  .mkt-ct-help { padding: 48px 32px; min-height: 480px; }
  .mkt-ct-help__title { font-size: 44px; }
  .mkt-ct-msg { padding: 48px 40px 48px 0; }
  .mkt-ct-msg__title { font-size: 32px; }
  .mkt-ct-field input,
  .mkt-ct-field textarea,
  .mkt-ct-field select { padding: 20px 24px; font-size: 18px; }
}

@media (max-width: 900px) {
  .mkt-ct-hero { padding: 152px 24px 40px; }
  .mkt-ct-hero__title { font-size: 56px; }
  .mkt-ct-hero__lead { font-size: 19px; }
  .mkt-ct-hero__contacts { gap: 16px 32px; }
  .mkt-ct-hero__link { font-size: 19px; }
  .mkt-ct-form { padding: 16px; }
  .mkt-ct-form__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .mkt-ct-help {
    padding: 40px 28px;
    min-height: 360px;
  }
  .mkt-ct-help__title { font-size: 36px; }
  .mkt-ct-help__body { font-size: 18px; }
  .mkt-ct-msg { padding: 32px 24px; }
  .mkt-ct-msg__title { font-size: 28px; }
  .mkt-ct-msg__row { grid-template-columns: 1fr; gap: 16px; }
  .mkt-ct-msg__submit { font-size: 18px; padding: 18px 24px; }
}

@media (max-width: 560px) {
  .mkt-ct-hero__title { font-size: 44px; }
  .mkt-ct-help__title { font-size: 28px; }
}

/* ============================================================
   Meaningful benefits — editorial card grid, no tabs.
   All 11 benefits visible at once. Filter pills above the grid
   show/hide cards by category. Cards have no logo overlay (the
   inconsistent partner-logo widths were noisy); a small olive
   category eyebrow sits in the body instead.
   ============================================================ */

.mkt-meaningful {
  background: #ffffff;
  padding: 120px 100px;
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: center;
}

.mkt-meaningful__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
  max-width: 880px;
}

.mkt-meaningful__title {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-h2);
  line-height: var(--vs-mkt-h2-lh);
  letter-spacing: var(--vs-mkt-h2-tracking);
  color: var(--vs-ink);
  margin: 0;
}

.mkt-meaningful__lead {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.55;
  color: var(--vs-ink-muted);
  margin: 0;
  max-width: 660px;
}

/* Filter pills — text-only, soft platinum bg, active state = olive fill. */
.mkt-meaningful__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.mkt-meaningful__filter {
  appearance: none;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--vs-line);
  background: transparent;
  color: var(--vs-ink);
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    color 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    border-color 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

@media (hover: hover) and (pointer: fine) {
  .mkt-meaningful__filter:hover {
    border-color: var(--vs-line-strong);
    background: rgba(14, 15, 12, 0.03);
  }
}

.mkt-meaningful__filter--active,
.mkt-meaningful__filter[aria-selected="true"] {
  background: var(--vs-ink);
  color: #fff;
  border-color: var(--vs-ink);
}

/* Card grid: 3 columns on desktop, responsive down. */
.mkt-meaningful__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 1440px;
}

/* Card: clean photo on top, body below. No logo overlay.
   Border + radius give the editorial-tile feel. */
.mkt-meaningful-card {
  background: #fff;
  border: 1px solid var(--vs-line);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    opacity 280ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    transform 280ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

/* Filter hide: animate out and remove from layout */
.mkt-meaningful-card[data-mb-hide] {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
  /* Use width:0 + margin:-24px to collapse the grid cell. Subtler than
     display:none and animates cleanly. */
  display: none;
}

.mkt-meaningful-card__visual {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  isolation: isolate;
  background: var(--vs-mkt-platinum, #ece8db);
}

.mkt-meaningful-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-soft, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Partner logo — overlay anchored bottom-left of the photo's intentionally
   darker corner. Per-brand height calibration below balances visual mass
   so wide wordmarks (StateFarm, AutoNation) and stacked marks (RPM,
   Bright Horizons) read at comparable weight. Double drop-shadow gives
   white-on-transparent partner marks a soft halo for legibility. */
.mkt-meaningful-card__logo {
  position: absolute;
  bottom: 22px;
  left: 24px;
  z-index: 2;
  max-width: 52%;
  height: 36px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55))
    drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}
/* Per-brand calibration. Wide wordmarks render shorter (~24-28px) so they
   don't take 60% of the card width; stacked / square marks render taller
   (~40-48px) so their visual mass matches a wide wordmark's. Same recipe
   the portal-benefit-card Sprint 9l drop-shadow iteration landed on. */
.mkt-meaningful-card__logo[alt="State Farm"]                  { height: 32px; }
.mkt-meaningful-card__logo[alt="AutoNation"]                  { height: 36px; }
.mkt-meaningful-card__logo[alt="Coursera"]                    { height: 40px; }
.mkt-meaningful-card__logo[alt="ADT"]                         { height: 40px; }
.mkt-meaningful-card__logo[alt="Bright Horizons"]             { height: 44px; }
.mkt-meaningful-card__logo[alt="Georgia Military College"]    { height: 52px; }
.mkt-meaningful-card__logo[alt="NewDay USA"]                  { height: 36px; max-width: 70%; }
.mkt-meaningful-card__logo[alt="Newzip"]                      { height: 36px; }
.mkt-meaningful-card__logo[alt="AFBA"]                        { height: 56px; }
/* Brand-specific SVG fixes — bundled SVGs that ship with
   preserveAspectRatio="none" + 100%/100% dimensions fall back to default
   sizing and stretch their content. Pin to true aspect. */
.mkt-meaningful-card__logo[src*="mb-rpm-logo.svg"]      { width: 60px; height: 48px; }


@media (hover: hover) and (pointer: fine) {
  .mkt-meaningful-card:hover .mkt-meaningful-card__bg {
    transform: scale(1.04);
  }
}

.mkt-meaningful-card__body {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.mkt-meaningful-card__cat {
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--vs-olive);
  margin: 0 0 4px;
  line-height: 1;
}

.mkt-meaningful-card__title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--vs-mkt-h7);
  line-height: var(--vs-mkt-h7-lh);
  letter-spacing: var(--vs-mkt-h7-tracking);
  margin: 0;
  color: var(--vs-ink);
}

.mkt-meaningful-card__copy {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: var(--vs-ink-muted);
  flex: 1;
}

.mkt-meaningful-card__price {
  font-family: var(--vs-font-body);
  font-weight: 700;
  font-size: 14px;
  /* Tighter tracking than an eyebrow label — "$100 OFF" includes a number
     and a special char, which read awkwardly at 0.28em. The reduced
     0.06em keeps the uppercase confidence without spreading the chars. */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vs-ink);
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--vs-line);
  line-height: 1;
}

.mkt-meaningful-card--free .mkt-meaningful-card__price {
  color: var(--vs-olive);
}

@media (max-width: 1280px) {
  .mkt-meaningful { padding: 96px 40px; }
  .mkt-meaningful__title { font-size: 64px; letter-spacing: -1.5px; }
  .mkt-meaningful__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .mkt-meaningful { padding: 64px 16px; gap: 40px; }
  .mkt-meaningful__title { font-size: 44px; letter-spacing: -1px; }
  .mkt-meaningful__lead { font-size: 17px; }
  .mkt-meaningful__filter { font-size: 14px; padding: 0 18px; height: 40px; }
  .mkt-meaningful__grid { grid-template-columns: 1fr; gap: 16px; }
  .mkt-meaningful-card__title { font-size: 20px; }
}

/* =============================================================================
   Motion layer — emil-design-eng applied to /home
   -----------------------------------------------------------------------------
   - All entrance animations gated by html[data-motion="ready"] (inline-script
     flag in <head>) so the page degrades gracefully if motion.js fails.
   - Hero plays on first paint via body[data-mounted] (set by motion.js).
   - Sections below the fold fade up via IntersectionObserver → [data-revealed].
   - Only transform + opacity are animated (GPU, no layout/paint).
   - Hover effects gated by (hover: hover) and (pointer: fine) — no false
     positives on touch.
   - prefers-reduced-motion: instant reveal, no movement.
   ============================================================================= */

/* --- 1. Buttons: press feedback + hover lift --------------------------------- */

.mkt-btn {
  /* Add transform to the existing transition list (don't override the others). */
  transition:
    background-color var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    color           var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    border-color    var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    transform       var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.mkt-btn:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .mkt-btn--primary:hover {
    transform: translateY(-1px);
  }
  .mkt-btn--primary:active {
    transform: translateY(0) scale(0.97);
  }
  .mkt-btn--lg:hover {
    transform: translateY(-2px);
  }
  .mkt-btn--lg:active {
    transform: translateY(0) scale(0.97);
  }
}

/* --- 2. Nav links + brand stability ----------------------------------------
   Nav-link hover is handled in the base rule above (color opacity shift).
   The previous underline sweep felt dated; opacity dim → bright reads as
   refined editorial.

   Brand mark + word: explicitly hold white on hover so the SVG (which uses
   fill="currentColor") doesn't inherit any default link hover colour. The
   earlier issue was the logo flashing black on hover. */

.mkt-nav__brand,
.mkt-nav__brand:hover,
.mkt-nav__brand:focus {
  color: #ffffff;
}

.mkt-nav__brand-mark svg {
  fill: currentColor;
}

/* --- 3. Hero entrance: stagger on first paint ------------------------------- */

html[data-motion="ready"] .mkt-hero__title,
html[data-motion="ready"] .mkt-hero__lead,
html[data-motion="ready"] .mkt-hero__cta-row,
html[data-motion="ready"] .mkt-hero__ticker-wrap {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity   var(--dur-hero, 680ms) var(--ease-soft, cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--dur-hero, 680ms) var(--ease-soft, cubic-bezier(0.16, 1, 0.3, 1));
  will-change: opacity, transform;
}

html[data-motion="ready"] body[data-mounted] .mkt-hero__title    { opacity: 1; transform: translateY(0); transition-delay:  80ms; }
html[data-motion="ready"] body[data-mounted] .mkt-hero__lead     { opacity: 1; transform: translateY(0); transition-delay: 160ms; }
html[data-motion="ready"] body[data-mounted] .mkt-hero__cta-row  { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
html[data-motion="ready"] body[data-mounted] .mkt-hero__ticker-wrap { opacity: 1; transform: translateY(0); transition-delay: 360ms; }

/* --- 4. Reveal on scroll ---------------------------------------------------
   Two attributes, both observed by motion.js → flips [data-revealed]:

   - [data-reveal]            → element itself fades up as one block (24px → 0)
   - [data-reveal-children]   → element stays put; its direct children cascade
                                in with nth-child stagger (16px → 0, 70ms gap)

   Used together on different layers of the same section gives a layered feel:
   the section bg can fade in (data-reveal) while its header/grid items
   cascade in (data-reveal-children). The default for /home is children-only —
   each inner stagger group is observed independently, so as the user scrolls,
   content stair-steps into place.
   --------------------------------------------------------------------------- */

/* Block reveal */
html[data-motion="ready"] [data-reveal]:not([data-revealed]) {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   640ms var(--ease-soft, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 640ms var(--ease-soft, cubic-bezier(0.16, 1, 0.3, 1));
  will-change: opacity, transform;
}

html[data-motion="ready"] [data-reveal][data-revealed] {
  opacity: 1;
  transform: translateY(0);
}

/* Children stagger — runs as a one-shot CSS animation (not transition) so
   that after the reveal completes, the element's own `transition` property
   resumes control. This is the key to making post-reveal hover effects
   feel right: a 560ms reveal transition would otherwise still govern the
   card's hover transform, making the lift feel lazy. Reveals are one-shot
   (observer disconnects after firing), so keyframes' lack of
   interruptibility is fine here. */

@keyframes vs-reveal-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

html[data-motion="ready"] [data-reveal-children]:not([data-revealed]) > * {
  opacity: 0;
  transform: translateY(16px);
}

html[data-motion="ready"] [data-reveal-children][data-revealed] > * {
  animation: vs-reveal-up 560ms var(--ease-soft, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

html[data-motion="ready"] [data-reveal-children][data-revealed] > *:nth-child(1)  { animation-delay:   0ms; }
html[data-motion="ready"] [data-reveal-children][data-revealed] > *:nth-child(2)  { animation-delay:  70ms; }
html[data-motion="ready"] [data-reveal-children][data-revealed] > *:nth-child(3)  { animation-delay: 140ms; }
html[data-motion="ready"] [data-reveal-children][data-revealed] > *:nth-child(4)  { animation-delay: 210ms; }
html[data-motion="ready"] [data-reveal-children][data-revealed] > *:nth-child(5)  { animation-delay: 280ms; }
html[data-motion="ready"] [data-reveal-children][data-revealed] > *:nth-child(6)  { animation-delay: 350ms; }
html[data-motion="ready"] [data-reveal-children][data-revealed] > *:nth-child(7)  { animation-delay: 420ms; }
html[data-motion="ready"] [data-reveal-children][data-revealed] > *:nth-child(8)  { animation-delay: 490ms; }
html[data-motion="ready"] [data-reveal-children][data-revealed] > *:nth-child(n+9){ animation-delay: 560ms; }

/* --- 4b. Button transitions ------------------------------------------------
   No outer drop shadows, no glow halos. Only colour transitions and the
   transform-on-press. Premium flat aesthetic à la FoundersCard / Linear. */

.mkt-btn {
  transition:
    background-color var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    color           var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    border-color    var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    transform       var(--dur-press, 140ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

/* --- 4c. Card hover-lift ---------------------------------------------------
   Subtle elevation on hover for content cards. Gated to hover-capable devices
   so touch screens don't get a sticky hover state after tap. Animates only
   transform + box-shadow (GPU-friendly). */

.mkt-benefit-card,
.mkt-vs-fox-card,
.mkt-review {
  transition:
    transform var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    box-shadow var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

@media (hover: hover) and (pointer: fine) {
  /* Benefit cards: subtle lift, no halo glow. */
  .mkt-benefit-card:hover {
    transform: translateY(-3px);
  }
  /* Review cards: even subtler, no shadow. */
  .mkt-review:hover {
    transform: translateY(-2px);
  }
  /* VS Fox cards: hover-reveal pattern is the interaction (see section
     CSS above). No card-level lift or shadow here. */
}

/* --- 5. Reduced motion: skip all entrance animation ------------------------ */

@media (prefers-reduced-motion: reduce) {
  html[data-motion="ready"] .mkt-hero__title,
  html[data-motion="ready"] .mkt-hero__lead,
  html[data-motion="ready"] .mkt-hero__cta-row,
  html[data-motion="ready"] .mkt-hero__ticker-wrap,
  html[data-motion="ready"] [data-reveal]:not([data-revealed]),
  html[data-motion="ready"] [data-reveal-children]:not([data-revealed]) > *,
  html[data-motion="ready"] [data-reveal-children][data-revealed] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .mkt-btn:active,
  .mkt-btn--primary:hover,
  .mkt-btn--lg:hover,
  .mkt-benefit-card:hover,
  .mkt-vs-fox-card:hover,
  .mkt-review:hover {
    transform: none !important;
  }
  .mkt-nav-wrap,
  .mkt-nav {
    transition: none !important;
  }
}


/* home-2 marketing additions */
/* =========================================================================
   home-2 — how-it-works steps, 2-up benefits row, concierge note tile.
   New marketing page that replaces home.html; home.html itself is untouched.
   ========================================================================= */

/* Benefits row — 2-up centred variant (home-2 keeps only Equifax + State Farm). */
.mkt-benefits__inner--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1120px;
}
@media (max-width: 768px) {
  .mkt-benefits__inner--two { grid-template-columns: 1fr; }
}

/* How it works — three numbered steps + a centred CTA. */
.mkt-how { padding: 120px 0; }
.mkt-how__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 100px;
}
.mkt-how__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}
.mkt-how__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.mkt-how__step {
  background: var(--vs-mkt-platinum);
  border: 2px solid #fff;
  border-radius: var(--radius-card-lg, 20px);
  padding: 44px 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mkt-how__num {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: var(--radius-pill, 999px);
  background: var(--vs-ink);
  color: #fff;
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--vs-mkt-h5);
  line-height: 1;
}
.mkt-how__step-title {
  font-family: var(--vs-font-body);
  font-weight: 500;
  font-size: var(--vs-mkt-h6);
  line-height: var(--vs-mkt-h6-lh);
  letter-spacing: var(--vs-mkt-h6-tracking);
  margin: 0;
  color: var(--vs-ink);
}
.mkt-how__step-text {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-small);
  line-height: 1.55;
  margin: 0;
  color: var(--vs-ink-muted);
}
.mkt-how__cta {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}
@media (max-width: 1024px) {
  .mkt-how { padding: 88px 0; }
  .mkt-how__inner { padding: 0 40px; }
  .mkt-how__head { margin-bottom: 48px; }
  .mkt-how__steps { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 768px) {
  .mkt-how { padding: 64px 0; }
  .mkt-how__step { padding: 36px 28px; }
}

/* vs-fox card — solid "note" tile (no photo) for the concierge statement. */
.mkt-vs-fox-card--note { background: var(--vs-ink); }
.mkt-vs-fox-card--note::after { display: none; }
.mkt-vs-fox-card--note .mkt-vs-fox-card__overlay {
  inset: 0;
  justify-content: center;
}

/* Hero — short variant (home-2): a sleek banner, not a full-height wall. */
.mkt-hero--short .mkt-hero__inner {
  min-height: 600px;
  padding-top: 148px;
  padding-bottom: 72px;
}
@media (max-width: 1280px) {
  .mkt-hero--short .mkt-hero__inner { min-height: 520px; padding-top: 136px; }
}
@media (max-width: 768px) {
  .mkt-hero--short .mkt-hero__inner { min-height: 460px; padding-top: 108px; }
}

/* Benefits as a standalone section (home-2): centred header + 2 cards +
   sign-up CTA, with no hero overlap. Modifier on the canonical .mkt-benefits. */
.mkt-benefits--section {
  margin-top: 0;
  padding: 96px 16px 104px;
}
.mkt-benefits__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 740px;
  margin: 0 auto 56px;
  padding: 0 24px;
}
.mkt-benefits__lead {
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: var(--vs-mkt-body-l);
  line-height: 1.55;
  color: var(--vs-ink-muted);
  margin: 0;
  max-width: 620px;
}
.mkt-benefits__cta {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}
@media (max-width: 1024px) {
  .mkt-benefits--section { padding: 72px 16px 80px; }
  .mkt-benefits__head { margin-bottom: 40px; }
  .mkt-benefits__cta { margin-top: 40px; }
}