/**
 * MFPS component styles.
 *
 * theme.json owns the tokens. This file owns only what blocks cannot express:
 * the drafting schedules, the parcel diagram, the trust strip, the FAQ and the
 * feasibility form.
 *
 * The palette is a vellum ground by design (spec §6.1). There is no dark mode —
 * a dark version of a drafting aesthetic fights the concept. color-scheme is
 * declared so browsers don't auto-invert form controls on a dark OS.
 */

:root {
  color-scheme: light;

  --paper:        var(--wp--preset--color--paper);
  --vellum:       var(--wp--preset--color--vellum);
  --graphite:     var(--wp--preset--color--graphite);
  --slate:        var(--wp--preset--color--slate);
  --mf-blue:      var(--wp--preset--color--mf-blue);
  --mf-blue-light:var(--wp--preset--color--mf-blue-light);
  --survey-red:   var(--wp--preset--color--survey-red);
  --survey-red-ink:var(--wp--preset--color--survey-red-ink);
  --rule:         var(--wp--preset--color--rule);
  --rule-strong:  var(--wp--preset--color--rule-strong);

  --blue-wash: rgba(64, 102, 174, .12);
  --red-wash:  rgba(193, 39, 45, .07);

  --ff-display: var(--wp--preset--font-family--display);
  --ff-body:    var(--wp--preset--font-family--body);
}

/* ---------------------------------------------------------------- base ---- */

body { -webkit-font-smoothing: antialiased; }

:focus-visible {
  outline: 2px solid var(--graphite);
  outline-offset: 2px;
}

/* Skip link — keyboard users land here first. */
.mfps-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--graphite);
  color: var(--paper);
  padding: 12px 20px;
  font-family: var(--ff-display);
  font-weight: 600;
  text-decoration: none;
}
.mfps-skip:focus { left: 0; }

.mfps-eyebrow {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
}

.mfps-lede {
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.45;
  color: var(--slate);
}

.mfps-note {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--slate);
}

/* Hairline band separator. Used instead of card edges throughout. */
.mfps-band { border-top: 1px solid var(--rule); }

/* -------------------------------------------------------------- header ---- */

.mfps-head {
  border-bottom: 1px solid var(--rule);
  position: relative; /* anchors the mobile menu panel */
}

.mfps-mark { display: block; line-height: 0; text-decoration: none; flex: 0 0 auto; }
.mfps-mark img {
  height: 44px;
  width: auto;
  max-width: 100%;
  display: block;
  /* align-self matters: the mark often sits in a flex column. Without it the
     image stretches to the column width and the aspect ratio breaks. */
  align-self: flex-start;
}
.mfps-mark .mfps-lock-icon { display: none; }

/* ------------------------------------------------------------- nav ---- */

.mfps-nav { display: flex; align-items: center; }

.mfps-nav__panel {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--50);
}

.mfps-menu {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--50);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mfps-menu > li { position: relative; }

.mfps-menu a {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  color: var(--graphite);
  text-decoration: none;
  display: inline-block;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.mfps-menu a:hover,
.mfps-menu a:focus-visible { border-bottom-color: var(--survey-red); }
.mfps-menu a[aria-current] { border-bottom-color: var(--mf-blue); }

/* Submenu — a drafted panel, hairline edged, no shadow. */
.mfps-menu .sub-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: -16px;
  min-width: 230px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  z-index: 40;
  display: none;
}
.mfps-menu > li:hover > .sub-menu,
.mfps-menu > li:focus-within > .sub-menu,
.mfps-menu > li.is-open > .sub-menu { display: block; }

.mfps-menu .sub-menu li { display: block; }
.mfps-menu .sub-menu a {
  display: block;
  padding: 9px 16px;
  border-bottom: 0;
  white-space: normal;
}
.mfps-menu .sub-menu a:hover { background: var(--vellum); color: var(--mf-blue); }

/* Caret. Decorative on desktop, a real control on touch. */
.mfps-submenu__toggle {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 6px;
  margin-left: 2px;
  line-height: 1;
  color: var(--slate);
}
.mfps-submenu__toggle::before { content: "\25BE"; font-size: .7em; display: inline-block; }
.mfps-menu > li.is-open > .mfps-submenu__toggle::before { transform: rotate(180deg); }

