/* ==========================================================================
   Mafanikio Financial Services Limited (MFSL)
   Design system v2 - hand-written, no framework.

   Direction: institutional fintech, Tanzanian-grounded.
   This file is layered:
     1  Fonts
     2  Tokens
     3  Reset and base
     4  Layout primitives
     5  Logo and icon system
     6  Header, nav, rail
     7  Buttons and links
     8  Hero
     9  Logo-derived geometry
    10  Cards and grids
    11  Stats and counters
    12  Quotes
    13  Accordion and tabs
    14  Lists and data
    15  Forms
    16  Page header
    17  CTA
    18  Partners
    19  Footer
    20  Scroll progress
    21  Narrow layouts
    22  Motion
    23  Print

   Interaction rule: every :hover effect is wrapped in @media (hover: hover)
   so it cannot stick on touch devices. Every transition is disabled under
   prefers-reduced-motion. Nothing here is required for the site to work.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts - self-hosted, subset, no external request at page load
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Ink and text */
  --mf-ink:        #0a1f27;
  --mf-body:       #42555e;
  --mf-muted:      #5c7079;
  --mf-on-dark:    #dceaf0;
  --mf-on-dark-dim:#9db8c4;

  /* Brand */
  --mf-brand:       #29abe2;
  --mf-brand-deep:  #127aa6;
  --mf-brand-ink:   #0b5f80;
  --mf-brand-tint:  #eef8fd;
  --mf-brand-tint2: #d9eefa;

  /* Dark surfaces */
  --mf-navy:      #0b3140;
  --mf-navy-deep: #07222d;
  --mf-navy-soft: #124256;

  /* Lines and fills */
  --mf-line:      #d9e6ec;
  --mf-line-soft: #e9f1f5;
  --mf-surface:   #ffffff;
  --mf-surface-2: #f7fbfd;

  /* Status */
  --mf-ok:   #1c7c54;
  --mf-warn: #a8600a;
  --mf-err:  #b42318;

  /* Type */
  --mf-font: "Nunito", "Noto Sans", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, Arial, sans-serif;

  --mf-t-display: clamp(2.1rem, 1.35rem + 3.4vw, 4rem);
  --mf-t-h1:      clamp(1.85rem, 1.3rem + 2.4vw, 3rem);
  --mf-t-h2:      clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  --mf-t-h3:      clamp(1.2rem, 1.05rem + 0.65vw, 1.55rem);
  --mf-t-h4:      clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --mf-t-body:    1.0625rem;
  --mf-t-sm:      0.9375rem;
  --mf-t-xs:      0.8125rem;

  /* Space */
  --mf-s1: 0.25rem;
  --mf-s2: 0.5rem;
  --mf-s3: 0.75rem;
  --mf-s4: 1rem;
  --mf-s5: 1.5rem;
  --mf-s6: 2rem;
  --mf-s7: 3rem;
  --mf-s8: 4rem;
  --mf-s9: 6rem;

  /* Structure */
  --mf-wrap:        1180px;
  --mf-wrap-narrow: 760px;
  --mf-radius:      10px;
  --mf-radius-lg:   16px;
  --mf-radius-sm:   6px;
  --mf-header-h:    74px;
  --mf-rail-h:      38px;

  /* Elevation */
  --mf-shadow-1: 0 1px 2px rgba(10, 31, 39, .06), 0 1px 3px rgba(10, 31, 39, .04);
  --mf-shadow-2: 0 4px 12px rgba(10, 31, 39, .07), 0 12px 28px rgba(10, 31, 39, .06);
  --mf-shadow-3: 0 10px 24px rgba(10, 31, 39, .10), 0 24px 48px rgba(10, 31, 39, .10);

  --mf-focus: 0 0 0 3px rgba(41, 171, 226, .45);

  /* Motion - one easing family so movement feels consistent */
  --mf-ease:      cubic-bezier(.22, .61, .36, 1);
  --mf-ease-out:  cubic-bezier(.16, .84, .44, 1);
  --mf-dur-fast:  140ms;
  --mf-dur:       240ms;
  --mf-dur-slow:  420ms;
}

/* --------------------------------------------------------------------------
   3. Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--mf-header-h) + var(--mf-rail-h) + 16px);
  /* Nothing in this design should widen the document. Horizontally
     scrollable regions (trust rail, tab strips) contain themselves. */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--mf-font);
  font-size: var(--mf-t-body);
  line-height: 1.65;
  color: var(--mf-body);
  background: var(--mf-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--mf-s4);
  color: var(--mf-ink);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--mf-t-h1); }
h2 { font-size: var(--mf-t-h2); }
h3 { font-size: var(--mf-t-h3); }
h4 { font-size: var(--mf-t-h4); letter-spacing: -0.01em; }

p { margin: 0 0 var(--mf-s4); }
p:last-child { margin-bottom: 0; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--mf-brand-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }

ul, ol { margin: 0 0 var(--mf-s4); padding-left: 1.25rem; }
li { margin-bottom: var(--mf-s2); }
li:last-child { margin-bottom: 0; }

strong { color: var(--mf-ink); font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--mf-line); margin: var(--mf-s7) 0; }

::selection { background: var(--mf-brand-tint2); color: var(--mf-ink); }

:focus-visible {
  outline: 2px solid var(--mf-brand-deep);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: var(--mf-s4);
  top: -100px;
  z-index: 300;
  background: var(--mf-navy);
  color: #fff !important;
  padding: var(--mf-s3) var(--mf-s5);
  border-radius: 0 0 var(--mf-radius) var(--mf-radius);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--mf-dur-fast) var(--mf-ease);
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--mf-wrap);
  margin-inline: auto;
  padding-inline: var(--mf-s5);
}

.section { padding-block: var(--mf-s9); }
.section--tight { padding-block: var(--mf-s8); }
.section--tint { background: var(--mf-brand-tint); }
.section--surface2 { background: var(--mf-surface-2); }
.section--dark { background: var(--mf-navy); color: var(--mf-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: var(--mf-on-dark); }
.section--dark a { color: var(--mf-brand); }

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  max-width: 68ch;
}
.section--dark .lede { color: var(--mf-on-dark); }

.measure { max-width: 68ch; }
.measure-narrow { max-width: 54ch; }

.grid { display: grid; gap: var(--mf-s5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  gap: var(--mf-s7);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
}
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--form { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.split--reverse > :first-child { order: 2; }

.section-head { margin-bottom: var(--mf-s7); max-width: 62ch; }
.section-head p { margin-bottom: 0; }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--mf-s2);
  margin-bottom: var(--mf-s4);
  font-size: var(--mf-t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mf-brand-ink);
}
.section--dark .eyebrow { color: var(--mf-brand); }

/* --------------------------------------------------------------------------
   5. Logo and icon system
   Icons are inline SVG on a 24x24 grid, stroke="currentColor", so they
   inherit text colour and cost no extra request. Decorative icons are
   aria-hidden; meaningful ones carry a label.
   -------------------------------------------------------------------------- */

.logo { display: inline-flex; align-items: center; gap: var(--mf-s3); min-height: 44px; text-decoration: none; }
.logo img { height: 34px; width: auto; }
.logo__fallback {
  font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em;
  color: var(--mf-ink); line-height: 1.05;
}
.logo__fallback span { display: block; font-size: .62rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mf-brand-ink); }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.6em; height: 1.6em; }
.icon--xl { width: 1.9em; height: 1.9em; stroke-width: 1.75; }

/* Icon in a tinted tile - used for service and feature cards */
.icon-tile {
  display: inline-grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: var(--mf-s4);
  border-radius: 12px;
  background: var(--mf-brand-tint);
  color: var(--mf-brand-ink);
  transition: background-color var(--mf-dur) var(--mf-ease),
              color var(--mf-dur) var(--mf-ease),
              transform var(--mf-dur) var(--mf-ease);
}
.card--feature .icon-tile { background: rgba(41,171,226,.16); color: var(--mf-brand); }
.icon-tile--dark { background: var(--mf-navy); color: var(--mf-brand); }

