/* ==========================================================================
   Resources hub — /resources/, its category and topic pages, articles and
   download pages. Loaded by those templates (pageCss: resources).

   Components and their data-mf-* attributes are in
   src/_includes/partials/resources/macros.njk. Buttons here use the
   design system's action fill (--action), not the site's --grad-cta: white
   on the gradient is under 4.5:1 for small text. Sizes come from the type
   scale only (npm run lint:css).
   ========================================================================== */

/* --- Page ground ----------------------------------------------------------
   The site's warm wash is fixed to the viewport, so a full-page render (and
   a print) shows it only for the first screen and then a hard edge. On the
   hub's pages it scrolls with the page instead and stretches over its whole
   height, as on the design canvas, with the dot grid laid over all of it.
   This stylesheet loads only on those pages. */
body { position: relative; background-attachment: scroll; }
body::before { position: absolute; }

/* --- Frame --------------------------------------------------------------- */

.mf-res-wrap {
  max-inline-size: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--space-s-l);
  box-sizing: content-box;
}

.mf-res-section { padding-block: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-m); }
.mf-res-section--after-band { padding-block-start: var(--space-2xl); }
.mf-res-section-tail { padding-block-end: var(--space-2xl); }
.mf-res-section__head { display: flex; flex-direction: column; gap: var(--space-2xs); }
.mf-res-section__head--split { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-s); }
.mf-res-section__note { margin: 0; max-inline-size: 46ch; font-size: var(--step--1); line-height: var(--line-relaxed); color: var(--ink-body); }

/* A lighter band across the page, ruled top and bottom. */
.mf-res-band {
  background: rgb(255 250 244 / 0.6);
  border-block: 1px solid var(--paper-800);
}
.mf-res-band--top { border-block-end: 0; }

.mf-res-spacer { block-size: var(--space-2xl); }

/* --- Type ---------------------------------------------------------------- */

.mf-res-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--step-4);
  line-height: 1.1;
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  text-wrap: balance;
}

.mf-res-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--step-3);
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}

.mf-res-h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--step-2);
  line-height: 1.25;
  color: var(--ink);
}

.mf-res-lead {
  margin: 0;
  max-inline-size: 62ch;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink-body);
  text-wrap: pretty;
}

.mf-res-eyebrow {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.mf-res-eyebrow--dark { color: var(--flare-ember); }

.mf-res-meta { margin: 0; font-size: var(--step--1); color: var(--ink-muted); }

.mf-res-link {
  font-size: var(--step--1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-text);
}

/* --- Pills, chips, buttons ----------------------------------------------
   No `cursor` here or anywhere in this file: site.js draws the site's own
   cursor and hides the system one (.mf-cursor-on in components.css), and a
   cursor declared here would win over that and show both at once. */

.mf-res-tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }

.mf-res-pill {
  display: inline-flex;
  align-items: center;
  inline-size: max-content;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent-text-strong);
  background: var(--flare-a10);
}
.mf-res-pill--live { color: var(--status-live); background: var(--status-live-soft); }
.mf-res-pill--live-dark { color: var(--status-live-on-dark); background: var(--status-live-on-dark-soft); }
.mf-res-pill--beta { color: var(--ink-body); background: var(--paper-700); border: 1px solid var(--border-light-strong); }

.mf-res-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

.mf-res-chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-light);
  background: var(--paper-100);
  color: var(--ink-body);
  font: inherit;
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.mf-res-chip:hover { border-color: var(--border-light-strong); color: var(--ink); text-decoration: none; }
.mf-res-chip--on { background: var(--ink); border-color: var(--ink); color: var(--ink-on-dark); }
.mf-res-chip--on:hover { color: var(--ink-on-dark); }
.mf-res-chip--sm { min-block-size: 32px; font-size: var(--step--2); }

.mf-res-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-block-size: 48px;
  padding: 0 var(--space-m);
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.mf-res-btn:hover { text-decoration: none; }
.mf-res-btn--action { background: var(--action); color: var(--ink-on-dark); }
.mf-res-btn--action:hover { background: var(--action-hover); color: var(--ink-on-dark); }
.mf-res-btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-light-strong); }
.mf-res-btn--ghost:hover { color: var(--ink); border-color: var(--ink-muted); }
.mf-res-btn--block { inline-size: 100%; }

.mf-res-btnrow { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* --- Cards --------------------------------------------------------------- */

.mf-res-card {
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-stage);
  box-shadow: var(--shadow-tile);
}

a.mf-res-card { color: var(--ink-body); text-decoration: none; transition: border-color var(--transition-fast), box-shadow var(--transition-base); }
a.mf-res-card:hover { color: var(--ink-body); border-color: var(--border-light-strong); box-shadow: var(--shadow-tile-hover); text-decoration: none; }

