/* MyFlowEasy design tokens: CSS custom properties.
   Mirrors project/tokens.json one to one (same names, same values).
   Fonts are self-hosted in assets/fonts/. */

@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/BricolageGrotesque-latin-opsz-wght.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/Geist-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("../fonts/Kalam-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("../fonts/Kalam-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* colour: primitives */
  --orange-50: #fff6f0;
  --orange-100: #ffeadb;
  --orange-200: #ffd3b5;
  --orange-300: #ffb385;
  --orange-400: #ff8e4d;
  --orange-500: #ff6b1a;
  --orange-600: #eb5a0a;
  --orange-700: #b8420a;
  --orange-800: #8f3307;
  --orange-900: #5c2205;
  --neutral-0: #ffffff;
  --neutral-25: #fafaf9;
  --neutral-50: #f5f3f0;
  --neutral-100: #eeeae5;
  --neutral-200: #e2dcd5;
  --neutral-300: #ccc4bb;
  --neutral-400: #9c948b;
  --neutral-500: #857d75;
  --neutral-600: #6b645d;
  --neutral-700: #5c554e;
  --neutral-800: #3b352f;
  --neutral-900: #26211c;
  --neutral-950: #16120e;
  --green-50: #edf7f0;
  --green-200: #b9e2c6;
  --green-600: #2b8a4f;
  --green-700: #1f6b3c;
  --amber-50: #fff7db;
  --amber-200: #f5dd8c;
  --amber-400: #f2b705;
  --amber-600: #a86f00;
  --amber-700: #855700;
  --red-50: #fdefee;
  --red-200: #f5c2bf;
  --red-600: #c8282e;
  --red-700: #a3202a;
  --blue-50: #eef4fc;
  --blue-200: #bfd5f2;
  --blue-600: #2c68b8;
  --blue-700: #1f5293;
  /* colour: semantic */
  --bg-page: var(--neutral-0);
  --bg-subtle: var(--neutral-25);
  --bg-muted: var(--neutral-50);
  --bg-brand-soft: var(--orange-50);
  --bg-brand-tint: var(--orange-100);
  --bg-brand: var(--orange-500);
  --bg-inverse: var(--neutral-950);
  --bg-selection: var(--orange-200);
  --overlay-scrim: rgba(22, 18, 14, 0.56);
  --surface-default: var(--neutral-0);
  --surface-raised: var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --surface-inverse: var(--neutral-900);
  --text-primary: var(--neutral-950);
  --text-secondary: var(--neutral-700);
  --text-tertiary: var(--neutral-600);
  --text-disabled: var(--neutral-400);
  --text-brand: var(--orange-700);
  --text-link: var(--orange-700);
  --text-link-hover: var(--orange-800);
  --text-on-brand: var(--neutral-950);
  --text-inverse: var(--neutral-0);
  --text-inverse-secondary: var(--neutral-300);
  --text-inverse-tertiary: var(--neutral-400);
  --text-inverse-brand: var(--orange-500);
  --text-annotation: var(--orange-700);
  --bg-neutral-tint: var(--neutral-100);
  --icon-brand: var(--orange-600);
  --control-thumb: var(--neutral-600);
  --border-emphasis: var(--neutral-300);
  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-500);
  --border-hover: var(--neutral-700);
  --border-selected: var(--orange-600);
  --border-inverse: var(--neutral-800);
  --border-error: var(--red-600);
  --action-primary-bg: var(--orange-500);
  --action-primary-bg-hover: var(--orange-400);
  --action-primary-bg-active: var(--orange-600);
  --action-primary-text: var(--neutral-950);
  --action-secondary-bg: var(--neutral-950);
  --action-secondary-bg-hover: var(--neutral-800);
  --action-secondary-text: var(--neutral-0);
  --action-outline-border: var(--neutral-950);
  --action-ghost-bg-hover: var(--neutral-50);
  --action-disabled-bg: var(--neutral-100);
  --action-disabled-text: var(--neutral-500);
  --focus-ring: var(--neutral-950);
  --focus-ring-inverse: var(--orange-500);
  --decor-stroke: var(--orange-500);
  --decor-connector: var(--orange-300);
  --decor-marker: var(--orange-200);
  --success-bg: var(--green-50);
  --success-border: var(--green-200);
  --success-icon: var(--green-600);
  --success-text: var(--green-700);
  --warning-bg: var(--amber-50);
  --warning-border: var(--amber-200);
  --warning-icon: var(--amber-600);
  --warning-text: var(--amber-700);
  --error-bg: var(--red-50);
  --error-border: var(--red-200);
  --error-icon: var(--red-600);
  --error-text: var(--red-700);
  --info-bg: var(--blue-50);
  --info-border: var(--blue-200);
  --info-icon: var(--blue-600);
  --info-text: var(--blue-700);
  /* type families */
  --font-display: "Bricolage Grotesque", "Bricolage Grotesque Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans: "Geist", "Geist Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Kalam", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --font-mono: "Geist Mono", "Geist Mono Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* fluid type sizes (360px to 1280px), line heights, weights, tracking */
  --fs-display-xl: clamp(2.75rem, 1.674rem + 4.783vw, 5.5rem);
  --lh-display-xl: 0.95;
  --fw-display-xl: 800;
  --ls-display-xl: -0.035em;
  --fs-display-lg: clamp(2.375rem, 1.739rem + 2.826vw, 4rem);
  --lh-display-lg: 1.0;
  --fw-display-lg: 700;
  --ls-display-lg: -0.03em;
  --fs-heading-1: clamp(2rem, 1.609rem + 1.739vw, 3rem);
  --lh-heading-1: 1.05;
  --fw-heading-1: 700;
  --ls-heading-1: -0.025em;
  --fs-heading-2: clamp(1.75rem, 1.554rem + 0.8696vw, 2.25rem);
  --lh-heading-2: 1.1;
  --fw-heading-2: 700;
  --ls-heading-2: -0.02em;
  --fs-heading-3: clamp(1.5rem, 1.402rem + 0.4348vw, 1.75rem);
  --lh-heading-3: 1.15;
  --fw-heading-3: 600;
  --ls-heading-3: -0.015em;
  --fs-heading-4: clamp(1.25rem, 1.201rem + 0.2174vw, 1.375rem);
  --lh-heading-4: 1.25;
  --fw-heading-4: 600;
  --ls-heading-4: -0.01em;
  --fs-lead: clamp(1.188rem, 1.114rem + 0.3261vw, 1.375rem);
  --lh-lead: 1.5;
  --fw-lead: 400;
  --ls-lead: -0.01em;
  --fs-body-lg: clamp(1.062rem, 1.038rem + 0.1087vw, 1.125rem);
  --lh-body-lg: 1.6;
  --fw-body-lg: 400;
  --ls-body-lg: 0em;
  --fs-body: 1rem;
  --lh-body: 1.6;
  --fw-body: 400;
  --ls-body: 0em;
  --fs-body-sm: 0.875rem;
  --lh-body-sm: 1.5;
  --fw-body-sm: 400;
  --ls-body-sm: 0em;
  --fs-label: 0.9375rem;
  --lh-label: 1.35;
  --fw-label: 500;
  --ls-label: 0em;
  --fs-button: 1rem;
  --lh-button: 1.25;
  --fw-button: 600;
  --ls-button: -0.005em;
  --fs-caption: 0.8125rem;
  --lh-caption: 1.4;
  --fw-caption: 400;
  --ls-caption: 0.01em;
  --fs-eyebrow: 0.8125rem;
  --lh-eyebrow: 1.2;
  --fw-eyebrow: 600;
  --ls-eyebrow: 0.08em;
  --fs-annotation: clamp(1.25rem, 1.152rem + 0.4348vw, 1.5rem);
  --lh-annotation: 1.15;
  --fw-annotation: 400;
  --ls-annotation: 0em;
  --fs-code: 0.875rem;
  --lh-code: 1.55;
  --fw-code: 400;
  --ls-code: 0em;
  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  /* radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-full: 9999px;
  /* shadow */
  --shadow-xs: 0 1px 2px rgba(22, 18, 14, 0.06);
  --shadow-sm: 0 1px 2px rgba(22, 18, 14, 0.06), 0 2px 8px rgba(22, 18, 14, 0.06);
  --shadow-md: 0 2px 4px rgba(22, 18, 14, 0.05), 0 8px 24px rgba(22, 18, 14, 0.08);
  --shadow-lg: 0 4px 12px rgba(22, 18, 14, 0.06), 0 24px 48px -12px rgba(22, 18, 14, 0.22);
  /* border */
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;
  /* layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-prose: 68ch;
  --page-margin-mobile: 16px;
  --page-margin-tablet: 32px;
  --page-margin-desktop: 48px;
  --gutter-mobile: 16px;
  --gutter-tablet: 24px;
  --gutter-desktop: 32px;
  --section-y-mobile: 64px;
  --section-y-tablet: 96px;
  --section-y-desktop: 128px;
  /* breakpoint */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  /* size */
  --size-control-sm: 36px;
  --size-control-md: 44px;
  --size-control-lg: 56px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --size-icon-xl: 32px;
  --size-header: 72px;
  /* zIndex */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
  /* duration */
  --duration-instant: 80ms;
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --duration-draw: 640ms;
  /* easing */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
}