.mfps-nav__cta {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  text-decoration: none;
  padding: 9px 18px;
  background: var(--survey-red);
  color: #fff;
  border: 1px solid var(--survey-red);
  border-radius: 1px;
  white-space: nowrap;
}
.mfps-nav__cta:hover { background: var(--survey-red-ink); border-color: var(--survey-red-ink); color: #fff; }

/* Hamburger */
.mfps-nav__toggle {
  display: none;
  align-items: center;
  gap: 10px;
  appearance: none;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: 1px;
  padding: 9px 14px;
  cursor: pointer;
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  color: var(--graphite);
}
.mfps-nav__bars,
.mfps-nav__bars::before,
.mfps-nav__bars::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--graphite);
  content: "";
}
.mfps-nav__bars { position: relative; }
.mfps-nav__bars::before { position: absolute; top: -6px; }
.mfps-nav__bars::after  { position: absolute; top: 6px; }
.mfps-nav.is-open .mfps-nav__bars { background: transparent; }
.mfps-nav.is-open .mfps-nav__bars::before { top: 0; transform: rotate(45deg); }
.mfps-nav.is-open .mfps-nav__bars::after  { top: 0; transform: rotate(-45deg); }

/* --- below 900px the menu collapses behind the button --- */
@media (max-width: 900px) {
  .mfps-nav { position: static; }
  .mfps-nav__toggle { display: inline-flex; }

  .mfps-nav__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule-strong);
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
  }
  .mfps-nav.is-open .mfps-nav__panel { display: flex; }

  .mfps-nav .mfps-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .mfps-nav .mfps-menu > li { border-bottom: 1px solid var(--rule); }
  .mfps-nav .mfps-menu > li { display: flex; flex-wrap: wrap; align-items: center; }
  .mfps-nav .mfps-menu > li > a { flex: 1; padding: 14px 0; border-bottom: 0; }
  .mfps-nav .mfps-submenu__toggle { padding: 14px 8px; font-size: 1.1rem; }

  .mfps-nav .mfps-menu .sub-menu {
    position: static;
    display: none;
    width: 100%;
    border: 0;
    border-top: 1px solid var(--rule);
    padding: 0 0 8px var(--wp--preset--spacing--40);
    background: transparent;
  }
  .mfps-nav .mfps-menu > li.is-open > .sub-menu { display: block; }
  .mfps-nav .mfps-menu > li:hover > .sub-menu,
  .mfps-nav .mfps-menu > li:focus-within > .sub-menu { display: none; }
  .mfps-nav .mfps-menu > li.is-open > .sub-menu { display: block; }
  .mfps-nav .mfps-menu .sub-menu a { padding: 11px 0; }

  .mfps-nav__cta { margin-top: var(--wp--preset--spacing--40); text-align: center; }
}

@media (max-width: 600px) {
  .mfps-mark .mfps-lock-full { display: none; }
  .mfps-mark .mfps-lock-icon { display: block; }
  .mfps-mark img { height: 38px; }
}

/* ---------------------------------------------------------------- hero ---- */

.mfps-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--wp--preset--spacing--80);
  align-items: center;
}
@media (max-width: 900px) {
  .mfps-hero { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); }
  .mfps-hero__art { order: 2; }
}
.mfps-hero__art svg { width: 100%; height: auto; display: block; }

/* The one orchestrated moment (spec §6.4). Fires after the H1 paints so the
   diagram never becomes the LCP element. */
.mfps-plot__lot {
  stroke-dasharray: 1240;
  stroke-dashoffset: 1240;
  animation: mfps-draw .7s ease-out .15s forwards;
}
.mfps-plot__setback { opacity: 0; animation: mfps-fade .45s ease-out .70s forwards; }
.mfps-plot__envelope{ opacity: 0; animation: mfps-fade .40s ease-out 1.00s forwards; }
.mfps-plot__built   { opacity: 0; animation: mfps-fade .40s ease-out 1.25s forwards; }
.mfps-plot__dims    { opacity: 0; animation: mfps-fade .40s ease-out 1.45s forwards; }

@keyframes mfps-draw { to { stroke-dashoffset: 0; } }
@keyframes mfps-fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .mfps-plot__lot { stroke-dashoffset: 0; animation: none; }
  .mfps-plot__setback,
  .mfps-plot__envelope,
  .mfps-plot__built,
  .mfps-plot__dims { opacity: 1; animation: none; }
}

/* --------------------------------------------------------- trust strip ---- */