/* Article card (hub grid, Keep reading) */
.mf-res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-m); }
.mf-res-acard { display: flex; flex-direction: column; overflow: hidden; }
.mf-res-acard > img { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.mf-res-acard__cover { display: flex; justify-content: center; align-items: center; aspect-ratio: 16 / 9; background: var(--paper-400); overflow: hidden; }
.mf-res-acard__cover img { block-size: 82%; inline-size: auto; border-radius: var(--radius-xs); box-shadow: var(--shadow-card-sm); transform: rotate(-2deg); }
.mf-res-acard__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-s) var(--space-m) var(--space-m); }
.mf-res-acard__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--step-0); line-height: 1.3; color: var(--ink); }
.mf-res-acard__desc { font-size: var(--step--1); line-height: var(--line-relaxed); }
.mf-res-acard .mf-res-meta { margin-block-start: auto; }

/* Wide card: image beside text, stacking when narrow */
.mf-res-wide { display: flex; flex-wrap: wrap; overflow: hidden; }
.mf-res-wide > img { flex: 1 1 260px; min-inline-size: 0; aspect-ratio: 16 / 10; object-fit: cover; block-size: auto; }
.mf-res-wide__body { flex: 2 1 320px; display: flex; flex-direction: column; justify-content: center; gap: var(--space-2xs); padding: var(--space-m); }
.mf-res-wide__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--step-1); line-height: 1.25; color: var(--ink); }
.mf-res-wide__desc { font-size: var(--step-0); line-height: var(--line-relaxed); }
.mf-res-wide--big > img { flex-basis: 320px; }
.mf-res-wide--big .mf-res-wide__body { flex: 1 1 300px; }
.mf-res-wide--big .mf-res-wide__title { font-size: var(--step-2); line-height: 1.2; }

/* Download card: the cover beside the text */
.mf-res-dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-m); }
.mf-res-dcard { display: flex; gap: var(--space-m); align-items: flex-start; padding: var(--space-m); }
.mf-res-dcard > img { flex: none; inline-size: 104px; block-size: auto; border-radius: var(--radius-xs); box-shadow: 0 6px 18px rgb(26 18 8 / 0.16); }
.mf-res-dcard__body { display: flex; flex-direction: column; gap: var(--space-2xs); }
.mf-res-dcard__tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.mf-res-dcard__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--step-0); line-height: 1.25; color: var(--ink); }
.mf-res-dcard__desc { font-size: var(--step--1); line-height: var(--line-relaxed); }
.mf-res-dcard--big { flex-wrap: wrap; align-items: center; gap: var(--space-m); padding: var(--space-m) var(--space-l); }
.mf-res-dcard--big > img { inline-size: 150px; box-shadow: 0 12px 28px rgb(26 18 8 / 0.18); }
.mf-res-dcard--big .mf-res-dcard__body { flex: 1 1 300px; }
.mf-res-dcard--big .mf-res-dcard__title { font-size: var(--step-2); line-height: 1.2; }
.mf-res-dcard--big .mf-res-dcard__desc { font-size: var(--step-0); }

/* Small download link with the file icon, for asides */
.mf-res-mini { display: flex; gap: var(--space-xs); align-items: center; padding: var(--space-s); border-radius: var(--radius-stage); }
.mf-res-mini > span { display: flex; flex-direction: column; gap: 2px; }
.mf-res-mini__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--step-0); line-height: 1.3; color: var(--ink); }
.mf-res-mini__meta { font-size: var(--step--1); color: var(--ink-muted); }

/* The file icon */
.mf-res-ficon { flex: none; display: block; }
.mf-res-ficon__page { fill: var(--surface-white); stroke: var(--border-light-strong); stroke-width: 1.5; }
.mf-res-ficon__fold { fill: var(--paper-700); stroke: var(--border-light-strong); stroke-width: 1.5; stroke-linejoin: round; }
.mf-res-ficon__lines { stroke: var(--border-light); stroke-width: 2; stroke-linecap: round; fill: none; }
.mf-res-ficon__band { fill: var(--ink-muted); }
.mf-res-ficon--docx .mf-res-ficon__band { fill: var(--file-docx); }
.mf-res-ficon--pdf .mf-res-ficon__band { fill: var(--file-pdf); }
.mf-res-ficon text { fill: var(--surface-white); font-family: var(--font-ui); font-weight: var(--weight-extrabold); letter-spacing: 0.5px; }

/* Product card — our ad, drawn as a banner (direction C on the hub
   canvas). Orange by default: the action-orange panel, white text, the
   flare rings in faint white behind the visual (never the text), a white
   pill and a white button. Dark is the alternative: the coal panel, orange
   rings, the dark pills and the orange action button. Light, for pages
   where either would shout: a warm paper card with orange rings, ink text,
   the light pills and the orange button. Every text pairing holds 4.5:1 or
   better (white on --action is 4.50:1). */
.mf-res-product-wrap { position: relative; }

.mf-res-product {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  overflow: hidden;
  padding: var(--space-m);
  border-radius: var(--radius-stage);
}
.mf-res-product--orange { background: var(--action); color: var(--ink-on-dark); }
.mf-res-product--dark { background: var(--panel-dark-deep); color: var(--ink-on-dark-body); }
.mf-res-product--light {
  background: linear-gradient(160deg, var(--paper-100), var(--paper-banner));
  border: 1px solid var(--flare-a25);
  box-shadow: var(--shadow-banner-light);
  color: var(--ink-body);
}

