/* BIEPE - how-it-works page */

.how-core-section { --sec-bg: var(--color-bg); --sec-fg: var(--color-text); --sec-muted: var(--color-text-muted); --kicker: var(--color-primary); --sec-py: 5rem; --sec-py-lg: 7rem;
  background: var(--sec-bg); color: var(--sec-fg); padding-block: var(--sec-py); @media (width >= 1024px) { padding-block: var(--sec-py-lg); } }
.gcards { display: grid; gap: 1px; border: var(--border-width) solid var(--color-border); background: var(--color-border); @media (width >= 768px) { grid-template-columns: 1fr 1fr; } }
.gcard { background: var(--white); padding: 2rem; @media (width >= 640px) { padding: 2.5rem; } @media (width >= 1024px) { padding: 3.5rem; } @supports (animation-timeline: view()) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; } @media (prefers-reduced-motion: reduce) { animation: none; } }
.gcard__top { display: flex; align-items: center; gap: 0.75rem; & .ico { --ico-size: 1.5rem; color: var(--color-primary); } }
.gcard__title { margin: 0; font-size: 1.5rem; line-height: 2rem; font-weight: var(--weight-semibold); letter-spacing: 0; }
.gcard__list { margin-block-start: 2rem; display: grid; gap: 2rem; }
.point { border-block-start: var(--border-width) solid var(--color-border); padding-block-start: 1.25rem; }
.point__title { margin: 0; line-height: 1.5rem; font-weight: var(--weight-semibold); }
.point__text { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.5rem; color: var(--color-text-muted); }
.gcard--wide { @media (width >= 768px) { grid-column: span 2; } }
.how-outcomes-section { --sec-bg: var(--color-surface); --sec-fg: var(--color-text); --sec-muted: var(--color-text-muted); --kicker: var(--color-primary); --sec-py: 5rem; --sec-py-lg: 7rem;
  background: var(--sec-bg); color: var(--sec-fg); padding-block: var(--sec-py); @media (width >= 1024px) { padding-block: var(--sec-py-lg); } }
.grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; @media (width >= 1024px) { grid-template-columns: repeat(3, 1fr); } & > :nth-child(3n+2) { animation-range: entry 8% entry 48%; } & > :nth-child(3n+3) { animation-range: entry 16% entry 56%; } }
.card { display: flex; flex-direction: column; border: var(--border-width) solid var(--color-border); background: var(--white); padding: 2rem; & > .ico { --ico-size: var(--card-ico, 1.5rem); color: var(--color-primary); } @supports (animation-timeline: view()) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; } @media (prefers-reduced-motion: reduce) { animation: none; } }
.card__title { margin: 1.5rem 0 0; font-size: 1.25rem; line-height: 1.375; font-weight: var(--weight-semibold); letter-spacing: 0; }
.card__text { margin: 1rem 0 0; line-height: 1.75rem; color: var(--color-text-muted); }
.section-cta { margin-block-start: 2.5rem; }
.evidence-caption { padding:16px 0 0;font-size:15px;line-height:1.6;color:color-mix(in srgb, currentColor 72%, transparent); @media(width < 680px){padding:12px 0 0;font-size:14px;} }
.fh-download--even { @media (width >= 1024px) { padding-block: 112px !important; height: auto !important; } }
.fh-title--wrap { white-space:normal !important; max-inline-size:576px; }
.how-roi-section { --sec-bg: var(--color-dark); --sec-fg: var(--white); --sec-muted: rgb(255 255 255 / 0.6); --kicker: var(--color-primary); --sec-py: 5rem; --sec-py-lg: 7rem;
  background: var(--sec-bg); color: var(--sec-fg); padding-block: var(--sec-py); @media (width >= 1024px) { padding-block: var(--sec-py-lg); } }