/* ============================================================
   MissionFi landing — rebuilt from Figma "MissionFi — Design UPDATED"
   Frames: "Landing — desktop" #3542:3789 (1440 / 1200 container)
           "Landing — mobile"  #3558:4774
   Design tokens & fonts are imported verbatim from the handoff
   design system; everything below is layout + responsive chrome.
   Pure CSS, no framework. Desktop frame is the typographic truth.
   ============================================================ */

@import url('../_ds/tokens/fonts.css');
@import url('../_ds/tokens/colors.css');
@import url('../_ds/tokens/typography.css');
@import url('../_ds/tokens/spacing.css');
@import url('../_ds/tokens/effects.css');
@import url('../_ds/tokens/base.css');

/* ---------- layout helpers ---------- */
.mf-wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.mf-eyebrow {
  font: 600 14px/18.4px var(--f-out);
  letter-spacing: .0986em;
  text-transform: uppercase;
  color: var(--blue);
}
.mf-eyebrow--light { color: var(--white); }
.mf-eyebrow--dim { color: var(--on-blue-dim); }

.mf-h2 {
  font: 700 36px/39.6px var(--f-out);
  letter-spacing: -.0275em;
  color: var(--ink);
}

.mf-lead {
  font: 400 18.5px/28.05px var(--f-out);
  color: var(--body);
}

/* manual line breaks that only exist in the mobile frame */
.mf-br-m { display: none; }

.mf-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px; /* renders the 26px pill height the frame shows */
  border-radius: 999px;
  font: 600 11.5px/18.4px var(--f-out);
  white-space: nowrap;
}
.mf-chip--green { background: var(--green-bg); color: var(--green-fg); }
.mf-chip--amber { background: var(--amber-bg); color: var(--amber-fg); }

/* =================================================================
   NAVIGATION  #3542:3791
   ================================================================= */
.mf-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(244, 246, 248, .93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.mf-nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 14px var(--gutter);
}
.mf-lockup { display: inline-flex; align-items: center; gap: 10px; }
.mf-lockup__tile {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background: var(--blue);
  display: grid;
  place-items: center;
}
.mf-lockup__tile img { width: 17px; height: 17px; }
.mf-lockup__name {
  font: 700 18px/28.8px var(--f-pop);
  letter-spacing: -.02em;
  color: var(--ink);
}
.mf-nav__spacer { flex: 1 1 auto; }
.mf-nav__links { display: flex; align-items: center; gap: 24px; }
.mf-nav__link {
  font: 500 14.5px/23.2px var(--f-out);
  color: var(--ink-2);
}
.mf-nav__link:hover { color: var(--blue); }

.mf-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 12px;
  background: var(--blue);
  color: var(--white);
  font: 600 15px/24px var(--f-out);
  border: 0;
  cursor: pointer;
  transition: background .15s ease;
}
.mf-btn-pill:hover { background: #223B79; }

/* =================================================================
   HERO  #3542:3811
   ================================================================= */
.mf-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 550.8fr) minmax(0, 529.2fr);
  gap: 52px;
  height: 797px; /* Figma: fixed 797 container, the phone sits flush with the bottom edge */
  align-items: start;
}
.mf-hero__copy { padding-top: 137px; }
.mf-hero__h1 {
  padding-top: 14px;
  /* Figma: the ts1/ts2 segments force Outfit over the Poppins base style */
  font: 700 60px/60.2px var(--f-out);
  letter-spacing: -.0324em;
  color: var(--ink);
}
.mf-hero__h1 em { font-style: normal; color: var(--blue); }
.mf-hero__lead { max-width: 490px; padding-top: 20px; }

/* waitlist card  #3542:3822 */
.mf-form-card {
  margin-top: 26px;
  width: 478px;
  max-width: 100%;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  scroll-margin-top: 90px;
}
.mf-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 19px;
}
.mf-field {
  height: 48px;
  width: 100%;
  padding: 0 14px;
  background: var(--white);
  border: 1px solid var(--line-input);
  border-radius: 11px;
  font: 400 16px var(--f-out);
  color: var(--ink);
}
.mf-field::placeholder { color: var(--body); opacity: 1; }
.mf-field:focus { border-color: var(--blue); outline: none; }