.mf-res-product__rings {
  position: absolute;
  inline-size: 380px;
  aspect-ratio: 1;
  inset-inline-end: -170px;
  inset-block-start: -150px;
  border-radius: 50%;
  border: 30px solid var(--white-a10);
  pointer-events: none;
}
.mf-res-product--dark .mf-res-product__rings { border-color: var(--flare-a30); }
.mf-res-product--light .mf-res-product__rings { border-color: var(--flare-a15); }
.mf-res-product__rings--inner { inline-size: 220px; inset-inline-end: -90px; inset-block-start: -70px; border-width: 26px; }
.mf-res-product--light .mf-res-product__rings--inner { border-color: var(--flare-a20); }

.mf-res-product__visual { position: relative; display: flex; justify-content: center; margin: var(--space-3xs) var(--space-3xs) var(--space-2xs); }
.mf-res-product__visual img { display: block; block-size: auto; box-shadow: var(--shadow-banner-visual); }
.mf-res-product__visual--screen img { inline-size: 100%; border-radius: var(--radius-lg); transform: rotate(-2deg); }
.mf-res-product__visual--page img { inline-size: 52%; border-radius: var(--radius-xs); transform: rotate(-4deg); }
.mf-res-product__visual--icon { padding-block: var(--space-xs); }

.mf-res-product__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 104px;
  aspect-ratio: 1;
  border-radius: var(--radius-stage);
  background: var(--surface-white);
  color: var(--action);
  box-shadow: var(--shadow-banner-visual);
  transform: rotate(-4deg);
}
.mf-res-product--dark .mf-res-product__chip,
.mf-res-product--light .mf-res-product__chip { background: var(--grad-icon); color: var(--ink-on-dark); }

.mf-res-product__body { position: relative; display: flex; flex-direction: column; gap: var(--space-xs); }
.mf-res-product__tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.mf-res-product__from { font-size: var(--step--2); font-weight: var(--weight-bold); letter-spacing: var(--tracking-widest); text-transform: uppercase; }
.mf-res-product--dark .mf-res-product__from { color: var(--ink-on-dark-body); }
.mf-res-product--light .mf-res-product__from { color: var(--accent-text); }
.mf-res-product__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--step-1); line-height: 1.2; color: var(--ink-on-dark); text-wrap: balance; }
.mf-res-product--light .mf-res-product__title { color: var(--ink); }
.mf-res-product__desc { font-size: var(--step--1); line-height: var(--line-relaxed); }

/* Pills: white on orange; on coal, green for live, ember for coming soon. */
.mf-res-product--orange .mf-res-product__pill { background: var(--surface-white); color: var(--accent-text-strong); }
.mf-res-product--dark .mf-res-product__pill--live { color: var(--status-live-on-dark); background: var(--status-live-on-dark-soft); }
.mf-res-product--dark .mf-res-product__pill--soon { color: var(--flare-ember); background: var(--flare-a16); }
.mf-res-product--dark .mf-res-product__pill--beta { color: var(--ink-on-dark-strong); background: transparent; border: 1px solid var(--white-a35); }
/* On paper the pills' washes sit over white, not the card: the card's
   darker end would pull the live green under 4.5:1 (4.4 → 5.0). */
.mf-res-product--light .mf-res-product__pill--live { color: var(--status-live); background: linear-gradient(var(--status-live-soft), var(--status-live-soft)), var(--surface-white); }
.mf-res-product--light .mf-res-product__pill--soon { color: var(--accent-text-strong); background: linear-gradient(var(--flare-a10), var(--flare-a10)), var(--surface-white); }
.mf-res-product--light .mf-res-product__pill--beta { color: var(--ink-body); background: var(--paper-700); border: 1px solid var(--border-light-strong); }

.mf-res-product__btn { inline-size: 100%; margin-block-start: var(--space-3xs); }
.mf-res-product--orange .mf-res-product__btn { background: var(--surface-white); color: var(--accent-text-strong); }
.mf-res-product--orange .mf-res-product__btn:hover { background: var(--paper-100); color: var(--accent-text-strong); }
.mf-res-product--dark .mf-res-product__btn,
.mf-res-product--light .mf-res-product__btn { background: var(--action); color: var(--ink-on-dark); }
.mf-res-product--dark .mf-res-product__btn:hover,
.mf-res-product--light .mf-res-product__btn:hover { background: var(--action-hover); color: var(--ink-on-dark); }

/* In an article: the visual on the left, the pitch on the right, from
   tablet width up; stacked on a phone. */