/* --------------------------------------------------------------------------
   6. Header, nav, rail
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--mf-line);
  transition: box-shadow var(--mf-dur) var(--mf-ease),
              background-color var(--mf-dur) var(--mf-ease);
}
/* Condensed state once the page is scrolled - applied by JS via data attr */
.header[data-scrolled="true"] {
  box-shadow: var(--mf-shadow-2);
  background: rgba(255, 255, 255, .98);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mf-s5);
  min-height: var(--mf-header-h);
}

.header__actions { display: flex; align-items: center; gap: var(--mf-s3); }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--mf-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__list > li { margin: 0; position: relative; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--mf-s2);
  min-height: 44px;
  padding: var(--mf-s2) var(--mf-s3);
  border-radius: var(--mf-radius-sm);
  color: var(--mf-ink);
  font-size: var(--mf-t-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--mf-dur-fast) var(--mf-ease),
              color var(--mf-dur-fast) var(--mf-ease);
}
/* Underline grows from the left on hover - only where hover is real */
.nav__link::after {
  content: "";
  position: absolute;
  left: var(--mf-s3);
  right: var(--mf-s3);
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--mf-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mf-dur) var(--mf-ease);
}
@media (hover: hover) {
  .nav__link:hover { background: var(--mf-brand-tint); color: var(--mf-brand-ink); }
  .nav__link:hover::after { transform: scaleX(1); }
}
.nav__link[aria-current="page"] { color: var(--mf-brand-ink); background: var(--mf-brand-tint); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__caret {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--mf-dur) var(--mf-ease);
}

.nav__sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 268px;
  margin: 0;
  /* The visual gap is padding, not an offset: an actual 8px gap between the
     trigger and the panel is a dead zone the pointer must cross, which closes
     the menu mid-move. Keeping the panel flush and padding its top instead
     means the pointer never leaves the hover target. */
  padding: var(--mf-s3) var(--mf-s2) var(--mf-s2);
  list-style: none;
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius);
  box-shadow: var(--mf-shadow-3);
  display: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--mf-dur) var(--mf-ease),
              transform var(--mf-dur) var(--mf-ease);
}
/* Bridge the seam so the pointer can travel from trigger to panel. */
.nav__has-sub { position: relative; }
.nav__has-sub::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: var(--mf-s3);
  pointer-events: none;
}
.nav__has-sub:hover::after,
.nav__has-sub.is-open::after { pointer-events: auto; }
.nav__has-sub:hover > .nav__sub,
.nav__has-sub:focus-within > .nav__sub,
.nav__has-sub.is-open > .nav__sub {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.nav__has-sub:hover > .nav__link .nav__caret,
.nav__has-sub.is-open > .nav__link .nav__caret { transform: rotate(225deg) translateY(-2px); }

.nav__sub a {
  display: flex;
  align-items: center;
  gap: var(--mf-s3);
  min-height: 44px;
  padding: var(--mf-s2) var(--mf-s3);
  border-radius: var(--mf-radius-sm);
  color: var(--mf-ink);
  font-size: var(--mf-t-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--mf-dur-fast) var(--mf-ease),
              color var(--mf-dur-fast) var(--mf-ease),
              padding-left var(--mf-dur-fast) var(--mf-ease);
}
.nav__sub a .icon { color: var(--mf-brand-deep); }
@media (hover: hover) {
  .nav__sub a:hover { background: var(--mf-brand-tint); color: var(--mf-brand-ink); padding-left: var(--mf-s5); }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  padding: 0;
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius-sm);
  cursor: pointer;
  color: var(--mf-ink);
  transition: border-color var(--mf-dur-fast) var(--mf-ease),
              background-color var(--mf-dur-fast) var(--mf-ease);
}
@media (hover: hover) { .nav-toggle:hover { border-color: var(--mf-brand); background: var(--mf-brand-tint); } }

.nav-toggle__bars { position: relative; width: 20px; height: 14px; }
.nav-toggle__bars span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--mf-dur) var(--mf-ease),
              opacity var(--mf-dur-fast) var(--mf-ease),
              top var(--mf-dur) var(--mf-ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Trust rail */
.rail {
  background: var(--mf-navy);
  color: var(--mf-on-dark);
  font-size: var(--mf-t-xs);
  border-bottom: 1px solid rgba(255,255,255,.08);
  /* The rail scrolls horizontally on narrow screens by design. Contain it
     here so its overflowing track never widens the document itself. */
  max-width: 100vw;
  overflow: hidden;
}
.rail__inner {
  display: flex;
  align-items: center;
  gap: var(--mf-s5);
  min-height: var(--mf-rail-h);
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail__inner::-webkit-scrollbar { display: none; }
.rail__item {
  display: inline-flex;
  align-items: center;
  gap: var(--mf-s2);
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: .01em;
}
.rail__item .icon { color: var(--mf-brand); }

/* --------------------------------------------------------------------------
   7. Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mf-s2);
  min-height: 46px;
  padding: 0 var(--mf-s5);
  border: 1px solid transparent;
  border-radius: var(--mf-radius);
  background: var(--mf-brand);
  color: #04222e;
  font-family: inherit;
  font-size: var(--mf-t-sm);
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: background-color var(--mf-dur-fast) var(--mf-ease),
              border-color var(--mf-dur-fast) var(--mf-ease),
              transform var(--mf-dur-fast) var(--mf-ease),
              box-shadow var(--mf-dur) var(--mf-ease);
}
/* Sheen sweep on hover - pure decoration, gated to real hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-140%);
  pointer-events: none;
}
@media (hover: hover) {
  .btn:hover { background: #1f9ed4; box-shadow: 0 6px 18px rgba(41,171,226,.32); transform: translateY(-1px); }
  .btn:hover::before { animation: mf-sheen 620ms var(--mf-ease-out); }
  .btn:hover .icon { transform: translateX(2px); }
}
.btn:active { transform: translateY(1px); }
.btn .icon { transition: transform var(--mf-dur) var(--mf-ease); }

.btn--dark { background: var(--mf-navy); color: #fff; }
@media (hover: hover) { .btn--dark:hover { background: var(--mf-navy-soft); box-shadow: 0 6px 18px rgba(11,49,64,.3); } }

.btn--ghost { background: transparent; border-color: var(--mf-line); color: var(--mf-ink); }
@media (hover: hover) { .btn--ghost:hover { background: var(--mf-brand-tint); border-color: var(--mf-brand); color: var(--mf-brand-ink); box-shadow: none; } }

.btn--on-dark { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
@media (hover: hover) { .btn--on-dark:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; box-shadow: none; } }

.btn--block { width: 100%; }
.btn--sm { min-height: 44px; padding: 0 var(--mf-s4); font-size: var(--mf-t-xs); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--mf-s3); }

/* Text link with arrow that slides */
.tlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--mf-s2);
  min-height: 44px;
  font-size: var(--mf-t-sm);
  font-weight: 700;
  color: var(--mf-brand-ink);
  text-decoration: none;
}
.tlink .icon { transition: transform var(--mf-dur) var(--mf-ease); }
@media (hover: hover) {
  .tlink:hover { color: var(--mf-brand-deep); }
  .tlink:hover .icon { transform: translateX(4px); }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: var(--mf-s9) var(--mf-s8);
  background:
    radial-gradient(1100px 460px at 88% -8%, var(--mf-brand-tint2), transparent 62%),
    var(--mf-surface);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--mf-s7);
  align-items: center;
}
.hero__title {
  font-size: var(--mf-t-display);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: var(--mf-s5);
}
.hero__tagline {
  display: block;
  margin-top: var(--mf-s4);
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  font-weight: 600;
  color: var(--mf-brand-deep);
  letter-spacing: -0.01em;
}
.hero__actions { margin-top: var(--mf-s6); }

