/**
 * Shared design tokens — Colonnade insurance UI blocks
 * Aligned with employer-legalization / op-comparison / service4
 * Used by insurance-benefits + insurance-howto
 */

.op-ins-benefits,
.op-ins-benefits--poa,
.op-ins-howto {
  --op-ins-navy: #092b96;
  --op-ins-navy-deep: #0b3a6e;
  --op-ins-ink: #131313;
  --op-ins-blue: #086cdc;
  --op-ins-blue2: #2380eb;
  --op-ins-soft: #eaf4ff;
  --op-ins-orange: #e87722;
  --op-ins-orange-soft: #fe9a00;
  --op-ins-muted: #5d6f82;
  --op-ins-faint: #8798ab;
  --op-ins-subtitle: #5d6f82;
  --op-ins-line: #e2eaf4;
  --op-ins-card: #ffffff;
  --op-ins-grad: linear-gradient(91.91deg, #092b96 0%, #086cdc 100%);
  --op-ins-grad-soft: linear-gradient(
    145deg,
    rgba(42, 142, 240, 0.14) 0%,
    rgba(8, 108, 220, 0.08) 45%,
    rgba(9, 43, 150, 0.04) 100%
  );
  /* Soft, non-heavy section wash (benefits only) */
  --op-ins-section-bg: #f7faff;
  --op-ins-icon-bg: linear-gradient(
    145deg,
    #eef5ff 0%,
    #e3efff 55%,
    #f7faff 100%
  );
  --op-ins-orange-bg: linear-gradient(
    145deg,
    rgba(232, 119, 34, 0.12) 0%,
    rgba(254, 154, 0, 0.08) 100%
  );
  --op-ins-card-shadow: 0 16px 40px rgba(9, 43, 150, 0.05);
  --op-ins-card-border: 1px solid rgba(35, 128, 235, 0.12);
  --op-ins-radius: 22px;
  --op-ins-radius-sm: 18px;
  /* Match theme .container / .op-comparison > .container */
  --op-ins-max: 1330px;
  --op-ins-gutter: 15px;
  font-family: Gilroy, sans-serif;
  color: var(--op-ins-ink);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.op-ins-benefits *,
.op-ins-benefits *::before,
.op-ins-benefits *::after,
.op-ins-howto *,
.op-ins-howto *::before,
.op-ins-howto *::after {
  box-sizing: border-box;
}

.op-ins-benefits svg,
.op-ins-howto svg {
  display: block;
  flex-shrink: 0;
  max-width: 100%;
}

/* Site grid — same max-width + gutters as .container / FAQ / op-comparison */
.op-ins-benefits > .container,
.op-ins-howto > .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--op-ins-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--op-ins-gutter);
  padding-right: var(--op-ins-gutter);
  box-sizing: border-box;
  min-width: 0;
}