/* Homepage typography: clearer reading size without changing interior pages or dialogs. */
body.orvon-bootstrap main > section p,
body.orvon-bootstrap main > section li {
  font-size: 18px !important;
  line-height: 1.65 !important;
}

body.orvon-bootstrap main > section p {
  margin-bottom: 1.1em !important;
}

body.orvon-bootstrap main > section.hero .hero-lead {
  font-size: 20px !important;
  line-height: 1.6 !important;
  max-width: 62ch !important;
}

body.orvon-bootstrap main > section.hero h1 {
  font-size: clamp(52px, 5.2vw, 68px) !important;
  line-height: 1.04 !important;
}

body.orvon-bootstrap main > section:not(.hero) h2 {
  font-size: clamp(40px, 4.2vw, 52px) !important;
  line-height: 1.08 !important;
  margin-bottom: 22px !important;
}

body.orvon-bootstrap main > section h3 {
  font-size: clamp(25px, 2.5vw, 30px) !important;
  line-height: 1.16 !important;
}

body.orvon-bootstrap main > section :is(.section-label, .eyebrow, small),
body.orvon-bootstrap main > section p:is(.fine-print, .source-note, [class*="source"], [class*="caption"]) {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

body.orvon-bootstrap main > section#why .why-copy > .benefit-pills .benefit-description {
  font-size: 17px !important;
  line-height: 1.5 !important;
}

@media (max-width: 767.98px) {
  body.orvon-bootstrap main > section p,
  body.orvon-bootstrap main > section li {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }

  body.orvon-bootstrap main > section.hero h1 {
    font-size: clamp(40px, 10vw, 52px) !important;
    line-height: 1.06 !important;
  }

  body.orvon-bootstrap main > section:not(.hero) h2 {
    font-size: clamp(36px, 8vw, 42px) !important;
    line-height: 1.08 !important;
    margin-bottom: 18px !important;
  }

  body.orvon-bootstrap main > section h3 {
    font-size: clamp(24px, 6vw, 28px) !important;
  }
}


/* Center homepage calls to action without changing the header or footer layout. */
@media (min-width: 768px) {
  body.orvon-bootstrap main > section.hero .hero-actions {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  body.orvon-bootstrap main > section:not(.hero):not(.final-cta):not(.homepage-section-removed) .section-cta,
  body.orvon-bootstrap main > section .steps-cta,
  body.orvon-bootstrap main > section#why .why-copy .dark-button,
  body.orvon-bootstrap main > section#faq .faq-heading .dark-button {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 177px !important;
    max-width: calc(100% - 32px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.orvon-bootstrap main > section.provider .provider-partner-card > a.btn {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: fit-content !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Narrow the scrollable comparison wrapper, not the nested table. */
body.orvon-bootstrap main > section#difference .comparison-responsive.table-responsive {
  box-sizing: border-box !important;
  width: min(960px, calc(100% - 32px)) !important;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 767.98px) {
  body.orvon-bootstrap main > section#difference .comparison-responsive.table-responsive {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* A stable mobile type scale and 16px content gutter across homepage sections. */
@media (max-width: 767.98px) {
  body.orvon-bootstrap main > section p:not(.section-label):not(.comparison-scroll-hint):not(.portable-note):not(.fine-print):not(.source-note):not([class*="source"]):not([class*="caption"]),
  body.orvon-bootstrap main > section li {
    font-size: 18px !important;
    line-height: 1.55 !important;
  }

  body.orvon-bootstrap main > section.hero h1 {
    font-size: clamp(40px, 10vw, 48px) !important;
    line-height: 1.06 !important;
  }

  body.orvon-bootstrap main > section:not(.hero):not(.final-cta) h1 {
    font-size: clamp(34px, 8vw, 40px) !important;
    line-height: 1.08 !important;
    margin-bottom: 18px !important;
  }

  body.orvon-bootstrap main > section:not(.hero):not(.final-cta) h2 {
    font-size: clamp(32px, 7.6vw, 38px) !important;
    line-height: 1.1 !important;
    margin-bottom: 16px !important;
  }

  body.orvon-bootstrap main > section:not(.hero):not(.final-cta) h3 {
    font-size: clamp(22px, 5.8vw, 25px) !important;
    line-height: 1.18 !important;
  }

  body.orvon-bootstrap main > section.problem-v2 .orvon-unemployment-copy h2 {
    font-size: clamp(30px, 7.5vw, 36px) !important;
  }

  body.orvon-bootstrap main > section#why .benefit-pills .benefit-title {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  body.orvon-bootstrap main > section#why .benefit-pills .benefit-description {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  body.orvon-bootstrap main > section#faq .faq-item button,
  body.orvon-bootstrap main > section#faq .accordion-button {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  body.orvon-bootstrap main > section#faq .faq-item p,
  body.orvon-bootstrap main > section#faq .accordion-body p {
    font-size: 18px !important;
    line-height: 1.55 !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  body.orvon-bootstrap main > section#difference {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  body.orvon-bootstrap main > section#difference > .section-label,
  body.orvon-bootstrap main > section#difference > h1,
  body.orvon-bootstrap main > section#difference > .section-intro,
  body.orvon-bootstrap main > section#difference > .comparison-responsive,
  body.orvon-bootstrap main > section#difference > .comparison-scroll-hint,
  body.orvon-bootstrap main > section#difference > .portable-note,
  body.orvon-bootstrap main > section#difference > .section-cta {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.orvon-bootstrap main > section#why > .container,
  body.orvon-bootstrap main > section#faq > .faq-inner,
  body.orvon-bootstrap main > section.provider > .provider-section-shell {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  body.orvon-bootstrap main > section.how-v2 {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  body.orvon-bootstrap main > section.how-v2 > .container {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  body.orvon-bootstrap main > section.problem-v2 > .problem-v2-shell {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  body.orvon-bootstrap main > section.problem-v2 > .problem-v2-shell > .problem-v2-card-grid {
    box-sizing: border-box !important;
    width: calc(100% + 32px) !important;
    max-width: none !important;
    margin-right: -16px !important;
    margin-left: -16px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
    scroll-padding-right: 16px !important;
    scroll-padding-left: 16px !important;
  }

  body.orvon-bootstrap main > section .section-label,
  body.orvon-bootstrap main > section small,
  body.orvon-bootstrap main > section p:is(.fine-print, .source-note, [class*="source"], [class*="caption"]) {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
}


/* Keep mobile card rails inside the viewport while preserving swipe overflow. */
@media (max-width: 767.98px) {
  body.orvon-bootstrap main > section.hero.container {
    box-sizing: border-box !important;
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  body.orvon-bootstrap main > section.problem-v2 > .problem-v2-shell > .problem-v2-heading {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  body.orvon-bootstrap main > section.problem-v2 > .problem-v2-shell > .problem-v2-card-grid {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: calc(100% + 32px) !important;
    max-width: 100vw !important;
    margin-right: -16px !important;
    margin-left: -16px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
    scroll-padding-inline: 16px !important;
  }

  body.orvon-bootstrap main > section.problem-v2 .problem-v2-card {
    box-sizing: border-box !important;
    max-width: calc(100vw - 32px) !important;
  }

  body.orvon-bootstrap main > section#why .why-copy > .benefit-pills,
  body.orvon-bootstrap main > section#why .orvon-benefits-area > .benefit-pills {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overscroll-behavior-inline: contain !important;
  }

  body.orvon-bootstrap main > section#why .benefit-pills > .benefit-card {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
}