#mfg-landing, #mfg-landing *, #mfg-landing *::before, #mfg-landing *::after { box-sizing: border-box }
#mfg-landing { background: var(--mfg-page); color: var(--mfg-text) }
#mfg-landing .mfg-sitehead + main { padding-top: 0 }
/* Match the root and scroll track to the hero so Safari cannot expose a white
   strip when its toolbar changes the viewport. A two-pixel bleed covers sticky
   layer rounding at the lower edge without altering the story layout. */
html, body.mfg-page { background: var(--mfg-daybreak) }
#mfg-landing .mfg-l6 { background: var(--mfg-daybreak) }
#mfg-landing .mfg-l6:not(.is-static) .mfg-l6__pin { height: calc(100dvh + 2px) }
#mfg-landing .mfg-l6.is-static .mfg-l6__block:first-child { align-content: center; padding-block: var(--mfg-space-9) }
#mfg-landing .mfg-l6.is-static:not(.landing-opening) .mfg-l6__block:first-child { min-height: 100svh; min-height: 100dvh }
/* Inline reviews have an auto-sized frame, so use phone proportions rather
   than that frame's viewport units to preview a full-height opening. */
#mfg-landing .landing-opening .mfg-l6__block:first-child { min-height: 760px; padding-bottom: calc(var(--mfg-space-9) + var(--mfg-space-5)) }
@media (max-width: 600px) {
  #mfg-landing .landing-opening .mfg-l6__block:first-child { min-height: max(800px, calc(100vw * 2.17)) }
}
#mfg-landing #closing { --mfg-text: var(--mfg-ink); --mfg-btn: var(--mfg-ink); --mfg-on-btn: var(--mfg-white); --mfg-focus: var(--mfg-ink); --mfg-soft: var(--mfg-daybreak) }
#mfg-landing .landing-heading { display: grid; gap: var(--mfg-space-4); margin-bottom: var(--mfg-space-6) }
#mfg-landing .landing-heading .mfg-display { max-width: 22ch }
#mfg-landing .landing-rail { display: flex; gap: var(--mfg-space-5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: var(--mfg-space-1) var(--mfg-space-6); margin-inline: calc(-1 * var(--mfg-space-6)); scroll-padding-inline: var(--mfg-space-6); overscroll-behavior-x: contain }
#mfg-landing .landing-rail::-webkit-scrollbar { display: none }
#mfg-landing .landing-rail > article { flex: 0 0 calc((100% - 2 * var(--mfg-space-5)) / 3); scroll-snap-align: start; align-content: start }
#mfg-landing #benefits-rail > article { flex-basis: calc((100% - var(--mfg-space-5)) / 2.6); grid-template-rows: minmax(300px, auto) 1fr }
#mfg-landing .mfg-sitehead, #mfg-landing .landing-footer { --mfg-mark-ink: var(--mfg-text); --mfg-wm-ink: var(--mfg-text) }
#mfg-landing .mfg-sitehead__menubtn { position: relative }
#mfg-landing .mfg-sitehead__menubtn > span { display: block; font-size: var(--mfg-text-h2); line-height: 1 }
#mfg-landing .mfg-sitehead__start { min-height: calc(var(--mfg-space-5) + var(--mfg-space-3)); align-self: center }
#mfg-landing .mfg-sitehead__start::after { inset: calc(-1 * var(--mfg-space-1)) 0 }
#mfg-landing .mfg-sitehead .mfg-wm, #mfg-landing .landing-footer .mfg-wm { color: var(--mfg-text) }
#mfg-landing .landing-card-content { display: grid; gap: var(--mfg-space-3); padding-block: var(--mfg-space-4) var(--mfg-space-2) }
#mfg-landing .landing-ui { min-height: 224px; align-content: center }
#mfg-landing .landing-photo { min-height: 224px; display: grid; align-content: center; justify-items: center; text-align: center; gap: var(--mfg-space-2); overflow: hidden; border-radius: var(--mfg-radius-photo) }
#mfg-landing .landing-company { display: grid; gap: var(--mfg-space-4) }
#mfg-landing .landing-company .mfg-cluster { flex-wrap: nowrap }
#mfg-landing .landing-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--mfg-space-4); margin-top: var(--mfg-space-5) }
#mfg-landing .landing-controls button { min-width: var(--mfg-target); padding-inline: var(--mfg-space-4) }
#mfg-landing .landing-section-cta { margin-top: var(--mfg-space-6) }
#mfg-landing .landing-stats { --gap: var(--mfg-space-4); grid-template-columns: repeat(3, minmax(0, 1fr)) }
#mfg-landing .landing-stat-content { gap: var(--mfg-space-2); border-radius: 0; padding: var(--mfg-space-5); height: 100%; align-content: start; background: var(--mfg-daybreak); color: var(--mfg-ink); --mfg-text: var(--mfg-ink) }
#mfg-landing .landing-stat-card { padding: 0; gap: 0; overflow: hidden; grid-template-rows: var(--mfg-space-4) 1fr }
#mfg-landing .landing-stat-cap { background: var(--mfg-surface) }
#mfg-landing .landing-stat-content--blue { background: var(--landing-stats-blue) }
#mfg-landing .landing-stat-content--green { background: var(--landing-stats-green) }
#mfg-landing .landing-stat-content .mfg-h2 { font-variant-numeric: tabular-nums }
#mfg-landing .landing-stat-content p { line-height: 1.5 }
#mfg-landing .landing-footer { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--mfg-space-7); align-items: start }
#mfg-landing .landing-footer-logo { width: min(100%, 240px); height: auto }
#mfg-landing .landing-footer nav { display: grid; justify-items: start; gap: var(--mfg-space-2) }
#mfg-landing .landing-footer-bottom { display: flex; flex-wrap: wrap; gap: var(--mfg-space-4); justify-content: space-between; margin-top: var(--mfg-space-7) }
#mfg-landing .landing-footer a { min-height: var(--mfg-target); display: inline-flex; align-items: center }
#mfg-landing section[id] { scroll-margin-top: var(--mfg-space-9) }
#mfg-landing .landing-dialog-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mfg-space-4) }
#mfg-landing dialog .landing-dialog-body { display: grid; gap: var(--mfg-space-4); margin-block: var(--mfg-space-5) }
#mfg-landing .landing-guide-photo { min-height: 224px }
/* Editorial revision: established bricks, with stronger Sun/Ink contrast. */
#mfg-landing :is(#benefits, #companies, #platform, #guides) { padding-block: var(--mfg-space-8) }
#mfg-landing .landing-heading--split { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: end; gap: var(--mfg-space-7) }
#mfg-landing .landing-heading--split .mfg-lede { max-width: 34ch }
#mfg-landing .landing-benefit, #mfg-landing .landing-story { display: grid; gap: var(--mfg-space-3); min-width: 0 }
#mfg-landing .landing-benefit { padding: 0; gap: 0; overflow: hidden }
#mfg-landing .landing-benefit > .landing-ui { border-radius: 0 }
#mfg-landing .landing-benefit > .landing-card-content { padding: var(--mfg-space-5); align-content: start }
#mfg-landing #benefits-rail > article { flex-basis: calc((100% - 2 * var(--mfg-space-5)) / 3.15); grid-template-rows: auto 1fr }
#mfg-landing .landing-ui { min-height: 300px; padding: var(--mfg-space-5); align-content: center }
#mfg-landing .landing-ui > .mfg-card { width: 100%; gap: var(--mfg-space-3) }
#mfg-landing :is(.landing-ui--sun, .landing-photo--pending, .landing-story-cover--sun) {
  background: var(--mfg-sun); --mfg-text: var(--mfg-ink); --mfg-muted: var(--mfg-text-soft); --mfg-text-soft: var(--mfg-ink);
  --mfg-surface: var(--mfg-white); --mfg-mist: var(--mfg-daybreak); --mfg-line: var(--mfg-warm-line); --mfg-focus: var(--mfg-ink); color: var(--mfg-ink);
}
#mfg-landing .landing-company .landing-photo { margin: calc(-1 * var(--mfg-space-4)) calc(-1 * var(--mfg-space-5)) 0; border-radius: var(--mfg-radius-photo) var(--mfg-radius-photo) 0 0; min-height: 0; height: 240px; display: block }
#mfg-landing .landing-company .landing-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35% }
#mfg-landing .landing-company-meta { color: var(--mfg-text-soft) }
#mfg-landing .landing-company > .mfg-body:not(.landing-company-meta) { min-height: 3.2em }
#mfg-landing .landing-company > .mfg-btn { justify-self: start; margin-inline: calc(-1 * var(--mfg-space-3)) }
#mfg-landing .landing-company .landing-photo--pending { display: grid; align-content: center; justify-items: start; padding: var(--mfg-space-5); text-align: left }
#mfg-landing .landing-company > .mfg-cluster { flex-wrap: wrap }
#mfg-landing .landing-company .mfg-h3 { --mfg-text-h3: var(--mfg-text-h2) }
#mfg-landing .landing-discovery { position: relative; isolation: isolate; overflow: hidden; background: var(--mfg-page); border-top: var(--mfg-border) solid var(--mfg-line) }
#mfg-landing .landing-discovery > :is(#companies, #platform) { position: relative; z-index: 1 }
#mfg-landing #platform {
  --landing-stats-blue: #E1F3FC; --landing-stats-green: #E8F8D8;
  padding-block: var(--mfg-space-7);
}
#mfg-landing #platform > .mfg-container { position: relative; z-index: 1 }
#mfg-landing #platform .landing-heading { margin-bottom: var(--mfg-space-5) }
#mfg-landing .landing-discovery-pattern { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; color: var(--mfg-text); opacity: .03; pointer-events: none }
#mfg-landing #guides-rail > article { flex-basis: 29% }
#mfg-landing #guides-rail > article:first-child { flex-basis: calc(42% - var(--mfg-space-5)) }
#mfg-landing .landing-story-cover, #mfg-landing .landing-guide-photo { height: 320px; min-height: 0; align-content: center }
#mfg-landing .landing-guide-photo { display: block }
#mfg-landing .landing-guide-photo img { display: block; width: 100%; height: 100%; object-fit: cover }
#mfg-landing .landing-story-cover .mfg-display { font-size: var(--mfg-text-h1); max-width: 12ch }
#mfg-landing #closing .mfg-container { max-width: calc(var(--mfg-content) + 2 * var(--mfg-gutter)); display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: var(--mfg-space-5) var(--mfg-space-7) }
#mfg-landing #closing .mfg-display { grid-row: span 2 }
#mfg-landing #closing .mfg-cluster { align-self: start }
@media (max-width: 1050px) {
  #mfg-landing .landing-rail > article, #mfg-landing #benefits-rail > article { flex-basis: calc((100% - var(--mfg-space-5)) / 2.15) }
  #mfg-landing #guides-rail > article, #mfg-landing #guides-rail > article:first-child { flex-basis: calc((100% - var(--mfg-space-5)) / 2.15) }
}
@media (max-width: 760px) {
  #mfg-landing .landing-stats { grid-template-columns: 1fr }
  #mfg-landing .landing-heading--split, #mfg-landing #closing .mfg-container { grid-template-columns: 1fr; gap: var(--mfg-space-4) }
  #mfg-landing #closing .mfg-display { grid-row: auto }
  #mfg-landing .landing-heading--split .mfg-lede { max-width: 52ch }
}
@media (max-width: 600px) {
  #mfg-landing #platform { padding-block: var(--mfg-space-5); --mfg-gutter: var(--mfg-space-6); --mfg-text-display: var(--mfg-text-h1) }
  #mfg-landing :is(#benefits, #companies) { padding-block: var(--mfg-space-5); --mfg-text-display: var(--mfg-text-h1); --mfg-text-lede: var(--mfg-text-body) }
  #mfg-landing :is(#benefits, #companies) .landing-heading { gap: var(--mfg-space-2); margin-bottom: var(--mfg-space-4) }
  #mfg-landing :is(#benefits, #companies) .landing-controls { margin-top: var(--mfg-space-4) }
  #mfg-landing :is(#benefits, #companies) .landing-section-cta { margin-top: var(--mfg-space-4) }
  #mfg-landing #benefits-rail > article { grid-template-rows: auto 1fr }
  #mfg-landing :is(#benefits-rail, #companies-rail) > article { padding: var(--mfg-space-4) }
  #mfg-landing .landing-ui { min-height: 0; padding: var(--mfg-space-4) }
  #mfg-landing #companies .landing-photo { min-height: 0; aspect-ratio: 2.5; padding: var(--mfg-space-4) }
  #mfg-landing .landing-company { gap: var(--mfg-space-3) }
  #mfg-landing :is(#benefits, #companies) .landing-card-content { gap: var(--mfg-space-2); padding-block: var(--mfg-space-3) 0 }
  #mfg-landing #benefits .landing-benefit > .landing-card-content { padding: var(--mfg-space-4) }
  #mfg-landing .landing-rail { gap: var(--mfg-space-4) }
  #mfg-landing .landing-rail > article, #mfg-landing #benefits-rail > article { flex-basis: 92% }
  #mfg-landing #guides-rail > article, #mfg-landing #guides-rail > article:first-child { flex-basis: 92% }
  #mfg-landing .landing-ui { min-height: calc(2 * var(--mfg-space-9)); padding: var(--mfg-space-4) }
  #mfg-landing #benefits-rail > article { padding: 0 }
  #mfg-landing .landing-ui > .mfg-card { padding: var(--mfg-space-3); gap: var(--mfg-space-2) }
  #mfg-landing #companies .landing-company .landing-photo { height: 148px; min-height: 0; aspect-ratio: auto; margin: calc(-1 * var(--mfg-space-4)) calc(-1 * var(--mfg-space-4)) 0; padding: 0 }
  #mfg-landing #companies .landing-company .landing-photo--pending { padding: var(--mfg-space-4) }
  #mfg-landing .landing-story-cover, #mfg-landing .landing-guide-photo { height: 240px }
  #mfg-landing .landing-footer { grid-template-columns: 1fr 1fr; gap: var(--mfg-space-6) }
  #mfg-landing .landing-footer > :first-child { grid-column: 1 / -1 }
  #mfg-landing .landing-section-cta .mfg-btn { width: 100% }
}
@media (max-width: 600px) {
  #mfg-landing :is(#benefits, #companies) { padding-block: var(--mfg-space-4) }
  #mfg-landing :is(#benefits, #companies) .landing-heading { margin-bottom: var(--mfg-space-3) }
  #mfg-landing :is(#benefits, #companies) .landing-controls,
  #mfg-landing :is(#benefits, #companies) .landing-section-cta { margin-top: var(--mfg-space-3) }
  #mfg-landing .landing-ui .mfg-job__body > .mfg-small { display: none }
  #mfg-landing :is(#benefits, #companies) .landing-card-content { padding-top: var(--mfg-space-2) }
  #mfg-landing #companies .landing-photo { aspect-ratio: 3.5 }
}
@media (max-width: 360px) {
  #mfg-landing #platform { --mfg-gutter: var(--mfg-space-5) }
  #mfg-landing #benefits .landing-benefit > .landing-card-content { padding-block: var(--mfg-space-3) }
  #mfg-landing :is(#benefits-rail, #companies-rail) > article { flex-basis: 100% }
}
@media (prefers-reduced-motion: reduce) { #mfg-landing .landing-rail { scroll-behavior: auto } }
/* Editorial breathing room: one heading, one card message, quiet controls. */
#mfg-landing .landing-benefit .landing-ui { justify-items: center }
#mfg-landing .landing-benefit .landing-ui > .mfg-card { width: 84%; padding: var(--mfg-space-3); gap: var(--mfg-space-2) }
#mfg-landing .landing-benefit .landing-ui--sun { position: relative; isolation: isolate }
#mfg-landing .landing-benefit .landing-ui--sun::before { content: ""; position: absolute; width: 65%; height: 54%; left: 18%; top: 25%; background: var(--mfg-white); opacity: .45; border-radius: var(--mfg-radius-card); transform: rotate(8deg); z-index: -1 }
#mfg-landing .landing-benefit .landing-ui--sun > .mfg-card { width: 72%; transform: rotate(-5deg) }
@media (max-width: 600px) {
  #mfg-landing :is(#benefits, #companies) { --mfg-gutter: var(--mfg-space-7); padding-block: var(--mfg-space-5) }
  #mfg-landing :is(#benefits, #companies) .landing-heading { margin-bottom: var(--mfg-space-5) }
  #mfg-landing :is(#benefits-rail, #companies-rail) > article { flex-basis: 100% }
  #mfg-landing #benefits .landing-benefit > .landing-card-content { padding: var(--mfg-space-5) }
  #mfg-landing .landing-benefit .landing-ui { min-height: calc(2 * var(--mfg-space-9) + var(--mfg-space-6)) }
  #mfg-landing :is(#benefits, #companies) .landing-controls { margin-top: var(--mfg-space-3) }
  #mfg-landing :is(#benefits, #companies) .landing-section-cta { margin-top: var(--mfg-space-3) }
}
@media (max-width: 360px) {
  #mfg-landing :is(#benefits, #companies) { --mfg-gutter: var(--mfg-space-6); padding-block: var(--mfg-space-4) }
  #mfg-landing #benefits .landing-benefit > .landing-card-content { padding: var(--mfg-space-4) }
}
/* Keep the full card width, with a narrow glimpse into the neighboring slides. */
@media (max-width: 600px) {
  #mfg-landing .landing-rail { --landing-rail-inset: min(var(--mfg-space-5), var(--mfg-gutter)); gap: var(--mfg-space-3); padding-inline: var(--landing-rail-inset); margin-inline: calc(-1 * var(--landing-rail-inset)); scroll-padding-inline: var(--landing-rail-inset) }
  #mfg-landing .landing-rail > article,
  #mfg-landing #benefits-rail > article,
  #mfg-landing #guides-rail > article,
  #mfg-landing #guides-rail > article:first-child { flex-basis: 100%; scroll-snap-align: center }
}
#mfg-landing .landing-stat-card { transition: transform var(--mfg-dur-hover) var(--mfg-ease-out), box-shadow var(--mfg-dur-hover) var(--mfg-ease-out) }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #mfg-landing .landing-stat-card:hover { transform: translateY(calc(-1 * var(--mfg-lift))); box-shadow: var(--mfg-shadow-soft) }
}
@media (prefers-reduced-motion: reduce) { #mfg-landing .landing-stat-card { transition: none } }
/* Give each section heading a clear pause after the preceding section. */
#mfg-landing :is(#benefits, #companies, #platform, #guides, #closing) { padding-block-start: var(--mfg-space-9) }
@media (max-width: 600px) {
  #mfg-landing :is(#benefits, #companies, #platform, #guides, #closing) { padding-block-start: calc(var(--mfg-space-8) + var(--mfg-space-4)) }
}