/* Module Professional Polish (2026-05-08)
   Final shared guardrail for Hermes-generated pages. Keep this file token-based
   and low on one-off selectors; it should make all modules feel like one system. */

:root {
  --ds-radius: 8px;
  --ds-radius-lg: 8px;
  --module-card-radius: var(--ds-radius, 8px);
  --module-section-py: clamp(56px, 8vh, 104px);
  --module-section-px: clamp(20px, 4vw, 64px);
}

main {
  overflow-x: clip;
}

main :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, [class*="title"], [class*="headline"]) {
  letter-spacing: 0 !important;
  text-wrap: balance;
}

main :where(p, li, dd, blockquote, figcaption, label, input, select, textarea, button, a) {
  overflow-wrap: anywhere;
}

main :where(img, video, iframe, canvas, svg) {
  max-width: 100%;
}

main :where(img, video) {
  display: block;
  height: auto;
}

main :where(.section, .modular-row) {
  scroll-margin-top: 96px;
}

main :where(.container, .container-fluid) {
  max-width: min(var(--ds-container-lg, 1180px), calc(100vw - (var(--module-section-px) * 2)));
}

main :where(
  [class*="card"],
  [class*="panel"],
  [class*="tile"],
  [class*="box"],
  [class*="item"],
  [class*="media"],
  [class*="poster"],
  [class*="preview"],
  [class*="placeholder"],
  [class*="form-wrap"],
  [class*="summary"]
):not(
  [class*="btn"],
  [class*="button"],
  [class*="badge"],
  [class*="pill"],
  [class*="chip"],
  [class*="dot"],
  [class*="avatar"],
  [class*="icon"],
  [class*="logo"]
) {
  border-radius: var(--module-card-radius) !important;
}

main :where(
  a[class*="btn"],
  a[class*="button"],
  button,
  input[type="submit"],
  [class*="cta"],
  [class*="pill"],
  [class*="chip"],
  [class*="badge"]
) {
  border-radius: var(--ds-radius-pill, 999px);
}

main :where(input, select, textarea) {
  min-height: 48px;
  border-radius: var(--ds-radius-sm, 6px);
}

main :where(table) {
  border-collapse: separate;
  border-spacing: 0;
}

main :where(.table-responsive, [class*="table-wrap"], [class*="compare-table"]) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

main :where(.section, .modular-row):has(> .container:empty),
main :where(.section, .modular-row):has(> .container-fluid:empty) {
  display: none;
}