.mf-res-product--wide { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-m) var(--space-l); padding: var(--space-l); }
.mf-res-product--wide .mf-res-product__rings { inline-size: 400px; inset-inline: -150px auto; inset-block-start: -120px; }
.mf-res-product--wide .mf-res-product__rings--inner { inline-size: 230px; inset-inline: -70px auto; inset-block-start: -40px; }
.mf-res-product--wide .mf-res-product__visual { flex: 0 1 220px; margin: 0 auto; }
.mf-res-product--wide .mf-res-product__visual--page img { inline-size: 82%; }
.mf-res-product--wide .mf-res-product__body { flex: 1 1 280px; }
.mf-res-product--wide .mf-res-product__title { font-size: var(--step-2); }
.mf-res-product--wide .mf-res-product__desc { font-size: var(--step-0); }
.mf-res-product--wide .mf-res-product__btn { inline-size: auto; align-self: flex-start; }

/* Sticker: a round stamp over the card's top corner (optional). White
   with dark-orange text on orange; orange with white text on coal and on
   paper. */
.mf-res-sticker {
  position: absolute;
  z-index: 2;
  inset-inline-end: -14px;
  inset-block-start: -18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  inline-size: 96px;
  aspect-ratio: 1;
  border-radius: 50%;
  text-align: center;
  transform: rotate(10deg);
}
.mf-res-product-wrap--orange .mf-res-sticker {
  background: var(--surface-white);
  color: var(--accent-text);
  box-shadow: 0 0 0 6px var(--action), 0 0 0 8px var(--surface-white), var(--shadow-banner-visual);
}
.mf-res-product-wrap--dark .mf-res-sticker,
.mf-res-product-wrap--light .mf-res-sticker {
  background: var(--action);
  color: var(--ink-on-dark);
  box-shadow: 0 0 0 6px var(--coal-900), 0 0 0 8px var(--flare-ember);
}
.mf-res-product-wrap--light .mf-res-sticker { box-shadow: 0 0 0 6px var(--surface-white), 0 0 0 8px var(--flare-ember); }
.mf-res-sticker__big { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--step-1); line-height: 1; }
.mf-res-sticker--long .mf-res-sticker__big { font-size: var(--step--1); line-height: 1.1; max-inline-size: 7ch; }
.mf-res-sticker__small { font-size: var(--step--2); font-weight: var(--weight-extrabold); letter-spacing: 0.1em; text-transform: uppercase; }

/* The drawn practice website: a browser window with a generic home page. */
.mf-res-browser { display: block; inline-size: 100%; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-white); box-shadow: var(--shadow-banner-visual); transform: rotate(-2deg); }
.mf-res-browser i { display: block; }
.mf-res-browser__bar { display: flex; gap: 5px; align-items: center; padding: 8px 10px; background: var(--paper-700); }
.mf-res-browser__bar > i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--border-light); }
.mf-res-browser__url { flex: 1; margin-inline-start: 8px; padding-inline-start: 6px; border-radius: 6px; background: var(--surface-white); font-size: var(--step--3); line-height: 1.5; color: var(--ink-soft); white-space: nowrap; overflow: hidden; }
.mf-res-browser__hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; padding: 14px; background: var(--paper-100); }
.mf-res-browser__copy { display: flex; flex-direction: column; gap: 7px; }
.mf-res-browser__copy i { border-radius: 4px; }
.mf-res-browser__copy .is-eyebrow { block-size: 7px; inline-size: 40%; background: var(--flare-600); }
.mf-res-browser__copy .is-head { block-size: 11px; inline-size: 95%; background: var(--ink); }
.mf-res-browser__copy .is-line { block-size: 6px; inline-size: 90%; border-radius: 3px; background: var(--border-light-strong); }
.mf-res-browser__copy .is-short { inline-size: 70%; }
.mf-res-browser__copy .is-btn { block-size: 16px; inline-size: 55%; margin-block-start: 4px; border-radius: 8px; background: var(--action); }
.mf-res-browser__photo { display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border-radius: var(--radius-md); background: linear-gradient(160deg, var(--paper-400), var(--paper-700)); }
.mf-res-browser__photo i { inline-size: 70%; block-size: 70%; border-radius: 50% 50% 0 0; background: var(--border-light); }
.mf-res-browser__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 14px 14px; background: var(--paper-100); }
.mf-res-browser__tiles i { block-size: 26px; border-radius: 6px; background: var(--surface-white); border: 1px solid var(--border-light); }

/* The dark panel — the newsletter block and the no-download end CTA. */
.mf-res-stage {
  border-radius: var(--radius-stage);
  background: var(--panel-dark-deep);
  color: var(--ink-on-dark-body);
}
.mf-res-stage .mf-res-h2,
.mf-res-stage .mf-res-h3 { color: var(--ink-on-dark); }


/* --- Forms --------------------------------------------------------------- */

.mf-res-field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.mf-res-field label { font-size: var(--step--1); font-weight: var(--weight-bold); color: var(--ink); }
.mf-res-optional { font-weight: var(--weight-normal); color: var(--ink-muted); }

.mf-res-input {
  inline-size: 100%;
  min-block-size: 48px;
  padding: 0 var(--space-s);
  border: 1.5px solid var(--border-light-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-white);
  color: var(--ink);
  font: inherit;
  font-size: var(--step-0);
  box-sizing: border-box;
}
.mf-res-input:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }
.mf-res-input[aria-invalid="true"] { border: 2px solid var(--status-error); }
.mf-res-input:read-only { background: var(--paper-500); }

