.family-guide{position:sticky;top:24px;max-width:760px;margin:28px 0 0;padding:24px;border:1px solid #d4dff3;border-radius:28px;background:linear-gradient(145deg,#fff 45%,#f1eaff);box-shadow:0 16px 42px #3546750d;color:#25365e}
.guide-intro{display:flex;align-items:center;gap:18px;margin-bottom:18px}.guide-intro img{width:100px;height:100px;object-fit:contain;filter:drop-shadow(0 8px 8px #7653a622)}.guide-visible .guide-intro img{animation:guide-float 4s ease-in-out infinite}.guide-intro h2{font-size:clamp(20px,1.6vw,28px);letter-spacing:-.6px;margin:6px 0}.guide-intro p{font-size:13px;margin:0}.guide-intro .eyebrow{font-size:9px;letter-spacing:1.5px}
.guide-scene{border:1px solid #d8e2f4;border-radius:16px;overflow:hidden;background:white;pointer-events:none}.guide-browser{display:flex;align-items:center;gap:5px;padding:10px 12px;background:#e2efff}.guide-browser>span{width:6px;height:6px;border-radius:50%;background:#9faed0}.guide-browser small{margin-left:8px;font-size:10px;color:#536889}.guide-screen{padding:18px;min-height:272px}.guide-screen>strong{font-size:17px}.guide-demo-items{display:grid;gap:7px;margin-top:15px}.guide-demo-item{position:relative;padding:7px 12px;border:1px solid #e2e7ef;border-radius:8px;font-size:12px;color:#52627e;background:#f7f9fd}.guide-visible .guide-demo-item{animation:guide-reveal .5s both;animation-delay:calc(var(--item)*.12s)}.guide-demo-item.guide-highlight{background:#d1f4dd;border-color:#61b48e;color:#1e5340;font-weight:750;padding-right:35px}.guide-pointer{position:absolute;right:14px;top:0;font-size:29px;color:#254fd1;text-shadow:1px 1px white}.guide-visible .guide-pointer{animation:guide-point 1.8s ease-in-out infinite}
.guide-caption{min-height:185px;padding:18px 0 8px}.guide-count{color:#7650b5;font-size:12px;font-weight:800}.guide-caption h3{font-size:20px;letter-spacing:-.3px;margin:5px 0 8px}.guide-caption p{font-size:14px;line-height:1.65;margin:0}.guide-controls{display:flex;align-items:center;justify-content:space-between;gap:10px}.guide-controls button{font-family:inherit;font-size:12px;min-height:44px;padding:8px 12px}.guide-nav{display:flex;gap:6px}.guide-nav button{min-width:44px}.guide-listen[hidden]{display:none}.family-guide+.card{margin-top:20px}
@keyframes guide-float{50%{transform:translateY(-5px) rotate(2deg)}}@keyframes guide-point{50%{transform:translate(-4px,4px)}}@keyframes guide-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:760px){.family-guide{position:relative;top:auto;padding:18px;margin-top:20px}.guide-intro{gap:12px}.guide-intro img{width:76px;height:76px}.guide-screen{min-height:280px;padding:14px}.guide-caption{min-height:230px}.guide-intro h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){.family-guide *{animation:none!important}}

.account-layout:has(.family-guide)>div:first-child{align-self:stretch}
.account-layout:has(.family-guide)>div:first-child>h1{font-size:clamp(30px,3vw,48px)}
@media(min-width:901px){.family-guide{padding:20px}.guide-screen{min-height:254px}.guide-caption{min-height:170px}.guide-intro img{width:90px;height:90px}}
/* Keep the desktop account columns on one shared baseline. */
@media(min-width:901px){
 .account-layout:has(.family-guide){align-items:stretch}
 .account-layout:has(.family-guide)>div:first-child{display:flex;flex-direction:column}
 .account-layout:has(.family-guide)>div:first-child>.family-guide{position:relative;top:auto;margin-top:auto;flex-shrink:0}
 .account-layout:has(.family-guide)>.interaction-panel{position:relative;top:auto;align-self:stretch}
}