/* Mondays Feel Good: interface components (the bricks).
   Rules and live specimens: brand pack, section 07 "Components". Load order: tokens.css, motion.css, components.css. motion.css adds the hover animations
   named in the motion rulebook (P1 button sunrise, P2 card lift, P5 best-fit chip, P7 toggle, P9 list marker).
   One state model for everything you can click: rest, hover (pointer devices only), focus, pressed, selected, disabled.
   If it does not do anything, it does not react to the pointer. */

/* ===== Base ===== */
.mfg-page { margin: 0; background: var(--mfg-page); color: var(--mfg-text); font: 400 var(--mfg-text-body)/1.6 var(--mfg-font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
.mfg-page :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0 }

/* The one focus ring. Never remove it; never restyle it per component. */
:where([class^="mfg-"], [class*=" mfg-"]):focus-visible { outline: var(--mfg-border-strong) solid var(--mfg-focus); outline-offset: 2px }

/* ===== Layout ===== */
.mfg-container { width: 100%; max-width: calc(var(--mfg-content) + 2 * var(--mfg-gutter)); margin-inline: auto; padding-inline: var(--mfg-gutter) }
.mfg-section { padding-block: clamp(var(--mfg-space-8), 9vw, var(--mfg-space-9)) }
.mfg-section--soft { background: var(--mfg-soft) }          /* Daybreak: alternate with white */
.mfg-section--ink { background: var(--mfg-ink); color: var(--mfg-night-text); --mfg-text: var(--mfg-night-text); --mfg-muted: var(--mfg-off);
  --mfg-focus: var(--mfg-night-text); --mfg-line: var(--mfg-ink-line);
  --mfg-btn: var(--mfg-night-text); --mfg-on-btn: var(--mfg-ink) }                       /* at most one per page */
.mfg-section--sun { background: var(--mfg-sun); color: var(--mfg-ink) }  /* at most one per page: the closing call to action */
.mfg-stack { display: flex; flex-direction: column; gap: var(--gap, var(--mfg-space-4)) }
.mfg-stack > * { margin: 0 }
.mfg-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--mfg-space-2)) }
.mfg-grid { display: grid; gap: var(--gap, var(--mfg-space-4)); grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 280px), 100%), 1fr)) }
.mfg-split { display: grid; gap: var(--mfg-space-7); align-items: center; grid-template-columns: repeat(2, minmax(0, 1fr)) }
.mfg-measure { max-width: var(--mfg-measure) }
@media (max-width: 760px) { .mfg-split { grid-template-columns: 1fr; gap: var(--mfg-space-6) } }

/* ===== Type ===== */
.mfg-display, .mfg-h1, .mfg-h2, .mfg-h3 { font-family: var(--mfg-font); font-weight: 600; letter-spacing: -.02em; text-wrap: balance }
.mfg-display { font-size: var(--mfg-text-display); line-height: 1.04; letter-spacing: -.03em; max-width: 16ch }
.mfg-h1 { font-size: var(--mfg-text-h1); line-height: 1.1 }
.mfg-h2 { font-size: var(--mfg-text-h2); line-height: 1.15 }
.mfg-h3 { font-size: var(--mfg-text-h3); line-height: 1.3; letter-spacing: -.01em }
.mfg-lede { font-size: var(--mfg-text-lede); line-height: 1.55; color: var(--mfg-text-soft); max-width: 52ch; text-wrap: pretty }
.mfg-body { font-size: var(--mfg-text-body); line-height: 1.6; max-width: var(--mfg-measure); text-wrap: pretty }
.mfg-small { font-size: var(--mfg-text-small); line-height: 1.5; color: var(--mfg-muted) }
.mfg-label { font: 500 var(--mfg-text-label)/1.2 var(--mfg-font); letter-spacing: .08em; text-transform: uppercase; color: var(--mfg-muted) }
.mfg-num { font-variant-numeric: tabular-nums }

/* Emphasis in a headline: the words sit on a Sun label, a solid band from the tops of the letters to the bottoms of g, j and y, so it never
   touches the lines above or below. One per screen, 1 to 4 words. Ink text on Sun reads in light and dark mode. */
.mfg-em { font-style: normal; color: var(--mfg-ink); padding-inline: .1em; margin-inline: -.03em;
  background: linear-gradient(var(--mfg-sun), var(--mfg-sun)) 0 var(--mfg-em-y, 82%) / 100% var(--mfg-em-h, 1.02em) no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone }
.mfg-section--sun .mfg-em { color: var(--mfg-sun); background-image: linear-gradient(var(--mfg-ink), var(--mfg-ink)) }  /* on Sun: an Ink label */
/* Emphasis in running text: <strong> (600). No italics, underline, color or capitals for emphasis. */
.mfg-body strong, .mfg-lede strong { font-weight: 600; color: var(--mfg-text) }

/* Links in running text: always underlined (underline means link, nothing else). Use .mfg-link for links in menus and footers. */
.mfg-body a, .mfg-text-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--mfg-line-strong); transition: text-decoration-color var(--mfg-dur-press), text-decoration-thickness var(--mfg-dur-press) }
.mfg-body a:hover, .mfg-text-link:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px }