.mf-res-field__err { display: flex; gap: var(--space-2xs); align-items: flex-start; font-size: var(--step--1); line-height: 1.45; font-weight: var(--weight-semibold); color: var(--status-error); }
.mf-res-field__err[hidden] { display: none; }
.mf-res-field__err svg { flex: none; margin-block-start: 1px; }

.mf-res-check { display: flex; gap: var(--space-xs); align-items: flex-start; font-size: var(--step--1); line-height: var(--line-normal); }
.mf-res-check input { flex: none; inline-size: 22px; block-size: 22px; margin: 1px 0 0; accent-color: var(--action); }

/* --- Hub ------------------------------------------------------------------ */

.mf-res-head { padding-block: var(--space-2xl) var(--space-xl); }
.mf-res-head__text { max-inline-size: 860px; display: flex; flex-direction: column; gap: var(--space-s); }
.mf-res-head--page { display: flex; flex-direction: column; gap: var(--space-s); padding-block-end: var(--space-l); }
.mf-res-head--article { padding-block: var(--space-xl) var(--space-l); }

/* The orange rings behind a cover */
.mf-res-rings,
.mf-res-rings::after {
  position: absolute;
  border-radius: 50%;
  border: 34px solid var(--flare-a16);
  pointer-events: none;
}
.mf-res-rings { inline-size: 560px; block-size: 560px; inset-inline-end: -180px; inset-block-end: -220px; }
.mf-res-rings::after { content: ""; inline-size: 360px; block-size: 360px; inset-inline-end: 66px; inset-block-end: 66px; border-color: var(--flare-a22); }
.mf-res-rings--top { inset-block: -160px auto; inset-inline-end: -200px; }

.mf-res-featured {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  border-radius: var(--radius-stage);
  background: var(--paper-100);
  box-shadow: var(--shadow-tile-hover);
}
.mf-res-featured__art {
  position: relative;
  flex: 1 1 420px;
  min-block-size: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-m);
  overflow: hidden;
  background: var(--paper-400);
}
.mf-res-featured__art img { position: relative; inline-size: min(300px, 70%); block-size: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-card); transform: rotate(-2deg); }
.mf-res-featured__text { flex: 1 1 440px; display: flex; flex-direction: column; justify-content: center; gap: var(--space-s); padding: var(--space-m-xl); }
.mf-res-featured__desc { margin: 0; font-size: var(--step-0); line-height: var(--line-relaxed); color: var(--ink-body); }

.mf-res-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--space-s); }
.mf-res-topic { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-m); }
.mf-res-topic svg { stroke: var(--accent-text); }
.mf-res-topic__name { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--step-0); line-height: 1.25; color: var(--ink); }
.mf-res-topic__desc { font-size: var(--step--1); line-height: var(--line-relaxed); }

/* Newsletter */
.mf-res-nl-section { padding-block: var(--space-xl) var(--space-3xl); }
.mf-res-nl { display: flex; flex-wrap: wrap; gap: var(--space-m) var(--space-xl); align-items: center; justify-content: space-between; padding: var(--space-m-xl); }
.mf-res-nl__text { flex: 1 1 380px; display: flex; flex-direction: column; gap: var(--space-xs); }
.mf-res-nl__text p:last-child { margin: 0; max-inline-size: 48ch; font-size: var(--step-0); line-height: var(--line-relaxed); }
.mf-res-nl__form-wrap { flex: 1 1 360px; }
.mf-res-nl__form { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: flex-end; }
.mf-res-nl__form .mf-res-field { flex: 1 1 220px; }
.mf-res-nl__form label { color: var(--ink-on-dark-strong); }
.mf-res-nl__form .mf-res-input { border-color: var(--coal-300); }
.mf-res-nl__form[hidden] { display: none; }
.mf-res-nl__status { margin: 0; font-size: var(--step-0); line-height: var(--line-relaxed); color: var(--ink-on-dark-strong); }
.mf-res-nl__status a { color: var(--flare-ember); }

/* --- Breadcrumb ----------------------------------------------------------- */

.mf-res-crumb ol { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-2xs); margin: 0; padding: 0; list-style: none; font-size: var(--step--1); color: var(--ink-muted); }
.mf-res-crumb li + li::before { content: "›"; margin-inline-end: var(--space-2xs); }
.mf-res-crumb a { color: var(--ink-muted); }
.mf-res-crumb a:hover { color: var(--accent-text); }

/* --- Category and topic pages -------------------------------------------- */

.mf-res-listing { display: flex; flex-wrap: wrap; gap: var(--space-xl); align-items: flex-start; padding-block-end: var(--space-2xl); }
.mf-res-listing__main { flex: 999 1 560px; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--space-m); }
.mf-res-listing__aside { flex: 1 1 340px; display: flex; flex-direction: column; gap: var(--space-s); }

