/* Cards overlap left to right; a hovered card lifts above its neighbours. */
.family-features{padding:clamp(44px,4.4vw,68px) var(--grid-pad) 32px;color:#17334F;font-family:"Geist",Arial,sans-serif}
.family-features-inner{position:relative;z-index:2;max-width:1280px;margin-inline:auto}
.family-features h2{max-width:24ch;margin:0 0 18px;text-align:left;font:400 clamp(1.65rem,2.7vw,2.8rem)/1.05 "Geist",Arial,sans-serif;letter-spacing:-.05em}
.family-feature-grid{display:flex;align-items:flex-start;padding:60px 14px 54px;isolation:isolate}
.family-feature-grid:focus-visible{outline:2px solid #287AF2;outline-offset:4px}
.family-feature{--tilt:-4deg;--lift:16px;--card:#17334F;--text:#F4F9FF;--copy:#D8E6F2;position:relative;z-index:1;flex:0 0 calc((100% + 180px) / 6);min-width:0;margin-left:-36px;color:var(--text);transform:translateY(var(--lift)) rotate(var(--tilt));transform-origin:50% 80%}
.family-feature-surface{position:relative;box-sizing:border-box;width:100%;min-height:358px;padding:16px 48px 26px 20px;border:1px solid #17334F1F;border-radius:14px;background:var(--card);box-shadow:0 8px 18px #17334F0C}
.family-feature:first-child{margin-left:0}
.family-feature:nth-child(2){z-index:2;--tilt:2deg;--lift:-14px;--card:#2D527A;--copy:#E0EBF5}
.family-feature:nth-child(3){z-index:3;--tilt:-3deg;--lift:26px;--card:#476F98;--copy:#FFF}
.family-feature:nth-child(4){z-index:4;--tilt:4deg;--lift:-8px;--card:#91B2D1;--text:#102B46;--copy:#193750}
.family-feature:nth-child(5){z-index:5;--tilt:-2deg;--lift:22px;--card:#CCDEEE;--text:#17334F;--copy:#304F6B}
.family-feature:nth-child(6){z-index:6;--tilt:3deg;--lift:2px;--card:#FFF;--text:#17334F;--copy:#4C6479}
@media(hover:hover) and (pointer:fine){
 .family-feature{transition:transform .32s cubic-bezier(.2,.75,.25,1)}
 .family-feature-surface{transition:box-shadow .32s ease}
 .family-feature:hover{z-index:7;transform:translateY(calc(var(--lift) - 18px)) rotate(0deg) scale(1.025)}
 .family-feature:hover .family-feature-surface{box-shadow:0 16px 30px #17334F26}
}
@media(prefers-reduced-motion:reduce){
 .family-feature,.family-feature-surface{transition:none}
 .family-feature:hover{transform:translateY(var(--lift)) rotate(var(--tilt))}
}
.family-feature-image{height:156px;margin:0 -28px 10px -10px}
.family-feature-image img{display:block;width:100%;height:100%;object-fit:contain}
.family-feature h3{min-height:2.4em;margin:0 0 8px;font:500 clamp(17px,1.5vw,21px)/1.2 "Geist",Arial,sans-serif;letter-spacing:-.035em}
.family-feature-surface>p{margin:0;color:var(--copy);font:400 14px/1.5 "Geist",Arial,sans-serif}
@media(max-width:1050px){
 .family-feature-grid{overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:24px;margin-inline:calc(-1 * var(--grid-pad));padding:40px 24px 48px;scrollbar-width:thin;scrollbar-color:#8CAAC6 transparent}
 .family-feature{flex-basis:260px;margin-left:-32px;scroll-snap-align:start}
 .family-feature-surface{min-height:340px;padding:16px 46px 26px 22px}
 .family-feature:nth-child(n){--lift:8px;--tilt:-2deg}
 .family-feature:nth-child(even){--lift:-2px;--tilt:2deg}
 .family-feature-image{height:160px;margin-inline:-8px}
 .family-feature h3{min-height:0;font-size:21px}
 .family-feature-surface>p{font-size:15px}
}
@media(max-width:560px){.family-features{padding:36px var(--grid-pad) 12px}.family-features h2{margin:0}}