/* Pull quote: a real person's words, with name and role. A Sun opening mark hangs in the margin. */
.mfg-quote { position: relative; display: grid; gap: var(--mfg-space-4); max-width: 34ch; padding-left: .6em; font-size: var(--mfg-text-h2) }
.mfg-quote__text { font-weight: 600; line-height: 1.3; letter-spacing: -.015em; text-wrap: balance }
.mfg-quote::before { content: "\201C"; position: absolute; left: -.08em; top: -.2em; font: 600 2.2em/1 var(--mfg-font); color: var(--mfg-sun) }
.mfg-quote__by { display: flex; gap: var(--mfg-space-3); align-items: center; font-size: var(--mfg-text-small); line-height: 1.4 }
.mfg-quote__by b { display: block; font-weight: 600; color: var(--mfg-text) }
.mfg-quote__by span { color: var(--mfg-muted) }
.mfg-quote--sm { font-size: 18px; max-width: none }   /* inside a card, several side by side */

/* Lists in content. Checks use .mfg-checks; the sun marker (P9) is for interactive lists only. */
.mfg-checks { list-style: none; padding: 0; display: grid; gap: var(--mfg-space-2) }
.mfg-checks > li { position: relative; padding-left: 30px }
.mfg-checks > li::before { content: ""; position: absolute; left: 4px; top: .42em; width: 12px; height: 6px; border: solid var(--mfg-ink);
  border-width: 0 0 2px 2px; transform: rotate(-45deg) }
.mfg-section--ink .mfg-checks > li::before { border-color: var(--mfg-sun) }

/* ===== Buttons =====
   4px corners, 48px tall (56px large). One label, sentence case, a verb first. Hover: one change only.
   .mfg-btn               Primary, Ink. The main action of a section. Hover: P1, a Sun half sun rises inside.
   .mfg-btn--sun          The single most important action on the page. At most one per screen. Hover: a white half sun rises.
   .mfg-btn--secondary    Outline. Alternatives next to a primary. Hover: Daybreak fill. No sun.
   .mfg-btn--quiet        Text only, for low-stakes actions (Cancel, Skip). Hover: underline. No sun.
   .mfg-btn--danger       Outline in error red for destructive actions. Never a sun.  */
.mfg-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--mfg-space-2);
  min-height: 48px; padding: 0 var(--mfg-space-5); border: 0; border-radius: var(--mfg-radius-control); cursor: pointer; text-decoration: none; white-space: nowrap;
  background: var(--mfg-btn); color: var(--mfg-on-btn); font: 600 15px/1 var(--mfg-font);
  transition: transform var(--mfg-dur-press) var(--mfg-ease-std), background-color var(--mfg-dur-press), box-shadow var(--mfg-dur-press) }
.mfg-btn:active { transform: scale(.97) }
.mfg-btn--lg { min-height: 56px; padding: 0 var(--mfg-space-6); font-size: 17px }
.mfg-btn--block { width: 100% }
.mfg-btn--sun { background: var(--mfg-sun); color: var(--mfg-ink) }
.mfg-btn--sun .mfg-btn__sun { background: var(--mfg-white) }
.mfg-btn--secondary { background: transparent; color: var(--mfg-text); box-shadow: inset 0 0 0 1.5px currentColor }
.mfg-btn--quiet { background: transparent; color: var(--mfg-text); padding-inline: var(--mfg-space-3); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px }
.mfg-btn--danger { background: transparent; color: var(--mfg-error); box-shadow: inset 0 0 0 1.5px currentColor }
@media (hover: hover) {
  .mfg-btn--secondary:hover { background: var(--mfg-soft) }
  .mfg-btn--quiet:hover { text-decoration-color: currentColor }
  .mfg-btn--danger:hover { background: var(--mfg-error-fill) }
}
.mfg-btn--secondary .mfg-btn__sun, .mfg-btn--quiet .mfg-btn__sun, .mfg-btn--danger .mfg-btn__sun { display: none }
/* Disabled: still readable, never invisible. Prefer saying why an action is unavailable over disabling it. */
.mfg-btn:disabled, .mfg-btn[aria-disabled="true"] { background: var(--mfg-mist); color: var(--mfg-muted); box-shadow: none; cursor: not-allowed; transform: none }
.mfg-btn:disabled .mfg-btn__sun, .mfg-btn[aria-disabled="true"] .mfg-btn__sun { display: none }
/* Busy: keep the width, change the label to a verb ("Saving…"), set aria-busy. Waits over a second get the S6 loader in the content. */
.mfg-btn[aria-busy="true"] { cursor: progress; opacity: .75 }
.mfg-btn[aria-busy="true"] .mfg-btn__sun { display: none }
.mfg-btn svg { width: 18px; height: 18px; flex: none }

/* Icon button: a 44px round target for one icon (save, close, more). Always has an aria-label. */
.mfg-iconbtn { display: inline-grid; place-items: center; width: var(--mfg-target); height: var(--mfg-target); flex: none; border: 0; border-radius: 50%;
  background: transparent; color: var(--mfg-text); cursor: pointer; transition: background-color var(--mfg-dur-press), transform var(--mfg-dur-press) }