.mf-res-sticky { position: sticky; top: 120px; }

.mf-res-listbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-xs); }
.mf-res-sort { display: flex; gap: var(--space-2xs); align-items: center; font-size: var(--step--1); color: var(--ink-muted); }
.mf-res-sort select { min-block-size: 44px; padding: 0 var(--space-2xs); border: 1px solid var(--border-light-strong); border-radius: var(--radius-chip); background: var(--surface-white); color: var(--ink); font: inherit; font-size: var(--step--1); }

.mf-res-rows { list-style: none; margin: 0; padding: 0; border-block-end: 1px solid var(--border-light); }
.mf-res-rows li { border-block-start: 1px solid var(--border-light); }
.mf-res-row { display: flex; gap: var(--space-s); align-items: center; padding-block: var(--space-s); color: var(--ink-body); text-decoration: none; }
.mf-res-row:hover { color: var(--ink-body); text-decoration: none; }
.mf-res-row:hover .mf-res-row__title { color: var(--accent-text); }
.mf-res-row > img,
.mf-res-row__ph { flex: none; inline-size: 132px; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); background: var(--paper-700); }
.mf-res-row__body { display: flex; flex-direction: column; gap: var(--space-3xs); min-inline-size: 0; }
.mf-res-row__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--step-0); line-height: 1.3; color: var(--ink); transition: color var(--transition-fast); }
.mf-res-row__desc { font-size: var(--step--1); line-height: var(--line-normal); }

.mf-res-more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-m);
  border: 1.5px dashed var(--border-light-strong);
  border-radius: var(--radius-stage);
}
.mf-res-more__text { flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--space-3xs); font-size: var(--step--1); line-height: var(--line-relaxed); }
.mf-res-more__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--step-0); color: var(--ink); }

/* --- Article -------------------------------------------------------------- */

.mf-res-draft {
  margin: var(--space-s) auto 0;
  max-inline-size: max-content;
  padding: var(--space-3xs) var(--space-s);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--ink-on-dark);
  font-size: var(--step--1);
  font-weight: var(--weight-bold);
}

.mf-res-byline { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m); align-items: center; font-size: var(--step--1); color: var(--ink-muted); }
.mf-res-byline__who { display: flex; gap: var(--space-xs); align-items: center; }
.mf-res-byline__who img { inline-size: 48px; block-size: 48px; border-radius: 50%; }
.mf-res-byline__who > span { display: flex; flex-direction: column; }
.mf-res-byline__name { color: var(--ink); font-weight: var(--weight-bold); }

.mf-res-topicline { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.mf-res-topicline__label { font-size: var(--step--2); font-weight: var(--weight-bold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--ink-muted); }
.mf-res-criterion { padding: 4px 10px; border-radius: var(--radius-chip); background: var(--paper-700); font-size: var(--step--1); font-weight: var(--weight-bold); color: var(--ink); }

.mf-res-hero { margin: 0 auto var(--space-xl); }
.mf-res-hero img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-stage); }

.mf-res-article { display: flex; flex-wrap: wrap; gap: var(--space-xl); align-items: flex-start; padding-block-end: var(--space-2xl); }
.mf-res-article__main { flex: 999 1 560px; min-inline-size: 0; max-inline-size: 720px; }
.mf-res-article__aside { flex: 1 1 260px; display: flex; flex-direction: column; gap: var(--space-m); }

.mf-res-toc ol { list-style: decimal; margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--step--1); line-height: 1.4; }
.mf-res-toc a { color: var(--ink-body); text-decoration: none; }
.mf-res-toc a:hover,
.mf-res-toc a[aria-current] { color: var(--accent-text); }
.mf-res-toc a[aria-current] { font-weight: var(--weight-bold); }
.mf-res-article__aside .mf-res-toc { padding: var(--space-m); }
.mf-res-article__aside .mf-res-toc .mf-res-eyebrow { margin-block-end: var(--space-xs); }

/* The contents on a phone: folded, above the body. */
.mf-res-toc-m { display: none; margin-block-end: var(--space-m); padding: 0; }
.mf-res-toc-m summary { padding: var(--space-s) var(--space-m); min-block-size: 48px; box-sizing: border-box; font-weight: var(--weight-bold); color: var(--ink); }
.mf-res-toc-m .mf-res-toc { padding: 0 var(--space-m) var(--space-m); }