.mfps-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--vellum);
  border-block: 1px solid var(--rule);
}
.mfps-trust > div {
  padding: var(--wp--preset--spacing--50);
  border-left: 1px solid var(--rule);
}
.mfps-trust > div:first-child { border-left: 0; }
.mfps-trust strong {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 600;
  margin-bottom: 4px;
}
.mfps-trust p { font-size: var(--wp--preset--font-size--sm); line-height: 1.5; }
@media (max-width: 820px) {
  .mfps-trust { grid-template-columns: 1fr; }
  .mfps-trust > div { border-left: 0; border-top: 1px solid var(--rule); }
  .mfps-trust > div:first-child { border-top: 0; }
}

/* ----------------------------------------------------------- schedules ---- */
/* Drawing schedules, not cards. Hairline rows, tabular figures, no shadow. */

.mfps-sched-wrap { overflow-x: auto; }

table.mfps-sched {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--sm);
  min-width: 540px;
}
table.mfps-sched th {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
  text-align: left;
  white-space: nowrap;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  border-bottom: 1px solid var(--rule-strong);
}
table.mfps-sched td {
  padding: var(--wp--preset--spacing--40);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  line-height: 1.45;
}
table.mfps-sched tr:last-child td { border-bottom: 0; }

.mfps-sched__idx {
  font-family: var(--ff-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--mf-blue);
  width: 3.2rem;
  white-space: nowrap;
}
.mfps-sched__price {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.mfps-sched__cite {
  display: block;
  margin-top: 3px;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--slate);
}

.mfps-by {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 600;
  letter-spacing: .06em;
  white-space: nowrap;
}
.mfps-by--mfps  { color: var(--mf-blue); }
.mfps-by--lebra { color: var(--survey-red); }

/* The §2.1 boundary, drawn. Everything below this rule is signed by an engineer. */
tr.mfps-seam td {
  border-top: 2px solid var(--rule-strong);
  background: var(--vellum);
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: .06em;
  color: var(--slate);
  padding-block: var(--wp--preset--spacing--20);
}

/* ----------------------------------------------------------------- faq ---- */

.mfps-faq details { border-bottom: 1px solid var(--rule); }
.mfps-faq summary {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--md);
  padding: var(--wp--preset--spacing--50) 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--wp--preset--spacing--40);
}
.mfps-faq summary::-webkit-details-marker { display: none; }
.mfps-faq summary::after {
  content: "+";
  color: var(--survey-red);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 500;
  line-height: 1;
}
.mfps-faq details[open] summary::after { content: "\2212"; }
.mfps-faq details > p {
  padding-bottom: var(--wp--preset--spacing--50);
  max-width: 42rem;
  color: var(--slate);
}

/* ---------------------------------------------------------- disclaimer ---- */

.mfps-disclaimer {
  background: var(--vellum);
  border-top: 1px solid var(--rule-strong);
}
.mfps-disclaimer__title {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--survey-red);
  margin: 0 0 var(--wp--preset--spacing--40);
}
.mfps-disclaimer p {
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.6;
  color: var(--slate);
  max-width: 64rem;
}

/* Compact variant for the checkout and results surfaces. */
.mfps-disclaimer--inline {
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--survey-red);
  padding: var(--wp--preset--spacing--50);
}

/* -------------------------------------------------------- scope notice ---- */
/* What a report is and is not. Set at body size on purpose: the exclusions are
   the reason the product is credible, so they are not fine print. Mirrors the
   block that heads sheet 1 of every paid report. */

.mfps-scope {
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--mf-blue);
  background: var(--paper);
  padding: var(--wp--preset--spacing--60);
  margin-top: var(--wp--preset--spacing--70);
}
.mfps-scope__title {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mf-blue);
  margin: 0 0 var(--wp--preset--spacing--40);
}
.mfps-scope p { max-width: 64rem; }