.mfg-iconbtn svg { width: 20px; height: 20px }
@media (hover: hover) { .mfg-iconbtn:hover { background: var(--mfg-mist) } }
.mfg-iconbtn:active { transform: scale(.94) }
.mfg-iconbtn[aria-pressed="true"] svg { fill: currentColor }   /* saved: the icon fills in. Not Sun: the card's sun is the yellow on a card */

/* ===== Icons: 24px grid, 1.75px stroke, round ends; 16, 20 or 24px. Ink by default. ===== */
.mfg-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round }
.mfg-icon--16 { width: 16px; height: 16px } .mfg-icon--24 { width: 24px; height: 24px }

/* ===== Boxes =====
   Every box is one of these. Corners from the scale, 1px borders, no shadow at rest (only floating things cast one).
   Nest at most two deep, and an inner corner is never larger than its outer one. */
.mfg-card { position: relative; display: grid; gap: var(--mfg-space-1); min-width: 0; background: var(--mfg-surface); color: var(--mfg-text);
  border: var(--mfg-border) solid var(--mfg-line); border-radius: var(--mfg-radius-card); padding: var(--mfg-space-4) var(--mfg-space-5) }
.mfg-card--roomy { padding: var(--mfg-space-5) var(--mfg-space-6); gap: var(--mfg-space-2) }
.mfg-panel { display: grid; gap: var(--mfg-space-3); background: var(--mfg-soft); color: var(--mfg-text); border-radius: var(--mfg-radius-panel); padding: var(--mfg-space-6) }
.mfg-panel--mist { background: var(--mfg-mist) }
.mfg-panel--outline { background: transparent; border: var(--mfg-border) solid var(--mfg-line) }
.mfg-float { background: var(--mfg-surface); color: var(--mfg-text); border: var(--mfg-border) solid var(--mfg-line); border-radius: var(--mfg-radius-panel);
  box-shadow: var(--mfg-shadow-float) }   /* menus, popovers, dialogs: the only boxes with a shadow at rest */

/* Whole-card links: one real link (usually the title) stretches over the card. Other controls sit above it. */
.mfg-card__link { color: inherit; text-decoration: none }
.mfg-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1 }
.mfg-card__link:focus-visible { outline: none }
.mfg-card:has(.mfg-card__link:focus-visible) { outline: var(--mfg-border-strong) solid var(--mfg-focus); outline-offset: 2px }
.mfg-card :where(button, .mfg-iconbtn, a:not(.mfg-card__link)) { position: relative; z-index: 2 }
.mfg-card:has(.mfg-card__link) { cursor: pointer }
.mfg-card:has(.mfg-card__link):active { transform: translateY(calc(-1 * var(--mfg-lift) / 2)) }

/* Selectable option: a card the person picks (onboarding answers, preferences). Picked = Daybreak fill, Ink border, check. */
.mfg-option { position: relative; display: grid; grid-template-columns: 1fr auto; gap: var(--mfg-space-1) var(--mfg-space-3); align-items: start; cursor: pointer;
  min-height: 56px; padding: var(--mfg-space-4); background: var(--mfg-surface); color: var(--mfg-text); border: var(--mfg-border) solid var(--mfg-line);
  border-radius: var(--mfg-radius-card); transition: border-color var(--mfg-dur-press), background-color var(--mfg-dur-press) }
.mfg-option input { position: absolute; opacity: 0; pointer-events: none }
.mfg-option__title { font-weight: 600 }
.mfg-option__hint { grid-column: 1; font-size: var(--mfg-text-small); color: var(--mfg-muted) }
.mfg-option__check { grid-column: 2; grid-row: 1; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--mfg-line-strong); position: relative }
@media (hover: hover) { .mfg-option:hover { border-color: var(--mfg-line-strong) } }
.mfg-option:has(input:checked) { background: var(--mfg-soft); border-color: var(--mfg-text); box-shadow: inset 0 0 0 1px var(--mfg-text) }
.mfg-option:has(input:checked) .mfg-option__check { background: var(--mfg-text); border-color: var(--mfg-text) }
.mfg-option:has(input:checked) .mfg-option__check::after { content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 4px;
  border: solid var(--mfg-page); border-width: 0 0 2px 2px; transform: rotate(-45deg) }
.mfg-option:has(input:focus-visible) { outline: var(--mfg-border-strong) solid var(--mfg-focus); outline-offset: 2px }
.mfg-option:has(input:disabled) { opacity: .55; cursor: not-allowed }

/* ===== Chips, tags and badges (8px corners) =====
   .mfg-tag     a fact about a job or person. Not clickable. Mist fill.
   .mfg-chip    a filter or choice you can toggle. Outline at rest; Ink fill when pressed (aria-pressed or :checked).
   .mfg-badge   Best fit only (motion.css). At most one per card, on the top match.  */
