/* =========================================================================
   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;
  /* Pastel #343 (Slav, 25 Aug): bigger. One step up the scale — this is the
     lead paragraph of the section, so --body-l is where it belongs. */
  font-size: var(--vs-mkt-body-l);
  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;
  /* Pastel #342 (Slav, 25 Aug): bigger. 17px was the last hard-coded body
     size on this page and sat a full step under every other answer copy. */
  font-size: var(--vs-mkt-body);
  line-height: 1.6;
  color: var(--vs-ink-muted);
  margin: 0;
  overflow: hidden;
  min-height: 0;
}

/* .mkt-faq--large — this FAQ runs a tier bigger than the canonical, question
   and answer both. Two requests landed on it:

   26 Aug: the answers match the section lead beside them. #342 and #343 bumped
   both rules in the same round and left them one step apart — --body at 20px in
   the column, --body-l at 22px in the copy next to it — so the same tier of
   text read as two.

   26 Aug: the three questions +50%. 22px x 1.5 is 33px, which is not on the
   scale (h5 is 30, h4 is 40), so it is expressed as a multiple of the token it
   grows from rather than as a new step or a hard-coded number. A change to h7
   still carries through, and the audit sees a token rather than a px.

   THE_FAQ_SCALE below keeps the ratio at every breakpoint, including the two
   intermediate ones whose sizes are pre-existing hard-coded values.

   A modifier on the canonical rather than a page-scoped override. The FAQ also
   runs on home.html, home-experian.html and home-backup.html, and those were
   not asked for; add the class to their <ul> to bring them along. */
.mkt-faq--large { --vs-faq-scale: 1.5; }
.mkt-faq--large .mkt-faq__a > p { font-size: var(--vs-mkt-body-l); }
.mkt-faq--large .mkt-faq__q { font-size: calc(var(--vs-mkt-h7) * var(--vs-faq-scale)); }

.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; }
  .mkt-faq--large .mkt-faq__q { font-size: calc(24px * var(--vs-faq-scale)); }
}

@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; }
  .mkt-faq--large .mkt-faq__q { font-size: calc(20px * var(--vs-faq-scale)); }
}

/* -------------------- 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; }
/* Slav, 26 Aug: too big. The one-line wordmark is 10.5:1, so `max-width:
   100%` let it run the full width of the lockup — 2.3x Experian's mass on
   the card beside it. Swapped for the two-line lockup (3.7:1, near enough
   Experian's 3:1) at a height that lands it between Equifax and Experian. */
.mkt-benefit-card__logo-img[alt="Veteran Strong"] { height: 44px; max-width: 52%; }

.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;
  /* Yuval (23 Aug): the gallery ran edge-to-edge while every other
     section on the page sat inside the shell. 1888 is the same shell
     .mkt-concierge__panel and .mkt-have-q__inner already use. */
  max-width: 1888px;
  margin: 0 auto;
}

/* 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;
}
/* Dark filter over the live preview so the play button reads as a video
   thumbnail. Sits above the iframe; the play button (panel-level) sits above
   this. Scoped to --live so the static portal component is untouched. */
.mkt-portal__panel--live .mkt-portal__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(135% 135% at 69% 46%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 86%);
  pointer-events: none;
}
/* --live: the play button lives INSIDE the device (services.html), so it
   stays centered on the screen glass at every breakpoint. Overrides the base
   panel-relative position and the ≤1280 reposition. The screen-glass centre
   inside the iMac art is 50% across, 31.1% down (top 2.4% + height 57.4% / 2). */
.mkt-portal__panel--live .mkt-portal__play {
  left: 50%;
  top: 31.1%;
  right: auto;
  bottom: auto;
  width: clamp(64px, 10.5%, 116px);
  height: auto;
  transform: translate(-50%, -50%);
}
.mkt-portal__panel--live .mkt-portal__play:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

@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%);
  }
}

/* =========================================================
   Video lightbox dialog (marketing) — native <dialog>.
   Trigger: [data-video-open="<id>"] · wired by mkt-video-dialog.js.
   First used: services.html platform section (id "platform-video").
   ========================================================= */
.mkt-video-dialog {
  width: min(1040px, 92vw);
  max-height: 90vh;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  overflow: visible;
}
.mkt-video-dialog::backdrop {
  background: rgba(8, 10, 7, 0.74);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.mkt-video-dialog__inner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--vs-olive-deep, #3f4a2a);
  box-shadow: 0 40px 120px -28px rgba(0, 0, 0, 0.72);
}
.mkt-video-dialog__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.mkt-video-dialog__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mkt-video-dialog__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  cursor: pointer;
  transition: background-color 200ms ease-out, transform 160ms ease-out;
}
.mkt-video-dialog__close:hover { background: rgba(0, 0, 0, 0.82); }
.mkt-video-dialog__close:active { transform: scale(0.94); }

/* Enter: scale up from 0.96 + fade (emil — never from scale(0); ease-out,
   modal-length). */
