/* Self-hosted typography: Open Sans throughout the landing, Inter in cabinet demos. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter/InterVariable.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/open-sans/OpenSans-Variable.woff2') format('woff2');
}

:root {
  --site-font-sans: 'Open Sans', 'Inter', Arial, sans-serif;
  --site-font-heading: var(--site-font-sans);
  --site-font-ui: 'Inter', Arial, sans-serif;
  --bs-font-sans-serif: var(--site-font-sans);
  --bs-body-font-family: var(--site-font-sans);
  --bs-font-monospace: var(--site-font-sans);
}

html {
  font-synthesis: none;
  font-optical-sizing: auto;
  font-feature-settings: 'liga' 1, 'calt' 1;
}

body, button, input, select, textarea {
  font-family: var(--site-font-sans);
}

h1, h2, h3, h4, h5, h6, .rules-panel-head strong {
  font-family: var(--site-font-heading);
}

/* Cabinet demos keep Inter in every section, including their controls. */
.ap-window,
.ap-window :is(h1, h2, h3, h4, h5, h6, button, input, select, textarea),
.ap-window .mono {
  font-family: var(--site-font-ui);
}

.mono {
  font-family: var(--site-font-sans);
  font-variant-numeric: tabular-nums;
}

/* Open Sans needs more room on phones. Cabinet demos keep their compact Inter UI. */
@media (max-width: 767.98px) {
  .section-heading > p:last-child,
  .split-heading > p:last-child,
  .problem-details p,
  .approach-section p:not(.eyebrow),
  .report-description > p:not(.report-result),
  .case-card > p,
  .case-discovery > p,
  .case-insight p,
  .access-grid > .col-lg-4 p:not(.eyebrow),
  .setup-intro,
  .monthly-pricing .plan-lead,
  .billing-next-heading > p:last-child,
  .faq-grid > .col-lg-4 p:not(.eyebrow),
  .faq-items .accordion-body p,
  .demo-copy > p:not(.eyebrow) {
    font-size: 16px;
    line-height: 1.65;
  }

  .editorial-answer p,
  .customer-journey strong,
  .customer-journey p,
  .attribution-grid blockquote,
  .problem-conclusion,
  .approach-section .rule-row p,
  .approach-section .rules-example p,
  .report-description .check-list,
  .report-description .report-result,
  .integration-grid p,
  .access-roles p,
  .steps-grid p,
  .billing-start .light-checks,
  .monthly-pricing .support-card .check-list,
  .billing-start .included-reports > p,
  .billing-start .setup-amount > .first-month-includes,
  .plan-bottom p,
  .plan-example p,
  .plan-example strong,
  .demo-test p,
  .demo-form > p:first-of-type,
  .demo-form label:not(.form-consent) {
    font-size: 15px;
    line-height: 1.6;
  }

  .role-tag,
  .rule-row strong,
  .case-discovery > span,
  .case-insight > span,
  .plan-example > span {
    font-size: 15px;
    line-height: 1.5;
  }

  .mobile-nav a,
  .report-tabs .nav-link,
  .report-description .text-link,
  .billing-start .setup-amount .button,
  .monthly-pricing .support-card .button,
  .demo-form .button,
  .hero-editorial .editorial-actions .button {
    font-size: 15px;
    line-height: 1.4;
  }

  .hero-editorial .editorial-actions .button {
    gap: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .hero-editorial .editorial-actions .button .bi {
    font-size: 18px;
  }

  .faq-items .accordion-button {
    font-size: 16px;
    line-height: 1.5;
  }
}

@media (max-width: 359.98px) {
  .report-tabs .nav-link {
    gap: 5px;
    padding-left: 7px;
    padding-right: 7px;
  }
}