/* Benefits page */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.bn-reasons { background: linear-gradient(180deg,#ffffff,#f7fcf4); padding: 10px 32px 56px; }
.bn-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bn-head--wide { max-width: 1240px; margin: 0 auto 28px; }
.bn-pill { padding: 8px 24px; border-radius: 999px; background: #dcf5c9; color: #0f6b2f; font-size: 17px; font-weight: 700; letter-spacing: 0.06em; }
.bn-head h2 { margin: 0; font-size: clamp(34px, 4.4vw, 50px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; color: var(--ink); }
.bn-head h2.bn-balance { text-wrap: balance; }
.bn-head p { margin: 0; font-size: 17px; color: var(--ink-2); max-width: 620px; line-height: 1.5; }
.bn-accent { position: relative; display: inline-block; color: #13793a; font-style: italic; }
.bn-accent svg { position: absolute; left: 10%; bottom: -8px; width: 90%; height: 12px; }

.bn-math { background: #f7fcf4; padding: 24px 32px 64px; }
.bn-math__inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }

.cmp { overflow-x: auto; border-radius: 18px; border: 1px solid #e1eedc; background: #fff; box-shadow: 0 10px 30px rgba(16,80,36,0.1); }
.cmp__grid { min-width: 680px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
.cmp__row { display: contents; }
.cmp__h { padding: 18px 22px; font-size: 16px; font-weight: 700; border-bottom: 1px solid #e6f0e2; }
.cmp__h--blank { font-size: 14px; color: var(--muted); }
.cmp__h--us { font-weight: 800; color: #fff; background: #0f6b2f; border-bottom-color: #0f6b2f; }
.cmp__c { padding: 16px 22px; font-size: 15px; color: var(--ink-2); border-bottom: 1px solid #eef4eb; }
.cmp__label { font-weight: 600; color: var(--ink); }
.cmp__dim { color: #9aa69e; }
.cmp__us { font-weight: 700; color: #0f6b2f; background: #f0f9eb; border-bottom-color: #e1f0da; }
.cmp__us--flex { display: flex; align-items: center; gap: 6px; }
.cmp__row--last > .cmp__c { border-bottom: 0; }

.bn-more { display: flex; justify-content: center; }
.bn-btn { padding: 14px 28px; border-radius: 12px; background: linear-gradient(180deg,#b0f25c,#86dc35); color: var(--forest); font-size: 16px; font-weight: 700; }
.bn-btn:hover { filter: brightness(1.05); color: var(--forest); }