/* Centered problem section; the four points always remain readable. */
#familiar{box-sizing:border-box;width:min(940px,calc(100% - 48px));margin:75px auto 85px;padding:0;text-align:center;color:#111820;font-family:'Hanken Grotesk',sans-serif;scroll-margin-top:110px}
#familiar h2{font-size:clamp(36px,4.5vw,58px);line-height:1.08;letter-spacing:-.045em;margin:0 0 13px;font-weight:700}
#familiar header>p{font-size:19px;line-height:1.5;color:#466171;margin:0}
.familiar-art{position:relative;width:330px;height:216px;margin:18px auto 23px}
.familiar-art img{display:block;object-fit:contain;width:235px;height:235px;margin:auto;animation:familiar-float 6s ease-in-out infinite;transform-origin:50% 90%}
.familiar-status{position:absolute;bottom:0;left:50%;width:260px;transform:translateX(-50%);height:34px}
.familiar-status span{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;border:1px solid #d3e2ed;border-radius:7px;background:#fff;box-shadow:0 3px 0 #deebf3;color:#496473;font-size:12px;opacity:0;animation:familiar-note 16s ease-in-out infinite;animation-delay:calc(var(--i)*4s)}
#familiar .familiar-points{list-style:none;padding:0;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:23px 38px;max-width:840px;text-align:left}
#familiar .familiar-points li{display:flex;align-items:flex-start;gap:12px;margin:0;padding:0}
.familiar-dot{flex:none;width:6px;height:6px;border-radius:50%;margin-top:9px;background:#abc6d7;animation:familiar-dot 16s ease-in-out infinite;animation-delay:calc(var(--i)*4s)}
#familiar h3{font-size:17px;line-height:1.4;letter-spacing:-.015em;font-weight:700;margin:0 0 4px}
#familiar .familiar-points p{font-size:15px;line-height:1.55;color:#466171;margin:0}
.familiar-outcome{margin:31px auto 0;max-width:750px}
#familiar .familiar-outcome p:first-child{font-size:27px;line-height:1.35;letter-spacing:-.025em;margin:0 0 11px}
#familiar mark{background:#ffed9a;color:#111820;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:1px 7px 3px;border-radius:3px}
#familiar .familiar-outcome p:last-child{font-size:15px;line-height:1.6;color:#466171;margin:0}
.familiar-mobile-break{display:none}
.familiar-motion{font:inherit;font-size:11px;color:#536c7b;cursor:pointer;border:0;border-bottom:1px solid #c4d5df;background:transparent;padding:2px 0;margin:18px 0 0}
.familiar-motion:focus-visible{outline:2px solid #176f9f;outline-offset:5px}
#familiar[data-paused="true"] *,#familiar[data-visible="false"] *{animation-play-state:paused!important}
@keyframes familiar-float{0%,100%{transform:translateY(2px) rotate(-2deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes familiar-note{0%{opacity:0;transform:translateY(7px)}4%,21%{opacity:1;transform:translateY(0)}25%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes familiar-dot{0%,25%,100%{background:#abc6d7;box-shadow:0 0 0 0 #176f9f00}4%,21%{background:#176f9f;box-shadow:0 0 0 4px #176f9f10}}
@media(max-width:650px){#familiar{width:calc(100% - 40px);margin:55px auto 65px}#familiar header>p{font-size:16px}.familiar-art{width:100%;max-width:300px;height:200px;margin:13px auto 25px}.familiar-art img{width:215px;height:215px}#familiar .familiar-points{grid-template-columns:1fr;gap:20px;max-width:400px}#familiar h3{font-size:17px}#familiar .familiar-points p{font-size:15px}.familiar-outcome{margin-top:29px}#familiar .familiar-outcome p:first-child{font-size:25px;line-height:1.6}.familiar-mobile-break{display:block}#familiar .familiar-outcome p:last-child{max-width:360px;margin:auto;font-size:14px}}
@media(prefers-reduced-motion:reduce){#familiar *{animation:none!important}.familiar-status span{display:none}.familiar-status span:first-child{display:flex;opacity:1}.familiar-motion{display:none}}