@media (max-width: 600px) {
  main :where(.section, .modular-row) {
    padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
  }

  main :where(.container, .container-fluid) {
    max-width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  main :where(.row) {
    margin-left: 0;
    margin-right: 0;
  }
}

/* 2026-05-09 unified selected-state language.
   Active segmented controls use semantic selected tokens. Defaults map to
   the orange action system; trust/proof green is reserved for proof states. */
main {
  --ux-active-bg: var(--ds-selected-bg, var(--ds-action-bg, var(--ds-cta-aa, var(--ds-cta-dk))));
  --ux-active-fg: var(--ds-selected-fg, var(--ds-action-fg, var(--ds-cta-fg, #ffffff)));
  --ux-active-border: var(--ds-selected-border, var(--ds-action-border, var(--ux-active-bg)));
}

main :is(
  .faq-filter.active,
  .faq-filter[aria-pressed="true"],
  .filter-tab.active,
  .filter-tab[aria-pressed="true"],
  .qualifier-pill.active,
  .qualifier-pill[aria-pressed="true"],
  .industry-pill-isolated.active,
  .industry-pill-isolated[aria-pressed="true"],
  .stat-item.active,
  .stat-item[aria-pressed="true"],
  .tab-pill-compact.active,
  .tab-pill-compact[aria-selected="true"],
  .chapter-pill.active,
  .chapter-pill[aria-selected="true"],
  .msf-pill.selected,
  .msf-pill.active,
  .msf-pill[data-selected="true"],
  .toggle-view.active,
  .toggle-view[aria-pressed="true"],
  button[role="tab"][aria-selected="true"]
) {
  background: var(--ux-active-bg) !important;
  color: var(--ux-active-fg) !important;
  border-color: var(--ux-active-border) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 8px 18px rgba(28, 74, 50, 0.18) !important;
  font-weight: 600 !important;
}

main :is(
  .faq-filter.active,
  .faq-filter[aria-pressed="true"],
  .filter-tab.active,
  .filter-tab[aria-pressed="true"],
  .qualifier-pill.active,
  .qualifier-pill[aria-pressed="true"],
  .industry-pill-isolated.active,
  .industry-pill-isolated[aria-pressed="true"],
  .stat-item.active,
  .stat-item[aria-pressed="true"],
  .tab-pill-compact.active,
  .tab-pill-compact[aria-selected="true"],
  .chapter-pill.active,
  .chapter-pill[aria-selected="true"],
  .msf-pill.selected,
  .msf-pill.active,
  .msf-pill[data-selected="true"],
  .toggle-view.active,
  .toggle-view[aria-pressed="true"],
  button[role="tab"][aria-selected="true"]
) :is(svg, .pill-icon, .stat-icon, .tab-svg, .msf-pill-icon, .msf-pill-label, .msf-pill-sublabel, .filter-count) {
  color: var(--ux-active-fg) !important;
  stroke: currentColor;
}

main :is(
  .faq-filter,
  .filter-tab,
  .qualifier-pill,
  .industry-pill-isolated,
  .stat-item,
  .tab-pill-compact,
  .chapter-pill,
  .msf-pill,
  .toggle-view,
  button[role="tab"]
):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ux-active-bg) 62%, #ffffff 38%) !important;
  outline-offset: 3px;
}

main .cro-faq .faq-filter.active,
main .block-cro-block-1 .faq-filter.active,
main .cro-hero-form .qualifier-pill.active,
main .block-cro-block-2 .qualifier-pill.active,
main .cro-hero-video .stat-item.active,
main .block-cro-block-3 .stat-item.active,
main .cro-hero-video .tab-pill-compact.active,
main .cro-hero-video .tab-pill-compact[aria-selected="true"],
main .cro-hero-video .chapter-pill.active,
main .block-cro-block-4 .industry-pill-isolated.active,
main .cro-hero-industry .industry-pill-isolated.active,
main .block-cro-block-15 .toggle-view.active,
main .cro-trust-badges .toggle-view.active,
main .block-cro-block-16 .msf-pill.selected,
main .block-cro-block-16 .msf-pill.active,
main .block-cro-block-16 .msf-pill[data-selected="true"],
main .cro-booking .msf-pill.selected,
main .cro-booking .msf-pill.active,
main .cro-booking .msf-pill[data-selected="true"],
main .block-cro-block-17 .filter-tab.active,
main .cro-comparison .filter-tab.active {
  background: var(--ux-active-bg) !important;
  color: var(--ux-active-fg) !important;
  border-color: var(--ux-active-border) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.24),
    0 8px 18px rgba(28,74,50,.18) !important;
  font-weight: 600 !important;
}

main .cro-faq .faq-filter.active *,
main .block-cro-block-1 .faq-filter.active *,
main .cro-hero-form .qualifier-pill.active *,
main .block-cro-block-2 .qualifier-pill.active *,
main .cro-hero-video .stat-item.active *,
main .block-cro-block-3 .stat-item.active *,
main .cro-hero-video .tab-pill-compact.active *,
main .cro-hero-video .chapter-pill.active *,
main .block-cro-block-4 .industry-pill-isolated.active *,
main .cro-hero-industry .industry-pill-isolated.active *,
main .block-cro-block-15 .toggle-view.active *,
main .cro-trust-badges .toggle-view.active *,
main .block-cro-block-16 .msf-pill.selected *,
main .block-cro-block-16 .msf-pill.active *,
main .cro-booking .msf-pill.selected *,
main .cro-booking .msf-pill.active *,
main .block-cro-block-17 .filter-tab.active *,
main .cro-comparison .filter-tab.active * {
  color: var(--ux-active-fg) !important;
  stroke: currentColor;
}