.mf-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 49px;
  padding: 13px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--blue);
  color: var(--white);
  font: 600 18px var(--f-out);
  cursor: pointer;
  transition: background .15s ease;
}
.mf-btn-primary:hover { background: #223B79; }
.mf-btn-primary img { width: 17px; height: 17px; }

.mf-form-success { display: flex; gap: 14px; align-items: flex-start; }
.mf-form-success__mark {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--green-bg);
  color: var(--green-fg);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
}
.mf-form-success__title { font: 700 20px/1.25 var(--f-out); letter-spacing: -.01em; color: var(--ink); }
.mf-form-success__text { font: 400 14.5px/21.6px var(--f-out); color: var(--body); margin-top: 4px; }
.mf-form-success__mail {
  margin-top: 10px;
  font: 600 11px/17.6px var(--f-out);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--body);
  word-break: break-all;
}

/* phone mockup  #3542:3835
   phone.webp is a 2x render of the 392x686.45 node WITH the shadow baked in:
   bleed 54px left/right, 30px top, 78px bottom => 500x794.5 logical px. */
.mf-hero__phone {
  display: flex; /* flex centering keeps the overflowing image truly centered (auto margins collapse to 0) */
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 529.2px;
  height: 716.45px; /* 30 padding + 686.45 phone, clips the bottom bleed */
  margin-top: 81px;
  margin-left: auto;
  padding: 30px 30px 0;
  background: var(--hero-lilac);
  border-radius: 26px 26px 0 0;
  overflow: hidden;
}
.mf-hero__phone img {
  display: block;
  flex: 0 0 auto;
  width: 500px;
  max-width: none;
  height: auto;
  margin: -30px 0 0; /* aligns the real phone edge with the padding */
}

/* =================================================================
   EXECUTION BEATS KNOWLEDGE  #3542:4009
   ================================================================= */
.mf-exec {
  min-height: 728px; /* Figma: Section:margin fixed height 728 */
  background: linear-gradient(175deg, #2B4EA2 13%, #1E3C82 49%);
  color: var(--white);
}
.mf-exec__inner {
  /* Figma: 1160px fixed frame centred in the 1440 artboard */
  max-width: 1228px;
  margin: 0 auto;
  padding: 100px 34px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.mf-exec__h2 {
  max-width: 780px;
  padding-top: 16px;
  font: 700 42px/48.2px var(--f-out);
  letter-spacing: -.022em;
  color: var(--white);
}
.mf-exec__lead {
  max-width: 620px;
  padding-top: 16px;
  font: 400 18.5px/28px var(--f-out);
  color: var(--white);
}
.mf-exec__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 213px; /* Figma: fixed row height 213 */
  gap: 16px;
  margin-top: 40px;
}
.mf-stat {
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: var(--blue-grad-a);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 16px;
}
.mf-stat__num {
  font: 700 40px/40px var(--f-out);
  letter-spacing: -.035em;
  color: var(--white);
}
.mf-stat__num small {
  font: 600 15px/15px var(--f-out);
  letter-spacing: 0;
  color: var(--on-blue-dim);
}
.mf-stat__text {
  padding-top: 10px;
  font: 400 16px/21.7px var(--f-out);
  color: var(--on-blue);
  flex: 1 1 auto;
}
.mf-stat__cite {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font: 600 10px/16px var(--f-out);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--on-blue-dim);
}

/* =================================================================
   WHO IT'S FOR  #3542:4046
   ================================================================= */
.mf-who { padding: 88px 0; }
.mf-who__h2 { padding-top: 14px; max-width: 620px; }
.mf-who__lead { max-width: 581px; padding-top: 14px; }
.mf-who__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 295.06px; /* Figma: fixed persona row */
  gap: 16px;
  margin-top: 32px;
}
.mf-persona {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 15px;
  background: var(--white);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
}
.mf-persona__tile {
  width: 43px; height: 43px;
  flex: 0 0 43px;
  border-radius: 14px;
  display: grid;
  place-items: center;
}
.mf-persona__tile img { width: 19px; height: 19px; }
.mf-persona__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.mf-persona__title {
  font: 600 18px/1.25 var(--f-out);
  letter-spacing: -.005em;
  color: var(--ink-dark);
}
.mf-persona__text {
  max-width: 172px; /* Figma: layout_6796c2ca */
  padding-top: 8px;
  font: 400 14.5px/21.6px var(--f-out);
  color: var(--body);
}
.mf-persona__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-top: 5px; /* the card's 16px flex gap already contributes; total matches the frame's 16px block */
  font: 600 16px var(--f-out);
  color: var(--blue);
}
.mf-persona__cta img { width: 15px; height: 15px; }

