/* Why Korravo: the no-then-yes comparison. The Korravo card is dark, slightly larger and lit from behind, so it carries more weight */
.why{--why-bg:#F7F7F5;--why-line:#E6E7E4;--why-ink:#121614;--why-mute:#6B7079;--why-soft:#B8BBB7;--why-green:#00683C;--why-green-2:#089D58;--why-bright:#5FC184;--why-dark:#161B1F;
  background:var(--why-bg);color:var(--why-ink);padding:var(--same-gap) var(--gutter) var(--section-y);position:relative;z-index:2;overflow:hidden}
.why-wrap{max-width:var(--container-narrow);margin:0 auto}
.why-head{text-align:center;max-width:760px;margin:0 auto var(--head-gap)}
.why-head h2{font-size:var(--h2);line-height:1.06;letter-spacing:-.03em;font-weight:500;text-wrap:balance}
.why-head h2 span{display:block;padding-bottom:.14em;margin-bottom:-.14em;background:linear-gradient(90deg,var(--why-green) 0%,var(--why-green-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.why-head p{font-size:var(--lead);line-height:1.6;color:var(--why-mute);margin:16px auto 0;max-width:34em;text-wrap:balance}

.why-cards{display:grid;grid-template-columns:1fr 1.04fr;gap:var(--block-gap);align-items:stretch}
.why-card{border-radius:var(--r-lg);padding:var(--card-pad);display:flex;flex-direction:column}
.why-card h3{font-size:var(--h3);font-weight:500;letter-spacing:-.015em;line-height:1.2}
.why-card ul{list-style:none;padding:0;margin:24px 0 0;flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.why-card li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--why-line)}
.why-card li svg{width:26px;height:26px}
.why-card li small{display:block;font-size:14px;color:var(--why-mute)}
.why-card li b{display:block;font-weight:400;font-size:var(--lead);margin-top:4px;letter-spacing:-.005em}

.why-no{background:#F3F3F1;border:1px solid var(--why-line);color:#3A3F3C}
.why-no h3{color:#3A3F3C}
.why-no li svg{color:var(--why-soft)}

.why-yes{position:relative;background:var(--why-dark);color:#F7F7F5;border:2px solid rgba(95,193,132,.5);box-shadow:0 0 0 1px rgba(95,193,132,.18),0 0 22px -4px rgba(95,193,132,.45),inset 0 0 18px -8px rgba(95,193,132,.35),0 30px 60px -30px rgba(18,22,20,.55)}

.why-yes .brand{display:block;color:var(--why-bright);font-weight:500;font-size:var(--lead);margin-bottom:4px}
.why-yes li{border-top-color:rgba(255,255,255,.12)}
.why-yes li small{color:#9298A6}
.why-yes li b{font-weight:500}
.why-yes li svg{color:var(--why-bright)}
.why-cards{position:relative;isolation:isolate}
/* Brian's glow artwork, positioned as in the 1832 x 859 design: the cards span x 300 to 1532 and y 265 to 705 of that canvas */
.why-cards::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-15%;top:-47%;width:148.7%;height:195.2%;background:url(glow.avif) center/100% 100% no-repeat}

.why-foot{text-align:center;max-width:720px;margin:var(--head-gap) auto 0;font-size:var(--body);line-height:1.6;color:var(--why-mute)}

/* the Korravo checks tick in once, from a visible resting state */
@keyframes why-tick{from{stroke-dashoffset:14}to{stroke-dashoffset:0}}
.why.seen .why-yes li svg path{stroke-dasharray:14;animation:why-tick .5s cubic-bezier(.22,1,.36,1) both}
.why.seen .why-yes li:nth-child(2) svg path{animation-delay:.12s}.why.seen .why-yes li:nth-child(3) svg path{animation-delay:.24s}.why.seen .why-yes li:nth-child(4) svg path{animation-delay:.36s}
@media (prefers-reduced-motion:reduce){.why.seen *{animation:none!important}}

@media(max-width:900px){.why-cards{grid-template-columns:1fr;gap:var(--block-gap)}.why-cards::before{left:-30%;width:160%;top:-10%;height:120%}}