/* type classes */
.mfe-display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); font-weight: var(--fw-display-xl); letter-spacing: var(--ls-display-xl); text-wrap: balance; }
.mfe-display-lg { font-family: var(--font-display); font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); font-weight: var(--fw-display-lg); letter-spacing: var(--ls-display-lg); text-wrap: balance; }
.mfe-heading-1 { font-family: var(--font-display); font-size: var(--fs-heading-1); line-height: var(--lh-heading-1); font-weight: var(--fw-heading-1); letter-spacing: var(--ls-heading-1); text-wrap: balance; }
.mfe-heading-2 { font-family: var(--font-display); font-size: var(--fs-heading-2); line-height: var(--lh-heading-2); font-weight: var(--fw-heading-2); letter-spacing: var(--ls-heading-2); text-wrap: balance; }
.mfe-heading-3 { font-family: var(--font-display); font-size: var(--fs-heading-3); line-height: var(--lh-heading-3); font-weight: var(--fw-heading-3); letter-spacing: var(--ls-heading-3); text-wrap: balance; }
.mfe-heading-4 { font-family: var(--font-display); font-size: var(--fs-heading-4); line-height: var(--lh-heading-4); font-weight: var(--fw-heading-4); letter-spacing: var(--ls-heading-4); text-wrap: balance; }
.mfe-lead { font-family: var(--font-sans); font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: var(--fw-lead); letter-spacing: var(--ls-lead); }
.mfe-body-lg { font-family: var(--font-sans); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: var(--fw-body-lg); letter-spacing: var(--ls-body-lg); }
.mfe-body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-body); letter-spacing: var(--ls-body); }
.mfe-body-sm { font-family: var(--font-sans); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); font-weight: var(--fw-body-sm); letter-spacing: var(--ls-body-sm); }
.mfe-label { font-family: var(--font-sans); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-label); letter-spacing: var(--ls-label); }
.mfe-button { font-family: var(--font-sans); font-size: var(--fs-button); line-height: var(--lh-button); font-weight: var(--fw-button); letter-spacing: var(--ls-button); }
.mfe-caption { font-family: var(--font-sans); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-caption); letter-spacing: var(--ls-caption); }
.mfe-eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--fw-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.mfe-annotation { font-family: var(--font-hand); font-size: var(--fs-annotation); line-height: var(--lh-annotation); font-weight: var(--fw-annotation); letter-spacing: var(--ls-annotation); }
.mfe-code { font-family: var(--font-mono); font-size: var(--fs-code); line-height: var(--lh-code); font-weight: var(--fw-code); letter-spacing: var(--ls-code); }

/* ============ base ============ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--size-header) + var(--space-4)); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-body);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; }
.mfe-hl__mark, .mfe-arrow { max-width: none; }
::selection { background: var(--bg-selection); color: var(--text-primary); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--border-width-3) solid var(--focus-ring);
  outline-offset: 2px;
}
:where(.mfe-on-inverse, .mfe-footer, .mfe-section--inverse, .mfe-cta--inverse) :focus-visible { outline-color: var(--focus-ring-inverse); }
.mfe-visually-hidden {
  position: absolute !important; 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;
}
.mfe-skip-link {
  position: absolute; left: var(--space-4); top: var(--space-2); z-index: var(--z-tooltip);
  transform: translateY(-160%);
  background: var(--action-primary-bg); color: var(--action-primary-text);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-full);
  font-weight: 600; text-decoration: none;
}
.mfe-skip-link:focus { transform: none; }
.mfe-prose { max-width: var(--container-prose); }
.mfe-prose p { margin: 0 0 var(--space-4); }
.mfe-text-secondary { color: var(--text-secondary); }
.mfe-text-tertiary { color: var(--text-tertiary); }
.mfe-text-brand { color: var(--text-brand); }

/* ============ icon ============ */
.mfe-icon { width: var(--size-icon-md); height: var(--size-icon-md); flex: none; display: inline-block; vertical-align: middle; }
.mfe-icon--sm { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.mfe-icon--lg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.mfe-icon--xl { width: var(--size-icon-xl); height: var(--size-icon-xl); }
.mfe-icon-tile {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--bg-brand-tint); color: var(--text-primary);
}
.mfe-icon-tile--sm { width: 36px; height: 36px; border-radius: var(--radius-sm); }

/* ============ wordmark ============ */
.mfe-wordmark {
  font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1;
  letter-spacing: -0.03em; color: var(--text-primary); text-decoration: none;
  display: inline-flex; align-items: center; min-height: var(--size-control-md);
  border-radius: var(--radius-xs);
}
.mfe-wordmark--lg { font-size: 32px; }
.mfe-on-inverse .mfe-wordmark, .mfe-footer .mfe-wordmark { color: var(--text-inverse); }