/* tile tints — EL-0c2d2398 / e56e4731 / b4ea82a3 / 14e663f4 / 615c1ca5 */
.mf-t-blue   { background: var(--tile-blue); }
.mf-t-green  { background: var(--green-bg); }
.mf-t-slate  { background: var(--tile-slate); }
.mf-t-lilac  { background: var(--lilac); }
.mf-t-amber  { background: var(--amber-bg); }

/* =================================================================
   FEATURE SECTIONS  #3542:4140 …
   ================================================================= */
.mf-feat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 470.4px; /* Figma: fixed feature row (layout_48814835) */
  gap: 56px;
  padding: 74px 0;
  align-items: center;
}
.mf-feat + .mf-feat { border-top: 1px solid var(--line); }
.mf-feat--rev .mf-feat__copy { grid-column: 2; grid-row: 1; }
.mf-feat--rev .mf-feat__visual { grid-column: 1; grid-row: 1; }

.mf-feat__h2 { padding-top: 16px; }
.mf-feat__lead { padding-top: 14px; }
.mf-feat__list { padding-top: 16px; }
.mf-feat__list li {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font: 400 16.5px/22.48px var(--f-out);
  color: var(--ink-2);
}
.mf-feat__list img { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 3px; }
.mf-feat__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font: 600 18px var(--f-out);
  color: var(--blue);
}
.mf-feat__cta img { width: 17px; height: 17px; }
.mf-feat__cta:hover { text-decoration: underline; }

.mf-feat__visual { position: relative; padding-bottom: 40px; }
.mf-feat__shot {
  height: 430px;
  border: 1px dashed var(--dash);
  border-radius: 22px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.mf-feat__shot--stand    { background-image: url('/assets/figma/shot-stand.webp'); }
.mf-feat__shot--progress { background-image: url('/assets/figma/shot-progress.webp'); }
.mf-feat__shot--subs     { background-image: url('/assets/figma/shot-subs.webp'); }
.mf-feat__shot--debt     { background-image: url('/assets/figma/shot-debt.webp'); }

/* -------- floating data cards -------- */
.mf-fcard {
  position: absolute;
  left: 264px;
  width: 288px;
}
.mf-fcard--stand { top: 150.03px; }
.mf-fcard--prog  { top: 211.71px; }
.mf-fcard--subs  { top: 130.63px; }
.mf-fcard--debt  { top: 60.78px; }

.mf-panel {
  padding: 15px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-float);
}
.mf-panel--blue {
  background: linear-gradient(to bottom right, #2B4EA2 0%, #1E3C82 100%); /* Figma's 135° runs corner-to-corner */
  border: 0;
  color: var(--white);
}
.mf-panel + .mf-panel { margin-top: 11px; }

.mf-p-label {
  font: 600 11px/17.6px var(--f-out);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--body);
}
.mf-p-amount {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 7px;
}
/* Figma: the Subscriptions card's amount row uses a 12px top pad (#3542:4338), not the 7px of its siblings */
.mf-p-head + .mf-p-amount { padding-top: 12px; }
.mf-p-big {
  font: 700 28px/44.8px var(--f-out);
  letter-spacing: -.03em;
  color: var(--ink);
}
.mf-p-big--26 { font-size: 26px; line-height: 41.6px; }
.mf-p-big--27 { font-size: 27px; line-height: 43.2px; }
.mf-p-big small { font: 600 13px/20.8px var(--f-out); letter-spacing: 0; color: var(--body); }
.mf-p-note {
  padding-top: 6px;
  font: 400 11.5px/17.25px var(--f-out);
  color: var(--body);
}