.mkt-video-dialog[open] {
  animation: mkt-video-dialog-in 240ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.mkt-video-dialog[open]::backdrop {
  animation: mkt-video-backdrop-in 240ms ease-out both;
}
@keyframes mkt-video-dialog-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes mkt-video-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mkt-video-dialog[open],
  .mkt-video-dialog[open]::backdrop { animation: none; }
  .mkt-portal__play,
  .mkt-video-dialog__close { transition: none; }
}

@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;
  /* Pastel #338 (Slav, 25 Aug): bigger. --small is card copy; these steps
     are the section's only prose and read as body. */
  font-size: var(--vs-mkt-body);
  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; }
}


/* =========================================================================
   Soft-launch variants (2026-08-26)
   Added for /home-newday — the September soft-launch one-pager shown to
   existing NewDay customers after an AE has enrolled them by phone. Every
   rule here is a `--variant` modifier on a canonical component, never a
   page-scoped override: the same class must render identically on both
   pages unless the modifier is present.
   ========================================================================= */

/* Benefits row — 3-up. Companion to --two (Equifax + State Farm on /home).
   The soft-launch lineup is Experian + Agero + ADT, so the row needs a third
   column and a wider measure; 1680px keeps the card width inside a hair of
   the 2-up card so the two pages read as one system. */
.mkt-benefits__inner--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1680px;
}
/* The canonical title reserves two lines so bodies align across the row.
   Two of the three soft-launch titles run to three lines at this column
   width, so the reserve moves to three — otherwise the ADT card's body and
   FREE band sit a line proud of the other two. */
.mkt-benefits__inner--three .mkt-benefit-card__title {
  min-height: calc(var(--vs-mkt-h6) * var(--vs-mkt-h6-lh) * 3);
}

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

/* Call CTA (`.mkt-call-link`) — /home-newday's only action.
   Desktop: a text link. The page deliberately has nothing to sign up for,
   and three filled buttons down it would read as a funnel it is not. The
   number is in the label rather than behind the words "call us", because
   this audience reads a number and reaches for a phone.
   Mobile: the same link renders as a full-width filled button (see
   marketing-mobile.css) — on a phone the number IS the action, one tap,
   and a text link is a small target for a 65+ thumb.
   Same label on both, per the mobile rule that copy never diverges. */
