@layer components {

@media (max-width: 1023px) {

  .main-content.main-content .route-link { display: inline-block; }
  .main-content.main-content .route-link,
  .main-content.main-content .cx-mail,
  .main-content.main-content .blog-feature__link,
  .main-content.main-content .cr-close-link,
  .main-content.main-content .art-sources a,
  .main-content.main-content .art-route a {
    padding-block: 10px;
    margin-block: -10px;
  }

  .main-content.main-content .route-link,
  .main-content.main-content .cx-mail,
  .main-content.main-content .cr-close-link {
    border-bottom-color: transparent;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.12);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  .main-content.main-content .route-link:not(:where(:is(.site-lede, .sb-b-lede, .cp-han-lede, .bz-chk-close, .bz-day-close, .tx-note, .tx-qa-a p) > *, .dlg-ben-r)) {
    font-size: 0.9375rem;
    line-height: 24px;
    font-weight: 400;
    color: var(--text-muted);
    text-decoration: none;
  }

  .main-content.main-content :is(section, [data-mob]) .section-route { text-align: left; }
  .main-content.main-content li > a:only-child { padding-inline: 6px; margin-inline: -6px; }

  .main-content.main-content li > a:only-child { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; margin-block: 0; }

  .main-content.main-content p:not(.section-route):not(.art-route) > .route-link:has(~ .route-link),
  .main-content.main-content p:not(.section-route):not(.art-route) > .route-link ~ .route-link { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; margin-block: 0; }
  .main-content.main-content .art-sources a { padding-block: 12px; margin-block: -12px; }

  .footer .footer-legal-links { display: inline-block; white-space: nowrap; }
  .footer .footer-bottom p a { display: inline-flex; align-items: center; padding-inline: 10px; margin-inline: -10px; }

  .legal-doc p > em:only-child { font-size: var(--mt-body); }

  .legal-header .legal-logo, .legal-header .legal-back { padding-block: 10px; margin-block: -10px; }

  .main-content.main-content .art-figure-cap-text { font-size: var(--mt-body); }

  .main-content.main-content section h2.art-sources-title,
  .main-content.main-content section h2.sx-group,
  .main-content.main-content section h2.blog-section__head { font-size: var(--mt-kicker); line-height: 1.2; letter-spacing: 0.16em; font-weight: 600; }

  .main-content.main-content section h2.blog-section__head { letter-spacing: 0.09em; }

  .mob-nb { white-space: nowrap; }

  .main-content.main-content [data-mob] h2.pc-bench-h { font-size: var(--mt-h3); }

  .main-content.main-content .art-prose table,
  .main-content.main-content .art-figure-inner table { font-size: var(--mt-body); }
  .main-content.main-content .art-figure-src,
  .main-content.main-content .art-source-url,
  .main-content.main-content .art-source-tag,
  .main-content.main-content .art-sources a,
  .main-content.main-content .art-source-title,
  .main-content.main-content .art-source-author,
  .main-content.main-content .art-route-note { font-size: 0.875rem; }
  .main-content.main-content select,
  .main-content.main-content input[type="range"],
  .main-content.main-content input[type="text"],
  .main-content.main-content input[type="email"] {
    min-height: 44px;
  }
  .main-content.main-content input[type="range"] { padding-block: 14px; }
}

@media (max-width: 599px) {
  .site-note--placeholder .site-note-title { font-size: 0.8125rem; }
}

}