/* ============ layout ============ */
.mfe-container {
  width: 100%;
  max-width: calc(var(--container-xl) + 2 * var(--page-margin-desktop));
  margin-inline: auto;
  padding-inline: var(--page-margin-mobile);
}
.mfe-section { padding-block: var(--section-y-mobile); background: var(--bg-page); position: relative; }
.mfe-section--subtle { background: var(--bg-subtle); }
.mfe-section--brand-soft { background: var(--bg-brand-soft); }
.mfe-section--inverse { background: var(--bg-inverse); color: var(--text-inverse); }
.mfe-section--tight { padding-block: var(--space-12); }
.mfe-section--rounded { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.mfe-panel {
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-6);
  background: var(--bg-subtle);
}
.mfe-panel--brand-soft { background: var(--bg-brand-soft); }
.mfe-panel--outlined { background: var(--surface-default); border: var(--border-width-1) solid var(--border-default); }
.mfe-grid { display: grid; gap: var(--gutter-mobile); grid-template-columns: minmax(0, 1fr); }
.mfe-stack { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.mfe-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.mfe-section-head { display: grid; gap: var(--space-4); max-width: var(--container-md); margin-bottom: var(--space-10); }
.mfe-section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.mfe-section-head__title { margin: 0; }
.mfe-section-head__intro { margin: 0; color: var(--text-secondary); max-width: 60ch; text-wrap: pretty; }
.mfe-eyebrow { color: var(--text-brand); margin: 0; }
.mfe-section--inverse .mfe-eyebrow, .mfe-on-inverse .mfe-eyebrow { color: var(--text-inverse-brand); }
.mfe-section--inverse .mfe-section-head__intro, .mfe-on-inverse .mfe-section-head__intro { color: var(--text-inverse-secondary); }

@media (min-width: 640px) {
  .mfe-grid--3, .mfe-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .mfe-container { padding-inline: var(--page-margin-tablet); }
  .mfe-section { padding-block: var(--section-y-tablet); }
  .mfe-section--tight { padding-block: var(--space-16); }
  .mfe-grid { gap: var(--gutter-tablet); }
  .mfe-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mfe-panel { padding: var(--space-16) var(--space-12); }
  .mfe-section-head { margin-bottom: var(--space-12); }
}
@media (min-width: 1024px) {
  .mfe-container { padding-inline: var(--page-margin-desktop); }
  .mfe-section { padding-block: var(--section-y-desktop); }
  .mfe-section--tight { padding-block: var(--space-20); }
  .mfe-section--rounded { border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
  .mfe-grid { gap: var(--gutter-desktop); }
  .mfe-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mfe-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mfe-panel { border-radius: var(--radius-2xl); padding: var(--space-20) var(--space-16); }
}

/* ============ buttons ============ */
.mfe-btn {
  --_h: var(--size-control-md); --_px: var(--space-5); --_fs: var(--fs-button);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: 0; max-width: 100%; min-height: var(--_h); padding: 0 var(--_px);
  border: var(--border-width-2) solid transparent; border-radius: var(--radius-full);
  font-family: var(--font-sans); font-size: var(--_fs); line-height: var(--lh-button);
  font-weight: var(--fw-button); letter-spacing: var(--ls-button);
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              transform var(--duration-instant) var(--ease-standard);
}
.mfe-btn--sm { --_h: var(--size-control-sm); --_px: var(--space-4); --_fs: 14px; }
.mfe-btn--lg { --_h: var(--size-control-lg); --_px: var(--space-8); --_fs: 18px; }
.mfe-btn--block { width: 100%; }
@media (max-width: 639px) {
  .mfe-btn--lg { --_px: var(--space-4); --_fs: 16px; padding-block: var(--space-3); white-space: normal; text-align: center; }
}
.mfe-btn .mfe-icon { width: var(--size-icon-md); height: var(--size-icon-md); }
.mfe-btn--sm .mfe-icon { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.mfe-btn__icon-end { transition: transform var(--duration-fast) var(--ease-standard); }
.mfe-btn:hover .mfe-btn__icon-end { transform: translateX(3px); }

.mfe-btn--primary { background: var(--action-primary-bg); color: var(--action-primary-text); }
.mfe-btn--primary:hover { background: var(--action-primary-bg-hover); }
.mfe-btn--primary:active { background: var(--action-primary-bg-active); transform: translateY(1px); }

.mfe-btn--secondary { background: var(--action-secondary-bg); color: var(--action-secondary-text); }
.mfe-btn--secondary:hover { background: var(--action-secondary-bg-hover); }
.mfe-btn--secondary:active { background: var(--action-secondary-bg); transform: translateY(1px); }

.mfe-btn--outline { background: transparent; color: var(--text-primary); border-color: var(--action-outline-border); }
.mfe-btn--outline:hover { background: var(--action-ghost-bg-hover); }
.mfe-btn--outline:active { transform: translateY(1px); }

.mfe-btn--ghost { background: transparent; color: var(--text-primary); --_px: var(--space-4); }
.mfe-btn--ghost:hover { background: var(--action-ghost-bg-hover); }
.mfe-btn--ghost:active { background: var(--bg-muted); transform: translateY(1px); }

.mfe-btn:disabled, .mfe-btn[aria-disabled="true"] {
  background: var(--action-disabled-bg); color: var(--action-disabled-text);
  border-color: transparent; cursor: not-allowed; transform: none; box-shadow: none;
}
.mfe-btn--ghost:disabled, .mfe-btn--ghost[aria-disabled="true"] { background: transparent; }
.mfe-btn--outline:disabled, .mfe-btn--outline[aria-disabled="true"] { background: transparent; border-color: var(--border-default); }
.mfe-btn[aria-busy="true"] { cursor: progress; }
.mfe-btn[aria-busy="true"]:active { transform: none; }

/* inverse grounds (footer, dark sections) */
.mfe-on-inverse .mfe-btn--secondary, .mfe-section--inverse .mfe-btn--secondary, .mfe-cta--inverse .mfe-btn--secondary { background: var(--surface-default); color: var(--text-primary); }
.mfe-on-inverse .mfe-btn--secondary:hover, .mfe-section--inverse .mfe-btn--secondary:hover, .mfe-cta--inverse .mfe-btn--secondary:hover { background: var(--bg-brand-tint); }
.mfe-on-inverse .mfe-btn--outline, .mfe-section--inverse .mfe-btn--outline, .mfe-cta--inverse .mfe-btn--outline,
.mfe-on-inverse .mfe-btn--ghost, .mfe-section--inverse .mfe-btn--ghost, .mfe-cta--inverse .mfe-btn--ghost { color: var(--text-inverse); border-color: var(--text-inverse); }
.mfe-on-inverse .mfe-btn--ghost, .mfe-section--inverse .mfe-btn--ghost, .mfe-cta--inverse .mfe-btn--ghost { border-color: transparent; }
.mfe-on-inverse .mfe-btn--outline:hover, .mfe-section--inverse .mfe-btn--outline:hover, .mfe-cta--inverse .mfe-btn--outline:hover,
.mfe-on-inverse .mfe-btn--ghost:hover, .mfe-section--inverse .mfe-btn--ghost:hover, .mfe-cta--inverse .mfe-btn--ghost:hover { background: var(--surface-inverse); }
/* brand (orange) grounds: never a primary button here */
.mfe-cta--brand .mfe-btn--outline:hover { background: var(--action-primary-bg-hover); }

.mfe-spinner { animation: mfe-spin 800ms linear infinite; }
@keyframes mfe-spin { to { transform: rotate(360deg); } }

/* icon button */
.mfe-icon-btn {
  --_s: var(--size-control-md);
  display: inline-grid; place-items: center; flex: none;
  width: var(--_s); height: var(--_s); padding: 0;
  border: var(--border-width-2) solid transparent; border-radius: var(--radius-full);
  background: transparent; color: var(--text-primary); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
}
.mfe-icon-btn .mfe-icon { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.mfe-icon-btn--sm { --_s: var(--size-control-sm); }
.mfe-icon-btn--sm .mfe-icon { width: var(--size-icon-md); height: var(--size-icon-md); }
.mfe-icon-btn--lg { --_s: var(--size-control-lg); }
.mfe-icon-btn:hover { background: var(--action-ghost-bg-hover); }
.mfe-icon-btn:active { background: var(--bg-muted); transform: translateY(1px); }
.mfe-icon-btn--outline { border-color: var(--action-outline-border); }
.mfe-icon-btn--primary { background: var(--action-primary-bg); color: var(--action-primary-text); }
.mfe-icon-btn--primary:hover { background: var(--action-primary-bg-hover); }
.mfe-icon-btn--primary:active { background: var(--action-primary-bg-active); }
.mfe-icon-btn--secondary { background: var(--action-secondary-bg); color: var(--action-secondary-text); }
.mfe-icon-btn--secondary:hover { background: var(--action-secondary-bg-hover); }
.mfe-icon-btn:disabled, .mfe-icon-btn[aria-disabled="true"] { background: var(--action-disabled-bg); color: var(--action-disabled-text); border-color: transparent; cursor: not-allowed; transform: none; }
.mfe-on-inverse .mfe-icon-btn, .mfe-footer .mfe-icon-btn { color: var(--text-inverse); }
.mfe-on-inverse .mfe-icon-btn:hover, .mfe-footer .mfe-icon-btn:hover { background: var(--surface-inverse); }

/* ============ links ============ */
.mfe-link {
  color: var(--text-link);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  border-radius: var(--radius-xs);
  transition: color var(--duration-fast) var(--ease-standard), text-decoration-thickness var(--duration-fast) var(--ease-standard);
}
.mfe-link:hover { color: var(--text-link-hover); text-decoration-thickness: 2px; }
.mfe-link--standalone {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--size-control-md);
  color: var(--text-primary); font-weight: 600; text-decoration: none;
}
.mfe-link--standalone .mfe-icon { color: var(--text-brand); transition: transform var(--duration-fast) var(--ease-standard); }
.mfe-link--standalone:hover { color: var(--text-primary); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--decor-stroke); }
.mfe-link--standalone:hover .mfe-icon { transform: translateX(3px); }
.mfe-on-inverse .mfe-link, .mfe-footer .mfe-link, .mfe-section--inverse .mfe-link { color: var(--text-inverse-brand); }
.mfe-on-inverse .mfe-link--standalone, .mfe-section--inverse .mfe-link--standalone { color: var(--text-inverse); }
.mfe-on-inverse .mfe-link--standalone .mfe-icon, .mfe-section--inverse .mfe-link--standalone .mfe-icon { color: var(--text-inverse-brand); }

/* ============ badge & tag ============ */
.mfe-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 24px; padding: 0 10px; border-radius: var(--radius-full);
  font-size: 13px; line-height: 1.2; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
  background: var(--bg-neutral-tint); color: var(--text-secondary);
}
.mfe-badge .mfe-icon { width: 14px; height: 14px; }
.mfe-badge--brand { background: var(--bg-brand-tint); color: var(--text-brand); }
.mfe-badge--success { background: var(--success-bg); color: var(--success-text); }
.mfe-badge--warning { background: var(--warning-bg); color: var(--warning-text); }
.mfe-badge--error { background: var(--error-bg); color: var(--error-text); }
.mfe-badge--info { background: var(--info-bg); color: var(--info-text); }
.mfe-badge--inverse { background: var(--bg-inverse); color: var(--text-inverse); }
.mfe-badge--outline { background: transparent; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-strong); }