/* Word-by-word rise on the hero heading. Each word lands on a small delay
   set inline as --i, so the sentence resolves left to right. */
.hero__word {
  display: inline-block;
  white-space: pre;
}

/* --------------------------------------------------------------------------
   9. Logo-derived geometry
   -------------------------------------------------------------------------- */

.mark {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: var(--mf-s3);
  padding: var(--mf-s6);
  background: var(--mf-navy);
  border-radius: var(--mf-radius-lg);
  isolation: isolate;
  box-shadow: var(--mf-shadow-3);
}
.mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  z-index: -1;
}
.mark__bar {
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--mf-brand), rgba(41,171,226,.35));
  min-height: 40px;
  transform-origin: bottom;
  transition: transform var(--mf-dur-slow) var(--mf-ease);
}
.mark__bar:nth-child(1) { height: 34%; }
.mark__bar:nth-child(2) { height: 58%; }
.mark__bar:nth-child(3) { height: 80%; }
.mark__bar:nth-child(4) { height: 100%; background: linear-gradient(180deg, #fff, rgba(255,255,255,.55)); }
@media (hover: hover) {
  .mark:hover .mark__bar { transform: scaleY(1.06); }
}

.mark__caption {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: var(--mf-s5);
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--mf-t-sm);
  color: var(--mf-on-dark);
}

.stepfield {
  background-image:
    repeating-linear-gradient(115deg,
      rgba(41,171,226,.055) 0 10px,
      transparent 10px 26px);
}

/* --------------------------------------------------------------------------
   10. Cards and grids
   Cards are only interactive when they contain a link; the whole card is
   not a click target, which would swallow text selection.
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--mf-s5);
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius-lg);
  box-shadow: var(--mf-shadow-1);
  transition: border-color var(--mf-dur) var(--mf-ease),
              box-shadow var(--mf-dur) var(--mf-ease),
              transform var(--mf-dur) var(--mf-ease);
}
@media (hover: hover) {
  .card:hover {
    border-color: rgba(41,171,226,.5);
    box-shadow: var(--mf-shadow-2);
    transform: translateY(-3px);
  }
  .card:hover .icon-tile { background: var(--mf-brand); color: #fff; transform: scale(1.05); }
}
.card__title { margin-bottom: var(--mf-s3); }
.card__body { margin-bottom: var(--mf-s4); font-size: var(--mf-t-sm); }
.card__foot { margin-top: auto; padding-top: var(--mf-s3); }

.card--feature {
  grid-column: span 2;
  background: var(--mf-navy);
  border-color: transparent;
  color: var(--mf-on-dark);
}
.card--feature .card__title { color: #fff; }
.card--feature .card__body { color: var(--mf-on-dark); }
.card--feature .tlink { color: var(--mf-brand); }
@media (hover: hover) { .card--feature:hover .icon-tile { background: var(--mf-brand); color: #04222e; } }

.card__tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--mf-s4);
  padding: 3px var(--mf-s3);
  border-radius: 999px;
  background: var(--mf-brand-tint);
  color: var(--mf-brand-ink);
  font-size: var(--mf-t-xs);
  font-weight: 700;
  letter-spacing: .02em;
}
.card--feature .card__tag { background: rgba(41,171,226,.9); color: #04222e; }

/* Card with a hairline accent that grows on hover */
.card--accent { overflow: hidden; }
.card--accent::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: var(--mf-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mf-dur-slow) var(--mf-ease);
}
@media (hover: hover) { .card--accent:hover::before { transform: scaleX(1); } }

/* Numbered benefit list */
.benefits { counter-reset: b; display: grid; gap: var(--mf-s5); }
.benefit { position: relative; padding-left: 3.5rem; }
.benefit::before {
  counter-increment: b;
  content: "0" counter(b);
  position: absolute;
  left: 0; top: -0.15rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--mf-brand-deep);
  opacity: .5;
  letter-spacing: -0.02em;
}
.benefit h3 { margin-bottom: var(--mf-s2); }

/* --------------------------------------------------------------------------
   11. Stats and counters
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--mf-s5);
}
.stat__num {
  display: block;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--mf-brand-deep);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--mf-t-sm); color: var(--mf-body); }
.section--dark .stat__label { color: var(--mf-on-dark); }
.section--dark .stat__num { color: var(--mf-brand); }

.stat--boxed {
  padding: var(--mf-s5);
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius);
}

/* --------------------------------------------------------------------------
   12. Quotes
   -------------------------------------------------------------------------- */

.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--mf-s5);
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-left: 3px solid var(--mf-brand);
  border-radius: var(--mf-radius);
  transition: border-color var(--mf-dur) var(--mf-ease),
              box-shadow var(--mf-dur) var(--mf-ease),
              transform var(--mf-dur) var(--mf-ease);
}
@media (hover: hover) {
  .quote:hover { box-shadow: var(--mf-shadow-2); transform: translateY(-3px); border-left-color: var(--mf-brand-deep); }
}
.quote__mark { color: var(--mf-brand-tint2); margin-bottom: var(--mf-s3); }
.quote__text { flex: 1; margin-bottom: var(--mf-s4); font-size: var(--mf-t-sm); color: var(--mf-ink); }
.quote__meta { display: flex; align-items: center; gap: var(--mf-s3); }
.quote__who { font-size: var(--mf-t-xs); font-weight: 700; color: var(--mf-muted); }
.quote__stars { display: inline-flex; gap: 2px; color: var(--mf-brand-deep); }
.quote__stars .icon { width: 13px; height: 13px; fill: currentColor; stroke-width: 1; }

/* --------------------------------------------------------------------------
   13. Accordion and tabs
   Accordion is native <details>. Tabs are progressive enhancement: with JS
   off, every panel is visible, so no content is ever hidden.
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--mf-line); }
.faq__item { border-bottom: 1px solid var(--mf-line); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mf-s4);
  padding: var(--mf-s4) 0;
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--mf-ink);
  list-style: none;
  transition: color var(--mf-dur-fast) var(--mf-ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: none;
  width: 26px; height: 26px;
  border: 1px solid var(--mf-line);
  border-radius: 50%;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 10px 2px, 2px 10px;
  background-position: center, center;
  background-repeat: no-repeat;
  color: var(--mf-brand-ink);
  transition: transform var(--mf-dur) var(--mf-ease),
              background-color var(--mf-dur) var(--mf-ease),
              border-color var(--mf-dur) var(--mf-ease);
}
.faq__item[open] > .faq__q::after {
  transform: rotate(135deg);
  background-color: var(--mf-brand-tint);
  border-color: var(--mf-brand);
}
@media (hover: hover) { .faq__q:hover { color: var(--mf-brand-ink); } }
.faq__a { padding: 0 0 var(--mf-s5); max-width: 72ch; color: var(--mf-body); font-size: var(--mf-t-sm); }
.faq__a p:last-child { margin-bottom: 0; }

/* Animate the answer open where the browser supports interpolating height */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq__item::details-content {
      opacity: 0;
      block-size: 0;
      overflow: hidden;
      transition: opacity var(--mf-dur) var(--mf-ease),
                  block-size var(--mf-dur) var(--mf-ease),
                  content-visibility var(--mf-dur) allow-discrete;
    }
    .faq__item[open]::details-content { opacity: 1; block-size: auto; }
  }
}