.mfg-tag { display: inline-flex; align-items: center; gap: var(--mfg-space-1); padding: 4px 9px; border-radius: var(--mfg-radius-control);
  background: var(--mfg-mist); color: var(--mfg-text); font: 500 13px/1.3 var(--mfg-font); white-space: nowrap }
.mfg-tag svg { width: 14px; height: 14px }
.mfg-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--mfg-space-3); border-radius: var(--mfg-radius-control);
  background: var(--mfg-surface); color: var(--mfg-text); border: var(--mfg-border) solid var(--mfg-line-strong); font: 500 14px/1 var(--mfg-font); cursor: pointer;
  transition: background-color var(--mfg-dur-press), color var(--mfg-dur-press), border-color var(--mfg-dur-press), transform var(--mfg-dur-press) }
.mfg-chip input { position: absolute; opacity: 0; pointer-events: none }
@media (hover: hover) { .mfg-chip:hover { background: var(--mfg-soft); border-color: var(--mfg-text) } }
.mfg-chip:active { transform: scale(.96) }
.mfg-chip[aria-pressed="true"], .mfg-chip:has(input:checked) { background: var(--mfg-text); color: var(--mfg-page); border-color: var(--mfg-text) }
.mfg-chip:has(input:focus-visible) { outline: var(--mfg-border-strong) solid var(--mfg-focus); outline-offset: 2px }
/* The chip keeps the 44px tap target on touch screens without looking bigger. */
@media (pointer: coarse) { .mfg-chip { position: relative } .mfg-chip::after { content: ""; position: absolute; inset: -4px 0 } }

/* Sponsorship evidence: always says what kind of evidence it is, its source and date, or that it is unknown.
   Never a bare "Sponsors visas". Labels are provisional until the sponsorship evidence decision (Product Companion). */
.mfg-evidence { display: grid; grid-template-columns: 20px 1fr; gap: 2px var(--mfg-space-2); align-items: start; font-size: var(--mfg-text-small); line-height: 1.45 }
.mfg-evidence svg { width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round }
.mfg-evidence b { font-weight: 600 }
.mfg-evidence__src { grid-column: 2; color: var(--mfg-muted) }
.mfg-evidence--job svg { color: var(--mfg-success) }
.mfg-evidence--history svg { color: var(--mfg-text) }
.mfg-evidence--unknown svg { color: var(--mfg-muted) }

/* Company logo tile: the employer's logo exactly as supplied. No logo: first letter in Ink on Daybreak. Never a sun here. */
.mfg-logo { display: grid; place-items: center; width: 40px; height: 40px; flex: none; overflow: hidden; border-radius: var(--mfg-radius-logo);
  background: var(--mfg-white); border: var(--mfg-border) solid var(--mfg-line) }
.mfg-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px }
.mfg-logo--letter { background: var(--mfg-daybreak); color: var(--mfg-ink); border-color: var(--mfg-warm-line); font: 600 17px/1 var(--mfg-font) }
.mfg-logo--lg { width: 56px; height: 56px; font-size: 22px }

/* Avatar: a person. Circle, photo or initials on Mist. */
.mfg-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; background: var(--mfg-mist);
  color: var(--mfg-text); font: 600 14px/1 var(--mfg-font) }
.mfg-avatar img { width: 100%; height: 100%; object-fit: cover }

/* ===== The job card: the brick the product is built from ===== */
.mfg-job { display: grid; grid-template-columns: auto 1fr auto; gap: var(--mfg-space-1) var(--mfg-space-4); align-items: start }
.mfg-job > .mfg-logo { grid-row: span 2 }
.mfg-job__title { font: 600 18px/1.3 var(--mfg-font); letter-spacing: -.01em }
.mfg-job__co { grid-column: 2; font-size: var(--mfg-text-small); color: var(--mfg-muted) }
.mfg-job__save { grid-column: 3; grid-row: 1 / span 2; margin: -6px -10px 0 0 }
.mfg-job:has(> .mfg-badge) .mfg-job__save { grid-row: 2 / span 2 }
.mfg-job__body { grid-column: 1 / -1; display: grid; gap: var(--mfg-space-3); margin-top: var(--mfg-space-3) }
.mfg-job .mfg-badge { grid-column: 1 / -1; margin-bottom: var(--mfg-space-2) }
@media (max-width: 420px) { .mfg-job { column-gap: var(--mfg-space-3) } .mfg-job__body { grid-column: 1 / -1 } }

/* ===== Notices: inline messages. Status color + icon + words; color never carries the meaning alone. No sun. ===== */
.mfg-notice { display: grid; grid-template-columns: 20px 1fr; gap: var(--mfg-space-1) var(--mfg-space-3); align-items: start; padding: var(--mfg-space-4);
  border-radius: var(--mfg-radius-panel); background: var(--mfg-mist); color: var(--mfg-text); font-size: 15px; line-height: 1.5 }
.mfg-notice svg { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round }
.mfg-notice b { font-weight: 600 }
.mfg-notice > :not(svg) { grid-column: 2 }
.mfg-notice--success { background: var(--mfg-success-fill) } .mfg-notice--success svg { color: var(--mfg-success) }
.mfg-notice--warning { background: var(--mfg-warning-fill) } .mfg-notice--warning svg { color: var(--mfg-warning) }
.mfg-notice--error { background: var(--mfg-error-fill) }     .mfg-notice--error svg { color: var(--mfg-error) }

