/* Mobile layer (≤780px). Loaded with media="(max-width: 780px)" and scoped to .m-* classes,
   so desktop rules never reach these screens and nothing here reaches desktop.
   Visual source of truth: PROJECT_DOCS/mobile-mockups (approved boards). */
:root {
  --m-page: #fefaf1;
  --m-surface: #fefcf7;
  --m-surface-2: #f8f2e6;
  --m-surface-3: #f6f3ec;
  --m-surface-note: #f6f1e4;
  --m-tab-on: #f4ecdc;
  --m-tab-ring: #e6dac3;
  --m-band: #f6ead0;
  --m-band-card: #f8efda;
  --m-border: #e9e2d5;
  --m-border-strong: #d2c8b8;
  --m-border-note: #e7e1d5;
  --m-divider: #efe9de;
  --m-ink: #001808;
  --m-forest: #10321f;
  --m-green: #1f5236;
  --m-green-mid: #1a4630;
  --m-muted: #53605a;
  --m-muted-2: #8a7a5c;
  --m-gold: #c99a52;
  --m-gold-text: #9c6c1c;
  --m-gold-deep: #6b5418;
  --m-grey-icon: #5b665f;
  --m-ring: #b8ad9b;
  --m-input: #d9cfbd;
  --m-ask: #fff5df;
  --m-serif: Georgia, "Times New Roman", serif;
  --m-sans: Inter, system-ui, sans-serif;
  --m-btn-primary: linear-gradient(180deg, #2b5c40 0%, #1a4630 48%, #10321f 100%);
  --m-btn-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 6px 14px rgba(16, 50, 31, 0.28), 0 1px 2px rgba(16, 50, 31, 0.3);
  --m-btn-secondary: linear-gradient(180deg, #fefcf7 0%, #f4eee2 100%);
  --m-btn-secondary-shadow: inset 0 1px 0 #ffffff, 0 3px 8px rgba(20, 24, 18, 0.08), 0 1px 2px rgba(20, 24, 18, 0.08);
  --m-card-shadow: 0 8px 22px rgba(20, 24, 18, 0.05);
  --m-dome: radial-gradient(ellipse 78% 42% at 50% 20%, rgba(255, 255, 255, 0.2) 0 96%, transparent 100%), #1f5236;
  --m-type-6: 0.40625rem;
  --m-type-8: 0.5rem;
  --m-type-9: 0.59375rem;
  --m-type-10: 0.625rem;
  --m-type-11: 0.6875rem;
  --m-type-12: 0.75rem;
  --m-type-13: 0.8125rem;
  --m-type-14: 0.875rem;
  --m-type-15: 0.9375rem;
  --m-type-16: 1rem;
  --m-type-17: 1.0625rem;
  --m-type-18: 1.125rem;
  --m-type-20: 1.25rem;
  --m-type-22: 1.375rem;
  --m-type-23: 1.4375rem;
  --m-type-24: 1.5rem;
  --m-type-28: 1.75rem;
  --m-type-34: 2.125rem;
  --m-weight-400: 400;
  --m-weight-500: 500;
  --m-weight-600: 600;
  --m-weight-700: 700;
  --m-track-caps: 0.1em;
}

/* ---------- Page shell ---------- */
.m-page { min-height: 100vh; background: var(--m-page); color: var(--m-ink); font-family: var(--m-sans); font-variant-numeric: lining-nums tabular-nums; padding-bottom: 24px; }
.m-page *, .m-page *::before, .m-page *::after { box-sizing: border-box; }
.m-page button { font-family: inherit; }
.m-page a { color: var(--m-green-mid); }
.m-page img { max-width: 100%; }
.m-pad { padding: 0 16px; }
.m-eyebrow { display: block; font-family: var(--m-sans); font-size: var(--m-type-10); font-weight: var(--m-weight-700); letter-spacing: var(--m-track-caps); text-transform: uppercase; color: var(--m-muted); }
.m-eyebrow-gold { color: var(--m-gold-text); }
.m-eyebrow-green { color: var(--m-green); }
.m-eyebrow-grey { color: var(--m-grey-icon); }
.m-serif { font-family: var(--m-serif); font-weight: var(--m-weight-400); }
.m-muted { color: var(--m-muted); }
.m-h1 { margin: 0; font-family: var(--m-serif); font-weight: var(--m-weight-400); font-size: var(--m-type-28); line-height: 1.15; color: var(--m-forest); }
.m-lede { margin: 6px 0 0; font-size: var(--m-type-14); line-height: 1.45; color: var(--m-muted); }
.m-h2 { margin: 0; font-family: var(--m-serif); font-weight: var(--m-weight-400); font-size: var(--m-type-20); color: var(--m-forest); }
.m-section-head { margin: 22px 16px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.m-section-head small { font-size: var(--m-type-11); color: var(--m-muted); }
.m-pill { font-size: var(--m-type-11); font-weight: var(--m-weight-600); color: var(--m-muted); background: #f1ebdf; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.m-provenance { margin: 18px 16px 0; font-size: var(--m-type-12); color: var(--m-muted); text-align: center; }
.m-icon, .m-glyph { flex: none; display: block; }

/* ---------- Header with artwork and wave cut-out ---------- */
.m-header { position: relative; height: 120px; overflow: hidden; flex: none; }
.m-header-tall { height: 160px; }
.m-header-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-header-bar { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; }
.m-header-title { flex: 1 1 auto; min-width: 0; margin: 0; font-weight: var(--m-weight-400); font-family: var(--m-serif); font-size: var(--m-type-20); line-height: 1.1; color: var(--m-forest); text-shadow: 0 1px 12px rgba(255, 236, 200, 0.6); }
.m-header-title-tall { position: absolute; top: 8px; left: 4px; right: 98px; font-size: var(--m-type-23); }
.m-header-tall .m-header-bar { justify-content: flex-end; }
.m-frost { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 253, 250, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; color: var(--m-forest); flex: none; text-decoration: none; padding: 0; cursor: pointer; }
.m-frost[aria-pressed="true"] { color: var(--m-green); background: rgba(255, 253, 250, 0.85); }
.m-wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 40px; display: block; }
.m-header-tall .m-wave { height: 44px; }
.m-wave-band { fill: var(--m-band); }
.m-wave-page .m-wave-edge { fill: var(--m-page); }
.m-wave-card .m-wave-band { fill: var(--m-band-card); }
.m-wave-card .m-wave-edge { fill: var(--m-surface); }
.m-wave-current .m-wave-edge { fill: var(--m-surface-2); }

/* ---------- Buttons ---------- */
.m-btn { min-height: 48px; border-radius: 12px; border: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--m-type-15); font-weight: var(--m-weight-600); text-decoration: none; cursor: pointer; padding: 0 16px; width: 100%; }
.m-btn-primary { background: var(--m-btn-primary); box-shadow: var(--m-btn-primary-shadow); color: #ffffff; }
.m-page a.m-btn-primary { color: #ffffff; }
.m-btn-secondary { border: 1px solid var(--m-border-strong); background: var(--m-btn-secondary); box-shadow: var(--m-btn-secondary-shadow); color: var(--m-ink); }
.m-page a.m-btn-secondary { color: var(--m-ink); }
.m-btn-sm { min-height: 44px; font-size: var(--m-type-14); }
.m-btn[disabled], .m-btn[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.m-btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.m-btn-row-1 { grid-template-columns: 1fr; }
.m-link-btn { border: 0; background: none; padding: 8px 0; font-size: var(--m-type-14); font-weight: var(--m-weight-600); color: var(--m-green); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.m-login-note { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 12px; border: 1px dashed var(--m-border-strong); background: var(--m-surface-2); color: var(--m-muted); font-size: var(--m-type-14); font-weight: var(--m-weight-600); }
.m-login-note button, .m-login-note a { border: 0; background: none; color: var(--m-green); font-weight: var(--m-weight-700); cursor: pointer; padding: 0; font-size: inherit; text-decoration: underline; }

/* ---------- Cards and rows ---------- */
.m-card { margin: 10px 16px 0; background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 18px; box-shadow: var(--m-card-shadow); }
.m-card-pad { padding: 16px; }
.m-card-rows { padding: 0 16px; }
.m-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.m-row + .m-row, .m-rows > * + * { border-top: 1px solid var(--m-divider); }
.m-row-label { flex: 1 1 auto; min-width: 0; font-family: var(--m-serif); font-size: var(--m-type-15); color: var(--m-forest); }
.m-row-label small { display: block; font-family: var(--m-sans); font-size: var(--m-type-12); color: var(--m-muted); margin-top: 2px; line-height: 1.35; }
.m-row-value { font-family: var(--m-serif); font-size: var(--m-type-16); color: var(--m-ink); text-align: right; }
.m-note { margin: 10px 16px 0; padding: 12px 14px; background: var(--m-surface-note); border: 1px solid var(--m-border-note); border-radius: 14px; font-size: var(--m-type-13); line-height: 1.45; color: #1d402c; }
.m-ask { display: flex; gap: 10px; padding: 14px; background: var(--m-ask); border: 1px solid var(--m-border-note); border-radius: 16px; }
.m-ask + .m-ask { margin-top: 8px; }
.m-ask strong { display: block; font-size: var(--m-type-14); font-weight: var(--m-weight-600); }
.m-ask span { display: block; font-size: var(--m-type-13); color: var(--m-muted); margin-top: 3px; line-height: 1.4; }
.m-checkrow { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; }
.m-checkrow + .m-checkrow { border-top: 1px solid var(--m-divider); }
.m-checkrow strong { display: block; font-size: var(--m-type-14); font-weight: var(--m-weight-600); }
.m-checkrow span { display: block; font-size: var(--m-type-12); color: var(--m-muted); margin-top: 2px; line-height: 1.4; }

/* ---------- Spheres ---------- */
.m-sphere { display: inline-block; flex: none; width: var(--m-sphere, 13px); height: var(--m-sphere, 13px); border-radius: 50%; vertical-align: -2px; }
.m-sphere-gold { background: radial-gradient(circle at 35% 30%, #fff4d2 0%, #f1c96a 42%, #c48f2e 80%, #9c6c1c 100%); box-shadow: 0 1px 2px rgba(120, 80, 20, 0.35); }
.m-sphere-silver { background: radial-gradient(circle at 35% 30%, #ffffff 0%, #dfe3e6 42%, #9ea6ac 80%, #6f777d 100%); box-shadow: 0 1px 2px rgba(60, 70, 78, 0.35); }
.m-sphere-bronze { background: radial-gradient(circle at 35% 30%, #fbe3cc 0%, #dc9f68 42%, #a66532 80%, #7a4520 100%); box-shadow: 0 1px 2px rgba(110, 60, 25, 0.35); }
.m-sphere-basic { background: radial-gradient(circle at 35% 30%, #fbf8f1 0%, #ddd5c6 42%, #aa9f8b 80%, #7d725f 100%); box-shadow: 0 1px 2px rgba(90, 80, 60, 0.35); }

/* ---------- Match dial ---------- */
.m-dial { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.m-dial svg { position: absolute; inset: 0; }
.m-dial-track { fill: none; stroke: #eee9dd; stroke-width: 4; }
.m-dial-ring { fill: none; stroke: var(--m-green); stroke-width: 4; stroke-linecap: round; }
.m-dial-muted .m-dial-ring { stroke: #9c8a62; }
.m-dial-text { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.m-dial-score { font-family: var(--m-serif); font-size: var(--m-type-15); line-height: 1; color: var(--m-forest); margin-left: 4px; }
.m-dial-pct { font-size: var(--m-type-8); vertical-align: 4px; }
.m-dial-label { font-size: var(--m-type-6); font-weight: var(--m-weight-700); letter-spacing: var(--m-track-caps); text-transform: uppercase; color: var(--m-gold-deep); margin-top: 2px; }

/* ---------- Status bars (one colour per status, brighter to the right) ---------- */
.m-bar { display: block; height: 10px; border-radius: 999px; background: #e6e0d3; overflow: hidden; }
.m-bar > span { display: block; height: 100%; border-radius: 999px; }
.m-bar-high > span { background: linear-gradient(90deg, #36704b, #4f8b61); }
.m-bar-typical > span { background: linear-gradient(90deg, #d6a63e, #e5be5c); }
.m-bar-low > span { background: linear-gradient(90deg, #b9532a, #cf6f3c); }
.m-status-high { color: var(--m-green-mid); }
.m-status-typical { color: #8a641d; }
.m-status-low { color: #a3471b; }

/* ---------- Corner badge ---------- */
.m-corner { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; filter: drop-shadow(0 1px 0.5px rgba(176, 138, 48, 0.3)); }
.m-corner-badge { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 14px; color: #5a4612; font-size: var(--m-type-10); font-weight: var(--m-weight-700); line-height: 1; letter-spacing: 0.07em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); white-space: nowrap; background: linear-gradient(180deg, #fcf4dc 0%, #f6e6b8 40%, #eed592 72%, #e8cb80 100%) 0 0 / 100% 40px no-repeat; border-bottom-right-radius: 14px; border-top-left-radius: 17px; }
.m-corner-r { position: absolute; top: 0; left: calc(100% - 1px); width: 15px; height: 14px; background: linear-gradient(180deg, #fcf4dc 0%, #f6e6b8 40%, #eed592 72%, #e8cb80 100%) 0 0 / 15px 40px no-repeat; -webkit-mask: radial-gradient(circle at 100% 100%, transparent 13.6px, #000 14px); mask: radial-gradient(circle at 100% 100%, transparent 13.6px, #000 14px); }
.m-corner-b { position: absolute; top: calc(100% - 1px); left: 0; width: 14px; height: 15px; background: linear-gradient(180deg, #fcf4dc 0%, #f6e6b8 40%, #eed592 72%, #e8cb80 100%) 0 -25px / 14px 40px no-repeat; -webkit-mask: radial-gradient(circle at 100% 100%, transparent 13.6px, #000 14px); mask: radial-gradient(circle at 100% 100%, transparent 13.6px, #000 14px); }

/* ---------- Count tabs ---------- */
.m-count-tabs { display: flex; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--m-divider); }
.m-count-tab { flex: 1 1 0; border: 0; border-radius: 12px; padding: 10px 0 9px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; background: transparent; transition: background 0.2s ease; }
.m-count-tab[aria-selected="true"] { background: var(--m-tab-on); box-shadow: inset 0 0 0 1px var(--m-tab-ring); }
.m-count-num { font-family: var(--m-serif); font-size: var(--m-type-24); line-height: 1; margin-top: 2px; color: var(--m-forest); }
.m-tone-green { color: var(--m-green); }
.m-tone-gold { color: var(--m-gold-text); }
.m-tone-grey { color: var(--m-grey-icon); }
.m-count-label { font-size: var(--m-type-10); font-weight: var(--m-weight-700); letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-muted); }
.m-count-sub { font-size: var(--m-type-11); color: var(--m-muted-2); }
.m-group-head { padding: 14px 0 4px; font-size: var(--m-type-10); font-weight: var(--m-weight-700); letter-spacing: var(--m-track-caps); text-transform: uppercase; }

/* ---------- Why panel ---------- */
.m-why-button { flex: none; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: flex-end; cursor: pointer; }
.m-why { margin-top: 10px; padding: 12px 14px; background: var(--m-surface-note); border: 1px solid var(--m-border-note); border-radius: 14px; display: flex; gap: 10px; align-items: flex-start; }
.m-why[hidden] { display: none; }
.m-why > div { flex: 1 1 auto; }
.m-why p { font-size: var(--m-type-13); line-height: 1.45; color: #1d402c; margin: 3px 0 0; }
.m-why-close { flex: none; width: 28px; height: 28px; margin: -4px -6px 0 0; border: 0; background: transparent; color: var(--m-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* ---------- Tabs nav (Overview / Hospital / Extras / Pricing) ---------- */
.m-tabs { position: sticky; top: 0; z-index: 20; margin-top: 8px; padding: 8px 16px; background: rgba(254, 250, 241, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(31, 82, 54, 0.1); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.m-tabs button { min-height: 36px; border-radius: 10px; border: 0; background: #eee9dd; color: var(--m-forest); font-size: var(--m-type-14); font-weight: var(--m-weight-500); cursor: pointer; padding: 0 2px; }
.m-tabs button[aria-selected="true"] { background: var(--m-btn-primary); box-shadow: var(--m-btn-primary-shadow); color: #ffffff; font-weight: var(--m-weight-600); }
.m-segment { flex: 1 1 auto; padding: 4px; background: #eee9dd; border-radius: 14px; box-shadow: inset 0 1px 3px rgba(20, 24, 18, 0.1); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.m-segment button { min-height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--m-forest); font-size: var(--m-type-14); font-weight: var(--m-weight-500); cursor: pointer; }
.m-segment button[aria-pressed="true"] { background: var(--m-btn-primary); box-shadow: var(--m-btn-primary-shadow); color: #ffffff; font-weight: var(--m-weight-600); }

@media (prefers-reduced-motion: reduce) {
  .m-count-tab, .m-page * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Results ---------- */
.m-toolbar { padding: 4px 16px 0; display: flex; gap: 10px; align-items: flex-start; }
.m-toolbar > * { flex: 1 1 0; min-width: 0; }
.m-toolbar .m-btn-sm { font-weight: var(--m-weight-500); border-radius: 10px; }
.m-sort { position: relative; }
.m-sort-summary { list-style: none; justify-content: space-between; padding: 0 12px 0 14px; white-space: nowrap; }
.m-sort-summary::-webkit-details-marker { display: none; }
.m-sort-menu { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; padding: 6px; background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 14px; box-shadow: 0 12px 30px rgba(20, 24, 18, 0.14); display: flex; flex-direction: column; gap: 2px; }
.m-sort-menu button { min-height: 44px; border: 0; border-radius: 10px; background: transparent; text-align: left; padding: 0 12px; font-size: var(--m-type-14); color: var(--m-ink); cursor: pointer; }
.m-sort-menu button[aria-pressed="true"] { background: var(--m-tab-on); font-weight: var(--m-weight-600); }
.m-message { margin: 12px 16px 0; padding: 10px 14px; border-radius: 12px; background: var(--m-surface-note); border: 1px solid var(--m-border-note); font-size: var(--m-type-13); }
.m-notes { margin: 12px 16px 0; }
.m-card-list { padding: 14px 16px 8px; display: flex; flex-direction: column; gap: 16px; }
.m-plan-card { position: relative; isolation: isolate; background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(20, 24, 18, 0.065); }
.m-plan-card-open { box-shadow: 0 14px 40px rgba(20, 24, 18, 0.08); }
.m-card-art { position: relative; height: 86px; overflow: hidden; }
.m-plan-card-open .m-card-art { height: 92px; }
.m-card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-card-art .m-wave { height: 30px; }
.m-card-body { padding: 6px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.m-card-id { display: flex; align-items: center; gap: 12px; }
.m-card-id-text { flex: 1 1 auto; min-width: 0; }
.m-logo { display: block; flex: none; object-fit: contain; object-position: left center; }
.m-logo-lg { width: 72px; height: 28px; }
.m-logo-md { width: 64px; height: 26px; }
.m-logo-sm { width: 50px; height: 20px; }
.m-plan-name { font-size: var(--m-type-15); font-weight: var(--m-weight-600); line-height: 1.25; }
.m-plan-masked { font-size: var(--m-type-11); color: var(--m-muted-2); margin-top: 2px; }
.m-card-cover { font-size: var(--m-type-13); color: var(--m-muted); margin-top: 2px; }
.m-tier-word { font-weight: var(--m-weight-600); color: #8a641d; }
.m-tier-silver { color: #6f777d; }
.m-tier-bronze { color: #8a5527; }
.m-tier-basic { color: #7d725f; }
.m-heart { flex: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--m-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.m-heart[aria-pressed="true"] { color: #a3471b; }
.m-heart[aria-pressed="true"] path { fill: currentColor; }
.m-dial-button { flex: none; border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: 50%; }
.m-split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-split-cell:first-child { padding-right: 12px; border-right: 1px solid var(--m-border-note); }
.m-split-cell + .m-split-cell { padding-left: 16px; }
.m-big { font-family: var(--m-serif); font-size: var(--m-type-28); line-height: 1; color: var(--m-ink); }
.m-big-text { font-size: var(--m-type-18); line-height: 1.2; padding-top: 6px; }
.m-split-cell small { display: block; font-size: var(--m-type-12); color: var(--m-muted); margin-top: 4px; }
.m-after { color: var(--m-green) !important; font-weight: var(--m-weight-600); }
.m-card-checks { background: var(--m-surface-3); border-radius: 14px; padding: 4px 12px; }
.m-card-checks .m-checkrow { padding: 9px 0; }
.m-card-checks .m-checkrow + .m-checkrow { border-top-color: var(--m-border-note); }
.m-card-actions { display: flex; flex-direction: column; gap: 10px; }
.m-more-head { border: 0; border-top: 1px solid var(--m-border-note); background: none; padding: 14px 0 0; display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; color: var(--m-ink); }
.m-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; background: var(--m-surface-3); border-radius: 14px; padding: 14px; }
.m-more-grid span { display: block; font-size: var(--m-type-11); color: var(--m-muted); }
.m-more-grid b { display: flex; align-items: center; gap: 6px; font-size: var(--m-type-13); font-weight: var(--m-weight-600); margin-top: 4px; }
.m-h2-tight { margin-top: 4px; }
.m-why-list .m-checkrow { padding: 10px 0; }
.m-why-list .m-checkrow + .m-checkrow { border-top-color: var(--m-border-note); }
.m-split { position: relative; }
.m-split-row { display: flex; gap: 10px; align-items: center; padding: 2px 0 14px; }
.m-split-row + .m-split-plus + .m-split-row { padding: 14px 0 4px; }
.m-split-body { flex: 1 1 auto; min-width: 0; }
.m-split-body .m-eyebrow { font-size: var(--m-type-11); letter-spacing: 0.08em; }
.m-split-name { font-family: var(--m-serif); font-size: var(--m-type-16); margin-top: 4px; color: var(--m-forest); }
.m-split-meta { display: flex; gap: 14px; margin-top: 6px; font-size: var(--m-type-12); color: var(--m-muted); flex-wrap: wrap; }
.m-split-meta b { font-family: var(--m-serif); font-size: var(--m-type-15); font-weight: var(--m-weight-400); color: var(--m-ink); }
.m-split-actions { flex: none; display: flex; align-items: center; gap: 2px; }
.m-split-actions .m-heart { width: 34px; }
.m-split-plus { position: relative; height: 1px; background: var(--m-border-note); }
.m-split-plus span { position: absolute; left: 50%; top: -13px; margin-left: -13px; width: 26px; height: 26px; border-radius: 50%; background: var(--m-surface); border: 1px solid var(--m-border-note); display: flex; align-items: center; justify-content: center; color: var(--m-forest); font-size: var(--m-type-16); }
/* Board P3: offers on the reader's matches, and the offer line on a plan card. Both open the
   shared offer sheet (src/offer-sheet.js). */
.m-card-offer { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px; padding: 9px 12px; border-radius: 12px; border: 1px solid #ecdfc4; background: #fbf3e3; color: var(--m-ink); font: inherit; font-size: var(--m-type-13); text-align: left; cursor: pointer; }
.m-card-offer svg { flex: none; color: var(--m-gold-text); }
.m-card-offer b { flex: 1 1 auto; min-width: 0; font-weight: var(--m-weight-600); }
.m-card-offer-ends { flex: none; padding: 3px 8px; border-radius: 999px; background: #fbe7cf; color: #8a4a12; font-size: var(--m-type-11); font-weight: var(--m-weight-700); }
.m-offers { margin: 16px 16px 0; padding: 18px 16px; border-radius: 20px; border: 1px solid #ecdfc4; background: linear-gradient(180deg, #fbf3e3 0%, #f8efdc 100%); }
.m-offers-head { display: flex; align-items: center; gap: 12px; }
.m-offers-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ecdfc4; background: var(--m-surface); color: var(--m-gold-text); }
.m-offers-eyebrow { display: block; font-size: var(--m-type-11); font-weight: var(--m-weight-700); letter-spacing: .1em; text-transform: uppercase; color: var(--m-gold-text); }
.m-offers-head h2 { margin: 3px 0 0; font-family: var(--m-serif); font-size: var(--m-type-20); font-weight: var(--m-weight-400); line-height: 1.15; color: var(--m-forest); }
.m-offers-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.m-offers-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--m-line, #e9e2d5); background: var(--m-surface); font: inherit; text-align: left; cursor: pointer; }
.m-offers-row img { flex: none; width: 52px; height: 20px; object-fit: contain; object-position: left center; }
.m-offers-fund { flex: none; max-width: 70px; font-size: var(--m-type-11); font-weight: var(--m-weight-700); color: var(--m-forest); }
.m-offers-row b { flex: 1 1 auto; min-width: 0; font-size: var(--m-type-14); font-weight: var(--m-weight-600); color: var(--m-forest); }
.m-offers-row span { flex: none; font-size: var(--m-type-12); color: var(--m-muted); }
.m-offers-all { display: flex; width: 100%; margin-top: 12px; text-decoration: none; }
.m-offers-note { margin: 10px 0 0; font-size: var(--m-type-12); color: var(--m-muted); text-align: center; }
.m-reset { text-align: center; margin-top: 6px; }
.m-results { padding-bottom: 96px; }
.m-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(254, 252, 247, 0.96); border-top: 1px solid var(--m-border); box-shadow: 0 -6px 18px rgba(20, 24, 18, 0.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.m-bottom-nav-links a { text-decoration: none; }
.m-bottom-nav button, .m-bottom-nav-links a { position: relative; min-height: 52px; border: 0; border-radius: 12px; background: transparent; color: var(--m-forest); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: var(--m-type-11); font-weight: var(--m-weight-600); cursor: pointer; }
.m-bottom-nav button[aria-current="page"], .m-bottom-nav-links a[aria-current="page"] { background: var(--m-tab-on); box-shadow: inset 0 0 0 1px var(--m-tab-ring); }
.m-bottom-nav b { position: absolute; top: 4px; right: calc(50% - 20px); min-width: 16px; height: 16px; border-radius: 999px; background: var(--m-green); color: #ffffff; font-size: var(--m-type-10); display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* ---------- Plan page ---------- */
.m-plan .m-header { height: 120px; }
.m-identity { padding: 0 16px; margin-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.m-identity-logos { display: flex; gap: 10px; align-items: center; }
.m-logo-xl { width: 96px; height: 34px; }
.m-identity-row { display: flex; align-items: flex-start; gap: 10px; }
.m-identity-text { flex: 1 1 auto; min-width: 0; }
.m-identity-name { margin: 0; font-family: var(--m-serif); font-weight: var(--m-weight-400); font-size: var(--m-type-24); line-height: 1.15; color: var(--m-ink); }
.m-identity-meta { font-size: var(--m-type-14); color: var(--m-muted); margin-top: 4px; }
.m-tab-intro { padding-top: 20px; }
.m-gap { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.m-chev { flex: none; display: flex; align-items: center; justify-content: flex-end; width: 32px; height: 32px; margin: -4px 0; border: 0; background: transparent; color: var(--m-forest); cursor: pointer; padding: 0; }
.m-cover-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.m-cover-text { flex: 1 1 auto; min-width: 0; }
.m-cover-name { font-family: var(--m-serif); font-size: var(--m-type-17); color: var(--m-forest); margin-top: 3px; }
.m-cover-sub { font-size: var(--m-type-12); color: var(--m-muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.m-rows > .m-cover-row + .m-row, .m-rows > .m-row + .m-row, .m-rows > * + * { border-top: 1px solid var(--m-divider); }
.m-promo { margin-top: 8px; }
.m-promo summary { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px 0 11px; border-radius: 999px; background: linear-gradient(#fcf4dc, #f6e6b8 50%, #eed592); border: 1px solid rgba(176, 138, 48, 0.45); box-shadow: inset 0 1px rgba(255, 255, 255, 0.85), 0 1px 3px rgba(110, 85, 20, 0.18); color: #5a4612; font-size: var(--m-type-11); font-weight: var(--m-weight-700); letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); cursor: pointer; list-style: none; }
.m-promo summary::-webkit-details-marker { display: none; }
/* The narrowest phones (320px) leave the cover row too tight for the pill at full tracking. */
@media (max-width: 359px) { .m-promo summary { gap: 5px; padding: 0 9px 0 8px; font-size: var(--m-type-10); letter-spacing: 0.04em; } }
.m-promo-box { margin-top: 8px; background: #fbf3df; border: 1px solid #ecd9a8; border-radius: 12px; padding: 10px 12px; font-size: var(--m-type-12); line-height: 1.4; color: var(--m-forest); display: flex; flex-direction: column; gap: 3px; }
.m-promo-box strong { font-family: var(--m-serif); font-size: var(--m-type-14); font-weight: var(--m-weight-400); }
.m-promo-box span { color: var(--m-muted); }
.m-promo-box a { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--m-weight-600); color: var(--m-green); }
.m-pay { margin-top: 12px; }
.m-pay-head { display: flex; align-items: center; gap: 12px; }
.m-pay-head > div { flex: 1 1 auto; }
.m-pay-total { margin-top: 5px; }
.m-pay-total .m-serif { font-size: var(--m-type-28); color: var(--m-ink); }
.m-pay-total small { font-size: var(--m-type-13); color: var(--m-muted); }
.m-pay-basis { font-size: var(--m-type-12); color: var(--m-muted); margin-top: 2px; }
.m-pay-after { font-size: var(--m-type-12); color: var(--m-green); font-weight: var(--m-weight-600); margin-top: 4px; }
.m-pay-bar { display: flex; gap: 3px; height: 8px; margin-top: 12px; }
.m-pay-bar span:first-child { border-radius: 999px 0 0 999px; background: linear-gradient(90deg, #36704b, #4f8b61); }
.m-pay-bar span:last-child { border-radius: 0 999px 999px 0; background: linear-gradient(90deg, #d6a63e, #e5be5c); }
.m-pay-legend { display: flex; gap: 16px; margin-top: 8px; font-size: var(--m-type-12); color: var(--m-muted); }
.m-pay-legend b { color: var(--m-ink); font-weight: var(--m-weight-600); }
.m-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.m-dot-green { background: #36704b; }
.m-dot-gold { background: #d6a63e; }
.m-join a { min-height: 50px; }
.m-fine { font-size: var(--m-type-12); color: var(--m-muted); line-height: 1.4; margin: 8px 0 0; }
.m-center { text-align: center; }
.m-chosen { padding: 13px 0; }
.m-chosen-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.m-chosen-amt { font-family: var(--m-serif); font-size: var(--m-type-20); }
.m-chosen .m-bar { height: 8px; margin-top: 8px; }
.m-chosen-foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--m-type-12); font-weight: var(--m-weight-600); }
.m-chosen-foot .m-muted { font-weight: var(--m-weight-400); }
.m-ask-list { margin-top: 10px; }
.m-matched { margin-top: 10px; }
.m-matched summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 0; }
.m-matched summary::-webkit-details-marker { display: none; }
.m-matched[open] summary { border-bottom: 1px solid var(--m-divider); }
.m-matched-pct { font-size: var(--m-type-24); line-height: 1; color: var(--m-green); }
.m-matched-verdict { flex: 1 1 auto; font-size: var(--m-type-13); font-weight: var(--m-weight-600); color: var(--m-forest); }
.m-matched-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: var(--m-type-12); font-weight: var(--m-weight-600); color: var(--m-green); }
.m-matched[open] .m-matched-toggle .m-glyph { transform: rotate(180deg); }
.m-matched-row { padding: 11px 0; }
.m-matched-row + .m-matched-row { border-top: 1px solid var(--m-divider); }
.m-matched-row > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.m-matched-row strong { font-size: var(--m-type-14); font-weight: var(--m-weight-600); color: var(--m-forest); }
.m-matched-row p { margin: 3px 0 0; font-size: var(--m-type-12); line-height: 1.4; color: var(--m-muted); }
.m-match-word { flex: none; font-size: var(--m-type-10); font-weight: var(--m-weight-700); letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-green); }
.m-match-unmet { color: #a3471b; }
.m-match-unknown { color: var(--m-gold-text); }
.m-match-context { color: #6b736d; }
.m-matched-note { margin: 0 0 14px; padding: 12px; background: var(--m-surface-note); border: 1px solid var(--m-border-note); border-radius: 12px; font-size: var(--m-type-12); line-height: 1.45; color: #1d402c; }
.m-checkrow-compact { padding: 11px 0; align-items: center; }
.m-area { font-family: var(--m-serif); font-size: var(--m-type-15); font-weight: var(--m-weight-400) !important; color: var(--m-forest); }
.m-area.m-muted { color: var(--m-muted); }
.m-pick { font-style: normal; font-family: var(--m-sans); font-size: var(--m-type-10); font-weight: var(--m-weight-700); letter-spacing: 0.06em; text-transform: uppercase; color: var(--m-gold-text); background: #fbf3df; border-radius: 999px; padding: 2px 6px; margin-left: 4px; vertical-align: 2px; }
.m-see-all { width: 100%; border: 0; border-top: 1px solid var(--m-divider); background: transparent; display: flex; justify-content: space-between; align-items: center; padding: 13px 0; font-size: var(--m-type-14); font-weight: var(--m-weight-600); color: var(--m-green); cursor: pointer; }
.m-open .m-see-all { display: none; }
.m-excess-value { display: block; font-family: var(--m-serif); font-size: var(--m-type-17); color: var(--m-forest); margin-top: 3px; }
.m-svc-icon { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #eee9dd; box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(20, 24, 18, 0.1); color: var(--m-green-mid); display: flex; align-items: center; justify-content: center; }
.m-seg-row { margin-top: 16px; }
.m-segment button[aria-selected="true"] { background: var(--m-btn-primary); box-shadow: var(--m-btn-primary-shadow); color: #ffffff; font-weight: var(--m-weight-600); }
.m-tab-panel[hidden] { display: none; }
.m-xrow-head { width: 100%; border: 0; background: transparent; display: flex; align-items: center; gap: 12px; padding: 13px 0; cursor: pointer; text-align: left; color: var(--m-ink); }
.m-xrow-id { flex: 0 0 108px; display: flex; flex-direction: column; min-width: 0; }
.m-xrow-title { font-family: var(--m-serif); font-size: var(--m-type-14); color: var(--m-forest); }
.m-xrow-big { font-size: var(--m-type-22); line-height: 1.15; }
.m-xrow-id small { font-size: var(--m-type-12); color: var(--m-muted); }
.m-xrow-vs { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--m-type-12); font-weight: var(--m-weight-600); }
.m-xrow-chev { flex: none; color: var(--m-forest); transition: transform 0.2s ease; }
.m-open .m-xrow-chev { transform: rotate(90deg); }
.m-xpanel { margin: 0 0 13px; padding: 12px; background: #fcf9f2; border: 1px solid #efe8da; border-radius: 14px; }
.m-xpanel[hidden] { display: none; }
.m-xstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
.m-xstats > div { padding: 6px 4px; display: flex; flex-direction: column; gap: 3px; }
.m-xstats b { font-size: var(--m-type-18); line-height: 1.2; color: var(--m-forest); font-weight: var(--m-weight-400); }
.m-xstats small { font-size: var(--m-type-11); color: var(--m-muted); }
.m-xhead { margin: 14px 0 6px; }
.m-xcompare { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--m-type-12); font-weight: var(--m-weight-600); }
.m-xcompare small { font-size: var(--m-type-11); font-weight: var(--m-weight-400); color: var(--m-muted); }
.m-xbar { position: relative; margin-top: 8px; }
.m-xbar i { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: var(--m-forest); opacity: 0.55; }
.m-xscale { display: flex; justify-content: space-between; font-size: var(--m-type-11); color: var(--m-muted-2); margin-top: 5px; }
.m-xitems > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: var(--m-type-13); color: var(--m-forest); }
.m-xitems > div + div { border-top: 1px solid var(--m-divider); }
.m-xitems small { font-size: var(--m-type-11); color: var(--m-muted-2); }
.m-xitems b { font-size: var(--m-type-15); font-weight: var(--m-weight-400); color: var(--m-ink); white-space: nowrap; }
.m-xnote { font-size: var(--m-type-12); line-height: 1.4; color: var(--m-muted); margin: 10px 0 0; }
.m-pool { padding-top: 12px; }
.m-pool + *, .m-pool:not(:first-child) { border-top: 1px solid var(--m-divider); }
.m-note-leaf { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; }
.m-note-leaf strong { display: block; font-size: var(--m-type-14); margin-bottom: 2px; color: var(--m-forest); font-weight: var(--m-weight-400); }
.m-leaf { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--m-surface); box-shadow: 0 1px 3px rgba(20, 24, 18, 0.12); color: var(--m-green-mid); display: flex; align-items: center; justify-content: center; }
.m-bill { margin-top: 12px; overflow: hidden; }
.m-bill-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--m-divider); }
.m-bill-id { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.m-bill-head > .m-eyebrow { flex: 1 1 auto; }
.m-bill-price { text-align: right; }
.m-bill-price .m-serif { display: block; font-size: var(--m-type-24); color: var(--m-forest); }
.m-bill-price small { font-size: var(--m-type-11); color: var(--m-muted); }
.m-bill-body { padding: 0 16px 14px; }
.m-bill-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-bill-figs > div { padding: 10px 0; display: flex; flex-direction: column; gap: 2px; }
.m-bill-figs > div:first-child { border-right: 1px solid var(--m-divider); }
.m-bill-figs > div + div { padding-left: 14px; }
.m-bill-figs b { font-size: var(--m-type-18); font-weight: var(--m-weight-400); color: var(--m-ink); }
.m-bill-figs small { font-size: var(--m-type-12); color: var(--m-muted); }
.m-bill-body .m-row { border-top: 1px solid var(--m-divider); }
.m-bill-after { color: var(--m-green); font-weight: var(--m-weight-700); font-size: var(--m-type-15); }
.m-about { padding: 8px 16px 12px; }
.m-about-line { display: flex; gap: 10px; padding: 7px 0; font-size: var(--m-type-13); line-height: 1.4; color: #1d402c; }
.m-loading { margin: 24px 16px; text-align: center; color: var(--m-muted); font-size: var(--m-type-14); }
.m-loading span { display: block; height: 14px; border-radius: 8px; background: #efe9de; margin: 10px 0; }
.m-loading span:nth-child(2) { width: 80%; }
.m-loading span:nth-child(3) { width: 60%; }

/* ---------- Compare ---------- */
.m-cmp-card-frame { position: relative; margin: 14px 6px 0; padding: 0; overflow: hidden; border-radius: 18px; border: 1px solid #e3d9c8; box-shadow: 0 12px 16px -12px rgba(20, 24, 18, 0.1); }
.m-cmp-scroll { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 94px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 38px), rgba(0, 0, 0, 0.7) calc(100% - 22px), rgba(0, 0, 0, 0.3) calc(100% - 10px), transparent calc(100% - 3px)); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 38px), rgba(0, 0, 0, 0.7) calc(100% - 22px), rgba(0, 0, 0, 0.3) calc(100% - 10px), transparent calc(100% - 3px)); }
.m-cmp-scroll::-webkit-scrollbar { display: none; }
.m-cmp-scroll.m-fade-off { -webkit-mask-image: none; mask-image: none; }
.m-cmp-scroll.m-cmp-following { scroll-snap-type: none; }
.m-cmp-grid { width: max-content; }
.m-cmp-row { display: grid; grid-template-columns: 94px repeat(var(--m-cols), 118px); align-items: stretch; }
.m-cmp-label { position: sticky; left: 0; z-index: 2; background: var(--m-surface); padding: 10px 2px 10px 10px; font-family: var(--m-serif); font-size: var(--m-type-13); line-height: 1.3; overflow-wrap: break-word; hyphens: auto; color: var(--m-forest); background-image: linear-gradient(var(--m-divider), var(--m-divider)); background-repeat: no-repeat; background-position: 12px 100%; background-size: calc(100% - 12px) 1px; }
.m-cmp-label-head { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 12px; font-family: var(--m-sans); }
.m-cmp-label-head span { font-size: var(--m-type-11); font-weight: var(--m-weight-600); color: var(--m-muted); }
.m-cmp-label-head small { font-size: var(--m-type-11); color: var(--m-muted-2); margin-top: 2px; }
.m-cmp-label-blank { background-image: none; padding: 0; }
.m-cmp-row:last-child .m-cmp-label { background-image: none; }
.m-cmp-head { padding: 10px 4px 8px; border-bottom: 1px solid var(--m-divider); scroll-snap-align: start; position: relative; transition: transform .18s ease; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* The last column can never scroll to its start, so give the swipe a stop at the far end too;
   without it Safari springs the table back to the first column. */
.m-cmp-head:last-child { scroll-snap-align: end; }
.m-cmp-head.is-lifted { z-index: 4; transition: none; filter: drop-shadow(0 14px 18px rgba(20, 24, 18, 0.22)); }
.m-cmp-head.is-lifted .m-cmp-card { transform: rotate(2.5deg); }
.m-cmp-head img { pointer-events: none; }
.m-cmp-card { border-radius: 14px; overflow: hidden; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; box-shadow: 0 6px 16px rgba(20, 24, 18, 0.05); background: var(--m-surface); border: 1px solid var(--m-border); }
.m-cmp-card-current { border: 1.5px solid #d8c08a; }
.m-cmp-art { position: relative; height: 46px; flex: none; }
.m-cmp-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-cmp-art .m-wave { height: 18px; }
.m-cmp-tag { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 253, 250, 0.82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-size: var(--m-type-9); font-weight: var(--m-weight-700); letter-spacing: 0.06em; text-transform: uppercase; color: var(--m-gold-deep); }
.m-cmp-logos { display: flex; gap: 6px; }
.m-cmp-logos .m-logo-sm { width: 46px; }
.m-cmp-card-body { padding: 2px 8px 10px; display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
.m-cmp-name { font-family: var(--m-serif); font-size: var(--m-type-13); line-height: 1.25; color: var(--m-forest); min-height: 33px; }
.m-cmp-fund { font-size: var(--m-type-12); font-weight: var(--m-weight-700); color: var(--m-forest); min-height: 20px; }
.m-cmp-cell { position: relative; padding: 10px 4px 10px 22px; border-bottom: 1px solid var(--m-divider); color: var(--m-ink); display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; }
.m-cmp-row:last-child .m-cmp-cell, .m-cmp-buttons .m-cmp-btn { border-bottom: 0; }
.m-cmp-mark { position: absolute; left: 4px; top: 13px; width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; }
.m-cmp-mark svg { width: 15px; height: 15px; }
.m-cmp-captioned .m-cmp-mark { top: 29px; }
.m-cmp-yours { font-size: var(--m-type-9); font-weight: var(--m-weight-700); letter-spacing: 0.08em; text-transform: uppercase; color: #8a6a24; margin-bottom: 4px; }
.m-cmp-value { font-family: var(--m-serif); font-size: var(--m-type-16); line-height: 1.2; overflow-wrap: anywhere; }
.m-cmp-value .m-sphere { margin-right: 6px; }
.m-cmp-win { color: var(--m-green); }
.m-cmp-win .m-cmp-value { font-weight: var(--m-weight-700); }
.m-cmp-none { color: #8a8f86; }
.m-cmp-value-sm { font-size: var(--m-type-14); line-height: 1.25; }
.m-cmp-sub { font-size: var(--m-type-12); color: var(--m-muted); margin-top: 3px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.m-cmp-win .m-cmp-sub { color: var(--m-green); font-weight: var(--m-weight-600); }
.m-cmp-row .m-dial { margin-top: 2px; }
.m-cmp-btn { padding: 10px 4px 10px; }
.m-cmp-btn .m-btn { min-height: 40px; font-size: var(--m-type-13); padding: 0 8px; }
.m-cmp-group { border-bottom: 1px solid var(--m-divider); }
.m-cmp-group span { position: sticky; left: 0; display: inline-block; padding: 12px 10px 4px; font-size: var(--m-type-10); font-weight: var(--m-weight-700); letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-gold-text); }
.m-cmp-sec { position: relative; margin: 12px 6px 0; padding: 0; overflow: hidden; border-radius: 18px; border: 1px solid #e3d9c8; box-shadow: 0 12px 16px -12px rgba(20, 24, 18, 0.1); }
.m-cmp-sec-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--m-divider); background: #fbf7ee; font: inherit; text-align: left; color: var(--m-forest); }
.m-cmp-sec-head[aria-expanded="false"] { border-bottom: 0; }
.m-cmp-sec-title { font-family: var(--m-serif); font-size: var(--m-type-18); }
.m-cmp-sec-count { flex: 1; font-size: var(--m-type-12); color: var(--m-muted); }
.m-cmp-sec-chev { display: flex; color: var(--m-green); transition: transform .2s ease; }
.m-cmp-sec-head[aria-expanded="false"] .m-cmp-sec-chev { transform: rotate(-90deg); }
.m-cmp-row:has(+ .m-cmp-more-rows[hidden]) .m-cmp-cell { border-bottom: 0; }
.m-cmp-row:has(+ .m-cmp-more-rows[hidden]) .m-cmp-label, .m-cmp-more-rows > .m-cmp-row:last-child .m-cmp-label { background-image: none; }
.m-cmp-more-rows[hidden] { display: none; }
.m-cmp-more-rows > .m-cmp-row:last-child .m-cmp-cell { border-bottom: 0; }
.m-cmp-more { display: flex; align-items: flex-end; height: 26px; margin-top: -1px; }
.m-cmp-more-band { flex: 1; box-sizing: border-box; height: 6px; border-top: 1px solid #dccbbf; background: linear-gradient(#f6eee9, #f5ece6); box-shadow: inset 0 1px rgba(255, 255, 255, 0.8); }
.m-cmp-more-curve { display: block; flex: none; }
.m-cmp-more-tab { flex: none; width: 170px; height: 26px; box-sizing: border-box; display: flex; border-top: 1px solid #dccbbf; background: linear-gradient(#fcf8f5, #f5ece6 25px); box-shadow: inset 0 1px #fff; }
.m-cmp-more-tab button { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 0 10px; border: 0; background: none; color: #1f4d36; font-family: var(--m-sans); font-size: var(--m-type-12); font-weight: var(--m-weight-700); }
.m-cmp-more-tab button svg { transition: transform .2s ease; }
.m-cmp-more-tab button[aria-expanded="true"] svg { transform: rotate(180deg); }
.m-cmp-legend { display: flex; gap: 14px; margin: 10px 16px 0; font-size: var(--m-type-12); color: var(--m-muted); }
.m-cmp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.m-cmp-legend svg { width: 15px; height: 15px; }
.m-cmp-hint-row { margin: 12px 16px 0; }
.m-cmp-hint { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; width: 100%; box-sizing: border-box; padding: 10px 14px; border: 0; border-radius: 14px; background: #1f5236; color: #f3ead2; font-family: var(--m-sans); font-size: var(--m-type-13); font-weight: var(--m-weight-500); line-height: 1.4; text-align: left; }
.m-cmp-hint i { font-style: normal; }
.m-cmp-hint-grip { display: flex; flex: none; opacity: .85; }
.m-cmp-hint-demo { display: none; position: relative; flex: none; width: 106px; height: 38px; border-radius: 9px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.m-cmp-hint.is-playing .m-cmp-hint-demo { display: block; }
.m-cmp-hint.is-playing .m-cmp-hint-grip { display: none; }
.m-cmp-hint-zoom { position: absolute; left: 0; top: 0; width: 176px; height: 60px; transform: scale(.6); transform-origin: 0 2px; }
.m-cmp-hint-card { position: absolute; top: 7px; width: 48px; height: 46px; box-sizing: border-box; border-radius: 8px; background: #fefcf7; border: 1px solid #e9e2d5; overflow: hidden; }
.m-cmp-hint-card > i { display: block; height: 15px; background: linear-gradient(180deg, #f0c48a, #c98d52); }
.m-cmp-hint-card > b { display: block; margin: 6px 6px 0; height: 5px; border-radius: 3px; background: #cfd4cc; }
.m-cmp-hint-card > b + b { width: 55%; margin-top: 4px; }
.m-cmp-hint-y { left: 6px; border: 1.5px solid #d8c08a; }
.m-cmp-hint-y > b:first-of-type { background: #d8c08a; }
.m-cmp-hint-a { left: 62px; animation: m-cmp-give 2.8s ease-in-out infinite alternate; }
.m-cmp-hint-b { left: 118px; z-index: 2; animation: m-cmp-lift 2.8s ease-in-out infinite alternate; }
.m-cmp-hint-b > i:first-child { background: linear-gradient(180deg, #a9c3d9, #5f86a8); }
.m-cmp-hint-card > .m-cmp-hint-hand { position: absolute; left: 24px; top: 24px; width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 253, 250, .9); box-shadow: 0 0 0 4px rgba(255, 253, 250, .25); }
@keyframes m-cmp-lift { 0%, 18% { transform: none; box-shadow: none; } 38% { transform: translate(-8px, -7px) rotate(-4deg); box-shadow: 0 10px 14px rgba(0, 0, 0, .35); } 72% { transform: translate(-56px, -7px) rotate(-4deg); box-shadow: 0 10px 14px rgba(0, 0, 0, .35); } 88%, 100% { transform: translate(-56px, 0); box-shadow: none; } }
@keyframes m-cmp-give { 0%, 48% { transform: none; } 74%, 100% { transform: translateX(56px); } }
@media (prefers-reduced-motion: reduce) { .m-cmp-hint-card { animation: none !important; } }
.m-dots { margin: 10px 16px 0; display: flex; align-items: center; justify-content: center; gap: 2px; }
.m-dots button { width: 28px; height: 24px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.m-dots span { display: block; width: 6px; height: 6px; border-radius: 999px; background: #d9d0bf; transition: width 0.25s ease, background 0.25s ease; }
.m-dots button[aria-current="true"] span { width: 18px; background: var(--m-green); }
.m-finder-entry { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.m-finder-entry strong { display: block; font-size: var(--m-type-17); color: var(--m-forest); font-weight: var(--m-weight-400); }
.m-finder-entry span { display: block; font-size: var(--m-type-13); color: var(--m-muted); margin-top: 3px; line-height: 1.4; }

/* ---------- Questionnaire ---------- */
.m-intake { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-bottom: 0; }
.m-intake .m-card { margin: 0; }
.m-q-progress { padding: 4px 16px 6px; }
.m-q-step { font-size: var(--m-type-12); color: var(--m-muted); margin-bottom: 8px; }
.m-q-step strong { color: var(--m-ink); font-weight: var(--m-weight-600); }
.m-q-bars { display: grid; grid-template-columns: repeat(var(--m-steps, 7), minmax(0, 1fr)); gap: 4px; }
.m-q-bars span { height: 5px; border-radius: 3px; background: #e7e1d5; }
.m-q-bars span.m-on { background: var(--m-green-mid); }
.m-q-body { flex: 1 1 auto; padding: 14px 16px 0; display: flex; flex-direction: column; }
.m-q-title { display: flex; align-items: flex-start; gap: 8px; }
.m-q-h1 { flex: 1 1 auto; margin: 0; font-family: var(--m-serif); font-weight: var(--m-weight-400); font-size: var(--m-type-28); line-height: 1.15; color: var(--m-ink); outline: none; }
.m-q-sub { margin: 8px 0 14px; font-size: var(--m-type-14); color: var(--m-muted); line-height: 1.45; }
.m-q-sub .m-info { margin-left: 4px; vertical-align: -3px; }
.m-q-footer { position: sticky; bottom: 0; z-index: 3; padding: 12px 16px 20px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; background: linear-gradient(180deg, rgba(254, 250, 241, 0) 0, var(--m-page) 14px); }
.m-q-footer-1 { grid-template-columns: 1fr; }
.m-q-message:empty { display: none; }
.m-q-soft { margin: 12px 0 0; font-size: var(--m-type-13); color: var(--m-muted); line-height: 1.45; }
.m-q-label { display: flex; align-items: center; gap: 6px; margin: 16px 0 8px; font-size: var(--m-type-10); font-weight: var(--m-weight-700); letter-spacing: var(--m-track-caps); text-transform: uppercase; color: var(--m-muted); }
.m-q-label-plain { font-size: var(--m-type-13); font-weight: var(--m-weight-600); letter-spacing: 0; text-transform: none; color: var(--m-forest); }
.m-q-legend { margin: 18px 0 4px; font-size: var(--m-type-15); font-weight: var(--m-weight-600); color: var(--m-forest); line-height: 1.35; }
.m-q-legend .m-info { margin-left: 4px; vertical-align: -3px; }
.m-q-hint, .m-q-count { margin: 10px 0 0; font-size: var(--m-type-13); color: var(--m-muted); line-height: 1.4; }
.m-q-fine { margin: 10px 0 0; font-size: var(--m-type-12); color: var(--m-muted); line-height: 1.4; }
.m-q-fine-tight { margin: 0 0 8px; }
.m-q-note-box { margin-top: 12px; background: #f8f3e8; border: 1px solid #ece4d6; border-radius: 14px; padding: 12px 14px; font-size: var(--m-type-13); line-height: 1.45; color: var(--m-ink); }
.m-q-note-box strong { font-weight: var(--m-weight-600); }
.m-q-note-icon { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; }
.m-q-note-icon .m-icon { flex: none; }
.m-q-inforow { margin-top: 16px; padding: 12px 0; border-top: 1px solid var(--m-divider); border-bottom: 1px solid var(--m-divider); display: flex; gap: 10px; align-items: flex-start; }
.m-q-inforow .m-icon { flex: none; margin-top: 1px; }
.m-q-inforow p { margin: 0; font-size: var(--m-type-13); line-height: 1.45; color: #1d402c; }
.m-q-inforow a, .m-q-fine a { font-weight: var(--m-weight-600); color: var(--m-green); }

/* Options: one card style everywhere; selected = 2px forest ring + domed tick. */
.m-opts { display: grid; gap: 8px; }
.m-opts-1 { grid-template-columns: 1fr; }
.m-opts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-opts-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.m-opts-tight { gap: 6px; }
.m-opt-wrap { display: flex; align-items: center; gap: 6px; }
.m-opt-wrap > .m-opt { flex: 1 1 auto; min-width: 0; }
.m-opt { position: relative; width: 100%; margin: 0; border-radius: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; font-family: inherit; color: var(--m-ink); text-align: left; padding: 11px 15px; background: var(--m-surface); border: 1px solid var(--m-border); box-shadow: 0 1px 3px rgba(20, 24, 18, 0.04); -webkit-tap-highlight-color: transparent; }
.m-opt.m-on, .m-opt-radio:has(input:checked) { padding: 10px 14px; background: var(--m-surface-3); border: 2px solid var(--m-green-mid); box-shadow: 0 4px 12px rgba(16, 50, 31, 0.12); }
.m-opt[disabled] { opacity: 0.5; cursor: default; }
.m-opt-text { flex: 1 1 auto; min-width: 0; }
.m-opts > *, .m-opt-wrap > .m-opt { min-width: 0; }
.m-opt-title { overflow-wrap: anywhere; }
.m-opt-title { display: block; font-size: var(--m-type-15); font-weight: var(--m-weight-600); color: var(--m-ink); line-height: 1.25; }
.m-opt-sub { display: block; font-size: var(--m-type-12); color: var(--m-muted); margin-top: 2px; line-height: 1.35; }
.m-opt-list { min-height: 58px; }
.m-opt-member { min-height: 48px; padding: 9px 13px; border-radius: 12px; }
.m-opt-member.m-on { padding: 8px 12px; }
.m-opt-member .m-opt-title { font-size: var(--m-type-14); }
.m-opt-mark { flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--m-surface); box-shadow: inset 0 0 0 1.5px #b8ad9b; }
.m-opt-mark svg { opacity: 0; }
.m-on > .m-opt-mark, .m-opt-radio:has(input:checked) > .m-opt-mark { background: radial-gradient(ellipse 78% 42% at 50% 20%, rgba(255, 255, 255, 0.2) 0 96%, transparent 100%), var(--m-green); box-shadow: 0 1px 2px rgba(16, 50, 31, 0.25); }
.m-on > .m-opt-mark svg, .m-opt-radio:has(input:checked) > .m-opt-mark svg { opacity: 1; }
.m-opt-mark-24 { width: 24px; height: 24px; }
.m-opt-mark-22 { width: 22px; height: 22px; }
.m-opt-mark-20 { width: 20px; height: 20px; }
.m-opt-mark-18 { width: 18px; height: 18px; }
.m-opt-grid { min-height: 58px; padding: 10px 12px; gap: 8px; }
.m-opt-grid.m-on, .m-opt-grid.m-opt-radio:has(input:checked) { padding: 9px 11px; }
.m-opt-grid .m-opt-title { font-size: var(--m-type-14); }
.m-opt-grid .m-opt-sub { font-size: var(--m-type-11); }
.m-opt-small { min-height: 44px; padding: 8px 10px; gap: 8px; border-radius: 12px; }
.m-opt-small.m-on { padding: 7px 9px; }
.m-opt-small .m-opt-title { flex: 1 1 auto; font-size: var(--m-type-13); }
.m-opt-tile { min-height: 46px; padding: 7px 9px; border-radius: 12px; justify-content: center; gap: 6px; text-align: center; }
.m-opt-tile.m-on, .m-opt-tile.m-opt-radio:has(input:checked) { padding: 6px 8px; }
.m-opt-tile .m-opt-title { font-size: var(--m-type-14); }
.m-opt-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.m-opt-radio:has(input:focus-visible), .m-opt:focus-visible { outline: 2px solid var(--m-gold); outline-offset: 2px; }
.m-opt-people { min-height: 148px; flex-direction: column; justify-content: center; gap: 10px; padding: 14px 10px; border-radius: 16px; text-align: center; }
.m-opt-people.m-on { padding: 13px 9px; }
.m-opt-people .m-opt-sub { margin-top: -6px; }
.m-opt-people .m-opt-mark { position: absolute; top: 10px; right: 10px; }
.m-people-disc { width: 52px; height: 52px; border-radius: 50%; background: #eee9dd; display: flex; align-items: center; justify-content: center; flex: none; }
.m-people-disc-sm { width: 40px; height: 40px; background: var(--m-tab-on); }
.m-people { overflow: visible; }
.m-people g { stroke: #eee9dd; stroke-width: 1.6; paint-order: stroke; }
.m-people-disc-sm .m-people g { stroke: var(--m-tab-on); }
.m-person-a { fill: var(--m-green-mid); }
.m-person-b { fill: #4f7a5f; }

/* More extras / hospital categories dropdown */
.m-more { margin-top: 8px; }
.m-more > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 14px; background: var(--m-surface); border: 1px solid var(--m-border); box-shadow: 0 1px 3px rgba(20, 24, 18, 0.04); cursor: pointer; color: var(--m-green); }
.m-more > summary::-webkit-details-marker { display: none; }
.m-more-label { flex: 1 1 auto; font-size: var(--m-type-14); font-weight: var(--m-weight-600); }
.m-more-count { font-size: var(--m-type-12); color: var(--m-muted); }
.m-more > summary svg { transition: transform 0.18s ease; }
.m-more[open] > summary svg { transform: rotate(90deg); }
.m-more > .m-opts { margin-top: 8px; }
/* "Something else" / "No specific extras" sit under the expander: keep the same gap as between cards. */
.m-more + .m-opts { margin-top: 8px; }

.m-conflict + .m-conflict { margin-top: 16px; }
.m-conflict-head { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; font-size: var(--m-type-14); line-height: 1.45; color: var(--m-forest); }
.m-conflict-num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--m-tab-on); color: var(--m-forest); font-size: var(--m-type-12); font-weight: var(--m-weight-700); display: flex; align-items: center; justify-content: center; }

/* Fields */
.m-field { display: block; margin-top: 14px; }
.m-field-label { display: flex; align-items: center; gap: 6px; font-size: var(--m-type-13); font-weight: var(--m-weight-600); color: var(--m-forest); margin-bottom: 6px; }
.m-field-help { display: block; font-size: var(--m-type-12); color: var(--m-muted); line-height: 1.4; margin: -2px 0 6px; }
.m-field-warn { display: block; margin-top: 6px; font-size: var(--m-type-12); color: var(--m-gold-text); line-height: 1.4; }
.m-field-warn[hidden] { display: none; }
.m-input, .m-select select, .m-search input { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; background: var(--m-surface); border: 1px solid #d9cfbd; box-shadow: inset 0 1px 2px rgba(20, 24, 18, 0.06); font-family: inherit; font-size: var(--m-type-16); color: var(--m-ink); }
.m-input::placeholder, .m-search input::placeholder { color: #8a8f86; }
.m-input:focus, .m-select select:focus, .m-search input:focus { outline: 0; border-color: var(--m-green); box-shadow: 0 0 0 3px rgba(201, 154, 82, 0.4); }
.m-textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.m-textarea-lg { min-height: 140px; border-radius: 14px; }
.m-multi { height: auto; padding: 6px; }
.m-money { position: relative; display: block; }
.m-money > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: var(--m-type-16); color: var(--m-muted); pointer-events: none; }
.m-money .m-input { padding-left: 28px; }
.m-select { position: relative; display: block; }
.m-select select { appearance: none; -webkit-appearance: none; padding-right: 40px; }
.m-select > svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--m-muted); pointer-events: none; }
.m-search { position: relative; display: block; }
.m-search > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--m-muted); pointer-events: none; }
.m-search input { padding-left: 42px; }

.m-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; cursor: pointer; }
.m-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.m-check-box { flex: none; width: 22px; height: 22px; border-radius: 6px; margin-top: 1px; background: var(--m-surface); box-shadow: inset 0 0 0 1.5px #b8ad9b; display: flex; align-items: center; justify-content: center; }
.m-check-box svg { opacity: 0; }
.m-check input:checked + .m-check-box { background: radial-gradient(ellipse 78% 42% at 50% 20%, rgba(255, 255, 255, 0.2) 0 96%, transparent 100%), var(--m-green); box-shadow: none; }
.m-check input:checked + .m-check-box svg { opacity: 1; }
.m-check input:focus-visible + .m-check-box { outline: 2px solid var(--m-gold); outline-offset: 2px; }
.m-check-text { font-size: var(--m-type-14); line-height: 1.4; color: var(--m-forest); }
.m-check-text small { display: block; font-size: var(--m-type-12); color: var(--m-muted); margin-top: 2px; }

.m-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.m-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--m-surface); border: 1px solid var(--m-border); font-family: inherit; font-size: var(--m-type-13); color: var(--m-forest); cursor: pointer; }

.m-info { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -8px 0; padding: 0; border: 0; background: transparent; cursor: pointer; vertical-align: middle; }
.m-link-button { padding: 0; border: 0; background: transparent; font-family: inherit; font-size: inherit; font-weight: var(--m-weight-600); color: var(--m-green); cursor: pointer; }
.m-text-button { align-self: center; margin: 14px 0 0; padding: 8px 12px; border: 0; background: transparent; font-family: inherit; font-size: var(--m-type-14); font-weight: var(--m-weight-600); color: var(--m-green); cursor: pointer; }
.m-pill-button { align-self: flex-start; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--m-border-strong); background: var(--m-btn-secondary); box-shadow: inset 0 1px 0 #ffffff, 0 2px 6px rgba(20, 24, 18, 0.08); color: var(--m-forest); font-family: inherit; font-size: var(--m-type-14); font-weight: var(--m-weight-600); cursor: pointer; }

/* Header menu */
.m-menu { position: absolute; top: 56px; right: 12px; z-index: 6; min-width: 190px; padding: 6px; background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 14px; box-shadow: 0 12px 28px rgba(20, 24, 18, 0.14); display: flex; flex-direction: column; }
.m-menu[hidden] { display: none; }
.m-menu-item { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; font-family: inherit; font-size: var(--m-type-14); font-weight: var(--m-weight-600); color: var(--m-forest); text-align: left; cursor: pointer; }
.m-menu-item:hover, .m-menu-item:focus-visible { background: var(--m-surface-2); }

/* Rebate */
.m-rebate-summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.m-rebate-summary-text { flex: 1 1 auto; min-width: 0; font-size: var(--m-type-14); color: var(--m-forest); }
.m-rebate-summary-text strong { font-weight: var(--m-weight-600); }
.m-rebate-summary-text small { display: block; font-size: var(--m-type-12); color: var(--m-muted); margin-top: 2px; }
.m-rebate-summary .m-link-button { font-size: var(--m-type-13); }
.m-rebate-context[hidden] { display: none; }

/* Ready to compare */
.m-ready { padding: 16px; display: flex; flex-direction: column; }
.m-ready + .m-ready { margin-top: 12px; }
.m-eyebrow-gold { color: #8a6a2a; }
.m-ready-title { margin: 4px 0 0; font-family: var(--m-serif); font-weight: var(--m-weight-400); font-size: var(--m-type-20); color: var(--m-forest); }
.m-ready-text { margin: 4px 0 0; font-size: var(--m-type-13); line-height: 1.45; color: var(--m-muted); }
.m-ready > .m-btn, .m-ready > .m-btn-row { margin-top: 12px; }
.m-ready-consent .m-check { margin-top: 12px; padding: 12px; background: var(--m-surface-note); border: 1px solid var(--m-border-note); border-radius: 12px; }
.m-ready-consent .m-check-text { font-size: var(--m-type-13); line-height: 1.45; color: #1d402c; }
.m-page a.m-ready-link { display: inline-block; margin-top: 10px; font-size: var(--m-type-13); font-weight: var(--m-weight-600); color: var(--m-green); }
.m-ready-rebate { padding: 14px 16px; gap: 10px; }
.m-ready-rebate strong { font-size: var(--m-type-15); font-weight: var(--m-weight-600); color: var(--m-forest); }

/* Current-plan finder */
.m-finder-login { margin-top: 4px; }
.m-finder-login p { margin: 0 0 12px; font-size: var(--m-type-14); line-height: 1.45; color: var(--m-muted); }
.m-finder-plan { display: flex; gap: 12px; align-items: center; padding: 14px 16px; }
.m-finder-plan + .m-finder-plan { margin-top: 8px; }
.m-finder-plan .m-logo { flex: none; width: 64px; height: 26px; object-fit: contain; object-position: left center; }
.m-finder-plan small { display: block; font-size: var(--m-type-12); color: var(--m-muted); margin-top: 2px; }
.m-finder-fund { flex: none; font-size: var(--m-type-13); font-weight: var(--m-weight-700); color: var(--m-forest); }
.m-finder-name { font-family: var(--m-serif); font-size: var(--m-type-16); color: var(--m-forest); }
.m-finder-pay { margin-top: 14px; padding: 12px 14px; border-radius: 14px; box-shadow: none; }
.m-finder-pay > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; font-size: var(--m-type-14); font-weight: var(--m-weight-600); color: var(--m-forest); cursor: pointer; }
.m-finder-pay > summary::-webkit-details-marker { display: none; }
.m-finder-pay > summary svg { color: var(--m-green); transition: transform 0.18s ease; }
.m-finder-pay[open] > summary svg { transform: rotate(180deg); }
.m-finder-pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.m-finder-pay-row .m-input, .m-finder-pay-row select { height: 44px; border-radius: 10px; font-size: var(--m-type-14); }
/* Finder: fund logos, hospital level, per-fund help and the fund's plan list */
.m-fund-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m-fund-tile { height: 64px; justify-content: center; padding: 8px 10px; }
.m-fund-tile.m-on { padding: 7px 9px; }
.m-fund-tile[hidden], .m-plan-row[hidden] { display: none; }
.m-fund-tile img { max-width: 100%; max-height: 30px; object-fit: contain; }
.m-fund-tile .m-opt-title { font-size: var(--m-type-12); text-align: center; }
.m-fund-tile .m-opt-mark { position: absolute; top: -7px; right: -7px; }
.m-fund-search { margin-top: 10px; }
.m-cover-line { margin-top: 12px; }
.m-cover-line > summary { list-style: none; display: flex; justify-content: space-between; gap: 10px; cursor: pointer; }
.m-cover-line > summary::-webkit-details-marker { display: none; }
.m-cover-line > .m-opts { margin-top: 10px; }
.m-text-link { padding: 0; border: 0; background: none; font: inherit; font-weight: var(--m-weight-600); color: var(--m-green); text-decoration: underline; cursor: pointer; }
.m-level-grid .m-opt-small { min-height: 48px; }
.m-level-any { grid-column: 1 / -1; justify-content: center; }
.m-help { margin-top: 16px; background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 16px; box-shadow: var(--m-card-shadow); }
.m-help > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; cursor: pointer; font-size: var(--m-type-15); font-weight: var(--m-weight-600); color: var(--m-forest); }
.m-help > summary::-webkit-details-marker { display: none; }
.m-help > summary > span { flex: 1 1 auto; }
.m-help[open] > summary .m-glyph { transform: rotate(180deg); }
.m-help-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.m-help-lead { margin: 0; font-size: var(--m-type-13); color: var(--m-muted); }
.m-help-step { display: flex; gap: 10px; align-items: flex-start; font-size: var(--m-type-14); line-height: 1.45; }
.m-help-step strong { font-weight: var(--m-weight-600); }
.m-help-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--m-type-14); font-weight: var(--m-weight-600); color: var(--m-green); }
.m-plan-row { flex-direction: column; align-items: stretch; padding: 0; }
.m-plan-row.m-on { padding: 0 0 10px; }
.m-plan-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 11px 15px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.m-plan-row .m-excess-q, .m-plan-row .m-opts, .m-plan-row .m-q-fine { margin-left: 14px; margin-right: 14px; }
.m-excess-q { margin-bottom: 8px; }
.m-confirm { display: flex; flex-direction: column; gap: 14px; }
.m-confirm-id { display: flex; align-items: center; gap: 12px; }
.m-confirm-grid { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.m-confirm-grid dt { font-size: var(--m-type-12); color: var(--m-muted); }
.m-confirm-grid dd { margin: 2px 0 0; font-size: var(--m-type-15); font-weight: var(--m-weight-600); }

/* ---------- Loading and load error (between questionnaire and matches) ---------- */
.m-loading-page { padding-bottom: 32px; }
.m-load-intro { padding-top: 2px; }
.m-load-steps { list-style: none; margin: 16px 16px 0; padding: 4px 16px; }
.m-load-step { display: flex; gap: 12px; align-items: center; padding: 12px 0; }
.m-load-step + .m-load-step { border-top: 1px solid var(--m-divider); }
.m-load-step > .m-icon { flex: none; }
.m-load-step strong { display: block; font-size: var(--m-type-15); font-weight: var(--m-weight-600); color: var(--m-ink); }
.m-load-step span { display: block; font-size: var(--m-type-12); color: var(--m-muted); margin-top: 2px; }
.m-load-todo strong { color: #8a8f86; }
.m-load-todo span { color: #a3a79f; }
.m-load-now strong { animation: m-load-pulse 1.6s ease-in-out infinite; }
.m-load-spin { flex: none; position: relative; width: 24px; height: 24px; border-radius: 50%; background: #fbf3df; box-shadow: inset 0 0 0 1.5px #e3cf9c; }
.m-load-spin > span { position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid transparent; border-top-color: var(--m-gold); border-right-color: var(--m-gold); animation: m-load-turn 0.9s linear infinite; }
.m-load-step > .m-load-todo { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--m-surface); box-shadow: inset 0 0 0 1.5px #d6ccba; margin: 0; }
.m-load-hint { margin: 12px 16px 0; font-size: var(--m-type-12); line-height: 1.4; color: var(--m-muted); text-align: center; }
.m-load-note { display: flex; gap: 10px; align-items: flex-start; }
.m-load-note .m-icon { flex: none; }
.m-load-cards { padding: 18px 16px 0; display: flex; flex-direction: column; gap: 14px; opacity: 0.9; }
.m-load-card { position: relative; background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 18px; overflow: hidden; isolation: isolate; box-shadow: 0 10px 30px rgba(20, 24, 18, 0.065); }
.m-load-art { position: relative; height: 70px; overflow: hidden; }
.m-load-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.55) brightness(1.08); opacity: 0.75; }
.m-load-art .m-wave { height: 26px; }
.m-load-body { padding: 6px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.m-load-row { display: flex; align-items: center; gap: 12px; }
.m-load-lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.m-load-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.m-load-grid > span { display: flex; flex-direction: column; gap: 6px; }
.m-sk { display: block; border-radius: 8px; background: linear-gradient(90deg, #efe8da 0%, #f8f3e8 40%, #efe8da 80%) 0 0 / 520px 100% no-repeat, #efe8da; animation: m-load-shimmer 1.6s ease-in-out infinite; }
.m-sk-logo { width: 64px; height: 24px; }
.m-sk-line { width: 80%; height: 13px; }
.m-sk-short { width: 45%; height: 10px; }
.m-sk-dial { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.m-sk-big { width: 70%; height: 22px; }
.m-sk-small { width: 88%; height: 9px; }
.m-load-reason { margin: 16px 16px 0; display: flex; gap: 12px; align-items: flex-start; }
.m-load-reason .m-icon { flex: none; }
.m-load-reason strong { display: block; font-size: var(--m-type-15); font-weight: var(--m-weight-600); }
.m-load-reason span { display: block; font-size: var(--m-type-13); line-height: 1.45; color: var(--m-muted); margin-top: 3px; }
.m-load-error { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-bottom: 0; }
.m-load-actions { margin-top: auto; grid-template-columns: 1fr 1.25fr; }
.m-load-actions .m-btn { white-space: nowrap; padding: 0 12px; }
@keyframes m-load-turn { to { transform: rotate(360deg); } }
@keyframes m-load-shimmer { 0% { background-position: -260px 0; } 100% { background-position: 260px 0; } }
@keyframes m-load-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .m-load-spin > span, .m-sk, .m-load-now strong { animation: none; } }

/* ---------- Filters (F1–F3) ---------- */
.m-filters { padding-bottom: 0; }
.m-ff-header { position: sticky; top: 0; z-index: 4; padding: 14px 16px 10px; background: var(--m-page); border-bottom: 1px solid var(--m-divider); }
.m-ff-title { display: flex; align-items: center; gap: 10px; }
.m-ff-title .m-h1 { flex: 1 1 auto; font-size: var(--m-type-24); }
.m-ff-close { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--m-border); background: var(--m-surface); color: var(--m-forest); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.m-ff-tabs { margin-top: 12px; background: var(--m-tab-on); box-shadow: inset 0 0 0 1px var(--m-tab-ring); }
.m-ff-tabs button { min-height: 40px; font-weight: var(--m-weight-600); }
.m-ff-body { padding-top: 14px; padding-bottom: 8px; }
.m-ff-body .m-card { margin: 14px 0 0; }
.m-ff-chips { margin-top: 0; gap: 6px; }
.m-ff-chips .m-chip { height: 28px; padding: 0 11px; background: var(--m-surface-note); border-color: var(--m-border-note); font-size: var(--m-type-12); font-weight: var(--m-weight-600); cursor: default; }
.m-ff-fine { margin: 8px 0 0; font-size: var(--m-type-12); line-height: 1.4; color: var(--m-muted); }
.m-ff-label { margin: 18px 0 8px; }
.m-ff-label-tight { margin-bottom: 2px; }
.m-ff-figure { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; }
.m-ff-figure .m-serif { font-size: var(--m-type-24); color: var(--m-forest); white-space: nowrap; }
.m-ff-figure small { font-size: var(--m-type-12); color: var(--m-muted); }
.m-ff-amount { border: 0; padding: 0; background: transparent; font: inherit; color: inherit; min-width: 1.2ch; }
.m-ff-amount:focus { outline: 2px solid var(--m-gold); outline-offset: 2px; border-radius: 4px; }
.m-ff-range { position: relative; height: 28px; margin-top: 10px; }
.m-ff-groove { position: absolute; left: 13px; right: 13px; top: 13px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--m-border-note) 0 var(--range-from), var(--m-gold) var(--range-from) var(--range-to), var(--m-border-note) var(--range-to) 100%); }
.m-ff-range input[type="range"] { position: absolute; inset: 0; width: 100%; height: 28px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
.m-ff-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 28px; }
.m-ff-range input[type="range"]::-moz-range-track { background: transparent; }
.m-ff-range input[type="range"]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; background: var(--m-surface); border: 0; box-shadow: 0 0 0 2px var(--m-green), 0 2px 6px rgba(0, 0, 0, 0.15); cursor: pointer; }
.m-ff-range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--m-surface); border: 0; box-shadow: 0 0 0 2px var(--m-green), 0 2px 6px rgba(0, 0, 0, 0.15); cursor: pointer; }
.m-ff-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--m-green), 0 0 0 5px rgba(201, 154, 82, 0.45); }
.m-ff-rebate { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--m-divider); }
.m-ff-rebate > div { flex: 1 1 auto; min-width: 0; }
.m-ff-rebate strong { display: block; font-size: var(--m-type-14); font-weight: var(--m-weight-600); color: var(--m-forest); }
.m-ff-rebate .m-link-btn { padding: 2px 0; font-size: var(--m-type-12); text-decoration: underline; }
.m-ff-switch { flex: none; position: relative; width: 46px; height: 28px; border-radius: 999px; border: 0; background: #d8cfbf; cursor: pointer; transition: background 0.15s; }
.m-ff-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--m-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: left 0.15s; }
.m-ff-switch[aria-checked="true"] { background: var(--m-green); }
.m-ff-switch[aria-checked="true"]::after { left: 21px; }
.m-ff-tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.m-ff-tier { position: relative; min-width: 0; height: 44px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: var(--m-type-12); font-weight: var(--m-weight-600); color: var(--m-ink); background: var(--m-surface); border: 1px solid var(--m-border); cursor: pointer; font-family: inherit; padding: 0; }
.m-ff-tier input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.m-ff-tier.m-on { background: var(--m-surface-3); border: 2px solid var(--m-green-mid); }
.m-ff-tier:has(input:focus-visible) { outline: 2px solid var(--m-gold); outline-offset: 2px; }
.m-ff-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-ff-choice { display: flex; gap: 10px; align-items: flex-start; padding: 13px; border-radius: 14px; background: var(--m-surface); border: 1px solid var(--m-border); text-align: left; cursor: pointer; color: var(--m-ink); }
.m-ff-choice.m-on { padding: 12px; background: var(--m-surface-3); border: 2px solid var(--m-green-mid); }
.m-ff-choice strong { display: block; font-size: var(--m-type-14); font-weight: var(--m-weight-600); }
.m-ff-choice small { display: block; font-size: var(--m-type-12); color: var(--m-muted); margin-top: 2px; }
.m-ff-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--m-surface); box-shadow: inset 0 0 0 1.5px var(--m-ring); display: flex; align-items: center; justify-content: center; color: #ffffff; }
.m-ff-radio-on { background: var(--m-dome); box-shadow: none; }
.m-ff-radio .m-glyph { stroke-width: 3; }
.m-ff-rows { border-radius: 0; }
.m-ff-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--m-divider); }
.m-ff-row:last-child { border-bottom: 0; }
.m-ff-name { flex: 1 1 auto; min-width: 0; font-size: var(--m-type-14); color: var(--m-forest); }
.m-ff-pick { position: relative; flex: none; max-width: 62%; }
.m-ff-pill { list-style: none; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid #e0d6c4; background: var(--m-surface); font-size: var(--m-type-13); font-weight: var(--m-weight-600); color: var(--m-forest); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-ff-pill::-webkit-details-marker { display: none; }
.m-ff-pill .m-glyph { flex: none; }
.m-ff-menu { position: absolute; z-index: 6; top: calc(100% + 6px); right: 0; min-width: 190px; max-height: 300px; overflow-y: auto; padding: 6px; background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 14px; box-shadow: 0 12px 30px rgba(20, 24, 18, 0.14); display: flex; flex-direction: column; gap: 2px; }
.m-ff-menu button { min-height: 44px; border: 0; border-radius: 10px; background: transparent; text-align: left; padding: 0 12px; font-size: var(--m-type-14); color: var(--m-ink); cursor: pointer; }
.m-ff-menu button[aria-pressed="true"] { background: var(--m-tab-on); font-weight: var(--m-weight-600); }
.m-ff-scrim { position: fixed; inset: 0; z-index: 30; background: rgba(16, 24, 18, 0.32); }
.m-ff-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; max-height: 82vh; display: flex; flex-direction: column; padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); background: var(--m-page); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.18); }
.m-ff-grip { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: #d6ccba; }
.m-ff-sheet-head { display: flex; align-items: center; margin-top: 12px; }
.m-ff-sheet-head .m-h2 { flex: 1 1 auto; font-size: var(--m-type-22); }
.m-ff-sheet-head .m-ff-close { width: 36px; height: 36px; }
.m-ff-search { margin-top: 12px; }
.m-ff-search input { height: 46px; }
.m-ff-funds { list-style: none; margin: 6px 0 0; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.m-ff-funds > li[hidden] { display: none; }
.m-ff-fund-group { padding: 14px 0 4px; font-size: var(--m-type-10); font-weight: var(--m-weight-700); letter-spacing: var(--m-track-caps); text-transform: uppercase; color: var(--m-muted); }
.m-ff-fund { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--m-divider); background: transparent; text-align: left; color: var(--m-ink); cursor: pointer; }
.m-ff-fund-logo { flex: none; width: 60px; height: 24px; display: flex; align-items: center; }
.m-ff-fund-logo img { max-width: 60px; max-height: 24px; object-fit: contain; }
.m-ff-fund-any { font-size: var(--m-type-13); font-weight: var(--m-weight-700); color: var(--m-forest); }
.m-ff-fund-text { flex: 1 1 auto; min-width: 0; }
.m-ff-fund-text strong { display: block; font-size: var(--m-type-14); font-weight: var(--m-weight-600); overflow-wrap: anywhere; }
.m-ff-fund-text small { display: block; font-size: var(--m-type-12); color: var(--m-muted); }
.m-ff-fund .m-ff-radio { width: 22px; height: 22px; }
.m-ff-done { margin-top: 12px; flex: none; }
.m-filters .m-h2 { font-size: var(--m-type-22); }
.m-ff-hint { margin: 6px 0 0; font-size: var(--m-type-13); line-height: 1.45; color: var(--m-muted); }
.m-ff-pris { padding: 4px 16px; }
.m-ff-pris-head { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; }
.m-ff-pris-head b { font-size: var(--m-type-12); font-weight: var(--m-weight-700); color: #8a6a2a; }
.m-ff-pris .m-eyebrow-gold { color: #8a6a2a; }
.m-ff-pris > .m-ff-fine:last-child { margin: 10px 0; }
.m-ff-pri { padding: 12px 0; border-bottom: 1px solid var(--m-divider); }
.m-ff-pri-head { display: flex; align-items: center; gap: 10px; }
.m-ff-pri-head span { flex: 1 1 auto; min-width: 0; font-size: var(--m-type-15); font-weight: var(--m-weight-600); }
.m-ff-pri-head b { font-size: var(--m-type-12); font-weight: var(--m-weight-700); color: var(--m-gold-text); }
.m-ff-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.m-ff-step { min-width: 0; height: 32px; padding: 0 2px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: var(--m-type-10); font-weight: var(--m-weight-600); letter-spacing: 0.01em; white-space: nowrap; background: #f7f3eb; border: 1px solid #f0eadf; color: #8a8f86; cursor: pointer; }
.m-ff-step[data-on].m-ff-step-low { background: linear-gradient(180deg, #faf0d8 0%, #f4e6c6 55%, #eedcb4 100%); border-color: rgba(176, 138, 48, 0.14); box-shadow: 0 1px 2px rgba(110, 85, 20, 0.1); color: #5a4612; }
.m-ff-step[data-on].m-ff-step-moderate { background: linear-gradient(180deg, #f6e5b6 0%, #efd79c 55%, #e7cb84 100%); border-color: rgba(176, 138, 48, 0.14); box-shadow: 0 1px 2px rgba(110, 85, 20, 0.1); color: #5a4612; }
.m-ff-step[data-on].m-ff-step-high { background: linear-gradient(180deg, #f0d189 0%, #e7c06d 55%, #dbad56 100%); border-color: rgba(176, 138, 48, 0.14); box-shadow: 0 1px 2px rgba(110, 85, 20, 0.1); color: #4a3608; }
.m-ff-step-none { gap: 3px; background: transparent; border-color: #e5dccb; color: #8a5a3a; }
.m-ff-step[data-on].m-ff-step-need { background: linear-gradient(180deg, #f2b45c 0%, #e89a3c 55%, #d9822a 100%); border-color: rgba(160, 82, 16, 0.22); box-shadow: 0 2px 5px rgba(150, 80, 15, 0.2); color: #3d2004; font-weight: var(--m-weight-700); }
.m-ff-step[aria-checked="true"]:not(.m-ff-step-none) { font-weight: var(--m-weight-700); box-shadow: 0 0 0 1.5px var(--m-surface), 0 0 0 2.5px rgba(26, 70, 48, 0.45), 0 1px 2px rgba(110, 85, 20, 0.1); }
.m-ff-addlist { padding: 4px 16px 16px; }
.m-ff-pris-head small { font-size: var(--m-type-12); color: var(--m-muted); }
.m-ff-add-group { margin-top: 12px; }
.m-ff-addlist .m-chips { margin-top: 8px; }
.m-ff-add-chip { gap: 6px; height: 34px; border-color: #e0d6c4; font-weight: var(--m-weight-600); }
.m-ff-add-chip span { color: var(--m-green); font-size: var(--m-type-15); line-height: 1; }
.m-ff-step:focus-visible { outline: 2px solid var(--m-gold); outline-offset: 2px; }
.m-ff-note { margin: 16px 0 0; display: flex; gap: 10px; align-items: flex-start; }
.m-ff-refine { margin-top: 12px; }
.m-ff-footer { grid-template-columns: 1fr 1fr; }
.m-ff-footer .m-btn-secondary { font-size: var(--m-type-14); line-height: 1.15; }

/* ---------- Account (A1–A5) ---------- */
.m-account { padding-bottom: 96px; }
.m-acct-intro { padding-top: 4px; }
.m-account .m-card { margin-top: 16px; }
.m-acct-perks { padding: 4px 16px; }
.m-acct-perks .m-checkrow { align-items: center; padding: 13px 0; gap: 12px; }
.m-acct-perks .m-checkrow strong { font-size: var(--m-type-15); }
.m-acct-signin { padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.m-acct-signin .m-btn-secondary { gap: 10px; }
.m-acct-signin form { display: flex; flex-direction: column; gap: 10px; }
.m-acct-signin .m-field { margin-top: 0; }
.m-acct-signin .m-message { margin: 0; }
.m-acct-or { display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: var(--m-type-12); color: #8a8f86; }
.m-acct-or span { flex: 1 1 auto; height: 1px; background: var(--m-border-note); }
.m-acct-fine { margin: 4px 0 0; font-size: var(--m-type-12); line-height: 1.45; color: var(--m-muted); }
.m-acct-fine a { font-weight: var(--m-weight-600); }
.m-acct-who { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.m-acct-who .m-h1 { font-size: var(--m-type-24); }
.m-acct-who p { margin: 3px 0 0; font-size: var(--m-type-13); color: var(--m-muted); overflow-wrap: anywhere; }
.m-acct-avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--m-dome); color: #ffffff; font-family: var(--m-serif); font-size: var(--m-type-24); display: flex; align-items: center; justify-content: center; }
.m-acct-note { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.m-acct-stats { margin: 14px 16px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m-acct-stat { padding: 12px; text-align: center; background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 14px; box-shadow: var(--m-card-shadow); }
.m-acct-stat strong { display: block; font-family: var(--m-serif); font-weight: var(--m-weight-400); font-size: var(--m-type-24); color: var(--m-forest); }
.m-acct-stat span { display: block; margin-top: 2px; font-size: var(--m-type-11); color: var(--m-muted); }
.m-acct-rows { padding: 2px 16px; }
.m-account .m-acct-stats + .m-acct-rows { margin-top: 14px; }
.m-acct-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 0; border: 0; border-bottom: 1px solid var(--m-divider); background: transparent; text-align: left; color: var(--m-ink); cursor: pointer; }
.m-acct-row:last-child { border-bottom: 0; }
.m-acct-row-static { cursor: default; }
.m-acct-row > .m-glyph { flex: none; color: var(--m-green); }
.m-acct-row-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--m-tab-on); color: var(--m-green-mid); display: flex; align-items: center; justify-content: center; }
.m-acct-row-text { flex: 1 1 auto; min-width: 0; }
.m-acct-row-text strong { display: block; font-size: var(--m-type-15); font-weight: var(--m-weight-600); }
.m-acct-row-text small { display: block; margin-top: 2px; font-size: var(--m-type-12); color: var(--m-muted); }
.m-acct-actions { padding-top: 16px; }
.m-acct-list { display: flex; flex-direction: column; }
.m-acct-saved { padding: 14px 16px 16px; }
.m-acct-saved-head { display: flex; align-items: flex-start; gap: 10px; }
.m-acct-logos { flex: none; display: flex; gap: 4px; align-items: center; height: 28px; }
.m-acct-logos img { max-width: 64px; max-height: 26px; object-fit: contain; }
.m-acct-saved-name { flex: 1 1 auto; min-width: 0; }
.m-acct-saved-name strong { display: block; font-size: var(--m-type-15); font-weight: var(--m-weight-600); overflow-wrap: anywhere; }
.m-acct-saved-name span { display: block; margin-top: 2px; font-size: var(--m-type-12); color: var(--m-muted); }
.m-acct-trash { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--m-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.m-acct-saved-price { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 12px 0; }
.m-acct-saved-price .m-serif { font-size: var(--m-type-22); color: var(--m-forest); }
.m-acct-saved-price small { font-size: var(--m-type-12); color: var(--m-muted); }
.m-acct-saved-price p { margin: 2px 0 0; font-size: var(--m-type-12); color: var(--m-muted); }
.m-acct-saved-price .m-acct-was { color: var(--m-gold-text); font-weight: var(--m-weight-600); }
.m-acct-saved .m-btn .m-glyph { margin-right: -2px; }
.m-acct-empty p { margin: 0; font-size: var(--m-type-14); color: var(--m-muted); line-height: 1.45; }
.m-acct-covers { padding: 2px 16px; }
.m-acct-cover { display: flex; align-items: flex-start; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--m-divider); }
.m-acct-cover:last-child { border-bottom: 0; }
.m-acct-dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: #d6ccba; }
.m-acct-dot.m-on { background: var(--m-green-mid); }
.m-acct-cover-text { flex: 1 1 auto; min-width: 0; }
.m-acct-cover-fund { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.m-acct-cover-fund strong { font-size: var(--m-type-14); font-weight: var(--m-weight-600); color: var(--m-forest); }
.m-acct-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: #f6e9c8; border: 1px solid #e7d3a1; font-size: var(--m-type-10); font-weight: var(--m-weight-700); letter-spacing: var(--m-track-caps); text-transform: uppercase; color: var(--m-gold-deep); }
.m-acct-cover-name { margin: 4px 0 0; font-size: var(--m-type-15); font-weight: var(--m-weight-600); }
.m-acct-cover-text small { display: block; margin-top: 2px; font-size: var(--m-type-12); color: var(--m-muted); }
.m-acct-cover-text .m-acct-cover-price { font-size: var(--m-type-13); color: var(--m-ink); }
.m-acct-form .m-h2 { font-size: var(--m-type-20); }
.m-acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-acct-grid .m-field { min-width: 0; }
.m-acct-types { margin: 14px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m-acct-types legend { margin-bottom: 8px; }
.m-acct-type { position: relative; }
.m-acct-type input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.m-acct-type span { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 12px; background: var(--m-surface); border: 1px solid var(--m-border); font-size: var(--m-type-14); font-weight: var(--m-weight-600); color: var(--m-forest); cursor: pointer; }
.m-acct-type input:checked + span { background: var(--m-surface-3); border: 2px solid var(--m-green-mid); }
.m-acct-type input:focus-visible + span { outline: 2px solid var(--m-gold); outline-offset: 2px; }
.m-acct-still { margin-top: 14px; }
.m-acct-form:has(input[name="still_held"]:checked) .m-acct-ended { display: none; }
.m-acct-form > .m-btn { margin-top: 16px; }
.m-acct-label { margin-top: 18px; }
.m-account .m-acct-label + .m-card, .m-account .m-pad + .m-acct-rows { margin-top: 8px; }
.m-acct-danger { display: flex; gap: 12px; align-items: flex-start; }
.m-acct-danger strong { display: block; font-size: var(--m-type-15); font-weight: var(--m-weight-600); }
.m-acct-danger p { margin: 4px 0 12px; font-size: var(--m-type-13); line-height: 1.45; color: var(--m-muted); }
.m-acct-delete { width: auto; border: 1px solid #e3b48a; background: #fdf4ea; color: #9a4a12; }
.m-acct-tabs { margin: 0 16px 6px; display: flex; }
.m-acct-tabs button { flex: 1 1 auto; padding: 0 4px; font-size: var(--m-type-13); white-space: nowrap; }
.m-cmp-heads { position: relative; }
.m-cmp-drop { position: absolute; z-index: 1; box-sizing: border-box; padding: 10px 4px 8px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--m-type-11); font-weight: var(--m-weight-600); color: #8a6a24; pointer-events: none; }
.m-cmp-drop::before { content: ""; position: absolute; inset: 10px 4px 8px; border-radius: 14px; border: 1.5px dashed #d8c08a; background: rgba(247, 239, 220, 0.55); z-index: -1; }
/* A sentence where a figure usually sits reads as plain text, not a serif number. */
.m-xitems .m-xitem-text,.m-xstats .m-xstat-text,.m-bill-cta{font-family:var(--m-sans);font-size:var(--m-type-13)}
.m-xitems .m-xitem-text{color:var(--m-muted);white-space:normal;text-align:right}
.m-xrow-big-text,.m-acct-saved-price .m-acct-price-text{font-size:var(--m-type-16)}

/* The fund sheet is modal: a drag on it or its scrim must not scroll the filters page behind. */
.m-ff-scrim, .m-ff-sheet { touch-action: none; }
.m-ff-funds { touch-action: pan-y; }

@media (max-width: 359px) {
  .m-toolbar > * { flex-basis: auto; width: auto; }
  .m-toolbar .m-btn { padding: 0 10px; gap: 6px; white-space: nowrap; }
  .m-card-id { flex-wrap: wrap; }
  .m-card-id > .m-logo { margin-right: auto; }
  .m-card-id-text { order: 1; flex-basis: 100%; }
  .m-header-title-tall { font-size: var(--m-type-20); }
}

/* ---------- Website questionnaire (.m-web, approved canvas WQ1-WQ15, 2026-10-22) ----------
   The same steps as the phone, set in the desktop card. One type scale (34 and 24 serif titles;
   16 lead, 15 answers and controls, 13 supporting text, 12 capital labels) and one palette (ink,
   muted, link green, gold eyebrow, white on the primary button). Selected answers carry the tick on
   their top-right corner; unselected ones show no empty circle. */
.m-web { --m-soft-green: #4f7f62; flex: 1 1 auto; min-height: 0; padding: 0; background: transparent; display: flex; flex-direction: column; color: var(--m-ink); }
.m-web > .m-q-body { flex: 1 1 auto; }
.m-web .m-q-progress { padding: 0; margin: 0 250px 26px 0; }
.m-web .m-q-step { font-size: var(--m-type-13); }
.m-web .m-q-bars { gap: 6px; }
.m-web .m-q-bars span { height: 5px; }
.m-web .m-q-bars span.m-on { background: var(--m-soft-green); }
.m-web .m-q-body { padding: 0; overflow: visible; }
.m-web .m-q-title { justify-content: flex-start; gap: 12px; }
.m-web .m-q-h1 { flex: 0 1 auto; font-size: var(--m-type-34); line-height: 1.15; text-wrap: balance; }
.m-web .m-q-sub { max-width: none; margin-bottom: 22px; font-size: var(--m-type-16); color: var(--m-muted); }
.m-web p, .m-web .m-opt-sub, .m-web .m-q-note-box span, .m-web .m-ready-text { text-wrap: pretty; }
.m-web .m-opts { gap: 12px; padding-top: 7px; overflow: visible; }
.m-web .m-opts-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-web .m-opts-2:has(.m-opt-people), .m-web .m-opts-2.m-opts-tight, .m-web .m-opts-4, .m-web .m-opts-2:has(input[name="income_tier"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.m-web .m-opts-2:has(.m-opt-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-web .m-opts-1:has(.m-plan-row) { grid-template-columns: 1fr; max-width: 820px; }
.m-web .m-level-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); max-width: 900px; }
.m-web .m-fund-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.m-web .m-fund-search { margin-top: 12px; max-width: 420px; }
.m-web .m-opt { position: relative; overflow: visible; }
.m-web .m-opt.m-on, .m-web .m-opt-radio:has(input:checked), .m-web .m-plan-row.m-on { border-color: var(--m-soft-green); box-shadow: 0 4px 12px rgba(16, 50, 31, 0.08); }
.m-web .m-opt .m-opt-mark { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; margin: 0; }
.m-web .m-opt:not(.m-on):not(:has(input:checked)) .m-opt-mark { display: none; }
.m-web .m-on > .m-opt-mark, .m-web .m-opt-radio:has(input:checked) > .m-opt-mark, .m-web .m-plan-head .m-opt-mark { background: var(--m-soft-green); }
.m-web .m-opt.m-on:not(:has(.m-opt-mark))::after, .m-web .m-opt-radio:has(input:checked):not(:has(.m-opt-mark))::after { content: ""; position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--m-soft-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; box-shadow: 0 1px 2px rgba(16, 50, 31, 0.25); }
.m-web .m-opt-tile .m-opt-title { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
/* type scale and palette */
.m-web .m-opt .m-opt-title, .m-web .m-btn, .m-web .m-q-legend, .m-web .m-field-label, .m-web .m-pill-button, .m-web .m-more-label, .m-web .m-text-button, .m-web summary, .m-web .m-addplan strong, .m-web .m-ready-rebate strong, .m-web .m-rebate-summary-text > div, .m-web .m-rebate-summary-text strong, .m-web dd, .m-web .m-q-label-plain { font-size: var(--m-type-15); font-weight: var(--m-weight-600); color: var(--m-ink); }
.m-web .m-btn-primary { color: #ffffff; }
.m-web .m-fund-tile .m-opt-title { font-size: var(--m-type-13); }
.m-web .m-check-text, .m-web .m-help-step, .m-web .m-input, .m-web .m-money { font-size: var(--m-type-15); font-weight: var(--m-weight-400); color: var(--m-ink); }
.m-web .m-help-step strong { font-weight: var(--m-weight-600); }
.m-web .m-opt .m-opt-sub, .m-web .m-q-note-box, .m-web .m-q-note-box span, .m-web .m-q-fine, .m-web .m-q-count, .m-web .m-q-hint, .m-web small, .m-web .m-ready-text, .m-web .m-help-lead, .m-web .m-q-inforow, .m-web .m-q-inforow p, .m-web dt, .m-web .m-more-count, .m-web .m-major span, .m-web .m-chip, .m-web .m-conflict-head, .m-web .m-check-text small { font-size: var(--m-type-13); }
.m-web .m-opt .m-opt-sub, .m-web .m-q-fine, .m-web .m-q-count, .m-web small, .m-web .m-ready-text, .m-web .m-help-lead, .m-web dt, .m-web .m-more-count, .m-web .m-major span, .m-web .m-check-text small { font-weight: var(--m-weight-400); color: var(--m-muted); }
.m-web .m-q-note-box, .m-web .m-q-note-box span, .m-web .m-q-inforow p, .m-web .m-chip, .m-web .m-conflict-head { color: var(--m-ink); }
.m-web .m-q-note-box { max-width: none; }
.m-web .m-q-note-box strong { font-weight: var(--m-weight-600); }
.m-web a, .m-page.m-web a.m-ready-link, .m-web .m-text-link, .m-web .m-link-button, .m-web .m-help-link { font-size: var(--m-type-13); font-weight: var(--m-weight-600); color: var(--m-green); }
.m-web .m-text-button, .m-web .m-more-label { color: var(--m-green); }
.m-web .m-q-label, .m-web .m-eyebrow { font-size: var(--m-type-12); font-weight: var(--m-weight-700); letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-muted); }
.m-web .m-eyebrow-gold { color: var(--m-gold-text); }
.m-web .m-conflict-num { font-size: var(--m-type-12); color: var(--m-ink); }
.m-web .m-ready-title, .m-web .m-finder-name { font-family: var(--m-serif); font-size: var(--m-type-24); font-weight: var(--m-weight-400); color: var(--m-ink); line-height: 1.2; }
/* answer-a-few-more: two cards of equal height, each action on its card's foot */
.m-web .m-ready-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.m-web .m-ready-wrap > .m-card { display: flex; flex-direction: column; margin: 0; }
.m-web .m-ready-wrap > .m-card > .m-btn { margin-top: auto; width: 100%; }
.m-web .m-ready-wrap a.m-ready-link { margin-bottom: 16px; }
.m-web .m-card { margin-left: 0; margin-right: 0; }
/* larger-fund logos and the add-your-plan card */
.m-web .m-major { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--m-border); border-radius: 14px; background: var(--m-surface); }
.m-web .m-major img { height: 20px; width: auto; max-width: 96px; object-fit: contain; }
.m-addplan { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--m-border); border-radius: 14px; background: var(--m-surface-note); }
.m-addplan div { flex: 1; min-width: 0; }
.m-addplan strong { display: block; font-size: var(--m-type-15); font-weight: var(--m-weight-600); color: var(--m-ink); }
.m-addplan small { font-size: var(--m-type-13); color: var(--m-muted); }
.m-addplan .m-btn { width: auto; min-height: 44px; padding: 0 18px; white-space: nowrap; }
.m-major { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 2px; }
.m-major span { font-size: var(--m-type-12); color: var(--m-muted); }
.m-major img { height: 18px; width: auto; max-width: 84px; object-fit: contain; }
/* footer: Back bottom left; Skip and Continue bottom right */
.m-web-footer { position: static; display: flex; align-items: center; gap: 12px; width: 100%; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--m-divider); background: transparent; box-shadow: none; }
.m-web-footer .m-btn { width: auto; flex: none; min-width: 120px; padding: 0 22px; white-space: nowrap; }
.m-web-footer .m-btn-primary { min-width: 200px; }
.m-web-gap { flex: 1 1 auto; }
.m-web-tools { position: absolute; top: 30px; right: 40px; display: flex; gap: 8px; }
.m-web *, .m-web { min-width: 0; }