/* Retention illustration: typography stays in HTML; the drawing is a light SVG. */
#retention-gaps{padding-top:82px}
#retention-gaps .retention-intro{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:clamp(48px,7vw,112px);margin-bottom:66px}
#retention-gaps .retention-intro h2{font-size:clamp(46px,4.65vw,70px);line-height:1.07;letter-spacing:-.035em;margin:0;max-width:690px}
#retention-gaps .retention-heading>.eyebrow{margin-bottom:22px}
.retention-figure{width:calc(130% + 62.4px);max-width:764.4px;justify-self:end;position:relative;color:var(--paper);margin:0}
.retention-figure figcaption{font:500 11px/1.4 Geist,Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#adafa6;margin:0 0 15px 12px}
.retention-chart{display:block;width:100%;height:auto;overflow:visible;isolation:isolate}
.retention-chart text{font-family:Geist,Arial,sans-serif;font-size:15px;font-weight:450;fill:#b6b9af;letter-spacing:-.15px}
.retention-chart .chart-label-positive{fill:var(--paper);font-weight:500;font-size:17px}
.retention-chart .chart-label-baseline{font-size:16px}
.retention-chart .chart-axis-label{font-size:14px;letter-spacing:.05px;fill:#a6aa9f}
.retention-chart .chart-guide{fill:none;stroke:#f4f3ee;stroke-opacity:.12;stroke-width:1}
.retention-chart .chart-track{fill:none;stroke:#f05a28;stroke-opacity:.07;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.retention-chart .chart-track-baseline{stroke:#d1d3c9;stroke-opacity:.09;stroke-width:1}
.retention-chart .chart-line{fill:none;stroke-linecap:round;stroke-linejoin:round}
.retention-chart .chart-line-baseline{stroke:#a5a99f;stroke-width:1.6;stroke-dasharray:3 6}
.retention-chart .chart-line-positive{stroke:url(#retention-ember-line);stroke-width:3.5}
.retention-chart .chart-line-light{stroke:#ffe0c3;stroke-width:.7;opacity:.35}
.retention-chart .chart-glow{stroke:#f05a28;stroke-width:5;opacity:.42;filter:url(#retention-soft-light)}
.retention-chart .chart-dot-halo{fill:url(#retention-dot-light)}
.retention-chart .chart-dot-core{fill:#ffd4b0;stroke:#ffbc8e;stroke-width:.7}
.retention-chart .chart-dot-baseline{fill:var(--ink);stroke:#a5a99f;stroke-width:1.4}
.retention-chart .chart-start{fill:var(--paper)}
.retention-chart .chart-ribbon-contours{fill:none;stroke:#ff985f;stroke-width:.55;stroke-linecap:round;stroke-linejoin:round}
.retention-chart .chart-ribbon-edge{fill:none;stroke:#da7c4f;stroke-width:.8;opacity:.4}
.retention-chart .chart-purchase{fill:var(--ink);stroke:#ff9b6b;stroke-width:1.3}
.retention-chart .chart-purchase-core{fill:#ffbf94;stroke:none}
#retention-gaps .problem-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:38px}
#retention-gaps .problem-grid article:nth-child(n){margin-top:0;translate:none!important;padding-top:22px}
#retention-gaps .problem-grid article:nth-child(n) h3{font-size:clamp(24px,2.05vw,30px);line-height:1.16;margin-bottom:18px;max-width:none;letter-spacing:-.03em}
#retention-gaps .problem-grid article .eyebrow{margin-bottom:25px}
#retention-gaps .problem-grid p:not(.eyebrow){max-width:390px;font-size:16px;line-height:1.6}
#retention-gaps .problem-stage>.motion-ribbon{margin-top:58px}
@media(min-width:1600px){#retention-gaps .retention-intro{grid-template-columns:1.35fr 1fr}}
@media(min-width:1051px) and (max-width:1350px){
 #retention-gaps .retention-intro h2{font-size:clamp(38px,4vw,54px)}
}
@media(max-width:1050px){
 .retention-figure{width:100%;max-width:540px}
 #retention-gaps .retention-intro{gap:32px;grid-template-columns:1.1fr 1fr}
 #retention-gaps .retention-intro h2{font-size:clamp(38px,4.65vw,49px)}
 #retention-gaps .problem-grid{gap:26px}
 .retention-figure figcaption{font-size:10px;letter-spacing:.10em}
 .retention-chart .chart-label-positive{font-size:20px}
 .retention-chart .chart-label-baseline{font-size:19px}
 .retention-chart .chart-axis-label{font-size:18px}
}
@media(max-width:780px){
 #retention-gaps{padding-top:52px}
 #retention-gaps .retention-intro{grid-template-columns:1fr;gap:32px;margin-bottom:38px}
 #retention-gaps .retention-intro h2{font-size:clamp(35px,7.9vw,52px);max-width:620px}
 .retention-figure{max-width:510px;justify-self:center}
 .retention-figure figcaption{font-size:10px;margin:0 0 8px 8px}
 .retention-chart .chart-label-positive{font-size:24px}
 .retention-chart .chart-label-baseline{font-size:23px}
 .retention-chart .chart-axis-label{font-size:21px}
 #retention-gaps .problem-grid{grid-template-columns:1fr;gap:0}
 #retention-gaps .problem-grid article:nth-child(n){padding:24px 0}
 #retention-gaps .problem-grid article:last-child{padding-bottom:0}
 #retention-gaps .problem-grid article:nth-child(n) h3{font-size:27px;margin-bottom:0}
 #retention-gaps .problem-grid article .eyebrow{margin-bottom:10px}
 #retention-gaps .problem-stage>.motion-ribbon{margin-top:36px}
}
@media(max-width:380px){
 .retention-chart .chart-label-positive{font-size:27px}
 .retention-chart .chart-label-baseline{font-size:26px}
 .retention-chart .chart-axis-label{font-size:26px}
}
@media(prefers-reduced-motion:reduce){.retention-chart .chart-glow{filter:none;opacity:.12}}
@media print{
 .retention-chart [data-retention-window]{width:620px!important}
 .retention-chart [data-retention-head]{display:none}
}
@media(forced-colors:active){
 .retention-chart .chart-line-positive,.retention-chart .chart-line-baseline{stroke:CanvasText}
 .retention-chart text{fill:CanvasText}
 .retention-chart .chart-glow,.retention-chart .chart-wash,.retention-chart .chart-dot-halo,.retention-chart .chart-ribbon-edge{display:none}
 .retention-chart .chart-purchase{fill:Canvas;stroke:CanvasText}
 .retention-chart .chart-purchase-core{fill:CanvasText}
}