.mfe-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-full);
  border: var(--border-width-1) solid var(--border-strong); background: var(--surface-default);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.2; font-weight: 500; color: var(--text-secondary);
  text-decoration: none; white-space: nowrap;
}
button.mfe-tag { cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
button.mfe-tag:hover { border-color: var(--border-hover); color: var(--text-primary); }
.mfe-tag[aria-pressed="true"] { background: var(--bg-brand-tint); border-color: var(--border-selected); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-selected); }
.mfe-tag .mfe-icon { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.mfe-tag--removable { padding-right: var(--space-1); }
.mfe-tag__remove {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-tertiary); cursor: pointer;
}
.mfe-tag__remove:hover { background: var(--bg-neutral-tint); color: var(--text-primary); }
.mfe-tag:disabled { background: var(--action-disabled-bg); color: var(--text-disabled); border-color: var(--border-default); cursor: not-allowed; }

/* ============ tooltip ============ */
.mfe-tooltip-wrap { position: relative; display: inline-flex; }
.mfe-tooltip {
  position: absolute; z-index: var(--z-tooltip);
  left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  width: max-content; max-width: 240px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--bg-inverse); color: var(--text-inverse); box-shadow: var(--shadow-md);
  font-size: 13px; line-height: 1.4; font-weight: 500; text-align: center;
  animation: mfe-fade-up var(--duration-fast) var(--ease-enter);
}
.mfe-tooltip::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.mfe-tooltip--bottom::before { top: auto; bottom: 100%; }
.mfe-tooltip::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--bg-inverse);
}
.mfe-tooltip--bottom { bottom: auto; top: calc(100% + 10px); }
.mfe-tooltip--bottom::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--bg-inverse); }
@keyframes mfe-fade-up { from { opacity: 0; transform: translate(-50%, 4px); } }

/* ============ cards ============ */
.mfe-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0;
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--surface-default); border: var(--border-width-1) solid var(--border-default);
  transition: box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.mfe-card--interactive:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-emphasis); }
.mfe-card--interactive:focus-within { box-shadow: var(--shadow-md); }
.mfe-card__stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mfe-card__title { margin: 0; }
.mfe-card__title a { color: inherit; text-decoration: none; }
.mfe-card__text { margin: 0; color: var(--text-secondary); }
.mfe-card__footer { margin-top: auto; padding-top: var(--space-2); }

.mfe-service-card__list { list-style: none; margin: 0; padding: var(--space-4) 0 0; display: grid; gap: var(--space-2); border-top: var(--border-width-1) solid var(--border-subtle); }
.mfe-service-card__list li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.mfe-service-card__list .mfe-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--icon-brand); }
.mfe-service-card--tinted { background: var(--bg-brand-soft); border-color: transparent; }
.mfe-service-card--tinted .mfe-icon-tile { background: var(--surface-default); }

.mfe-feature-card { gap: var(--space-3); }
.mfe-feature-card--plain { background: transparent; border-color: transparent; padding: 0; }
.mfe-feature-card--tinted { background: var(--bg-brand-soft); border-color: transparent; }
.mfe-feature-card__icon { color: var(--text-brand); }

@media (min-width: 768px) {
  .mfe-card { padding: var(--space-8); }
  .mfe-feature-card--plain { padding: 0; }
}

/* ============ process steps ============ */
.mfe-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); counter-reset: none; }
.mfe-step { position: relative; display: grid; align-content: start; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--space-5); row-gap: var(--space-2); }
.mfe-step__num {
  grid-row: span 2;
  width: 56px; height: 56px; border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: var(--action-primary-bg); color: var(--text-on-brand);
  font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: -0.02em;
  position: relative; z-index: var(--z-raised);
}
.mfe-step__title { margin: 0; align-self: end; }
.mfe-step__text { margin: 0; color: var(--text-secondary); }
/* vertical connector on small screens */
.mfe-step:not(:last-child)::before {
  content: ""; position: absolute; left: 27px; top: 64px; bottom: calc(-1 * var(--space-8) + 8px);
  border-left: var(--border-width-2) dashed var(--decor-connector);
}
@media (min-width: 768px) {
  .mfe-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter-tablet); row-gap: var(--space-12); }
  .mfe-step:not(:last-child)::before { display: none; }
}
@media (min-width: 1024px) {
  .mfe-steps:not(.mfe-steps--vertical) { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter-desktop); }
  .mfe-steps:not(.mfe-steps--vertical) .mfe-step { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }
  .mfe-steps:not(.mfe-steps--vertical) .mfe-step__num { grid-row: auto; margin-bottom: var(--space-3); }
  .mfe-steps:not(.mfe-steps--vertical) .mfe-step:not(:last-child)::before {
    display: block; left: 72px; right: calc(-1 * var(--gutter-desktop) + 16px); top: 28px; bottom: auto;
    border-left: 0; border-top: var(--border-width-2) dashed var(--decor-connector);
  }
}
.mfe-steps--vertical { grid-template-columns: minmax(0, 1fr) !important; }
.mfe-steps--vertical .mfe-step:not(:last-child)::before { display: block; }

