/* Bridge: dresses the older page templates in the new look (paper ground, Newsreader headlines,
   Figtree body, one Miosbot blue, calm buttons and cards) until each page is rebuilt on base.css.
   Loaded after a page's own stylesheet and base.css.
   Astro pages (Mark.css, Docs.css) carry <body class="m-bridge m-astro">;
   the older product pages (funding/site.css) carry <body class="m-bridge m-funding">. */

/* Both templates */
body.m-bridge :is(a, button, summary):focus-visible { outline: 2px solid var(--m-accent); outline-offset: 3px; box-shadow: none; border-radius: 6px; }
body.m-bridge ::selection { background: #c9dafb; color: var(--m-ink); }

/* Astro pages: swap the warm tokens for the new ones. */
body.m-astro {
  --cloud: var(--m-bg);
  --mist: var(--m-bg-alt);
  --peach: var(--m-panel-ink);
  --white: var(--m-surface);
  --line: var(--m-line);
  --ink: var(--m-ink);
  --ink-2: var(--m-ink-2);
  --ink-3: #6b6a63;
  --dusk: var(--m-panel);
  --dusk-2: var(--m-panel-2);
  --sky: var(--m-accent);
  --red-deep: var(--m-accent-hover);
  --font-display: var(--m-display);
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgb(20 20 19 / .05), 0 12px 32px -14px rgb(20 20 19 / .16);
  --shadow-lg: 0 2px 6px rgb(20 20 19 / .06), 0 30px 60px -26px rgb(20 20 19 / .3);
}
html:has(body.m-astro) { scrollbar-color: #6b6a63 var(--m-bg-alt); }
body.m-astro :is(h1, h2, h3, h4) { font-weight: 400; letter-spacing: -.02em; }
body.m-astro h1 { line-height: 1.02; }
body.m-astro .btn { border-radius: 10px; box-shadow: none; font-weight: 600; transition: background-color .15s, color .15s, box-shadow .15s; }
body.m-astro .btn:hover { transform: none; }
body.m-astro .btn--ghost { box-shadow: inset 0 0 0 1px var(--m-ink); }
body.m-astro .btn--ghost:hover { background: var(--m-ink); color: var(--m-bg); }
body.m-astro .btn--light { box-shadow: none; }
body.m-astro .start { background: var(--m-bg-alt); }

/* Older product pages: light hero, serif headlines, hairline cards in place of the navy and ink grid. */
body.m-funding {
  --paper: var(--m-bg);
  --white: var(--m-surface);
  --ink: var(--m-ink);
  --muted: var(--m-ink-2);
  --line: var(--m-line);
  --navy: var(--m-panel);
  --navy-2: var(--m-panel-2);
  --navy-3: var(--m-panel-line);
  --red-dark: var(--m-accent-text);
  --display: var(--m-display);
  --body: var(--m-body);
  font-size: 17px;
}
body.m-funding > main > .hero { background: var(--m-bg); color: var(--m-ink); padding: clamp(64px, 8vw, 104px) 0 clamp(40px, 5vw, 64px); }
body.m-funding .wrap { width: min(100% - 2 * var(--m-gutter), var(--m-wrap)); }
body.m-funding :is(.wrap.narrow, .wrap.prose) { max-width: none; }
body.m-funding .wrap.prose > * { max-width: 850px; }
body.m-funding .wrap.prose > h2:not(:first-child) { margin-top: 44px; }
body.m-funding .section { padding-block: clamp(64px, 8vw, 112px); }
body.m-funding > main > .hero + .section:not(.section--tint, .native-surfaces, .native-preview) { padding-top: 8px; }
body.m-funding .section > .wrap.narrow > :is(p, ul, ol):not(.lede) { max-width: 72ch; }
body.m-funding .hero :is(.kicker, .crumb, .updated) { margin: 0 0 18px; color: var(--m-ink-2); font: 600 13px/1.4 var(--m-body); letter-spacing: .02em; text-transform: none; }
body.m-funding .hero .crumb a { color: var(--m-accent-text); }
body.m-funding .hero h1 { font: 400 clamp(40px, 6.4vw, 84px)/1.02 var(--m-display); letter-spacing: -.03em; text-transform: none; overflow-wrap: break-word; }
body.m-funding .hero--docs h1 { font-size: clamp(40px, 5vw, 64px); }
body.m-funding .hero .lede { margin-top: 22px; color: var(--m-ink-2); font-size: clamp(18px, 1.9vw, 22px); line-height: 1.5; }
body.m-funding .hero .status { margin-top: 24px; padding: 10px 14px; border: 1px solid var(--m-line); border-radius: 10px; background: var(--m-surface); color: var(--m-ink-2); font-size: 15px; }
body.m-funding .hero .status strong { color: var(--m-ink); }
body.m-funding .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

body.m-funding :is(.section h2, .section article h2, .prose h2, .section > .wrap > h2, .category-cards h2, .workflow-list h3, .native-preview__intro h2, .native-surfaces__intro h2) { font-family: var(--m-display); font-weight: 400; text-transform: none; letter-spacing: -.02em; }
body.m-funding :is(.section > .wrap > h2, .section > .wrap.narrow > h2, .native-preview__intro h2, .native-surfaces__intro h2) { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.05; }
body.m-funding :is(.section article h2, .split > div > h2, .callout h2, .category-cards h2, .section > .wrap.prose > h2) { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; }
body.m-funding .workflow-list h3 { font-size: 24px; line-height: 1.15; }
body.m-funding :is(.native-preview__intro, .native-surfaces__intro, .category-cards) :is(.kicker, .category-label) { font: 600 13px/1.4 var(--m-body); letter-spacing: .02em; text-transform: none; color: var(--m-ink-2); }
body.m-funding :is(.native-preview__intro .kicker, .category-cards .miosbot-card .category-label) { color: var(--m-panel-ink-2); }
body.m-funding .category-cards .miosbot-card p:last-child { color: var(--m-panel-ink-2); }
body.m-funding .section--tint { background: var(--m-bg-alt); border-block: 1px solid var(--m-line); }
body.m-funding :is(.native-surfaces) { background: var(--m-bg-alt); }

body.m-funding :is(.split, .grid, .workflow-list, .category-cards) { gap: 1px; background: var(--m-line); border: 1px solid var(--m-line); border-radius: 16px; overflow: hidden; }
body.m-funding :is(.workflow-list, .category-cards) > article { border: 0; }
body.m-funding .callout { margin: 36px 0; padding: 24px 26px; border: 1px solid var(--m-line); border-radius: 14px; background: var(--m-surface); }
body.m-funding .split > .callout { margin: 0; border: 0; border-radius: 0; }
body.m-funding .table-wrap { border: 1px solid var(--m-line); border-radius: 14px; background: var(--m-surface); }
body.m-funding .comparison caption { background: var(--m-bg-alt); color: var(--m-ink); font-weight: 600; }
body.m-funding .comparison thead th { background: var(--m-bg-alt); }
body.m-funding .comparison tbody th { background: var(--m-surface); font-weight: 600; }
body.m-funding :is(.prose a, .comparison a, .category-cards a, .source-list a) { color: var(--m-accent-text); font-weight: 600; }
body.m-funding .native-surface-card { border: 1px solid var(--m-line); border-radius: 14px; overflow: hidden; }
body.m-funding .native-surface-card__status { border-bottom-color: var(--m-line); font-weight: 600; }

body.m-funding .btn { min-height: 46px; padding: 0 20px; border: 1px solid transparent; border-radius: 10px; font: 600 15px/1 var(--m-body); transition: background-color .15s, border-color .15s, color .15s; }
body.m-funding .btn:hover { background: var(--m-accent-hover); text-decoration: none; }
body.m-funding .btn--ghost { background: transparent; border-color: var(--m-ink); color: var(--m-ink); }
body.m-funding .btn--ghost:hover { background: var(--m-ink); color: var(--m-bg); }

/* The older pages hid sideways overflow on small screens, which also stopped the header sticking. */
@media (max-width: 520px) {
  html:has(body.m-funding), body.m-funding { overflow-x: hidden; overflow-x: clip; }
}
@media (prefers-reduced-motion: reduce) {
  body.m-bridge .btn { transition: none; }
}