/* Tabs */
.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mf-s2);
  margin: 0 0 var(--mf-s5);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--mf-line);
}
.tabs__list li { margin: 0; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--mf-s2);
  min-height: 46px;
  padding: 0 var(--mf-s4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--mf-muted);
  font: inherit;
  font-size: var(--mf-t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--mf-dur-fast) var(--mf-ease),
              border-color var(--mf-dur-fast) var(--mf-ease);
}
@media (hover: hover) { .tab:hover { color: var(--mf-ink); } }
.tab[aria-selected="true"] { color: var(--mf-brand-ink); border-bottom-color: var(--mf-brand); }
/* No JS: show every panel so nothing is lost */
.tabs__panel[hidden] { display: none; }
.no-js .tabs__panel[hidden] { display: block; }

/* --------------------------------------------------------------------------
   14. Lists and data
   -------------------------------------------------------------------------- */

.plist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--mf-s3); }
.plist li { position: relative; padding-left: 1.85rem; margin: 0; font-size: var(--mf-t-sm); }
.plist li > .icon {
  position: absolute;
  left: 0;
  top: .28em;
  width: 1.05em;
  height: 1.05em;
  color: var(--mf-brand-deep);
}
.plist--check li > .icon { color: var(--mf-ok); }
.section--dark .plist li > .icon { color: var(--mf-brand); }

.pairs { display: grid; gap: var(--mf-s4); margin: 0; }
.pair { margin: 0; }
.pair dt {
  font-size: var(--mf-t-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mf-muted);
  margin-bottom: var(--mf-s1);
}
.pair dd { margin: 0; color: var(--mf-ink); font-weight: 500; }
.pair dd a { font-weight: 600; }

/* Contact card row */
.contact-item {
  display: flex;
  gap: var(--mf-s4);
  padding: var(--mf-s5);
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius);
  transition: border-color var(--mf-dur) var(--mf-ease),
              box-shadow var(--mf-dur) var(--mf-ease),
              transform var(--mf-dur) var(--mf-ease);
}
@media (hover: hover) {
  .contact-item:hover { border-color: rgba(41,171,226,.5); box-shadow: var(--mf-shadow-2); transform: translateY(-3px); }
  .contact-item:hover .icon-tile { background: var(--mf-brand); color: #fff; }
}
.contact-item__body { min-width: 0; }
.contact-item h3 { margin-bottom: var(--mf-s2); font-size: var(--mf-t-h4); }
.contact-item p { font-size: var(--mf-t-sm); margin-bottom: var(--mf-s1); }
.contact-item .icon-tile { margin-bottom: 0; width: 46px; height: 46px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--mf-line); border-radius: var(--mf-radius); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--mf-t-sm); min-width: 520px; }
table.data caption { text-align: left; padding: var(--mf-s4); font-weight: 600; color: var(--mf-ink); }
table.data th, table.data td { padding: var(--mf-s3) var(--mf-s4); text-align: left; border-bottom: 1px solid var(--mf-line-soft); }
table.data th { background: var(--mf-surface-2); color: var(--mf-ink); font-weight: 700; font-size: var(--mf-t-xs); letter-spacing: .04em; text-transform: uppercase; }
table.data tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--mf-s5); }
.field { display: grid; gap: var(--mf-s2); }
.field label { font-size: var(--mf-t-sm); font-weight: 600; color: var(--mf-ink); }
.field .hint { font-size: var(--mf-t-xs); color: var(--mf-muted); }
.req { color: var(--mf-warn); font-weight: 700; }

.input, .textarea, .select {
  width: 100%;
  min-height: 46px;
  padding: var(--mf-s3) var(--mf-s4);
  font-family: inherit;
  /* 16px minimum stops iOS Safari zooming the viewport on focus */
  font-size: max(16px, var(--mf-t-body));
  color: var(--mf-ink);
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius);
  transition: border-color var(--mf-dur-fast) var(--mf-ease),
              box-shadow var(--mf-dur-fast) var(--mf-ease);
}
.textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
@media (hover: hover) { .input:hover, .textarea:hover, .select:hover { border-color: #bcd4de; } }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--mf-brand);
  box-shadow: var(--mf-focus);
}
.input::placeholder, .textarea::placeholder { color: #9aadb5; }

.checkline { display: flex; gap: var(--mf-s3); align-items: flex-start; font-size: var(--mf-t-sm); }
.checkline input { margin-top: .28em; width: 18px; height: 18px; flex: none; accent-color: var(--mf-brand-deep); }

.notice {
  display: flex;
  gap: var(--mf-s3);
  padding: var(--mf-s4);
  border: 1px solid #f0d9b5;
  border-left: 3px solid var(--mf-warn);
  border-radius: var(--mf-radius);
  background: #fdf8ef;
  font-size: var(--mf-t-sm);
  color: #6b4a12;
}
.notice strong { color: #4d3609; }
.notice--info { border-color: var(--mf-line); border-left-color: var(--mf-brand); background: var(--mf-brand-tint); color: var(--mf-ink); }
.notice--info strong { color: var(--mf-ink); }
.notice .icon { flex: none; margin-top: .15em; }

.field-error { font-size: var(--mf-t-xs); color: var(--mf-err); font-weight: 600; }
.field[data-invalid] .input,
.field[data-invalid] .textarea { border-color: var(--mf-err); }

/* --------------------------------------------------------------------------
   16. Page header
   -------------------------------------------------------------------------- */

.phead {
  position: relative;
  padding-block: var(--mf-s8);
  background: var(--mf-navy);
  color: var(--mf-on-dark);
  overflow: hidden;
}
.phead::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg,
    rgba(41,171,226,.10) 0 12px, transparent 12px 30px);
  opacity: .6;
}
.phead__inner { position: relative; max-width: 70ch; }
.phead h1 { color: #fff; margin-bottom: var(--mf-s4); }
.phead__lede { max-width: 64ch; color: var(--mf-on-dark); margin: 0; }

.crumbs { margin: 0 0 var(--mf-s4); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--mf-s2); font-size: var(--mf-t-xs); }
.crumbs li { margin: 0; display: flex; align-items: center; gap: var(--mf-s2); color: var(--mf-on-dark-dim); }
.crumbs li::after { content: "/"; color: rgba(255,255,255,.3); }
.crumbs li:last-child::after { display: none; }
.crumbs a { color: var(--mf-on-dark); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
@media (hover: hover) { .crumbs a:hover { color: #fff; text-decoration: underline; } }
.crumbs [aria-current] { color: var(--mf-brand); font-weight: 600; }

/* --------------------------------------------------------------------------
   17. CTA
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  background: var(--mf-brand);
  color: #06212c;
  border-radius: var(--mf-radius-lg);
  padding: var(--mf-s7);
  overflow: hidden;
}
.cta::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  pointer-events: none;
}
.cta h2 { color: #04222e; position: relative; }
.cta p { color: #06333f; max-width: 56ch; position: relative; }
.cta__row { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mf-s5); }
/* The CTA band is brand-blue, so a light-outline button would fail contrast.
   Inside .cta, --on-dark becomes a solid navy button on the light band. */
.cta .btn--on-dark {
  background: var(--mf-navy-deep);
  border-color: var(--mf-navy-deep);
  color: #fff;
}
@media (hover: hover) { .cta .btn--on-dark:hover { background: #04222e; border-color: #04222e; color: #fff; } }

/* --------------------------------------------------------------------------
   18. Partners
   -------------------------------------------------------------------------- */

.mosaic { display: grid; gap: var(--mf-s5); grid-template-columns: repeat(6, 1fr); }
.partner {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--mf-s5);
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius-lg);
  transition: border-color var(--mf-dur) var(--mf-ease),
              box-shadow var(--mf-dur) var(--mf-ease),
              transform var(--mf-dur) var(--mf-ease);
}
@media (hover: hover) {
  .partner:hover { border-color: rgba(41,171,226,.5); box-shadow: var(--mf-shadow-2); transform: translateY(-3px); }
}
.partner--wide { grid-column: span 3; }
.partner--third { grid-column: span 2; }
.partner__name { margin-bottom: var(--mf-s3); font-size: var(--mf-t-h4); }
.partner__kind {
  font-size: var(--mf-t-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mf-brand-ink);
  margin-bottom: var(--mf-s3);
}
.partner__body { font-size: var(--mf-t-sm); }
.partner__sub { margin-top: var(--mf-s4); padding-top: var(--mf-s4); border-top: 1px solid var(--mf-line-soft); }
.partner__sub h4 { font-size: var(--mf-t-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--mf-muted); }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--mf-navy-deep); color: var(--mf-on-dark-dim); padding-block: var(--mf-s8) var(--mf-s5); }
.footer h2, .footer h3, .footer h4 { color: #fff; }
.footer a { color: var(--mf-on-dark); text-decoration: none; transition: color var(--mf-dur-fast) var(--mf-ease); }
@media (hover: hover) { .footer a:hover { color: #fff; text-decoration: underline; } }

.footer .logo__fallback { color: #fff; }
.footer .logo__fallback span { color: var(--mf-brand); }

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--mf-s7);
  padding-bottom: var(--mf-s7);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer__about { font-size: var(--mf-t-sm); max-width: 42ch; margin-top: var(--mf-s4); }
.footer__title { font-size: var(--mf-t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: var(--mf-s4); }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mf-s3); }
.footer__list li { margin: 0; font-size: var(--mf-t-sm); }
.footer__list a { display: inline-flex; align-items: center; gap: var(--mf-s2); min-height: 44px; }
.footer__list .icon { color: var(--mf-brand); width: 1em; height: 1em; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mf-s4);
  padding-top: var(--mf-s5);
  font-size: var(--mf-t-xs);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--mf-s5); }
.footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }

/* --------------------------------------------------------------------------
   20. Scroll progress
   -------------------------------------------------------------------------- */

.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 210;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--mf-brand-deep), var(--mf-brand));
  pointer-events: none;
}