/* ============ forms ============ */
.mfe-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); min-width: 0; }
.mfe-form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); min-width: 0; }
@media (min-width: 640px) { .mfe-form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mfe-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); min-width: 0; }
.mfe-field__label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-label); color: var(--text-primary); }
.mfe-field__req { font-weight: 400; color: var(--text-tertiary); font-size: var(--fs-caption); }
.mfe-field__hint { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-tertiary); }
.mfe-field__error { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--error-text); }
.mfe-field__error .mfe-icon { width: 16px; height: 16px; margin-top: 1px; color: var(--error-icon); }

.mfe-input, .mfe-textarea, .mfe-select__control {
  width: 100%; min-width: 0; max-width: 100%; min-height: var(--size-control-md); margin: 0;
  padding: 0 var(--space-4);
  border: var(--border-width-1) solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-default); color: var(--text-primary);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.mfe-input--lg { min-height: var(--size-control-lg); }
.mfe-textarea { padding: var(--space-3) var(--space-4); min-height: 136px; resize: vertical; display: block; }
.mfe-input::placeholder, .mfe-textarea::placeholder { color: var(--text-tertiary); opacity: 1; }
.mfe-input:hover, .mfe-textarea:hover, .mfe-select__control:hover { border-color: var(--border-hover); }
.mfe-input:focus-visible, .mfe-textarea:focus-visible, .mfe-select__control:focus-visible { border-color: var(--focus-ring); }
.mfe-input[aria-invalid="true"], .mfe-textarea[aria-invalid="true"], .mfe-select__control[aria-invalid="true"] {
  border-color: var(--border-error); box-shadow: inset 0 0 0 1px var(--border-error);
}
.mfe-input:disabled, .mfe-textarea:disabled, .mfe-select__control:disabled {
  background: var(--action-disabled-bg); color: var(--text-disabled); border-color: var(--border-default); cursor: not-allowed;
}
.mfe-input:read-only:not(:disabled) { background: var(--bg-muted); }
.mfe-select { position: relative; min-width: 0; }
.mfe-select__control { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; text-overflow: ellipsis; }
.mfe-select__icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-secondary); }

.mfe-check { display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; position: relative; min-height: 24px; }
.mfe-check__input { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: inherit; }
.mfe-check__box {
  flex: none; width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center;
  border: var(--border-width-2) solid var(--border-strong); background: var(--surface-default); color: transparent;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.mfe-check__box .mfe-icon { width: 16px; height: 16px; stroke-width: 3; }
.mfe-check__text { display: grid; gap: 2px; padding-top: 1px; }
.mfe-check__label { font-size: 15px; line-height: 1.45; color: var(--text-primary); }
.mfe-check:hover .mfe-check__box { border-color: var(--border-hover); }
.mfe-check__input:checked + .mfe-check__box { background: var(--action-primary-bg); border-color: var(--focus-ring); color: var(--action-primary-text); }
.mfe-check__input:focus-visible + .mfe-check__box { outline: var(--border-width-3) solid var(--focus-ring); outline-offset: 2px; }
.mfe-check__input[aria-invalid="true"] + .mfe-check__box { border-color: var(--border-error); }
.mfe-check__input:disabled + .mfe-check__box { background: var(--action-disabled-bg); border-color: var(--border-default); }
.mfe-check__input:disabled:checked + .mfe-check__box { color: var(--text-disabled); }
.mfe-check:has(.mfe-check__input:disabled) { cursor: not-allowed; }
.mfe-check:has(.mfe-check__input:disabled) .mfe-check__label { color: var(--text-disabled); }

.mfe-switch {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: var(--size-control-md); padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 15px; line-height: 1.4; color: var(--text-primary); text-align: left;
  border-radius: var(--radius-sm);
}
.mfe-switch__track {
  flex: none; position: relative; width: 48px; height: 28px; border-radius: var(--radius-full);
  background: var(--bg-neutral-tint); border: var(--border-width-2) solid var(--border-strong);
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.mfe-switch__thumb {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: var(--radius-full);
  background: var(--control-thumb); display: grid; place-items: center; color: transparent;
  transition: transform var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
}
.mfe-switch__thumb .mfe-icon { width: 12px; height: 12px; stroke-width: 3.5; }
.mfe-switch[aria-checked="true"] .mfe-switch__track { background: var(--action-primary-bg); border-color: var(--focus-ring); }
.mfe-switch[aria-checked="true"] .mfe-switch__thumb { transform: translateX(20px); background: var(--text-primary); color: var(--action-primary-bg); }
.mfe-switch:hover .mfe-switch__track { border-color: var(--border-hover); }
.mfe-switch[aria-checked="true"]:hover .mfe-switch__track { background: var(--action-primary-bg-hover); border-color: var(--focus-ring); }
.mfe-switch__state { color: var(--text-tertiary); font-size: var(--fs-caption); }
.mfe-switch:disabled { cursor: not-allowed; color: var(--text-disabled); }
.mfe-switch:disabled .mfe-switch__track { background: var(--action-disabled-bg); border-color: var(--border-default); }
.mfe-switch:disabled .mfe-switch__thumb { background: var(--border-emphasis); }

/* ============ accordion ============ */
.mfe-accordion { border: var(--border-width-1) solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-default); overflow: hidden; }
.mfe-accordion__item + .mfe-accordion__item { border-top: var(--border-width-1) solid var(--border-default); }
.mfe-accordion__heading { margin: 0; }
.mfe-accordion__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 64px; padding: var(--space-4) var(--space-6);
  border: 0; background: transparent; color: var(--text-primary); cursor: pointer; text-align: left;
  font-family: var(--font-sans); font-size: 17px; line-height: 1.4; font-weight: 600;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.mfe-accordion__trigger:hover { background: var(--bg-subtle); }
.mfe-accordion__trigger:focus-visible { outline-offset: -4px; border-radius: var(--radius-lg); }
.mfe-accordion__icon {
  flex: none; width: 32px; height: 32px; border-radius: var(--radius-full); display: grid; place-items: center;
  background: var(--bg-brand-tint); color: var(--text-primary);
  transition: transform var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
}
.mfe-accordion__trigger[aria-expanded="true"] .mfe-accordion__icon { transform: rotate(45deg); background: var(--action-primary-bg); }
.mfe-accordion__panel { padding: 0 var(--space-6) var(--space-6); color: var(--text-secondary); animation: mfe-fade-in var(--duration-base) var(--ease-enter); }
.mfe-accordion__panel > :first-child { margin-top: 0; }
.mfe-accordion__panel > :last-child { margin-bottom: 0; }
.mfe-accordion__trigger:disabled { color: var(--text-disabled); cursor: not-allowed; }
@keyframes mfe-fade-in { from { opacity: 0; transform: translateY(-4px); } }

/* ============ tabs ============ */
.mfe-tabs__list {
  display: flex; gap: var(--space-6); border-bottom: var(--border-width-1) solid var(--border-default);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.mfe-tabs__list::-webkit-scrollbar { display: none; }
.mfe-tabs__tab {
  position: relative; flex: none;
  min-height: var(--size-control-md); padding: var(--space-3) var(--space-1);
  border: 0; background: none; cursor: pointer; white-space: nowrap;
  font-family: var(--font-sans); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-standard);
}
.mfe-tabs__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--border-selected); transform: scaleX(0); transition: transform var(--duration-base) var(--ease-standard);
}
.mfe-tabs__tab:hover { color: var(--text-primary); }
.mfe-tabs__tab[aria-selected="true"] { color: var(--text-primary); font-weight: 600; }
.mfe-tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }
.mfe-tabs__tab:focus-visible { outline-offset: -3px; border-radius: var(--radius-xs); }
.mfe-tabs__tab:disabled { color: var(--text-disabled); cursor: not-allowed; }
.mfe-tabs__panel { padding-top: var(--space-6); }
.mfe-tabs__panel:focus-visible { outline-offset: 4px; border-radius: var(--radius-xs); }