.mkt-call-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  color: #576038;
  font-family: var(--vs-font-body);
  font-size: var(--vs-mkt-body);
  font-weight: 600;
  line-height: 1.2;
  /* Underlined at rest, not on hover: at this age a link that only
     announces itself under the cursor is a link most readers never find. */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color var(--dur-fast, 180ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.mkt-call-link:hover { color: #3f4a2a; }
.mkt-call-link svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* --lg: the hero's copy (Slav, 26 Aug). At body size it read as a footnote
   under an 80px headline, so it steps up to --h6 — above the lead it
   follows — and takes a white button frame. White rather than the olive
   fill used elsewhere on the site: the page has nothing to sign up for, and
   a solid brand button here would promise a funnel that does not exist.
   White on the hero's grey photograph reads as the page's one action
   without shouting. The underline goes with the frame — a shape that is
   already a button does not also need to say "link".
   Geometry follows `.mkt-btn--lg` (12px radius, 32px inline padding) so it
   sits in the same family as the buttons on the full marketing site.
   The mobile button form overrides all of this: there it is already a
   full-width olive button. */
.mkt-call-link--lg {
  min-height: 68px;
  gap: 14px;
  padding: 0 32px;
  border-radius: 12px;
  background: #fff;
  font-size: var(--vs-mkt-h6);
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(29, 32, 23, 0.04),
    0 12px 28px -18px rgba(29, 32, 23, 0.45);
  transition:
    color var(--dur-fast, 180ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    transform var(--dur-fast, 180ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    box-shadow var(--dur-fast, 180ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.mkt-call-link--lg svg { width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine) {
  .mkt-call-link--lg:hover {
    transform: translateY(-2px);
    box-shadow:
      0 1px 0 rgba(29, 32, 23, 0.04),
      0 18px 36px -18px rgba(29, 32, 23, 0.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mkt-call-link--lg { transition: none; }
  .mkt-call-link--lg:hover { transform: none; }
}

/* Hero without a nav bar. /home-newday has no navigation to show — one
   page, nothing to log into — so the strip came off entirely and the
   lockup moved inside the frame, at the head of the copy column. The
   canonical 148px of top padding exists only to clear the floating nav;
   without it the copy would start a third of the way down an empty frame. */
.mkt-hero--no-nav .mkt-hero__inner { padding-top: 56px; }
@media (max-width: 1280px) {
  .mkt-hero--no-nav .mkt-hero__inner { padding-top: 48px; }
}
@media (max-width: 768px) {
  .mkt-hero--no-nav .mkt-hero__inner { padding-top: 32px; }
}

.mkt-hero__brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 44px;
  color: #1d2017;
}
/* Bigger than the nav's lockup (Slav, 26 Aug). With no nav bar on this page
   it is the masthead, not a corner mark, and it has an 80px headline under
   it — at the bar's 43px/24px it read as a leftover. */
.mkt-hero__brand-mark {
  /* Pastel (26 Aug): +30%, then another +20%. The mark carries the brand on a
     page with no nav bar above it, so it is the only Veteran Strong lockup on
     the screen until the reader scrolls. Only home-newday.html uses this
     element, so it changes in place rather than by modifier. */
  width: 90px;
  height: 67px;
  display: grid;
  place-items: center;
}
.mkt-hero__brand-mark svg { width: 100%; height: 100%; }
.mkt-hero__brand-word {
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Version switch — INTERNAL control, not a member-facing CTA.
   Lets us jump between /home and /home-newday while presenting. On /home it
   rides in .mkt-nav__right; on /home-newday, which has no nav, --hero pins
   it to the top-right of the hero frame. Deliberately skinned unlike
   .mkt-btn so nobody mistakes it for product chrome. Deployment is
   internal-only; this comes out before anything is public. */
.mkt-version-switch {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px dashed currentColor;
  border-radius: 50%;
  color: var(--vs-ink-muted);
  text-decoration: none;
  opacity: .62;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}
.mkt-version-switch:hover { opacity: 1; }
.mkt-version-switch:active { transform: scale(.97); }
.mkt-version-switch svg { display: block; width: 18px; height: 18px; }

.mkt-version-switch--hero {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
  .mkt-version-switch { transition: none; }
  .mkt-version-switch:active { transform: none; }
}

/* Footer — minimal: a closing strip, not a reduced sitemap.
   The canonical footer is a wide four-column grid balanced against a
   newsletter panel. This page has no sitemap to point at, placeholder
   social hrefs, and no business showing a signup form. What is left is
   one contact block, and no alignment saves it inside that grid: pinned
   right it sits under nothing, pinned left it leaves two thirds of the
   band empty, and centred on its own it floats above a legal bar that
   still spans the page.
   So the variant changes the composition instead of the alignment. One
   centred column — lockup, contact, hairline, legal — with the padding
   pulled in to match the content that is actually there. */
.mkt-footer--minimal { padding-top: 56px; }
.mkt-footer--minimal .mkt-footer__inner { gap: 32px; }
/* Lockup left, ways to reach us right — the canonical `space-between` on
   __top does the work, it just had a newsletter panel on the right before.
   The postal address is gone: nobody writes to a benefits page, and it was
   the one line still carrying placeholder text. */
.mkt-footer--minimal .mkt-footer__top { align-items: center; }
.mkt-footer--minimal .mkt-footer__cols { justify-content: flex-end; }
/* The "CONTACT" label earned its keep as a column heading among four. Above
   a phone number and an email address, it labels the obvious. */
.mkt-footer--minimal .mkt-footer__col--contact .mkt-footer__col-title { display: none; }
.mkt-footer--minimal .mkt-footer__contact { align-items: center; }

/* Footer lockup — only exists on this variant. The page closes on the
   brand, which is the job the four link columns used to do. */
.mkt-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--vs-ink);
  text-decoration: none;
}
.mkt-footer__brand-mark {
  width: 43px;
  height: 32px;
  display: grid;
  place-items: center;
}
.mkt-footer__brand-mark svg { width: 100%; height: 100%; }
.mkt-footer__brand-word {
  font-family: var(--vs-font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Phone and email side by side rather than stacked: two short lines in a
   column left a tall thin block against the lockup opposite it. */
.mkt-footer--minimal .mkt-footer__contact {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 40px;
}

/* The bottom row gains the hairline the removed link columns used to
   provide. The legal links came off this page on 30 Aug, so the copyright
   line is the only thing left in the row; the canonical rule splits it left
   and right, which with one child just left-anchors it. Centred instead: a
   single line alone on a full-width rule reads as a closing mark rather than
   as the orphaned half of a two-column row. */
.mkt-footer--minimal .mkt-footer__bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(29, 32, 23, .12);
  justify-content: center;
  text-align: center;
}

/* =========================================================================
   The Admiral's invitation (home-newday.html)
   ========================================================================= */
/* Pastel (26 Aug): quote marks on the pullquote. It is a person speaking and
   attributed by name directly underneath, so the marks are doing real work
   rather than decorating: they separate his words from the platform's copy in
   the paragraph above, which is written in our voice, not his.

   Scoped to the --admiral variant, not to the page. .mkt-mission__pullquote
   also runs on about.html, home.html and two Experian pages, where the line is
   ours and unattributed, and quoting it there would be wrong. */
.mkt-mission--admiral .mkt-mission__pullquote::before { content: "\201C"; }
.mkt-mission--admiral .mkt-mission__pullquote::after  { content: "\201D"; }