/* Back-to-top, appears once past one viewport */
.to-top {
  position: fixed;
  right: var(--mf-s5);
  bottom: var(--mf-s5);
  z-index: 190;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--mf-line);
  border-radius: 50%;
  background: #fff;
  color: var(--mf-brand-ink);
  box-shadow: var(--mf-shadow-2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--mf-dur) var(--mf-ease),
              transform var(--mf-dur) var(--mf-ease),
              visibility var(--mf-dur),
              background-color var(--mf-dur-fast) var(--mf-ease);
}
.to-top[data-visible="true"] { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) { .to-top:hover { background: var(--mf-brand-tint); border-color: var(--mf-brand); } }

/* --------------------------------------------------------------------------
   21. Narrow layouts
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { max-width: 480px; }
  .split { grid-template-columns: 1fr; gap: var(--mf-s6); }
  .split--reverse > :first-child { order: 0; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mf-s6); }
  .mosaic { grid-template-columns: repeat(4, 1fr); }
  .partner--wide, .partner--third { grid-column: span 4; }
  .stats--band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefitgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loan { grid-template-columns: 1fr; gap: var(--mf-s5); }
}

@media (max-width: 860px) {
  :root { --mf-header-h: 66px; }

  .nav-toggle { display: inline-flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    max-height: calc(100vh - var(--mf-header-h) - var(--mf-rail-h));
    overflow-y: auto;
    background: #fff;
    border-bottom: 1px solid var(--mf-line);
    box-shadow: var(--mf-shadow-3);
    padding: var(--mf-s4) var(--mf-s5) var(--mf-s6);
  }
  .nav.is-open { display: block; animation: mf-slide-down var(--mf-dur) var(--mf-ease) both; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    justify-content: space-between;
    padding: var(--mf-s4) 0;
    border-radius: 0;
    border-bottom: 1px solid var(--mf-line-soft);
    font-size: 1rem;
  }
  .nav__link::after { display: none; }
  .nav__has-sub:hover > .nav__sub { display: none; }
  .nav__has-sub.is-open > .nav__sub { display: block; opacity: 1; transform: none; }
  .nav__sub {
    position: static;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 var(--mf-s3) var(--mf-s4);
    background: transparent;
    transform: none;
  }
  .nav__sub a { padding: var(--mf-s3) 0; border-bottom: 1px solid var(--mf-line-soft); border-radius: 0; }
  .nav__sub a:hover { background: transparent; padding-left: var(--mf-s3); }

  .section { padding-block: var(--mf-s8); }
  .section--tight { padding-block: var(--mf-s7); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .card--feature { grid-column: span 1; }
  .mosaic { grid-template-columns: 1fr; }
  .partner--wide, .partner--third { grid-column: span 1; }
  .ptile, .ptile--big { grid-column: span 1; }
  .stats--band { grid-template-columns: 1fr; gap: var(--mf-s5); }
  .steps { grid-template-columns: 1fr; }
  .benefitgrid { grid-template-columns: 1fr; }
  .aboutpanel__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .field-row { grid-template-columns: 1fr; }
  .tabs__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .tab { flex: none; white-space: nowrap; }
  .formcard, .aboutcard, .aboutpanel, .listcard, .riskcard, .mapcard { padding: var(--mf-s5); }
  .cta { padding: var(--mf-s6) var(--mf-s5); }
  .cta__row { flex-direction: column; align-items: flex-start; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero { padding-block: var(--mf-s7) var(--mf-s8); }
  .phead { padding-block: var(--mf-s7); }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .header__actions .btn { width: auto; }
  .to-top { right: var(--mf-s4); bottom: var(--mf-s4); }
}

@media (max-width: 420px) {
  .wrap { padding-inline: var(--mf-s4); }
  .logo img { height: 28px; }
}

/* --------------------------------------------------------------------------
   22. Motion
   Scroll reveals use CSS scroll-driven animation where supported, with a
   tiny IntersectionObserver fallback for browsers that lack it. Everything
   is opt-in under prefers-reduced-motion.
   -------------------------------------------------------------------------- */