/* ===== Forms =====
   Label above, 48px fields, 16px+ text (no zoom on iPhone), help below, error replaces help. Mark optional fields, not required ones. */
.mfg-field { display: grid; gap: 6px; min-width: 0 }
.mfg-field__label { font: 600 var(--mfg-text-small)/1.3 var(--mfg-font); color: var(--mfg-text) }
.mfg-field__label small { font-weight: 400; color: var(--mfg-muted); font-size: inherit }
.mfg-field__help { font-size: var(--mfg-text-small); color: var(--mfg-muted); line-height: 1.45 }
.mfg-field__error { display: none; gap: 6px; align-items: center; font-size: var(--mfg-text-small); font-weight: 500; color: var(--mfg-error) }
.mfg-field__error svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round }
.mfg-input, .mfg-select, .mfg-textarea { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: var(--mfg-radius-control);
  border: var(--mfg-border) solid var(--mfg-line-strong); background: var(--mfg-surface); color: var(--mfg-text); font: 400 16px/1.4 var(--mfg-font);
  transition: border-color var(--mfg-dur-press), box-shadow var(--mfg-dur-press) }
.mfg-input::placeholder, .mfg-textarea::placeholder { color: var(--mfg-muted); opacity: 1 }
.mfg-textarea { min-height: 120px; resize: vertical }
@media (hover: hover) { :is(.mfg-input, .mfg-select, .mfg-textarea):hover:not(:focus, :disabled) { border-color: var(--mfg-text) } }
:is(.mfg-input, .mfg-select, .mfg-textarea):focus { outline: none; border-color: var(--mfg-focus); box-shadow: 0 0 0 1px var(--mfg-focus) }
:is(.mfg-input, .mfg-select, .mfg-textarea):disabled { background: var(--mfg-mist); color: var(--mfg-muted); cursor: not-allowed }
.mfg-field.is-invalid :is(.mfg-input, .mfg-select, .mfg-textarea) { border-color: var(--mfg-error); box-shadow: 0 0 0 1px var(--mfg-error) }
.mfg-field.is-invalid .mfg-field__error { display: flex }
.mfg-field.is-invalid .mfg-field__help { display: none }
.mfg-select-wrap { position: relative }
.mfg-select { appearance: none; padding-right: 40px; cursor: pointer }
.mfg-select-wrap::after { content: ""; position: absolute; right: 17px; top: 50%; width: 7px; height: 7px; margin-top: -6px; pointer-events: none;
  border: solid var(--mfg-text); border-width: 0 1.75px 1.75px 0; transform: rotate(45deg) }
.mfg-search { position: relative }
.mfg-search svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--mfg-muted); pointer-events: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round }
.mfg-search .mfg-input { padding-left: 44px }
/* Checkboxes and radios are native, tinted Ink: accessible everywhere for free. */
.mfg-check { display: inline-flex; gap: var(--mfg-space-3); align-items: flex-start; min-height: var(--mfg-target); padding-block: 10px; cursor: pointer; font-size: 16px; line-height: 1.4 }
.mfg-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--mfg-text); cursor: pointer }
/* Segmented control: switch between 2 to 4 views of the same thing. Radios in a Mist track. */
.mfg-segmented { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--mfg-radius-card); background: var(--mfg-mist) }
.mfg-segmented label { position: relative; display: grid; place-items: center; min-height: 40px; padding: 0 var(--mfg-space-4); border-radius: var(--mfg-radius-control);
  font: 500 14px/1 var(--mfg-font); color: var(--mfg-muted); cursor: pointer; transition: background-color var(--mfg-dur-press), color var(--mfg-dur-press) }
.mfg-segmented input { position: absolute; opacity: 0; pointer-events: none }
@media (hover: hover) { .mfg-segmented label:hover { color: var(--mfg-text) } }
.mfg-segmented label:has(input:checked) { background: var(--mfg-surface); color: var(--mfg-text); font-weight: 600; box-shadow: 0 0 0 1px var(--mfg-line) }
.mfg-segmented label:has(input:focus-visible) { outline: var(--mfg-border-strong) solid var(--mfg-focus); outline-offset: 1px }
/* Drop zone: résumé upload. The only dashed border in the system. */
.mfg-drop { display: grid; justify-items: center; gap: var(--mfg-space-2); padding: var(--mfg-space-6) var(--mfg-space-5); text-align: center; cursor: pointer;
  border: 1.5px dashed var(--mfg-line-strong); border-radius: var(--mfg-radius-panel); color: var(--mfg-text); transition: background-color var(--mfg-dur-press), border-color var(--mfg-dur-press) }
.mfg-drop svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round }
.mfg-drop input { position: absolute; opacity: 0; pointer-events: none }
@media (hover: hover) { .mfg-drop:hover { background: var(--mfg-soft); border-color: var(--mfg-text) } }
.mfg-drop.is-over { background: var(--mfg-soft); border-color: var(--mfg-text); border-style: solid }
.mfg-drop:has(input:focus-visible) { outline: var(--mfg-border-strong) solid var(--mfg-focus); outline-offset: 2px }