/* ============ alert ============ */
.mfe-alert {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start;
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  border: var(--border-width-1) solid var(--info-border); background: var(--info-bg); color: var(--info-text);
}
.mfe-alert__icon { color: var(--info-icon); margin-top: 1px; }
.mfe-alert__body { display: grid; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.mfe-alert__title { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; }
.mfe-alert__text { margin: 0; font-size: 15px; line-height: 1.5; }
.mfe-alert__text a { color: inherit; text-decoration: underline; }
.mfe-alert__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.mfe-alert__close { margin: -10px -12px -10px 0; color: inherit; }
.mfe-alert--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.mfe-alert--success .mfe-alert__icon { color: var(--success-icon); }
.mfe-alert--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.mfe-alert--warning .mfe-alert__icon { color: var(--warning-icon); }
.mfe-alert--error { background: var(--error-bg); border-color: var(--error-border); color: var(--error-text); }
.mfe-alert--error .mfe-alert__icon { color: var(--error-icon); }

/* ============ toast ============ */
.mfe-toast-region {
  position: fixed; z-index: var(--z-toast); left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  display: grid; gap: var(--space-3); justify-items: center; pointer-events: none;
}
.mfe-toast-region--inline { position: static; justify-items: start; }
@media (min-width: 768px) { .mfe-toast-region:not(.mfe-toast-region--inline) { left: auto; right: var(--space-6); bottom: var(--space-6); justify-items: end; width: 400px; } }
.mfe-toast {
  pointer-events: auto; width: 100%; max-width: 400px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start;
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--surface-raised); border: var(--border-width-1) solid var(--border-default); box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  animation: mfe-toast-in var(--duration-base) var(--ease-enter);
}
.mfe-toast__icon { margin-top: 1px; }
.mfe-toast--success .mfe-toast__icon { color: var(--success-icon); }
.mfe-toast--error .mfe-toast__icon { color: var(--error-icon); }
.mfe-toast--info .mfe-toast__icon { color: var(--info-icon); }
.mfe-toast--warning .mfe-toast__icon { color: var(--warning-icon); }
.mfe-toast__title { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; }
.mfe-toast__text { margin: 2px 0 0; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--text-secondary); }
.mfe-toast__close { margin: -10px -10px -10px 0; }
@keyframes mfe-toast-in { from { opacity: 0; transform: translateY(12px); } }

/* ============ dialog ============ */
.mfe-dialog {
  width: calc(100% - 2 * var(--space-4)); max-width: var(--container-sm); max-height: calc(100dvh - 2 * var(--space-4));
  padding: 0; border: 0; border-radius: var(--radius-lg);
  background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-lg);
  overflow: auto;
}
.mfe-dialog[open] { animation: mfe-dialog-in var(--duration-slow) var(--ease-enter); }
.mfe-dialog::backdrop { background: rgba(22, 18, 14, 0.56); background: var(--overlay-scrim); }
.mfe-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-6) 0; }
.mfe-dialog__title { margin: 0; padding-top: 6px; }
.mfe-dialog__body { padding: var(--space-4) var(--space-6) var(--space-6); color: var(--text-secondary); }
.mfe-dialog__body > :first-child { margin-top: 0; }
.mfe-dialog__footer {
  display: flex; flex-direction: column-reverse; gap: var(--space-3);
  padding: var(--space-4) var(--space-6) var(--space-6); border-top: var(--border-width-1) solid var(--border-subtle);
}
.mfe-dialog__footer .mfe-btn { width: 100%; }
.mfe-dialog--inline { position: relative; display: block; margin: 0; max-width: 520px; animation: none; }
@media (min-width: 640px) {
  .mfe-dialog__header { padding: var(--space-8) var(--space-8) 0; }
  .mfe-dialog__body { padding: var(--space-4) var(--space-8) var(--space-8); }
  .mfe-dialog__footer { flex-direction: row; justify-content: flex-end; padding: var(--space-5) var(--space-8); }
  .mfe-dialog__footer .mfe-btn { width: auto; }
}
@keyframes mfe-dialog-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }

/* ============ header & navigation ============ */
.mfe-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--bg-page); border-bottom: var(--border-width-1) solid transparent;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.mfe-header[data-scrolled="true"] { border-bottom-color: var(--border-subtle); box-shadow: var(--shadow-sm); }
.mfe-header__inner { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; }
.mfe-header__nav { display: none; margin-left: var(--space-8); }
.mfe-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.mfe-header__cta { display: none; }
.mfe-nav { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-1); }
.mfe-nav__item { position: relative; }
.mfe-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--size-control-md); padding: 0 var(--space-4); border-radius: var(--radius-full);
  border: 0; background: transparent; cursor: pointer; text-decoration: none;
  font-family: var(--font-sans); font-size: 16px; line-height: 1; font-weight: 500; color: var(--text-primary);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.mfe-nav__link:hover { background: var(--action-ghost-bg-hover); }
.mfe-nav__link[aria-current="page"], .mfe-nav__link[aria-current="true"] { background: var(--bg-brand-tint); font-weight: 600; }
.mfe-nav__link .mfe-icon { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-standard); }
.mfe-nav__link[aria-expanded="true"] { background: var(--action-ghost-bg-hover); }
.mfe-nav__link[aria-expanded="true"] .mfe-icon { transform: rotate(180deg); }
@media (min-width: 640px) { .mfe-header__cta { display: inline-flex; } }
@media (min-width: 1024px) {
  .mfe-header__inner { min-height: var(--size-header); }
  .mfe-header__nav { display: block; }
  .mfe-header__menu-btn { display: none; }
}

.mfe-dropdown {
  position: absolute; z-index: var(--z-dropdown); top: calc(100% + 8px); left: 0;
  width: 360px; padding: var(--space-2);
  border-radius: var(--radius-md); background: var(--surface-raised);
  border: var(--border-width-1) solid var(--border-default); box-shadow: var(--shadow-md);
  animation: mfe-menu-in var(--duration-fast) var(--ease-enter);
}
.mfe-dropdown--static { position: relative; top: auto; }
.mfe-dropdown__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mfe-dropdown__item {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3); border-radius: var(--radius-sm); text-decoration: none; color: var(--text-primary);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.mfe-dropdown__item:hover { background: var(--bg-subtle); }
.mfe-dropdown__item[aria-current="page"] { background: var(--bg-brand-soft); }
.mfe-dropdown__label { display: block; font-weight: 600; font-size: 15px; line-height: 1.35; }
.mfe-dropdown__desc { display: block; font-size: 14px; line-height: 1.45; color: var(--text-tertiary); margin-top: 2px; }
@keyframes mfe-menu-in { from { opacity: 0; transform: translateY(-4px); } }