@keyframes mf-sheen {
  from { transform: translateX(-140%); }
  to   { transform: translateX(320%); }
}
@keyframes mf-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mf-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mf-bar-grow {
  from { transform: scaleY(.15); }
  to   { transform: scaleY(1); }
}
/* Used only by the JS capability probe for scroll-driven animation. */
@keyframes mf-probe {
  from { opacity: 1; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero words rise in sequence. Delays are set per word inline. */
  .hero__word {
    animation: mf-rise 620ms var(--mf-ease-out) both;
    animation-delay: var(--i, 0ms);
  }

  /* The mark bars grow once on entry */
  .mark__bar { animation: mf-bar-grow 900ms var(--mf-ease-out) both; }
  .mark__bar:nth-child(1) { animation-delay: 80ms; }
  .mark__bar:nth-child(2) { animation-delay: 180ms; }
  .mark__bar:nth-child(3) { animation-delay: 280ms; }
  .mark__bar:nth-child(4) { animation-delay: 380ms; }

  /* Scroll reveal.
     The IntersectionObserver path is the default because it is universally
     reliable. The scroll-driven path is opt-in via `reveal-native`, a class
     only added once the JS has proved the view() timeline actually advances
     - some engines claim support and then never move. */
  .js .reveal { opacity: 0; transform: translateY(16px); }
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 620ms var(--mf-ease-out), transform 620ms var(--mf-ease-out);
  }
  .js.reveal-native .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    animation-name: mf-rise;
    animation-duration: 680ms;
    animation-timing-function: var(--mf-ease-out);
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 8% cover 30%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .hero__word, .mark__bar { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   23. Component appendix - classes composed by the page generator
   These extend the primitives above (cards, lists, forms, grids) with the
   specific shapes each page needs. Kept in one block so the page templates
   and their styles stay easy to review together.
   -------------------------------------------------------------------------- */

/* --- 23.1 Flex helpers ---------------------------------------------------- */

.formcard { display: grid; gap: var(--mf-s5); }
.field-row { display: grid; gap: var(--mf-s5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--mf-s3); }
.field--check .checkbox { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--mf-brand-deep); flex: none; }
.label { display: block; font-size: var(--mf-t-sm); font-weight: 600; color: var(--mf-ink); }
.label--check { font-weight: 500; line-height: 1.55; }
.form-status { margin: 0; font-size: var(--mf-t-sm); }
.form-status[data-state="ok"] { color: #0f6b3f; }
.form-status[data-state="error"] { color: #8a2b1f; }

/* --- 23.2 Page header lede ----------------------------------------------- */

.phead__lede { max-width: 62ch; margin-top: var(--mf-s4); color: var(--mf-on-dark-dim); }

/* --- 23.3 Heading variants used on dark bands ---------------------------- */

.section-head__onDark { color: var(--mf-on-dark); }
.section--dark .section-head p,
.section--dark .eyebrow { color: var(--mf-on-dark-dim); }

/* --- 23.4 Card variants -------------------------------------------------- */

.card--center { align-items: center; text-align: center; }
.card--tall .card__body { flex: 1 1 auto; }

/* --- 23.5 Statistic band ------------------------------------------------- */

.statband { border-block: 1px solid rgba(255,255,255,.08); }
.stat { display: grid; gap: var(--mf-s2); }
.stats--band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats--band .stat__num { color: var(--mf-brand); }
.stats--band .stat__label { color: var(--mf-on-dark-dim); }

/* Two-column split with the form on the right */
.split--form { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

/* --- 23.6 Numbered steps ------------------------------------------------- */

.steps {
  display: grid;
  gap: var(--mf-s5);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mf-step;
}
.step {
  position: relative;
  padding: var(--mf-s6) var(--mf-s5) var(--mf-s5);
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius-lg);
  box-shadow: var(--mf-shadow-1);
  counter-increment: mf-step;
  transition: transform var(--mf-dur) var(--mf-ease),
              box-shadow var(--mf-dur) var(--mf-ease),
              border-color var(--mf-dur) var(--mf-ease);
}
.step::before {
  content: counter(mf-step, decimal-leading-zero);
  position: absolute;
  top: var(--mf-s4);
  right: var(--mf-s5);
  font-size: var(--mf-t-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--mf-line);
}
.step__icon {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: var(--mf-s4);
  border-radius: 12px;
  background: var(--mf-brand-tint);
  color: var(--mf-brand-ink);
  transition: background-color var(--mf-dur) var(--mf-ease),
              color var(--mf-dur) var(--mf-ease),
              transform var(--mf-dur) var(--mf-ease);
}
.step__title { margin: 0 0 var(--mf-s2); font-size: var(--mf-t-h4); }
.step__body { margin: 0; font-size: var(--mf-t-sm); color: var(--mf-body); }

/* Guidance specific to applicants without formal income records. Sits inside
   the step it belongs to rather than in a footnote, because this is the single
   most common reason a prospective borrower gives up. */
.step__tip {
  display: flex;
  gap: var(--mf-s2);
  align-items: flex-start;
  margin: var(--mf-s4) 0 0;
  padding: var(--mf-s3) var(--mf-s3);
  border-radius: var(--mf-radius);
  background: var(--mf-brand-tint);
  border-left: 3px solid var(--mf-brand);
  font-size: var(--mf-t-sm);
  color: var(--mf-body);
  line-height: 1.5;
}
.step__tip .icon { flex: none; margin-top: 2px; color: var(--mf-brand-ink); }
.step__tip strong { color: var(--mf-ink); }
@media (hover: hover) {
  .step:hover { transform: translateY(-3px); box-shadow: var(--mf-shadow-2); border-color: var(--mf-brand-line, var(--mf-line)); }
  .step:hover .step__icon { background: var(--mf-brand); color: #04222e; transform: scale(1.04); }
}

/* --- 23.7 Benefit list (home + about) ------------------------------------ */

.benefits { display: grid; gap: var(--mf-s5); }
.benefit__num {
  display: block;
  margin-bottom: var(--mf-s2);
  font-size: var(--mf-t-sm);
  font-weight: 800;
  letter-spacing: 0.12em;
  /* brand-ink keeps AAA headroom on the tint surface (brand itself is only 2.4:1) */
  color: var(--mf-brand-ink);
}

/* --- 23.8 Benefit cards (bima) ------------------------------------------ */

.benefitgrid { display: grid; gap: var(--mf-s5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.benefitcard {
  padding: var(--mf-s5);
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius-lg);
  transition: transform var(--mf-dur) var(--mf-ease),
              box-shadow var(--mf-dur) var(--mf-ease),
              border-color var(--mf-dur) var(--mf-ease);
}
.benefitcard__icon {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--mf-s4);
  border-radius: 11px;
  background: var(--mf-brand-tint);
  color: var(--mf-brand-ink);
  transition: background-color var(--mf-dur) var(--mf-ease),
              color var(--mf-dur) var(--mf-ease);
}
.benefitcard__title { margin: 0 0 var(--mf-s2); font-size: var(--mf-t-h4); }
.benefitcard__body { margin: 0; font-size: var(--mf-t-sm); color: var(--mf-body); }
@media (hover: hover) {
  .benefitcard:hover { transform: translateY(-3px); box-shadow: var(--mf-shadow-2); }
  .benefitcard:hover .benefitcard__icon { background: var(--mf-brand); color: #04222e; }
}

/* --- 23.9 Info panels (about, list, risk, contact) ----------------------- */

.aboutcard,
.aboutpanel,
.listcard,
.riskcard,
.mapcard,
.formcard {
  padding: var(--mf-s6);
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius-lg);
  box-shadow: var(--mf-shadow-1);
}
.aboutcard { display: grid; gap: var(--mf-s5); }
.aboutcard__row,
.aboutpanel__row { display: flex; align-items: flex-start; gap: var(--mf-s4); }
.aboutcard__row .icon-tile,
.aboutpanel__row .icon-tile { margin-bottom: 0; flex: none; }
.aboutcard__row h3,
.aboutpanel__row h3 { font-size: var(--mf-t-h4); }

.aboutpanel { display: grid; gap: var(--mf-s5); }
.aboutpanel__facts { display: grid; gap: var(--mf-s4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fact { display: grid; gap: 2px; }
.fact__num {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--mf-brand-deep);
  font-variant-numeric: tabular-nums;
}
.fact__label { font-size: var(--mf-t-xs); color: var(--mf-muted); }

.listcard__title { margin: 0 0 var(--mf-s4); font-size: var(--mf-t-h4); }

.riskcard__title { display: flex; align-items: center; gap: var(--mf-s2); margin: 0 0 var(--mf-s4); font-size: var(--mf-t-h4); }
.riskcard--warn { border-left: 3px solid var(--mf-warn); background: #fdf8ef; }
.riskcard--warn .riskcard__title { color: #6b4a12; }
.risklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mf-s3); }
.risklist li { display: flex; align-items: flex-start; gap: var(--mf-s3); font-size: var(--mf-t-sm); }
.risklist li > .icon { flex: none; margin-top: .2em; color: var(--mf-brand-ink); }
.riskcard--warn .risklist li > .icon { color: var(--mf-warn); }

.mapcard { display: grid; gap: var(--mf-s4); justify-items: start; }
.mapcard__icon {
  display: inline-grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 16px;
  background: var(--mf-navy);
  color: var(--mf-brand);
}
.mapcard__body h3 { margin: 0 0 var(--mf-s2); font-size: var(--mf-t-h3); }
.mapcard__body p { margin: 0 0 var(--mf-s2); color: var(--mf-body); font-size: var(--mf-t-sm); }
.mapcard__note { max-width: 58ch; }

.formcard { display: grid; gap: var(--mf-s5); align-content: start; }
.formcard__title { margin: 0; font-size: var(--mf-t-h3); }
.formcard__sub { margin: calc(var(--mf-s3) * -1) 0 0; font-size: var(--mf-t-sm); color: var(--mf-body); }

/* --- 23.10 Contact list -------------------------------------------------- */

.contact-list { list-style: none; margin: var(--mf-s6) 0 0; padding: 0; display: grid; gap: var(--mf-s4); }
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--mf-s4);
  padding: var(--mf-s4);
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius);
  transition: border-color var(--mf-dur) var(--mf-ease),
              box-shadow var(--mf-dur) var(--mf-ease),
              transform var(--mf-dur) var(--mf-ease);
}
.contact-item__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--mf-brand-tint);
  color: var(--mf-brand-ink);
  transition: background-color var(--mf-dur) var(--mf-ease),
              color var(--mf-dur) var(--mf-ease);
}
.contact-item__body { display: grid; gap: 2px; min-width: 0; }
.contact-item__label {
  font-size: var(--mf-t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mf-muted);
}
.contact-item__value { font-size: var(--mf-t-body); font-weight: 600; color: var(--mf-ink); overflow-wrap: anywhere; }
a.contact-item__value { min-height: 44px; display: inline-flex; align-items: center; }
.contact-item__sub { font-size: var(--mf-t-xs); color: var(--mf-muted); }
@media (hover: hover) {
  .contact-item:hover { transform: translateY(-2px); box-shadow: var(--mf-shadow-1); border-color: rgba(41,171,226,.45); }
  .contact-item:hover .contact-item__icon { background: var(--mf-brand); color: #04222e; }
}

/* --- 23.11 Tabs (progressive enhancement) -------------------------------- */

.tabs { margin-top: var(--mf-s6); }
.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mf-s1);
  border-bottom: 1px solid var(--mf-line);
  margin-bottom: var(--mf-s6);
}
.tabs__panel { padding-top: var(--mf-s2); }
/* Without JS every panel is shown, so add a separator between them. */
.tabs__panel + .tabs__panel { margin-top: var(--mf-s7); padding-top: var(--mf-s7); border-top: 1px solid var(--mf-line); }
.tabs.is-enhanced .tabs__panel + .tabs__panel { margin-top: 0; padding-top: var(--mf-s2); border-top: 0; }