/* ===== Navigation ===== */
.mfg-nav { display: flex; align-items: center; gap: var(--mfg-space-1) }
.mfg-nav a { display: inline-flex; align-items: center; min-height: var(--mfg-target); padding: 0 var(--mfg-space-3); border-radius: var(--mfg-radius-control);
  color: var(--mfg-text); text-decoration: none; font: 500 15px/1 var(--mfg-font); transition: background-color var(--mfg-dur-press) }
@media (hover: hover) { .mfg-nav a:hover { background: var(--mfg-mist) } }
.mfg-nav a[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -2px 0 var(--mfg-text); border-radius: 0 }
/* Tabs that change the page section: an Ink underline marks the current one. */
.mfg-tabs { display: flex; gap: var(--mfg-space-5); border-bottom: var(--mfg-border) solid var(--mfg-line); overflow-x: auto; scrollbar-width: none }
.mfg-tabs a, .mfg-tabs button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: var(--mfg-target); padding-bottom: 2px;
  font: 500 15px/1 var(--mfg-font); color: var(--mfg-muted); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px }
@media (hover: hover) { .mfg-tabs :is(a, button):hover { color: var(--mfg-text) } }
.mfg-tabs [aria-current="page"], .mfg-tabs [aria-selected="true"] { color: var(--mfg-text); font-weight: 600; border-bottom-color: var(--mfg-text) }
.mfg-tabs :is(a, button):focus-visible { outline: var(--mfg-border-strong) solid var(--mfg-focus); outline-offset: 2px }

/* ===== Site header and phone tab bar =====
   Rules and live examples: brand pack section 07, Navigation. Behavior: initSiteHeader() in motion.js.
   A floating bar: it sits 12px below the top of the window and in from the sides, over the page's first section.
   Builds on P17 (.mfg-header, .mfg-header__name, .mfg-header__mark, initCollapsingHeader) and the nav, button,
   avatar and float bricks. Responds to its container: put .mfg-shell on the page wrapper. Under 760px the links
   move into the menu panel (signed out) or the floating tab bar (signed in), and the logo is the M alone.
   Alignment: the bar lines everything up on one text baseline. The name's artwork is cropped at its baseline
   (descenders hang below), so the name, the links and the button labels share a baseline in every browser. */
.mfg-shell { container-type: inline-size; container-name: mfg-shell; --mfg-bar-gap: 12px; --mfg-bar-h: 56px }
.mfg-sitehead { display: block; height: auto; padding: var(--mfg-bar-gap) var(--mfg-gutter) 0; background: transparent; border: 0;
  top: var(--mfg-safe-top, env(safe-area-inset-top, 0px)); pointer-events: none }
.mfg-sitehead + * { margin-top: calc(-1 * (var(--mfg-bar-gap) + var(--mfg-bar-h))); padding-top: calc(var(--mfg-bar-gap) + var(--mfg-bar-h) + var(--pad-top, 0px)) }
.mfg-sitehead__bar { pointer-events: auto; display: flex; align-items: baseline; gap: var(--mfg-space-5); height: var(--mfg-bar-h);
  max-width: var(--mfg-content); margin-inline: auto; padding: 8px 8px 8px 20px; box-sizing: border-box;
  background: var(--mfg-surface); color: var(--mfg-text); border: var(--mfg-border) solid var(--mfg-line); border-radius: var(--mfg-radius-panel);
  box-shadow: var(--mfg-shadow-float) }
.mfg-sitehead__logo { position: relative; display: flex; flex: none; color: var(--mfg-text); margin-right: var(--mfg-space-3) }
.mfg-sitehead .mfg-header__name { position: relative; top: 1.5px; display: block; width: 168px; height: auto; overflow: visible }   /* optical: the artwork's letters sit 1.5px above its baseline */
.mfg-sitehead .mfg-header__mark { left: -4px; top: 50%; width: 40px; height: 40px; margin-top: -18px; overflow: visible }   /* centred in the bar */
.mfg-sitehead__nav { flex: 1; min-width: 0; align-self: baseline }
.mfg-sitehead__nav a { min-height: 40px }
.mfg-sitehead__nav a[aria-current="page"] { box-shadow: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px }
.mfg-sitehead__actions { display: flex; align-items: baseline; gap: var(--mfg-space-1); margin-left: auto }
.mfg-sitehead__menubtn, .mfg-sitehead__panel { display: none }
.mfg-btn--sm { min-height: 40px; padding: 0 var(--mfg-space-4); font-size: 15px }
.mfg-btn--sm::after { content: ""; position: absolute; inset: -2px 0 }   /* keeps a 44px tap target */
.mfg-btn--quiet.mfg-btn--sm { padding-inline: var(--mfg-space-3) }
.mfg-sitehead .mfg-iconbtn { width: 40px; height: 40px; align-self: center }
.mfg-sitehead .mfg-iconbtn::after { content: ""; position: absolute; inset: -2px }
.mfg-sitehead .mfg-account { align-self: center }

