/* Waybound Display, the face drawn from the logo (docs/design/waybound-display), on every display headline.
   It runs wider than Inter, so headlines sit at about 0.85x their Inter size; Inter stays for everything else.
   'html body' outranks the page stylesheets that load after this one. */
@font-face { font-family: 'Waybound Display'; src: url(/fonts/waybound-display.woff2) format('woff2'); font-display: swap; size-adjust: 100%; }
html body .hero h1, html body .worlds h2, html body .sec-h h2, html body .fc h3, html body .wbc h2, html body .rt-hero h1, html body .rt h2, html body .rt-ch h3 {
  font-family: 'Waybound Display', Inter, system-ui, sans-serif; font-weight: 400; letter-spacing: .005em;
}
html body .hero h1 { font-size: clamp(39.6px, 6vw, 91px); line-height: 1.02; }
html body .worlds h2 { font-size: clamp(36.4px, 5.1vw, 80.2px); line-height: 1.02; }
html body .sec-h h2 { font-size: clamp(34.2px, 4.4vw, 62.1px); line-height: 1.05; }
html body .fc h3 { font-size: 27.8px; }
html body .wbc h2 { font-size: clamp(39.6px, 5.8vw, 87.7px); line-height: 1.02; }
html body .rt-hero h1 { font-size: clamp(36.4px, 4.7vw, 70.6px); line-height: 1.02; }
html body .rt h2 { font-size: clamp(31px, 3.6vw, 54.6px); line-height: 1.05; }
html body .rt-ch h3 { font-size: clamp(27.8px, 2.9vw, 41.7px); line-height: 1.06; }
/* every other display headline on the site, at about 0.85x its Inter size (desktop, then phone) */
html body .rv > h2, html body h2.mqh, html body h2#faqh, html body .dx-main h1, html body h1.display-l, html body .cx-type-head h2, html body .crt-kin-head h2, html body h2.fun-h2, html body .fun-copy h3 {
  font-family: 'Waybound Display', Inter, system-ui, sans-serif; font-weight: 400; letter-spacing: .005em; line-height: 1.05;
}
html body .rv > h2 { font-size: clamp(26.8px, 4.4vw, 52.4px); }
html body h2.mqh { font-size: clamp(39.6px, 6.4vw, 92px); line-height: 1.02; }
html body h2#faqh { font-size: clamp(32.1px, 3.9vw, 54.6px); }
html body .dx-main h1 { font-size: clamp(31px, 3.3vw, 47.1px); }
html body h1.display-l { font-size: clamp(33.2px, 4.1vw, 57.8px); line-height: 1.02; }
html body .cx-type-head h2 { font-size: clamp(25.7px, 2.4vw, 33.2px); }
html body .crt-kin-head h2 { font-size: clamp(23.5px, 2vw, 28.9px); }
html body h2.fun-h2 { font-size: clamp(25.7px, 2.6vw, 36.4px); }
html body .fun-copy h3 { font-size: clamp(23.5px, 2.1vw, 31px); }

/* the copy under each display headline, one step smaller so the headline leads */
html body .hero .lede { font-size: 18.7px; }
html body .worlds .head p { font-size: 18.2px; }
html body .sec-h p, html body .rv > h2 + p, html body .mqsec p, html body .qa > p { font-size: 17.7px; }
html body .fc p { font-size: 16.1px; }
html body .wbc p { font-size: 17.7px; }
html body .rt-lede { font-size: 17.7px; }
html body .rt-sub { font-size: 17.1px; }
@media (max-width: 760px) {
  html body .hero .lede { font-size: 16.6px; }
  html body .worlds .head p { font-size: 15.5px; }
  html body .sec-h p, html body .wbc p, html body .rt-lede { font-size: 16.1px; }
  html body .hero h1 { font-size: min(36.4px, 9vw); }
  html body .typesticky .sec-h h2 { font-size: min(27.8px, 6.8vw); }
  html body .sec-h h2 { font-size: min(34.2px, 8.1vw); }
  html body .worlds h2 { font-size: min(36.4px, 8.8vw); }
  html body .wbc h2 { font-size: min(38.5px, 9.2vw); }
}

/* reading text across the site, about 7% larger (desktop) */
html body .fc p { font-size: 16px; }
html body .oddsnote, html body .wbf-brand p { font-size: 17px; }
html body .wbf-col a { font-size: 16px; }
html body .qa summary { font-size: 20px; }
html body .rt-ch .rt-specs dt, html body .rt-ch .rt-specs dd, html body .rt-eyebrow { font-size: 16px; }
html body .rt-sheet dd { font-size: 18px; } html body .rt-sheet dt { font-size: 16px; } html body .rt-more { font-size: 17px; }
html body .doc-intro .lede, html body .crt-copy .lede { font-size: 22.5px; }
html body .dx-lede { font-size: 20.5px; }
html body .doc-main p:not(.lede):not(.eyebrow):not(.contact-title), html body .doc-main li, html body .doc-main dd, html body .doc-main summary, html body .dx-main li, html body .dx-main dd, html body .dx-main p:not(.dx-lede) { font-size: 17.5px; }
@media (max-width: 760px) { html body .doc-main p:not(.lede):not(.eyebrow):not(.contact-title), html body .doc-main li, html body .doc-main dd, html body .doc-main summary, html body .dx-main li, html body .dx-main dd, html body .dx-main p:not(.dx-lede) { font-size: 16.5px; } }
html body .doc-main dt, html body .dx-main dt { font-size: 15.5px; }
/* small notes stay small (one step up only), and the fun page's lead lines stay a step above body */
html body .doc-main .cx-type-head p:not(.lede):not(.eyebrow):not(.contact-title), html body .doc-main p.crt-note:not(.lede):not(.eyebrow):not(.contact-title),
html body .doc-main .cx-odds-card p:not(.lede):not(.eyebrow):not(.contact-title), html body .doc-main p.fun-micro:not(.lede):not(.eyebrow):not(.contact-title),
html body .doc-main p.contact-note:not(.lede):not(.eyebrow):not(.contact-title), html body .doc-main p.contact-links:not(.lede):not(.eyebrow):not(.contact-title) { font-size: 15.5px; }
html body .doc-main p.fun-why:not(.lede):not(.eyebrow):not(.contact-title) { font-size: 19px; }
html body .doc-main .cx-grid li { font-size: 17px; }
@media (max-width: 760px) {
  html body .fc p { font-size: 15.5px; }
  html body .doc-intro .lede, html body .crt-copy .lede { font-size: 19px; }
}
html body main details > summary { font-size: 18px; }
@media (max-width: 760px) { html body main details > summary { font-size: 17px; } }

/* Before launch: download buttons read "Coming Soon" and are inert (lib/site.mjs COMING_SOON) */
html body [data-soon] { cursor: default; pointer-events: none; }
html body .soon-badge { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px 0 18px; border-radius: 12px; background: #000; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); font: 600 17px Inter, system-ui, sans-serif; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
html body .soon-badge.s { height: 40px; font-size: 15px; padding: 0 16px 0 14px; border-radius: 10px; }
html body .soon-badge svg { width: 20px; height: 20px; flex: none; }