.mf-res-share { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

.mf-res-prose { font-size: var(--step-0); line-height: 1.75; color: var(--ink-body); }
.mf-res-prose > :first-child { margin-block-start: 0; }
.mf-res-prose p { margin: 0 0 var(--space-s); text-wrap: pretty; }
.mf-res-prose h2 { margin: var(--space-xl) 0 var(--space-xs); font-size: var(--step-2); line-height: 1.25; font-weight: var(--weight-semibold); color: var(--ink); scroll-margin-top: 120px; }
.mf-res-prose h3 { margin: var(--space-l) 0 var(--space-2xs); font-size: var(--step-1); font-weight: var(--weight-semibold); color: var(--ink); }
.mf-res-prose ul,
.mf-res-prose ol { margin: 0 0 var(--space-s); padding-inline-start: 1.25em; }
.mf-res-prose ul { list-style: disc; }
.mf-res-prose ol { list-style: decimal; }
.mf-res-prose li + li { margin-block-start: var(--space-3xs); }
.mf-res-prose a { color: var(--accent-text); }
.mf-res-prose figure { margin: var(--space-2xs) 0 var(--space-m); }
.mf-res-prose figure img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--radius-panel); }
.mf-res-prose figcaption { margin-block-start: var(--space-2xs); font-size: var(--step--1); color: var(--ink-muted); }
.mf-res-prose h2.mf-res-sources { font-size: var(--step-1); }
.mf-res-sources + ul { font-size: var(--step--1); }

.mf-res-keypoints { margin: var(--space-m) 0 var(--space-l); padding: var(--space-m); border: 1px solid var(--border-light); border-radius: var(--radius-stage); background: var(--paper-100); box-shadow: var(--shadow-tile); }
.mf-res-keypoints .mf-res-eyebrow { margin-block-end: var(--space-xs); }
.mf-res-keypoints ul { margin: 0; display: flex; flex-direction: column; gap: var(--space-2xs); line-height: 1.6; }
.mf-res-keypoints li + li { margin: 0; }

p.mf-res-tip { max-inline-size: none; display: flex; gap: var(--space-xs); margin: var(--space-3xs) 0 var(--space-m); padding: var(--space-s) var(--space-m); border-radius: var(--radius-tile); background: var(--paper-700); font-size: var(--step--1); line-height: 1.6; }
p.mf-res-tip strong { color: var(--ink); }

.mf-res-upgrade {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
  margin: var(--space-m) 0 var(--space-l);
  padding: var(--space-m);
  border: 1.5px dashed var(--border-light-strong);
  border-radius: var(--radius-stage);
  background: var(--paper-100);
}
.mf-res-upgrade > img { flex: none; inline-size: 72px; block-size: auto; border-radius: var(--radius-xs); box-shadow: 0 6px 16px rgb(26 18 8 / 0.16); }
.mf-res-upgrade__text { flex: 1 1 280px; display: flex; flex-direction: column; gap: var(--space-3xs); font-size: var(--step--1); line-height: var(--line-relaxed); }
.mf-res-upgrade__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--step-0); color: var(--ink); }
.mf-res-upgrade .mf-res-btnrow { flex: 1 1 100%; }

.mf-res-article__product { margin: var(--space-l) 0 var(--space-xl); }
.mf-res-listing__aside .mf-res-btn { padding-inline: var(--space-s); letter-spacing: var(--tracking-wide); }

.mf-res-endcta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-start: var(--space-xl);
  padding: var(--space-m-xl);
  border-radius: var(--radius-stage);
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-stage);
}
.mf-res-endcta > p:not(.mf-res-eyebrow) { margin: 0; font-size: var(--step-0); line-height: var(--line-relaxed); }
.mf-res-endcta.mf-res-stage { background: var(--panel-dark-deep); border: 0; }

.mf-res-author { display: flex; gap: var(--space-s); align-items: flex-start; margin-block-start: var(--space-xl); }
.mf-res-author img { flex: none; inline-size: 72px; block-size: 72px; border-radius: 50%; }
.mf-res-author > span { display: flex; flex-direction: column; gap: var(--space-3xs); }
.mf-res-author__name { font-weight: var(--weight-bold); font-size: var(--step-0); color: var(--ink); }
.mf-res-author__bio { font-size: var(--step--1); line-height: var(--line-relaxed); }

/* --- Download page ------------------------------------------------------- */

.mf-res-dl { display: flex; flex-wrap: wrap; gap: var(--space-xl); align-items: flex-start; padding-block: var(--space-xl) var(--space-2xl); }
.mf-res-dl__main { flex: 1 1 520px; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--space-s); }
.mf-res-dl__main .mf-res-lead { margin-block-end: var(--space-2xs); }

.mf-res-dl__covers-m { display: none; gap: var(--space-xs); align-items: flex-end; }
.mf-res-dl__covers-m img { block-size: auto; border-radius: var(--radius-xs); }
.mf-res-dl__covers-m img:first-child { inline-size: 46%; box-shadow: 0 16px 32px rgb(26 18 8 / 0.2); }
.mf-res-dl__covers-m img + img { inline-size: 40%; box-shadow: 0 12px 24px rgb(26 18 8 / 0.16); }

/* The two offers stack, the free one first, at every width. */
.mf-res-dl__cards { display: flex; flex-direction: column; gap: var(--space-s); }
.mf-res-dl__starter { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-m); }
.mf-res-dl__starter p { margin: 0; font-size: var(--step--1); line-height: var(--line-relaxed); }
.mf-res-dl__filehead { display: flex; gap: var(--space-xs); align-items: center; }
.mf-res-dl__filehead > span { display: flex; flex-direction: column; gap: 2px; }
.mf-res-dl__filetitle { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--step-0); line-height: 1.25; color: var(--ink); }