/* Skip link: first thing a keyboard user reaches. */
.mfg-skip { position: absolute; left: var(--mfg-gutter); top: 0; z-index: 30; padding: 10px 14px; border-radius: var(--mfg-radius-control); pointer-events: auto;
  background: var(--mfg-btn); color: var(--mfg-on-btn); font: 600 14px/1 var(--mfg-font); text-decoration: none; transform: translateY(calc(-100% - 24px)) }
.mfg-skip:focus { transform: translateY(var(--mfg-bar-gap)) }

/* Account menu (signed in): avatar button and a floating menu. */
.mfg-account { position: relative }
.mfg-account__btn { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 6px 0 2px; border: 0;
  border-radius: var(--mfg-radius-control); background: transparent; color: var(--mfg-text); cursor: pointer; transition: background-color var(--mfg-dur-press) }
.mfg-account__btn .mfg-avatar { width: 36px; height: 36px; font-size: 13px }
@media (hover: hover) { .mfg-account__btn:hover { background: var(--mfg-mist) } }
.mfg-menu { position: absolute; right: 0; top: calc(100% + 14px); z-index: 40; width: min(260px, calc(100vw - 32px)); padding: var(--mfg-space-2); display: grid }
.mfg-menu[hidden] { display: none }
.mfg-menu:not([hidden]) { animation: mfg-fade-up var(--mfg-dur-hover) var(--mfg-ease-std) both }
.mfg-menu__who { display: grid; padding: var(--mfg-space-2) var(--mfg-space-3) var(--mfg-space-3); font-size: var(--mfg-text-small); line-height: 1.4 }
.mfg-menu__who span { color: var(--mfg-muted) }
.mfg-menu a { display: flex; align-items: center; min-height: var(--mfg-target); padding: 0 var(--mfg-space-3); border-radius: var(--mfg-radius-control);
  color: var(--mfg-text); text-decoration: none; font: 500 15px/1 var(--mfg-font) }
@media (hover: hover) { .mfg-menu a:hover { background: var(--mfg-mist) } }
.mfg-menu .mfg-rule { margin: var(--mfg-space-1) var(--mfg-space-3) }

/* Floating tab bar: signed in, phones only. */
.mfg-tabbar { display: none }

@container mfg-shell (max-width: 759px) {
  .mfg-sitehead { padding-inline: var(--mfg-bar-gap) }
  .mfg-sitehead__bar { gap: var(--mfg-space-2); padding: 8px 8px 8px 12px }
  /* Phones show the M alone: no room for the full name, and no collapse on scroll. */
  .mfg-sitehead__logo { align-self: center; margin-right: 0 }
  .mfg-sitehead .mfg-header__name { display: none }
  .mfg-sitehead .mfg-header__mark, .mfg-sitehead.is-compact .mfg-header__mark { position: static; width: 38px; height: 38px; margin: 0; opacity: 1; transform: none }
  .mfg-sitehead__nav, .mfg-sitehead__signin { display: none }   /* Sign in moves into the menu */
  .mfg-sitehead__menubtn { display: inline-grid }
  .mfg-sitehead__panel { position: fixed; z-index: 25; top: calc(var(--mfg-safe-top, env(safe-area-inset-top, 0px)) + var(--mfg-bar-gap) + var(--mfg-bar-h) + 8px);
    left: var(--mfg-bar-gap); right: var(--mfg-bar-gap); bottom: calc(var(--mfg-bar-gap) + var(--mfg-safe-bottom, env(safe-area-inset-bottom, 0px)));
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--mfg-space-6); padding: var(--mfg-space-2) var(--mfg-space-5) var(--mfg-space-5);
    background: var(--mfg-surface); border: var(--mfg-border) solid var(--mfg-line); border-radius: var(--mfg-radius-panel); box-shadow: var(--mfg-shadow-float);
    overflow-y: auto; pointer-events: auto; animation: mfg-fade-up var(--mfg-dur-hover) var(--mfg-ease-std) both }
  .mfg-sitehead__panel[hidden] { display: none }
  .mfg-sitehead__panel nav { display: grid }
  .mfg-sitehead__panel nav a { display: flex; align-items: center; min-height: 60px; border-bottom: var(--mfg-border) solid var(--mfg-line);
    color: var(--mfg-text); text-decoration: none; font: 600 24px/1.2 var(--mfg-font); letter-spacing: -.01em }
  .mfg-sitehead__panel nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px }
  .mfg-sitehead__panelfoot { display: grid; gap: var(--mfg-space-3) }
  .mfg-sitehead.is-open .mfg-sitehead__start { visibility: hidden }   /* the panel has its own, full width */
  .mfg-tabbar { position: fixed; z-index: 20; left: var(--mfg-bar-gap); right: var(--mfg-bar-gap); bottom: calc(var(--mfg-bar-gap) + var(--mfg-safe-bottom, env(safe-area-inset-bottom, 0px)));
    display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; background: var(--mfg-surface); border: var(--mfg-border) solid var(--mfg-line);
    border-radius: var(--mfg-radius-panel); box-shadow: var(--mfg-shadow-float) }
  .mfg-tabbar a { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 54px; border-radius: var(--mfg-radius-control); color: var(--mfg-muted);
    text-decoration: none; font: 500 12px/1.2 var(--mfg-font); transition: color var(--mfg-dur-press), background-color var(--mfg-dur-press) }
  .mfg-tabbar a[aria-current="page"] { color: var(--mfg-text); font-weight: 600; background: var(--mfg-mist) }
  .mfg-tabbar a[aria-current="page"] svg { stroke-width: 2.1 }
  .mfg-tabbar a:focus-visible { outline: var(--mfg-border-strong) solid var(--mfg-focus); outline-offset: -2px }
}
@media (prefers-reduced-motion: reduce) { .mfg-sitehead__panel, .mfg-menu:not([hidden]) { animation: mfg-fade-in 150ms both } }