.mf-p-rows { padding-top: 12px; }
.mf-p-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.mf-p-row__tile {
  width: 32px; height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.mf-p-row__tile img { width: 16px; height: 16px; }
.mf-p-row__main { flex: 1 1 auto; min-width: 0; }
/* Figma: row titles sit in a 25.6px box with a 4.5px offset (EL-91804e5e), subs get 2px — row pitch 69-70px */
.mf-p-row__title { display: block; padding-top: 4.5px; font: 600 13.5px/21.6px var(--f-out); color: var(--ink); }
.mf-p-row__sub { display: block; padding-top: 2px; font: 400 11.5px/18.4px var(--f-out); color: var(--body); }
.mf-p-row__main .mf-chip { margin-top: 2px; }
.mf-p-row__amt { font: 700 13.5px/21.6px var(--f-out); color: var(--ink); white-space: nowrap; }

.mf-p-head { display: flex; align-items: center; gap: 10px; }
.mf-p-head__title {
  font: 700 16px/25.6px var(--f-out);
  letter-spacing: -.015em;
  color: var(--ink);
}
.mf-p-head__action {
  margin-left: auto;
  font: 600 13px/20.8px var(--f-out);
  color: var(--blue);
}

/* progress mini chart */
.mf-p-chart {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding-top: 16px;
  height: 120px;
}
.mf-p-chart__col { flex: 1 1 0; display: flex; flex-direction: column; }
.mf-p-chart__val {
  font: 700 11.5px/18.4px var(--f-out);
  text-align: center;
  color: var(--blue-grad-a);
}
.mf-p-chart__bar {
  margin-top: 6px;
  background: var(--blue-grad-a);
  border-radius: 7px 7px 0 0;
}
.mf-p-chart__lbl {
  padding-top: 5px;
  font: 400 11.5px/18.4px var(--f-out);
  text-align: center;
  color: var(--body);
}

/* stacked debt bar */
.mf-p-bar {
  display: flex;
  gap: 3px;
  height: 8px;
  margin-top: 14px;
}
.mf-p-bar span { height: 8px; border-radius: 99px; display: block; }
.mf-p-bar__a { width: 40.95px; background: #2E4A6B; }
.mf-p-bar__b { width: 133.12px; background: #4C69E0; }
.mf-p-bar__c { width: 56.31px; background: #44567E; }
.mf-p-bar__rest { flex: 1 1 auto; background: #EDEFF2; }

.mf-p-mission { font: 600 9.5px/15.2px var(--f-out); letter-spacing: .11em; text-transform: uppercase; color: var(--on-blue-dim); }
.mf-p-mission__title { padding-top: 4px; font: 700 19px/30.4px var(--f-out); letter-spacing: -.02em; color: var(--white); }
.mf-p-mission__text { padding-top: 8px; font: 400 12.5px/18.75px var(--f-out); color: var(--on-blue); }

.mf-panel--row { display: flex; align-items: center; gap: 11px; }
/* Figma: the VR&E panel text column is 83px wide and the title wraps onto 2 lines */
.mf-panel--row .mf-p-row__main { flex: 0 0 83px; }
.mf-panel--row .mf-p-row__title { font-weight: 600; }
.mf-panel--row .mf-p-row__sub { line-height: 20px; }

/* =================================================================
   MILITARY CENTRIC  #3542:4466
   ================================================================= */
.mf-mc {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mf-mc__inner { padding: 88px 0 80px; }
.mf-mc__h2 { padding-top: 16px; max-width: 620px; }
.mf-mc__lead { max-width: 581px; padding-top: 14px; }
.mf-mc__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 20px;
  margin-top: 34px;
}
.mf-mcard {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.mf-mcard__tile {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
}
.mf-mcard__tile img { width: 19px; height: 19px; }
.mf-mcard__title {
  min-height: 77px; /* Figma: the title block reserves 2 lines (EL-68ba008d) */
  padding-top: 16px;
  font: 700 22px/30.4px var(--f-out);
  letter-spacing: -.013em;
  color: var(--ink);
}
.mf-mcard__text {
  padding-top: 8px;
  font: 400 16.5px/26.2px var(--f-out);
  color: var(--body);
}

/* =================================================================
   FINAL CTA  #3542:4667
   ================================================================= */
.mf-cta {
  background: linear-gradient(to bottom right, #2B4EA2 0%, #1E3C82 100%); /* Figma's 135° runs corner-to-corner */
  text-align: center;
}
.mf-cta__inner { padding: 96px 0; }
.mf-cta__h2 {
  max-width: 574px;
  margin: 0 auto;
  padding-top: 14px;
  font: 700 46px/52px var(--f-out);
  letter-spacing: -.0261em;
  color: var(--white);
}
.mf-cta__lead {
  max-width: 519px;
  margin: 0 auto;
  padding: 14px 0 28px;
  font: 400 18.5px/28.05px var(--f-out);
  color: var(--on-blue);
}
.mf-btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 17px 30px;
  border: 0;
  border-radius: 13px;
  background: var(--white);
  color: var(--blue);
  font: 600 18px/27.2px var(--f-out);
  cursor: pointer;
  transition: transform .15s ease;
}
.mf-btn-white:hover { transform: translateY(-1px); }
.mf-btn-white img { width: 18px; height: 18px; }

/* =================================================================
   FOOTER  #3542:4682
   ================================================================= */
.mf-foot {
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 40px 0 48px;
}
.mf-foot__grid {
  display: grid;
  grid-template-columns: 329.63fr 235.45fr 235.45fr 235.45fr;
  gap: 32px;
}
.mf-foot__lockup { display: inline-flex; align-items: center; gap: 10px; }
.mf-foot__tile {
  width: 27px; height: 27px;
  flex: 0 0 27px;
  border-radius: 9px;
  background: var(--blue);
  display: grid;
  place-items: center;
}
.mf-foot__tile img { width: 15px; height: 15px; }
.mf-foot__name {
  font: 700 17px/27.2px var(--f-pop);
  letter-spacing: -.02em;
  color: var(--ink);
}
.mf-foot__blurb {
  max-width: 255px;
  padding-top: 12px;
  font: 400 14.5px/21.6px var(--f-out);
  color: var(--body);
}
.mf-foot__head {
  font: 600 14px/17.6px var(--f-out);
  letter-spacing: .0864em;
  text-transform: uppercase;
  color: var(--body);
}
.mf-foot__list li { padding: 4.5px 0; }
.mf-foot__list li:first-child { padding-top: 13px; }
.mf-foot__list a {
  font: 400 14px/22.4px var(--f-out);
  color: var(--ink-2);
}
.mf-foot__list a:hover { color: var(--blue); }
.mf-foot__legal {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font: 400 11.5px/19.55px var(--f-out);
  color: var(--body);
}

/* =================================================================
   DESKTOP-ONLY quirks reproduced verbatim from the Figma frame
   ================================================================= */
@media (min-width: 981px) {
  /* the "Active duty" card body is 13.5px in the frame (#3542:4081), its four siblings are 14.5px */
  .mf-persona:nth-child(2) .mf-persona__text { font-size: 13.5px; }
  /* the "Two paydays" card body is 16px in the frame (#3542:4498), its five siblings are 16.5px */
  .mf-mc__grid .mf-mcard:nth-child(2) .mf-mcard__text { font-size: 16px; }
  /* the frame's own CTA button sits 4.5px right of its heading's center */
  .mf-btn-white { transform: translateX(-4.5px); }
}
@media (min-width: 1322px) {
  /* the nav is a hug row with a fixed 587px spacer: its right cluster overhangs the 1200 container by 61px */
  .mf-nav__links, .mf-nav__inner > .mf-btn-pill { transform: translateX(61px); }
}

/* =================================================================
   RESPONSIVE — frame "Landing — mobile" #3558:4774
   ================================================================= */
@media (max-width: 1180px) {
  .mf-fcard { left: auto; right: -14px; }
}

@media (max-width: 980px) {
  /* The mobile frame is a 620px artboard and every value below is
     Figma-exact for that width. Narrower viewports (a 390px phone is
     the common case) render that same artboard proportionally
     scaled, so line breaks, photo insets, floating-card offsets and
     section rhythm stay identical to the frame instead of reflowing.
     min(1, …) makes this a no-op from 620px up to the 980 breakpoint,
     where the artboard is already 1:1.
     On real phones the head script in index.html hands the 620px artboard to
     the engine as the layout viewport instead — WebKit does not scale text with
     `zoom`, and the typed division below needs Chrome 140+ / Safari 26+ — which
     makes 100vw exactly 620px and this declaration a no-op there. It stays for
     narrow desktop windows and for the no-JS path. */
  body { zoom: min(1, calc(100vw / 620px)); }

  .mf-wrap { padding: 0 var(--gutter-sm); }

  .mf-nav__inner { padding: 14px var(--gutter-sm); gap: 16px; }
  .mf-nav__links { display: none; }

  /* hero — Figma v2 rhythm: 66px nav→eyebrow, 71px form→phone, phone flush with the blue section */
  .mf-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    height: auto;
    padding: 61px 0 0;
  }
  .mf-hero__copy { padding-top: 0; }
  .mf-hero__phone { margin-top: 0; }
  .mf-br-m { display: inline; }
  .mf-hero__h1 { max-width: 565px; font: 700 48px/49.2px var(--f-out); letter-spacing: -.0405em; } /* breaks after "stand.", keeps line 2 whole */
  .mf-hero__lead { max-width: none; }
  .mf-form-card { width: 100%; padding: 20px 15px; }
  .mf-form-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mf-hero__phone { margin: 0 auto; max-width: 100%; height: auto; max-height: 682px; padding: 30px 20px 0; }
  .mf-hero__phone img { max-width: 127.55%; margin: -30px 0 -78px; }
  /* the mobile frame sets the nav and CTA button labels in Poppins */
  .mf-btn-pill, .mf-btn-white { font-family: var(--f-pop); }
  /* the frame centers a fixed 508px form column inside the card */
  .mf-form-card form, .mf-form-card [data-mf-state="success"] { max-width: 508px; margin: 0 auto; }

  /* execution — Figma v2 unifies every H2 at 38px/48px on mobile */
  .mf-exec__inner { padding: 60px 20px; }
  .mf-h2 { font-size: 38px; line-height: 48px; }
  /* -.026em: browser Outfit runs 3px wider than the frame's 576px line — this keeps line 1 whole */
  .mf-exec__h2 { font-size: 38px; line-height: 48px; letter-spacing: -.026em; }
  .mf-exec__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .mf-stat__text { font-size: 18px; line-height: 21.7px; }
  .mf-stat__text br { display: none; } /* the desktop frame breaks this line, the mobile frame doesn't */

  /* who it's for */
  .mf-who { padding: 30px 0 60px; }
  /* the frame renders only the "Guard or Reserve" body at 17.5px (#3558:5073) */
  .mf-persona:nth-child(3) .mf-persona__text { font-size: 17.5px; }
  .mf-who__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  /* Figma mobile: tile on the left, content column with the CTA under the text */
  .mf-persona { display: grid; grid-template-columns: 43px minmax(0, 1fr); column-gap: 16px; padding: 24px 15px; }
  .mf-persona__body { grid-column: 2; }
  .mf-persona__text { max-width: none; font-size: 18.5px; line-height: 21.6px; }
  .mf-persona__title { font-size: 22px; }
  .mf-persona__cta { grid-column: 2; justify-self: start; white-space: nowrap; padding-top: 5px; font-size: 18px; }

  /* features */
  .mf-feat {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 0;
    padding: 24px 0;
  }
  .mf-feat--rev .mf-feat__copy,
  .mf-feat--rev .mf-feat__visual { grid-column: 1; grid-row: auto; }
  .mf-feat__list li { font-size: 18.5px; line-height: 22.48px; }
  .mf-feat__visual { padding: 0; margin-top: 14px; }
  .mf-feat__shot { height: 463px; background-size: cover; } /* Figma v2 mobile photo height */
  .mf-fcard {
    position: relative;
    z-index: 2;
    top: auto; left: auto; right: auto;
    width: min(360px, 100%);
    margin: -247px 0 0 auto;
  }
  .mf-feat--rev .mf-fcard { margin-left: 0; margin-right: auto; } /* Figma v2 alternates card side per section */
  /* per-section card offsets from the photo top: 215 / 340 / 250 / 185 (frame v2) */
  #your-shield .mf-fcard { margin-top: -122px; }
  #subscriptions .mf-fcard { margin-top: -212px; }
  /* the mobile frame runs all four cards at 360 — 391 is the desktop width */
  #debt-and-benefits .mf-fcard { margin-top: -277px; }
  /* the 83px text column is a desktop-frame value; the mobile frame keeps
     "VR&E benefits" and its caption on one line each */
  .mf-panel--row .mf-p-row__main { flex: 1 1 auto; }
  /* the frame closes the feature group with 84px before the military band */
  .mf-feat:last-child { padding-bottom: 84px; }

  /* military centric */
  .mf-mc__inner { padding: 56px 0; }
  .mf-mc__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .mf-mcard { min-height: 0; }
  .mf-mcard__title { min-height: 0; }
  .mf-mcard__title br { display: none; }
  .mf-mcard__text { font-size: 18.5px; line-height: 26.2px; }

  /* cta — Figma v2: same unified 38px/48px H2, wraps after "wave" */
  .mf-cta__inner { padding: 64px 0; }
  .mf-cta__h2 { font-size: 38px; line-height: 48px; letter-spacing: -.03em; max-width: 508px; }

  /* form */
  .mf-field { height: 50px; border-color: #E3E8EC; }

  /* footer — the mobile frame scales the footer type up */
  .mf-foot__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mf-foot__blurb { max-width: none; font-size: 18.5px; line-height: 27.75px; }
  .mf-foot__list li { padding: 3.5px 0; }
  .mf-foot__list a { font-size: 16px; line-height: 25.6px; }
  .mf-foot__legal { margin-top: 32px; font-size: 12.5px; line-height: 19.55px; }
}

/* No sub-620 breakpoint: the 620px artboard above is scaled to fit.
   The old ≤560 block re-typeset the page at a width the frame never
   defines — it forced the photo to a 300px slab and stretched the
   floating card to the full column, which is what broke 390px. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}