@layer components {

@media (max-width: 1023px) {
  :root {

    --mt-display: 2.375rem;
    --mt-h1: var(--mt-display);
    --mt-h2: 1.75rem;
    --mt-h2-read: 1.75rem;
    --mt-h1-docs: 2rem;
    --mt-h2-docs: 1.25rem;

    --mt-name: 2rem;
    --mt-h3: 1.25rem;
    --mt-cta: var(--mt-display);
    --mt-lede: 0.9375rem;
    --mt-lede-read: 1.0625rem;
    --mt-hero-lede: 1rem;
    --mt-body: 1rem;
    --mt-kicker: 0.75rem;
    --mt-label: 0.8125rem;
    --mt-lh-title: 1.15;
    --mt-lh-lede: 1.5;
    --mt-ls-title: -0.022em;

    --mt-ls-display: -0.046em;

    --stack-lg: 72px;
    --stack-md: 28px;
    --stack-sm: 20px;
    --stack-xs: 12px;
    --stack-ch: 40px;
    --hero-lede: 64px;
  }
}

@media (max-width: 599px) {
  :root {
    --mt-display: 2.375rem;

    --mt-h2: 1.5rem;
    --mt-h2-read: 1.5rem;
    --mt-name: 1.75rem;
    --mt-h3: 1.125rem;
    --mt-lede-read: 1rem;

    --stack-lg: 56px;
    --stack-md: 24px;
    --stack-sm: 20px;
    --stack-xs: 10px;
    --stack-ch: 32px;
    --hero-lede: 48px;
  }
}

@media (max-width: 374px) {
  :root {
    --mt-display: 2.125rem;
    --mt-h2: 1.5rem;
  }
}

@media (max-width: 1023px) {

  .main-content.main-content .page-hero {
    padding-top: calc(var(--navbar-h) + var(--hero-lede));
    padding-bottom: 0;
  }
  .main-content.main-content section .page-hero-eyebrow,
  .main-content.main-content section .site-kicker {
    margin-bottom: var(--stack-xs);
    font-size: var(--mt-kicker);
    letter-spacing: 0.14em;
  }
  .main-content.main-content section .page-hero-lede {
    margin-top: var(--stack-xs);
    max-width: none;
    font-size: var(--mt-hero-lede);
    line-height: var(--mt-lh-lede);
    color: var(--text-muted);
  }

  .main-content.main-content :is(.art-dek, .tx-top-lede, .pa-once-lede) {
    font-size: var(--mt-hero-lede);
    line-height: var(--mt-lh-lede);
    color: var(--text-muted);
  }

  .main-content.main-content section .hero-title,
  .main-content.main-content .hero-section .hero-title {
    max-width: none;
    font-size: var(--mt-display);
    line-height: 1.1;
    letter-spacing: var(--mt-ls-display);
    margin-bottom: var(--stack-sm);
    text-wrap: balance;
  }

  .main-content.main-content .hero-section .hero-subtitle {
    font-size: var(--mt-body);
    line-height: var(--mt-lh-lede);
  }

  .main-content.main-content section .site-head { margin-bottom: var(--stack-md); }
  .main-content.main-content section .site-lede {
    margin-top: var(--stack-xs);
    max-width: none;
    font-size: var(--mt-lede);
    line-height: var(--mt-lh-lede);
  }

  .main-content.main-content :is(section, [data-mob], .site-head) :is(.site-lede, .section-subtitle,
    .ab-far-lede, .ag-solid-lede, .ag-share-lede, .bz-pulse-lede, .bz-chk-lede, .bz-st-lede,
    .bz-day-lede, .bz-qual-lede, .cr-lede, .cx-docs-lede, .dep-lede, .ks-sub, .enx-swell__lede,
    .il-lede, .ms-ab-lede, .ms-sw-lede, .ms-6-lede, .sb-b-lede, .cp-led-lede, .cp-cro-lede,
    .cp-han-lede) {
    font-size: var(--mt-lede);
    line-height: var(--mt-lh-lede);
    color: var(--text-muted);
  }

  .main-content.main-content :is(section, [data-mob], .site-head) :is(.arv-rail-l, .il-lede, .sb-b-lede) {
    font-size: var(--mt-lede-read);
  }

  .main-content.main-content section h1,
  .main-content.main-content [data-mob] h1,
  .main-content.main-content header h1 {
    font-size: var(--mt-h1);
    font-weight: 510;
    line-height: 1.1;
    letter-spacing: var(--mt-ls-display);
    text-wrap: balance;
  }
  .main-content.main-content section h2,
  .main-content.main-content [data-mob] h2 {
    font-size: var(--mt-h2);
    line-height: var(--mt-lh-title);
    letter-spacing: var(--mt-ls-title);
  }
  .main-content.main-content section h2:where(.art-h2, .tx-sec-title, [data-mob-read]),
  .main-content.main-content [data-mob] h2:where(.art-h2, .tx-sec-title, [data-mob-read]) {
    font-size: var(--mt-h2-read);
  }
  .main-content.main-content section h2:not(:where(.art-h2, .tx-sec-title, [data-mob-read], .cx-form-h, .pc-bench-h)),
  .main-content.main-content [data-mob] h2:not(:where(.art-h2, .tx-sec-title, [data-mob-read], .cx-form-h, .pc-bench-h)) {
    font-weight: 510;
    line-height: 1.2;
  }
  .main-content.main-content section h3,
  .main-content.main-content [data-mob] h3 {
    font-size: var(--mt-h3);
    line-height: 1.3;
    letter-spacing: -0.012em;
  }

  .main-content.main-content section .mob-name { font-size: var(--mt-name); line-height: 1.1; }

  .main-content.main-content section .cta-h {
    font-size: var(--mt-cta);
    line-height: var(--mt-lh-title);
    letter-spacing: var(--mt-ls-display);
    margin-bottom: var(--stack-md);
  }

  .legal-doc h1 { font-size: var(--mt-h1); font-weight: 510; line-height: 1.1; letter-spacing: var(--mt-ls-display); text-wrap: balance; }
  .legal-doc h2 { font-size: var(--mt-h2-read); line-height: var(--mt-lh-title); }
  .legal-doc h3 { font-size: var(--mt-h3); line-height: 1.3; }

  .legal-table-wrap td { font-size: var(--mt-body); line-height: 1.5; }
  .legal-doc p, .legal-doc li,
  .main-content.main-content .art-source-supports, .main-content.main-content .art-note,
  .main-content.main-content .post-card__desc,
  .main-content.main-content .art-kicker-line,
  .main-content.main-content .site-note-body {
    font-size: var(--mt-body);
  }

  .main-content.main-content section .section-route { margin-top: var(--stack-sm); }

}

@media (max-width: 1023px) {
  .main-content > section,
  .main-content > [data-mob] {
    padding-top: var(--stack-lg);
    padding-bottom: var(--stack-lg);
  }

  .main-content > [data-mob~="chapter"] { padding-top: var(--stack-ch); }
  .main-content > .site-cta,
  .main-content > .final-cta-section {
    padding-top: calc(var(--stack-lg) + var(--stack-md));
    padding-bottom: calc(var(--stack-lg) + var(--stack-md));
  }
  .main-content > .hero-section,
  .main-content > .page-hero { padding-bottom: 0; }
}

@media (max-width: 1023px) {
  .mob-lab,
  .mob-cap,
  .mob-leg,
  .mob-lad {
    margin: 0;
    font-size: var(--mt-body);
    line-height: var(--mt-lh-lede);
    color: var(--text-secondary);
  }

  .mob-lab,
  .mob-cap { font-size: var(--mt-lede); color: var(--text-muted); }
  .mob-lab { margin-bottom: var(--stack-sm); }
  .mob-cap { margin-top: var(--stack-sm); }
  .mob-cap b { color: var(--text-primary); font-weight: 600; }
  .mob-leg { margin-top: var(--stack-sm); font-size: var(--mt-label); color: var(--text-muted); }
  .mob-lad {
    display: grid;
    gap: 6px;
    margin-top: var(--stack-sm);
  }
  .mob-lad-r {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0 var(--space-3);
    align-items: baseline;
  }
  .mob-lad-k {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--mt-kicker);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .mob-lad-v { margin: 0; color: var(--text-secondary); }
}

@media (min-width: 1024px) {
  .mob-lab, .mob-cap, .mob-leg, .mob-lad { display: none; }

  .mob-wrap { display: contents; }
}
}