.mfps-scope__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
  border-top: 1px solid var(--rule);
  margin-top: var(--wp--preset--spacing--50);
  padding-top: var(--wp--preset--spacing--50);
}
@media (max-width: 640px) {
  .mfps-scope__cols { grid-template-columns: 1fr; }
}
.mfps-scope__col h3 {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin: 0 0 var(--wp--preset--spacing--30);
}
.mfps-scope__col--use h3  { color: #1F6B40; }
.mfps-scope__col--dont h3 { color: var(--survey-red); }
.mfps-scope__col ul {
  margin: 0;
  padding-left: 1.1rem;
}
.mfps-scope__col li {
  margin-bottom: .45rem;
  line-height: 1.5;
}

/* -------------------------------------------------------------- footer ---- */

.mfps-foot { border-top: 1px solid var(--rule); }
.mfps-foot__mark {
  height: 40px;
  width: auto;
  max-width: 100%;
  align-self: flex-start;
  display: block;
}
.mfps-foot__attrib {
  font-family: var(--ff-display);
  font-weight: 500;
  color: var(--graphite);
}
.mfps-foot__links .mfps-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--40);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.mfps-foot__links a {
  font-family: var(--ff-body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 400;
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-block: 2px;
  white-space: nowrap;
}
.mfps-foot__links a:hover { color: var(--graphite); border-bottom-color: var(--graphite); }

/* ---------------------------------------------------------------- form ---- */

.mfps-form { max-width: 34rem; }
.mfps-form__progress {
  display: flex;
  gap: 4px;
  margin-bottom: var(--wp--preset--spacing--50);
}
.mfps-form__progress span {
  flex: 1;
  height: 3px;
  background: var(--rule);
}
.mfps-form__progress span[data-done] { background: var(--mf-blue); }

.mfps-form__count {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

.mfps-step legend {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 600;
  line-height: 1.25;
  padding: 0;
  margin-bottom: var(--wp--preset--spacing--40);
}
.mfps-step { border: 0; padding: 0; margin: 0; }
.mfps-step[hidden] { display: none; }

.mfps-choices { display: flex; flex-direction: column; gap: 1px; }
.mfps-choice {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--40);
  border: 1px solid var(--rule);
  cursor: pointer;
  background: var(--paper);
}
.mfps-choice:hover { border-color: var(--mf-blue); }
.mfps-choice:has(input:checked) {
  border-color: var(--mf-blue);
  background: var(--blue-wash);
}
.mfps-choice:has(input:focus-visible) {
  outline: 2px solid var(--graphite);
  outline-offset: 2px;
}

.mfps-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--wp--preset--spacing--40); }
.mfps-field label {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
}
.mfps-field .mfps-help { font-size: var(--wp--preset--font-size--xs); color: var(--slate); }
.mfps-field input[type="text"],
.mfps-field input[type="email"],
.mfps-field input[type="tel"],
.mfps-field select {
  font-family: var(--ff-body);
  font-size: var(--wp--preset--font-size--base);
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 1px;
  background: var(--paper);
  color: var(--graphite);
  width: 100%;
}
.mfps-field input:focus-visible,
.mfps-field select:focus-visible { border-color: var(--mf-blue); }

/* Errors never rest on colour alone (WCAG 1.4.1): icon + rule + text. */
.mfps-error {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-left: 3px solid var(--survey-red-ink);
  background: var(--red-wash);
  padding: 10px 14px;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--graphite);
  margin-top: 6px;
}
.mfps-error::before { content: "!"; font-weight: 700; color: var(--survey-red-ink); }
.mfps-field--invalid input,
.mfps-field--invalid select { border-color: var(--survey-red-ink); }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden fields. */
.mfps-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.mfps-form__nav {
  display: flex;
  gap: var(--wp--preset--spacing--40);
  align-items: center;
  margin-top: var(--wp--preset--spacing--50);
}
.mfps-btn {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--base);
  padding: 14px 26px;
  border-radius: 1px;
  border: 1px solid var(--survey-red);
  background: var(--survey-red);
  color: #fff;
  cursor: pointer;
}
.mfps-btn:hover { background: var(--survey-red-ink); border-color: var(--survey-red-ink); }
.mfps-btn--ghost {
  background: transparent;
  color: var(--graphite);
  border-color: var(--rule-strong);
}
.mfps-btn--ghost:hover { background: var(--vellum); border-color: var(--graphite); }
.mfps-btn[disabled] { opacity: .55; cursor: progress; }

/* --------------------------------------------------------------- print ---- */

@media print {
  .mfps-head, .mfps-nav, .mfps-foot__links, .mfps-form { display: none; }
  body { background: #fff; font-size: 11pt; }
  .mfps-disclaimer { border: 1px solid #000; }
}

/* ------------------------------------------------------------- teaser ---- */
/* The preliminary check reads as a drafted document, not a web page: a title
   block at the top, numbered sections, hairline rules, no cards. */

.mfps-teaser {
  max-width: 46rem;
  margin-inline: auto;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  padding: var(--wp--preset--spacing--70);
}

.mfps-teaser__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--wp--preset--spacing--50);
  flex-wrap: wrap;
  padding-bottom: var(--wp--preset--spacing--40);
  border-bottom: 2px solid var(--graphite);
}
.mfps-teaser__mark { height: 40px; width: auto; display: block; align-self: flex-start; }
.mfps-teaser__meta { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.mfps-teaser__label {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--survey-red);
}
.mfps-teaser__num {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

.mfps-teaser__title { padding-block: var(--wp--preset--spacing--50); }
.mfps-teaser__title h2 {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0 0 4px;
}

.mfps-teaser__section {
  border-top: 1px solid var(--rule);
  padding-block: var(--wp--preset--spacing--50);
}
.mfps-teaser__section h3 {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--md);
  font-weight: 600;
  line-height: 1.3;
  margin: 8px 0 10px;
}
.mfps-teaser__section p { margin-bottom: 10px; }
.mfps-teaser__section p:last-child { margin-bottom: 0; }