.loan { display: grid; gap: var(--mf-s7); grid-template-columns: minmax(0, 1.35fr) minmax(0, .95fr); align-items: start; }
.loan__title { margin: 0 0 var(--mf-s3); font-size: var(--mf-t-h2); }
.loan__main p { max-width: 66ch; }
.loan__side {
  padding: var(--mf-s5);
  background: var(--mf-surface-2);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius-lg);
}
.loan__sidehead {
  margin: 0 0 var(--mf-s4);
  font-size: var(--mf-t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mf-brand-ink);
}
.loan__note {
  display: flex;
  gap: var(--mf-s2);
  margin: var(--mf-s4) 0 var(--mf-s5);
  padding-top: var(--mf-s4);
  border-top: 1px solid var(--mf-line);
  font-size: var(--mf-t-xs);
  color: var(--mf-muted);
}
.loan__note > .icon { flex: none; margin-top: .15em; }

/* --- 23.12 Partner mosaic ----------------------------------------------- */

.mosaic { grid-template-areas: none; }
.ptile {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  padding: var(--mf-s5);
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius-lg);
  box-shadow: var(--mf-shadow-1);
  transition: transform var(--mf-dur) var(--mf-ease),
              box-shadow var(--mf-dur) var(--mf-ease),
              border-color var(--mf-dur) var(--mf-ease);
}
.ptile--big { grid-column: span 3; }
.ptile__icon {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: var(--mf-s4);
  border-radius: 12px;
  background: var(--mf-brand-tint);
  color: var(--mf-brand-ink);
  transition: background-color var(--mf-dur) var(--mf-ease),
              color var(--mf-dur) var(--mf-ease);
}
.ptile__name { margin: 0 0 var(--mf-s2); font-size: var(--mf-t-h4); letter-spacing: 0.01em; }

/* =========================================================================
   25. LOAN CALCULATOR  (kikokotoo cha mkopo)
   Lives on mikopo.html. Honest by construction: every figure is labelled an
   estimate and the interest rate is stated as the monthly declining rate.
   ========================================================================= */

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--mf-s7);
  align-items: start;
}
@media (max-width: 860px) {
  .calc { grid-template-columns: 1fr; gap: var(--mf-s6); }
}

.calc__panel {
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius-lg);
  padding: var(--mf-s6);
  box-shadow: var(--mf-shadow-1);
}

.calc__field + .calc__field { margin-top: var(--mf-s6); }

.calc__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mf-s3);
  font-weight: 600;
  color: var(--mf-ink);
  margin-bottom: var(--mf-s3);
}
.calc__label label { font-weight: 600; cursor: pointer; }
.calc__label > span:last-child,
.calc__label [data-calc-amount-out] {
  font-variant-numeric: tabular-nums;
  color: var(--mf-brand-ink);
  font-size: var(--mf-t-h4);
  font-weight: 700;
}

/* Range input, restyled consistently across engines. The track is painted on
   the element itself and the filled portion is drawn by JS via --calc-fill,
   so the two engines agree on how much of the track is "behind" the thumb. */
.calc__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px; /* full touch target, not just the 6px track */
  background: transparent;
  cursor: pointer;
  margin: 0;
  display: block;
}
.calc__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--mf-brand) 0%,
    var(--mf-brand) var(--calc-fill, 0%),
    var(--mf-line) var(--calc-fill, 0%),
    var(--mf-line) 100%
  );
}
.calc__range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--mf-line);
}
.calc__range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--mf-brand);
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px; /* (26 - 6) / 2 */
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--mf-brand);
  box-shadow: 0 2px 6px rgba(10, 31, 39, 0.22);
  transition: transform var(--mf-dur-fast) var(--mf-ease);
}
.calc__range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--mf-brand);
  box-shadow: 0 2px 6px rgba(10, 31, 39, 0.22);
}
@media (hover: hover) {
  .calc__range:hover::-webkit-slider-thumb { transform: scale(1.12); }
  .calc__range:hover::-moz-range-thumb { transform: scale(1.12); }
}
.calc__range:focus-visible::-webkit-slider-thumb {
  outline: 3px solid var(--mf-brand-ink);
  outline-offset: 2px;
}
.calc__range:focus-visible::-moz-range-thumb {
  outline: 3px solid var(--mf-brand-ink);
  outline-offset: 2px;
}

.calc__scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--mf-t-sm);
  color: var(--mf-body);
  margin-top: var(--mf-s1);
}

/* term chips */
.calc__chips { display: flex; flex-wrap: wrap; gap: var(--mf-s2); }
.calc__chip {
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--mf-s4);
  border-radius: 999px;
  border: 1px solid var(--mf-line);
  background: var(--mf-brand-tint);
  color: var(--mf-body);
  cursor: pointer;
  transition: background var(--mf-dur-fast) var(--mf-ease),
              color var(--mf-dur-fast) var(--mf-ease),
              border-color var(--mf-dur-fast) var(--mf-ease);
}
.calc__chip[aria-pressed="true"] {
  background: var(--mf-navy);
  border-color: var(--mf-navy);
  color: #fff;
}
@media (hover: hover) {
  .calc__chip:hover { border-color: var(--mf-brand); color: var(--mf-brand-ink); }
  .calc__chip[aria-pressed="true"]:hover { color: #fff; }
}

/* results */
.calc__result {
  background: var(--mf-navy);
  color: #fff;
  border-radius: var(--mf-radius-lg);
  padding: var(--mf-s6);
}
.calc__result h3 {
  color: #fff;
  font-size: var(--mf-t-h4);
  margin: 0 0 var(--mf-s4);
  letter-spacing: 0.01em;
}
.calc__figure {
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--mf-brand);
  margin: 0;
}
.calc__figure-note {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--mf-t-sm);
  margin: var(--mf-s2) 0 0;
}
.calc__rows {
  margin: var(--mf-s5) 0 0;
  padding: var(--mf-s5) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  gap: var(--mf-s3);
}
.calc__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--mf-s4);
}
.calc__row dt { color: rgba(255, 255, 255, 0.78); font-size: var(--mf-t-sm); }
.calc__row dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.calc__row--total dd { color: var(--mf-brand); }