.mf-res-gate__form,
.mf-res-gate__done,
.mf-res-gate__fail { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-m); background: var(--surface-white); border: 2px solid var(--action); box-sizing: border-box; }
.mf-res-gate__form[hidden],
.mf-res-gate__done[hidden],
.mf-res-gate__fail[hidden] { display: none; }
.mf-res-gate__done { border-color: var(--status-live); gap: var(--space-s); }
.mf-res-gate__fail { border-color: var(--status-error); gap: var(--space-s); }
.mf-res-gate__done:focus,
.mf-res-gate__fail:focus { outline: none; }
.mf-res-gate__note { margin: 0; font-size: var(--step--2); line-height: var(--line-normal); color: var(--ink-muted); }
.mf-res-gate__note a { color: var(--accent-text); }

.mf-res-gate__form .mf-res-spin { display: none; }
.mf-res-gate__form.is-sending button { background: var(--action-hover); }
.mf-res-gate__form.is-sending .mf-res-spin { display: block; animation: mf-res-spin 0.9s linear infinite; }
@keyframes mf-res-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mf-res-gate__form.is-sending .mf-res-spin { animation: none; } }

.mf-res-gate__head { display: flex; gap: var(--space-xs); align-items: center; }
.mf-res-gate__badge { flex: none; display: flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border-radius: 50%; color: var(--ink-on-dark); background: var(--status-live); }
.mf-res-gate__fail .mf-res-gate__badge { background: var(--status-error); }
.mf-res-gate__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--step-0); color: var(--ink); }
.mf-res-gate__next { display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--step--1); line-height: var(--line-relaxed); }
.mf-res-gate__next [hidden] { display: none; }
.mf-res-gate__label { font-weight: var(--weight-bold); color: var(--ink); }
.mf-res-gate__fail p { margin: 0; font-size: var(--step--1); line-height: var(--line-relaxed); }
.mf-res-gate a:not(.mf-res-btn) { color: var(--accent-text); }

.mf-res-dl__contents { display: flex; flex-direction: column; gap: var(--space-xs); margin-block-start: var(--space-s); }
.mf-res-dl__contents ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-2xs) var(--space-m); margin: 0; padding: 0; list-style: none; font-size: var(--step-0); line-height: var(--line-normal); }
.mf-res-dl__contents li { display: flex; gap: var(--space-2xs); }
.mf-res-dl__contents li span { min-inline-size: 22px; font-family: var(--font-display); font-weight: var(--weight-semibold); color: var(--accent-text); }

.mf-res-dl__art { flex: 1 1 420px; min-inline-size: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-s); }
.mf-res-dl__cover { position: relative; display: flex; justify-content: center; padding: var(--space-xl) var(--space-l) var(--space-l); overflow: hidden; border-radius: var(--radius-stage); background: var(--paper-400); }
.mf-res-dl__cover img { position: relative; inline-size: 74%; block-size: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }
.mf-res-dl__pages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
.mf-res-dl__pages img { inline-size: 100%; block-size: auto; border-radius: var(--radius-xs); box-shadow: 0 8px 20px rgb(26 18 8 / 0.14); }
.mf-res-dl__art figcaption { text-align: center; }

.mf-res-faq { display: flex; flex-wrap: wrap; gap: var(--space-l) var(--space-xl); padding-block: var(--space-2xl); }
.mf-res-faq .mf-res-h2 { flex: 1 1 280px; }
.mf-res-faq__list { flex: 2 1 520px; display: flex; flex-direction: column; }
.mf-res-faq details { padding: var(--space-s) 0; border: 0; border-radius: 0; border-block-start: 1px solid var(--border-light); }
.mf-res-faq details:last-child { border-block-end: 1px solid var(--border-light); }
.mf-res-faq summary { min-block-size: 28px; font-weight: var(--weight-bold); font-size: var(--step-0); color: var(--ink); }
.mf-res-faq details p { margin: var(--space-2xs) 0 0; font-size: var(--step--1); line-height: var(--line-relaxed); }

/* --- Phones --------------------------------------------------------------- */

@media (max-width: 760px) {
  .mf-res-btnrow .mf-res-btn,
  .mf-res-nl__form .mf-res-btn,
  .mf-res-more .mf-res-btn,
  .mf-res-product--wide .mf-res-product__btn { inline-size: 100%; }
  /* The sticker's overhang and ring would pass the 16px gutter. */
  .mf-res-sticker { inset-inline-end: -2px; inset-block-start: -14px; inline-size: 84px; }
  .mf-res-sticky { position: static; }
  .mf-res-article__aside { display: none; }
  .mf-res-toc-m { display: block; }
  .mf-res-dl__art { display: none; }
  .mf-res-dl__covers-m { display: flex; }
  .mf-res-featured__art { min-block-size: 0; }
  .mf-res-row { align-items: flex-start; }
  .mf-res-row > img,
  .mf-res-row__ph { inline-size: 96px; }
  .mf-res-dcard > img { inline-size: 80px; }
}