.mfps-teaser__cite {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--slate);
  letter-spacing: .04em;
}

/* Section 4 is the tease. Tinted, so it reads as the turn in the document. */
.mfps-teaser__open { background: var(--vellum); margin-inline: calc(var(--wp--preset--spacing--70) * -1); padding-inline: var(--wp--preset--spacing--70); }

.mfps-teaser__questions { margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--40); padding-left: 0; list-style: none; counter-reset: q; }
.mfps-teaser__questions li {
  counter-increment: q;
  position: relative;
  padding-left: 2.6rem;
  padding-block: 10px;
  border-top: 1px solid var(--rule);
}
.mfps-teaser__questions li::before {
  content: counter(q, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 12px;
  font-family: var(--ff-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--mf-blue);
  font-size: var(--wp--preset--font-size--sm);
}
.mfps-teaser__questions strong { display: block; font-family: var(--ff-display); font-weight: 600; }
.mfps-teaser__questions span { display: block; font-size: var(--wp--preset--font-size--sm); color: var(--slate); margin-top: 3px; }

.mfps-teaser__cta {
  border-top: 2px solid var(--survey-red);
  padding-top: var(--wp--preset--spacing--50);
  margin-top: var(--wp--preset--spacing--50);
}
.mfps-teaser__cta h3 {
  font-family: var(--ff-display);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 600;
  margin: 0 0 10px;
}

.mfps-btn-link {
  display: inline-block;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--base);
  text-decoration: none;
  padding: 13px 24px;
  margin-top: 6px;
  background: var(--survey-red);
  color: #fff;
  border: 1px solid var(--survey-red);
  border-radius: 1px;
}
.mfps-btn-link:hover { background: var(--survey-red-ink); border-color: var(--survey-red-ink); color: #fff; }

.mfps-teaser__foot { border-top: 1px solid var(--rule); margin-top: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--50); }
.mfps-teaser__foot .mfps-disclaimer--inline { margin-bottom: var(--wp--preset--spacing--30); }

.mfps-teaser__notice {
  max-width: 34rem;
  margin-inline: auto;
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--survey-red);
  padding: var(--wp--preset--spacing--60);
}
.mfps-teaser__notice h2 { font-family: var(--ff-display); font-size: var(--wp--preset--font-size--lg); margin: 0 0 10px; }

@media (max-width: 700px) {
  .mfps-teaser { padding: var(--wp--preset--spacing--50); border-left: 0; border-right: 0; }
  .mfps-teaser__open { margin-inline: calc(var(--wp--preset--spacing--50) * -1); padding-inline: var(--wp--preset--spacing--50); }
  .mfps-teaser__head { align-items: flex-start; }
  .mfps-teaser__meta { text-align: left; }
}

@media print {
  .mfps-teaser { border: 0; padding: 0; max-width: none; }
  .mfps-teaser__cta, .mfps-btn-link { display: none; }
}

/* --------------------------------------------------------- responsive ---- */

/* Nothing on the page may cause a horizontal scroll. Wide tables, the parcel
   diagram and code blocks each scroll inside their own container instead. */
html, body { overflow-x: clip; }

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

@media (max-width: 782px) {
  /* The admin bar goes position:absolute below this width and would otherwise
     sit on top of a sticky header. */
  .mfps-head { top: 0; }
}

@media (max-width: 600px) {
  table.mfps-sched { min-width: 420px; }
  table.mfps-sched th,
  table.mfps-sched td { padding: var(--wp--preset--spacing--30); }
  .mfps-sched-wrap {
    /* Let a wide schedule bleed to the screen edge rather than look clipped. */
    margin-inline: calc(var(--wp--preset--spacing--40) * -1);
    padding-inline: var(--wp--preset--spacing--40);
  }
}

@media (max-width: 420px) {
  .mfps-nav__toggle { padding: 8px 11px; }
  .mfps-foot__links .mfps-menu { gap: var(--wp--preset--spacing--30); }
}