/* ===== Disclosure (FAQ): native details. Chevron turns; the answer uses the default entrance (.mfg-enter). ===== */
.mfg-faq { border-top: var(--mfg-border) solid var(--mfg-line) }
.mfg-faq details { border-bottom: var(--mfg-border) solid var(--mfg-line) }
.mfg-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--mfg-space-4); min-height: 64px;
  padding-block: var(--mfg-space-3); cursor: pointer; font: 600 18px/1.35 var(--mfg-font) }
.mfg-faq summary::-webkit-details-marker { display: none }
.mfg-faq summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -5px 6px 0 0; border: solid var(--mfg-text); border-width: 0 1.75px 1.75px 0;
  transform: rotate(45deg); transition: transform var(--mfg-dur-ui) var(--mfg-ease-out) }
.mfg-faq details[open] summary::after { transform: translateY(4px) rotate(225deg) }
.mfg-faq summary:focus-visible { outline: var(--mfg-border-strong) solid var(--mfg-focus); outline-offset: 2px }
.mfg-faq details > :not(summary) { padding-bottom: var(--mfg-space-5); color: var(--mfg-muted); max-width: var(--mfg-measure) }
.mfg-faq details[open] > :not(summary) { animation: mfg-fade-up var(--mfg-dur-hover) var(--mfg-ease-std) both }

/* ===== Steps: How it works. Numbers in Mist circles; the sun is not used for numbering. ===== */
.mfg-steps { list-style: none; padding: 0; counter-reset: mfg-step; display: grid; gap: var(--mfg-space-6); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) }
.mfg-steps > li { counter-increment: mfg-step; display: grid; gap: var(--mfg-space-2); align-content: start }
.mfg-steps > li::before { content: counter(mfg-step); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: var(--mfg-space-2); border-radius: 50%;
  background: var(--mfg-surface); border: var(--mfg-border) solid var(--mfg-line); font: 600 15px/1 var(--mfg-font); color: var(--mfg-text) }

/* ===== Data ===== */
.mfg-table-wrap { overflow-x: auto; border: var(--mfg-border) solid var(--mfg-line); border-radius: var(--mfg-radius-card) }
.mfg-table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--mfg-surface) }
.mfg-table th { font: 500 var(--mfg-text-label)/1.2 var(--mfg-font); letter-spacing: .08em; text-transform: uppercase; color: var(--mfg-muted); text-align: left; background: var(--mfg-mist) }
.mfg-table :is(th, td) { padding: var(--mfg-space-3) var(--mfg-space-4); border-bottom: var(--mfg-border) solid var(--mfg-line); vertical-align: top }
.mfg-table tr:last-child td { border-bottom: 0 }
.mfg-table .is-num { text-align: right; font-variant-numeric: tabular-nums }
.mfg-table tr.is-you td { background: var(--mfg-soft); font-weight: 600 }   /* "You" is always yellow */

/* ===== Dividers ===== */
.mfg-rule { height: 0; border: 0; border-top: var(--mfg-border) solid var(--mfg-line); margin: 0 }
.mfg-horizon { height: 0; border: 0; border-top: var(--mfg-border) solid var(--mfg-ink); opacity: .15; margin: 0 }   /* only under the big sun */

/* ===== Dialog: native <dialog>. Opens with the panel timing; the backdrop is Ink at 40%. ===== */
.mfg-dialog { width: min(520px, calc(100vw - 32px)); padding: var(--mfg-space-6); border: 0; border-radius: var(--mfg-radius-panel); background: var(--mfg-surface);
  color: var(--mfg-text); box-shadow: var(--mfg-shadow-float) }
.mfg-dialog::backdrop { background: var(--mfg-scrim) }
.mfg-dialog[open] { animation: mfg-fade-up var(--mfg-dur-ui) var(--mfg-ease-out) both }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .mfg-btn, .mfg-iconbtn, .mfg-chip, .mfg-option, .mfg-faq summary::after { transition-duration: 1ms }
  .mfg-btn:active, .mfg-iconbtn:active, .mfg-chip:active, .mfg-card:has(.mfg-card__link):active { transform: none }
  .mfg-faq details[open] > :not(summary), .mfg-dialog[open] { animation: mfg-fade-in 150ms both }
}