/* the disclosure. Deliberately adjacent to the output, not hidden at the foot. */
.calc__disclaimer {
  margin: var(--mf-s5) 0 0;
  padding: var(--mf-s4);
  border-radius: var(--mf-radius);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--mf-t-sm);
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.55;
}
.calc__disclaimer strong { color: #fff; }

.calc__noscript {
  margin: var(--mf-s5) 0 0;
  padding: var(--mf-s4);
  border-radius: var(--mf-radius);
  background: var(--mf-brand-tint);
  border: 1px solid var(--mf-line);
  font-size: var(--mf-t-sm);
  color: var(--mf-body);
}

@media print {
  .calc__result { background: #fff; color: var(--mf-ink); border: 1px solid var(--mf-line); }
  .calc__result h3, .calc__figure { color: var(--mf-ink); }
  .calc__row dt, .calc__figure-note { color: var(--mf-body); }
  .calc__disclaimer { background: var(--mf-brand-tint); color: var(--mf-body); border-color: var(--mf-line); }
  .calc__disclaimer strong { color: var(--mf-ink); }
}

/* =========================================================================
   26. FLOATING WHATSAPP ACTION
   One-tap route to a human, which matters more than a contact form for the
   audience this site serves.
   ========================================================================= */

.wa {
  position: fixed;
  right: clamp(14px, 2.5vw, 26px);
  bottom: clamp(14px, 2.5vw, 26px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--mf-s3);
  min-height: 52px;
  padding: 0 var(--mf-s5) 0 var(--mf-s4);
  border-radius: 999px;
  background: var(--mf-navy);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 6px 22px rgba(7, 34, 45, 0.34);
  transition: transform var(--mf-dur) var(--mf-ease),
              box-shadow var(--mf-dur) var(--mf-ease);
}
.wa__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #25d366; /* WhatsApp brand green, the one place a third-party
                          colour is correct: recognisability is the point. */
  color: #06281a;
  flex: none;
}
.wa__icon svg { width: 19px; height: 19px; }
@media (hover: hover) {
  .wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(7, 34, 45, 0.42);
  }
}
.wa:focus-visible {
  outline: 3px solid var(--mf-brand);
  outline-offset: 3px;
}
/* Label collapses to the icon on narrow screens so it never crowds content,
   but stays in the accessible name because the text is only clipped, and the
   <span> keeps its text for screen readers. */
@media (max-width: 560px) {
  .wa { padding: 0; width: 54px; height: 54px; justify-content: center; }
  .wa__text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Keep the floating button clear of the back-to-top control at every width.
   Both sit bottom-right; without this they collide as the WhatsApp pill grows. */
.to-top { bottom: calc(clamp(14px, 2.5vw, 26px) + 66px); }

@media (prefers-reduced-motion: reduce) {
  .wa { transition: none; }
  @media (hover: hover) { .wa:hover { transform: none; } }
}
.ptile__body { margin: 0; flex: 1 1 auto; font-size: var(--mf-t-sm); color: var(--mf-body); }
.ptile__tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--mf-s2); margin: var(--mf-s4) 0 0; padding: 0; }
.ptile__tags li {
  padding: 3px var(--mf-s3);
  border-radius: 999px;
  background: var(--mf-brand-tint);
  color: var(--mf-brand-ink);
  font-size: var(--mf-t-xs);
  font-weight: 600;
}
@media (hover: hover) {
  .ptile:hover { transform: translateY(-3px); box-shadow: var(--mf-shadow-2); border-color: rgba(41,171,226,.45); }
  .ptile:hover .ptile__icon { background: var(--mf-brand); color: #04222e; }
}

/* --- 23.13 Hero additions ------------------------------------------------ */

.hero__accent { color: var(--mf-brand-deep); }
.hero__proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mf-s3) var(--mf-s5);
  margin: var(--mf-s6) 0 0;
  padding: 0;
}
.hero__proof li { display: flex; align-items: center; gap: var(--mf-s2); font-size: var(--mf-t-sm); color: var(--mf-body); }
.hero__proof li > .icon { color: var(--mf-brand-deep); flex: none; }

/* --- 23.14 Energy + step-field art -------------------------------------- */

.energyart {
  padding: var(--mf-s6);
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius-lg);
  box-shadow: var(--mf-shadow-1);
}
.energyart__caption {
  display: flex;
  gap: var(--mf-s2);
  margin: var(--mf-s5) 0 0;
  font-size: var(--mf-t-sm);
  color: var(--mf-body);
}
.energyart__caption > .icon { flex: none; margin-top: .18em; color: var(--mf-brand-deep); }
.mark--energy .mark__bar {
  background: linear-gradient(180deg, var(--mf-brand) 0%, var(--mf-brand-deep) 100%);
}
.stepfield { position: relative; }
.stepfield::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
    rgba(41,171,226,.05) 0 1px, transparent 1px 96px);
}

/* --- 23.15 Dark-surface quotes ------------------------------------------ */

.quote--onDark { background: var(--mf-navy-soft); border-color: rgba(255,255,255,.1); }
.quote--onDark .quote__text { color: var(--mf-on-dark); }
.quote--onDark .quote__who { color: var(--mf-on-dark-dim); }
.quote--onDark .quote__mark { color: rgba(41,171,226,.4); }

/* --- 23.16 Legal prose --------------------------------------------------- */

.legal { max-width: 74ch; }
.legal__updated { font-size: var(--mf-t-sm); color: var(--mf-muted); }
.legal h2 { margin-top: var(--mf-s7); font-size: var(--mf-t-h3); }
.legal h2:first-of-type { margin-top: var(--mf-s5); }
.legal p { color: var(--mf-body); }
.plist--dot li::before {
  content: "";
  position: absolute;
  left: .35em;
  top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mf-brand);
}

/* --- 23.17 Notices variants --------------------------------------------- */

.notice--warn { border-color: #e8c9c1; border-left-color: var(--mf-err); background: #fdf2ef; color: #7a2a1d; }
.notice--warn strong { color: #5c1e14; }

/* --- 23.18 404 ---------------------------------------------------------- */

.notfound { text-align: center; padding-block: var(--mf-s9); }
.notfound__code {
  display: inline-flex;
  align-items: center;
  gap: var(--mf-s3);
  margin-bottom: var(--mf-s5);
  font-size: var(--mf-t-h3);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--mf-brand-deep);
}
.notfound h1 { margin-bottom: var(--mf-s3); }
.notfound .lede { margin-inline: auto; }
.notfound__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mf-s3) var(--mf-s5);
  margin-top: var(--mf-s7);
  padding-top: var(--mf-s5);
  border-top: 1px solid var(--mf-line);
}
.notfound__links a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }

/* --------------------------------------------------------------------------
   24. Print
   -------------------------------------------------------------------------- */

@media print {
  .header, .rail, .footer, .cta, .nav-toggle, .progress, .to-top { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  .section { padding-block: 1rem; }
  .card, .partner, .contact-item, .ptile, .step, .benefitcard { border: 1px solid #999; box-shadow: none; }
  .reveal, .hero__word { opacity: 1 !important; transform: none !important; }
}