/* Retention: old #success copy in the new-home dark scene. Base/heading: frame.css .hs-dark-scene · .hs-scene-heading. Digits: home.css .hs-benefit-*. */
.hs-retention-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.hs-retention-stat{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 24px;min-width:0}
.hs-retention-stat+.hs-retention-stat{border-left:1px solid #ffffff14}
.hs-retention-stat .hs-benefit-word{align-self:stretch}
/* Center the digits and unit as one group; the unit sits in the flow instead of hanging off the right. */
.hs-retention .hs-benefit-unit{position:static;margin-left:.24em;margin-bottom:.875em}
.hs-retention-stat h3{margin:18px 0 0;font-weight:600;letter-spacing:-.025em;color:#edece9;word-break:keep-all}
.hs-retention-stat p{margin:8px 0 0;line-height:1.6;color:#8f8e88;letter-spacing:-.02em;word-break:keep-all}
@media(min-width:901px) and (max-height:850px){.hs-retention .hs-benefit-word strong{font-size:clamp(56px,5.6vw,80px)}}
@media(max-width:900px){.home-light .hs-retention .hs-benefit-word strong{font-size:48px;justify-content:center}.hs-retention-stat{padding:12px}}
/* Phones: one row per number — label and line stacked on the left, digits on the right, the text
   block and the digits centred on each other, so the heading and all three numbers share one screen. Stacked centered columns
   took about 200px each; a line running under the digits left the text out of line with them (user 2026-09-29).
   The rows split the frame row's own space (frame.css --hs-frame-row-space) evenly: with it above the first row and below the
   last, the first line sat low in its cell, the last sat high and only the middle one looked centred (user 2026-09-29).
   8px + a third of it per row side keeps the block's height as before. */
@media(max-width:600px){.hs-retention-stats{grid-template-columns:1fr;padding-block:0}
 .hs-retention-stat{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title number" "line number";column-gap:12px;align-content:center;text-align:left;padding:calc(8px + var(--hs-frame-row-space) / 3) 4px}
 .hs-retention-stat+.hs-retention-stat{border-left:0;border-top:1px solid #ffffff14}
 .hs-retention-stat .hs-benefit-word{grid-area:number;align-self:center}
 /* 숫자는 폰 폭에 비례(최대 40px) — 세 자리가 모두 넓은 「203+」도 옆 설명을 한 줄로 두도록(360 · 375에서 꺾였다) */
 .home-light .hs-retention .hs-benefit-word strong{font-size:clamp(30px,9vw,40px);justify-content:flex-end}
 .hs-retention-stat h3{grid-area:title;align-self:end;margin:0}
 .hs-retention-stat p{grid-area:line;align-self:start;margin:4px 0 0}}