.mfe-mobilenav {
  margin: 0 0 0 auto; padding: 0; border: 0;
  width: min(100%, 420px); max-width: 100%; height: 100dvh; max-height: 100dvh;
  background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-lg);
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}
.mfe-mobilenav[open] { display: flex; flex-direction: column; animation: mfe-drawer-in var(--duration-slow) var(--ease-enter); }
.mfe-mobilenav::backdrop { background: rgba(22, 18, 14, 0.56); background: var(--overlay-scrim); }
.mfe-mobilenav--inline { position: relative; display: flex; flex-direction: column; height: 100%; max-height: none; width: 100%; margin: 0; border-radius: var(--radius-lg); animation: none; }
.mfe-mobilenav__top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6); border-bottom: var(--border-width-1) solid var(--border-subtle); }
.mfe-mobilenav__body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-4); }
.mfe-mobilenav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mfe-mobilenav__link {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 56px; padding: 0 var(--space-3); border-radius: var(--radius-md);
  border: 0; background: none; cursor: pointer; text-decoration: none; text-align: left;
  font-family: var(--font-display); font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary);
}
.mfe-mobilenav__link:hover { background: var(--bg-subtle); }
.mfe-mobilenav__link[aria-current="page"] { background: var(--bg-brand-tint); }
.mfe-mobilenav__link .mfe-icon { transition: transform var(--duration-base) var(--ease-standard); }
.mfe-mobilenav__link[aria-expanded="true"] .mfe-icon { transform: rotate(180deg); }
.mfe-mobilenav__sub { list-style: none; margin: 0 0 var(--space-2); padding: 0 0 0 var(--space-3); display: grid; gap: 2px; }
.mfe-mobilenav__sublink { display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-3); border-radius: var(--radius-sm); text-decoration: none; color: var(--text-secondary); font-size: 17px; font-weight: 500; }
.mfe-mobilenav__sublink:hover { background: var(--bg-subtle); color: var(--text-primary); }
.mfe-mobilenav__foot { padding: var(--space-4) var(--space-6) var(--space-6); border-top: var(--border-width-1) solid var(--border-subtle); display: grid; gap: var(--space-3); }
@keyframes mfe-drawer-in { from { transform: translateX(24px); opacity: 0; } }

/* ============ hero ============ */
.mfe-hero { padding-block: var(--space-12) var(--space-4); position: relative; overflow-x: clip; }
.mfe-hero__inner { display: grid; gap: var(--space-12); }
.mfe-hero__copy { display: grid; gap: var(--space-6); justify-items: center; text-align: center; max-width: var(--container-lg); margin-inline: auto; position: relative; }
.mfe-hero__title { margin: 0; }
.mfe-hero__lead { margin: 0; max-width: 60ch; color: var(--text-secondary); text-wrap: pretty; }
.mfe-hero__actions { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; position: relative; }
.mfe-hero__actions .mfe-btn { width: 100%; }
.mfe-hero__note { display: none; }
.mfe-hero--split .mfe-hero__copy { justify-items: start; text-align: left; margin-inline: 0; }
@media (min-width: 640px) {
  .mfe-hero__actions { flex-direction: row; justify-content: center; width: auto; }
  .mfe-hero__actions .mfe-btn { width: auto; }
  .mfe-hero--split .mfe-hero__actions { justify-content: flex-start; }
}
@media (min-width: 768px) { .mfe-hero { padding-block: var(--space-20) var(--space-8); } }
@media (min-width: 1024px) {
  .mfe-hero__note { display: block; position: absolute; left: calc(100% + var(--space-4)); top: -46px; width: 180px; }
  .mfe-hero--split .mfe-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--space-20); }
}

/* flow strip: the hero visual (three linked service tiles) */
.mfe-flow { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: var(--space-4); max-width: var(--container-lg); position: relative; }
.mfe-flow__tile {
  position: relative; display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: var(--surface-default); border: var(--border-width-1) solid var(--border-default); box-shadow: var(--shadow-xs);
  text-decoration: none; color: var(--text-primary);
  transition: box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.mfe-flow__tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.mfe-flow__label { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.mfe-flow__meta { display: block; font-family: var(--font-sans); font-size: 14px; font-weight: 400; color: var(--text-tertiary); letter-spacing: 0; margin-top: 2px; }
.mfe-flow__item { position: relative; }
.mfe-flow__item:not(:last-child)::after {
  content: ""; position: absolute; left: 44px; top: 100%; height: var(--space-4);
  border-left: var(--border-width-2) dashed var(--decor-connector);
}
@media (min-width: 768px) {
  .mfe-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10); }
  .mfe-flow__tile { flex-direction: column; align-items: flex-start; padding: var(--space-6); height: 100%; }
  .mfe-flow__item:not(:last-child)::after { left: 100%; top: 50%; width: var(--space-10); height: 0; border-left: 0; border-top: var(--border-width-2) dashed var(--decor-connector); }
}

/* ============ testimonial ============ */
.mfe-testimonial { margin: 0; display: grid; gap: var(--space-6); max-width: var(--container-md); }
.mfe-testimonial__mark { display: block; height: 0.5em; font-family: var(--font-display); font-size: 96px; line-height: 1; font-weight: 800; color: var(--decor-stroke); }
.mfe-testimonial__quote { margin: 0; font-family: var(--font-display); font-size: var(--fs-heading-3); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; color: var(--text-primary); }
.mfe-testimonial__quote p { margin: 0; }
.mfe-testimonial__by { display: flex; align-items: center; gap: var(--space-4); }
.mfe-testimonial__avatar { width: 48px; height: 48px; border-radius: var(--radius-full); object-fit: cover; background: var(--bg-brand-tint); flex: none; }
.mfe-testimonial__name { display: block; font-weight: 600; font-size: 16px; }
.mfe-testimonial__role { display: block; font-size: 14px; color: var(--text-tertiary); }
.mfe-testimonial--placeholder { padding: var(--space-6); border: var(--border-width-2) dashed var(--border-strong); border-radius: var(--radius-lg); }
.mfe-testimonial--placeholder .mfe-testimonial__quote { color: var(--text-tertiary); font-style: italic; }
.mfe-testimonial--center { margin-inline: auto; text-align: center; justify-items: center; }

/* ============ CTA ============ */
.mfe-cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: var(--space-6);
  padding: var(--space-12) var(--space-6); border-radius: var(--radius-xl);
  background: var(--bg-brand); color: var(--text-on-brand);
}
.mfe-cta__title { margin: 0; max-width: 18ch; }
.mfe-cta__text { margin: 0; max-width: 52ch; color: var(--text-on-brand); }
.mfe-cta__actions { display: flex; flex-direction: column; gap: var(--space-3); }
.mfe-cta .mfe-cta__deco { display: none; position: absolute; z-index: -1; top: var(--space-10); right: var(--space-32); width: 112px; color: var(--text-on-brand); pointer-events: none; }
.mfe-cta--inverse { background: var(--bg-inverse); color: var(--text-inverse); }
.mfe-cta--inverse .mfe-cta__text { color: var(--text-inverse-secondary); }
.mfe-cta.mfe-cta--inverse .mfe-cta__deco { color: var(--decor-stroke); }
@media (min-width: 640px) { .mfe-cta__actions { flex-direction: row; flex-wrap: wrap; } }
@media (min-width: 768px) { .mfe-cta { padding: var(--space-16) var(--space-12); } }
@media (min-width: 1024px) { .mfe-cta { padding: var(--space-20) var(--space-16); border-radius: var(--radius-2xl); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } .mfe-cta .mfe-cta__deco { display: block; } }
.mfe-cta__actions { min-width: 0; }
.mfe-cta__actions .mfe-btn { white-space: normal; padding-block: var(--space-3); }

/* ============ footer ============ */
.mfe-footer { background: var(--bg-inverse); color: var(--text-inverse); padding-block: var(--space-16) var(--space-8); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.mfe-footer__top { display: grid; gap: var(--space-10); padding-bottom: var(--space-10); border-bottom: var(--border-width-1) solid var(--border-inverse); }
.mfe-footer__brand { display: grid; gap: var(--space-3); justify-items: start; max-width: 36ch; }
.mfe-footer__tagline { margin: 0; color: var(--text-inverse-secondary); }
.mfe-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.mfe-footer__heading { margin: 0 0 var(--space-3); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--fw-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-inverse-tertiary); }
.mfe-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mfe-footer__link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--text-inverse); text-decoration: none; font-size: 15px; border-radius: var(--radius-xs); }
.mfe-footer__link:hover { color: var(--text-inverse-brand); text-decoration: underline; text-underline-offset: 0.22em; }
.mfe-footer__link .mfe-icon { width: 14px; height: 14px; color: var(--text-inverse-tertiary); }
.mfe-footer__bottom { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-6); font-size: var(--fs-body-sm); color: var(--text-inverse-tertiary); }
.mfe-footer__bottom p { margin: 0; }
.mfe-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.mfe-footer__legal .mfe-footer__link { font-size: var(--fs-body-sm); color: var(--text-inverse-secondary); min-height: 32px; }
@media (min-width: 768px) {
  .mfe-footer { padding-block: var(--space-24) var(--space-10); }
  .mfe-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mfe-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (min-width: 1024px) {
  .mfe-footer { border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
  .mfe-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
}

/* ============ hand-drawn decoration ============ */
.mfe-hl { position: relative; display: inline-block; isolation: isolate; white-space: nowrap; }
.mfe-hl__mark { position: absolute; pointer-events: none; overflow: visible; color: var(--decor-stroke); }
.mfe-hl__mark path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.mfe-hl--underline .mfe-hl__mark { left: -3%; width: 106%; bottom: -0.16em; height: 0.3em; }
.mfe-hl--underline .mfe-hl__mark path { stroke-width: 7; }
.mfe-hl--marker .mfe-hl__mark { z-index: -1; left: -0.12em; right: -0.12em; width: calc(100% + 0.24em); top: 0.12em; height: 0.86em; color: var(--decor-marker); }
.mfe-hl--marker .mfe-hl__mark path { fill: currentColor; stroke: none; }
.mfe-hl--circle .mfe-hl__mark { left: -0.2em; top: -0.16em; width: calc(100% + 0.4em); height: calc(100% + 0.32em); }
.mfe-hl--circle .mfe-hl__mark path { stroke-width: 4; }
.mfe-hl--draw .mfe-hl__mark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mfe-draw var(--duration-draw) var(--ease-draw) 240ms forwards; }
.mfe-hl--draw.mfe-hl--marker .mfe-hl__mark { transform-origin: left center; animation: mfe-marker var(--duration-draw) var(--ease-draw) 240ms both; }
@keyframes mfe-draw { to { stroke-dashoffset: 0; } }
@keyframes mfe-marker { from { transform: scaleX(0); } }

.mfe-arrow { display: inline-block; color: var(--decor-stroke); overflow: visible; pointer-events: none; }
.mfe-arrow path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mfe-arrow--flip { transform: scaleX(-1); }
.mfe-annotation { display: inline-flex; align-items: flex-end; gap: var(--space-1); color: var(--text-annotation); transform: rotate(var(--_rot, -4deg)); transform-origin: left bottom; }
.mfe-annotation__text { font-family: var(--font-hand); font-size: var(--fs-annotation); line-height: var(--lh-annotation); font-weight: 400; white-space: nowrap; }
.mfe-annotation--stacked { flex-direction: column; align-items: flex-start; }

/* ============ motion preferences ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .mfe-hl--draw .mfe-hl__mark path { stroke-dashoffset: 0; animation: none !important; }
  .mfe-hl--draw.mfe-hl--marker .mfe-hl__mark { animation: none !important; }
  .mfe-spinner { animation-duration: 1600ms !important; animation-iteration-count: infinite !important; }
  .mfe-card--interactive:hover, .mfe-flow__tile:hover { transform: none; }
}
@media (forced-colors: active) {
  .mfe-btn, .mfe-icon-btn, .mfe-tag, .mfe-badge, .mfe-card, .mfe-alert, .mfe-toast { border-color: CanvasText; }
  .mfe-check__input:checked + .mfe-check__box, .mfe-switch[aria-checked="true"] .mfe-switch__track { background: Highlight; }
  .mfe-hl__mark { display: none; }
}

/* ============ MyFlowEasy website: page layout on top of the design system ============ */
/* Single, deliberate light theme: the brand's white canvas in every viewer theme. */
:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body { background: var(--bg-page); color: var(--text-primary); }
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: calc(var(--z-sticky) + 1); background: var(--bg-page); pointer-events: none;
}
.mfe-header { top: env(safe-area-inset-top, 0px); }

/* side gutters that also clear a phone's side system bars */
.mfe-container {
  padding-left: max(var(--page-margin-mobile), env(safe-area-inset-left, 0px));
  padding-right: max(var(--page-margin-mobile), env(safe-area-inset-right, 0px));
}
@media (min-width: 768px) {
  .mfe-container {
    padding-left: max(var(--page-margin-tablet), env(safe-area-inset-left, 0px));
    padding-right: max(var(--page-margin-tablet), env(safe-area-inset-right, 0px));
  }
}
@media (min-width: 1024px) {
  .mfe-container {
    padding-left: max(var(--page-margin-desktop), env(safe-area-inset-left, 0px));
    padding-right: max(var(--page-margin-desktop), env(safe-area-inset-right, 0px));
  }
}
.mfe-toast-region {
  left: max(var(--space-4), env(safe-area-inset-left, 0px));
  right: max(var(--space-4), env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
  .mfe-toast-region:not(.mfe-toast-region--inline) {
    left: auto; right: max(var(--space-6), env(safe-area-inset-right, 0px));
    bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  }
}
.mfe-mobilenav__top { padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }
.mfe-mobilenav__foot { padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); }

/* sections reached from the menu take focus without a ring around the whole block */
[tabindex="-1"]:focus { outline: none; }

/* Sobre */
.hp-about { align-items: end; margin-bottom: var(--space-12); }
.hp-about .mfe-section-head { margin-bottom: 0; }
.hp-about .mfe-prose p:last-child { margin-bottom: 0; }
.hp-features { padding-top: var(--space-10); border-top: var(--border-width-1) solid var(--border-default); }

/* Perguntas frequentes */
.hp-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.hp-faq .mfe-section-head { margin-bottom: 0; }
@media (min-width: 1024px) {
  .hp-faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-16); align-items: start; }
  .hp-faq .mfe-section-head { position: sticky; top: calc(var(--size-header) + var(--space-8)); }
}

/* Contacto */
.hp-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
.hp-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.hp-contact__list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); color: var(--text-secondary); min-width: 0; }
.hp-contact__list .mfe-icon { color: var(--text-brand); }
.hp-email { font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.hp-contact__note { margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--text-tertiary); max-width: 44ch; }
.hp-contact__delivery { margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--text-secondary); }
.mfe-form .mfe-field__hint, .mfe-form .mfe-field__error, .mfe-form .mfe-check__text { min-width: 0; overflow-wrap: anywhere; }
.mfe-form > *, #form-status { min-width: 0; }
@media (max-width: 639px) {
  .hp-contact { padding: var(--space-8) var(--space-4); gap: var(--space-6); }
  .hp-contact .mfe-form { padding: var(--space-6) var(--space-4); }
  .hp-contact .mfe-form button[type="submit"] { width: 100%; }
  .hp-contact .mfe-alert { padding: var(--space-3); gap: var(--space-2); }
}
@media (min-width: 1024px) {
  .hp-contact { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-16); align-items: start; }
}
.mfe-footer__link { overflow-wrap: anywhere; }