.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}
}

/* Course previews occupy the same slots as the account walkthrough. */
.course-showcase .guide-intro{min-height:100px}.course-showcase .guide-browser{height:32px;box-sizing:border-box}.showcase-stage{height:272px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(145deg,#edf5ff,#f3edfc)}.showcase-stage>svg{height:100%;width:100%;max-width:100%;object-fit:contain}.showcase-fraction{display:grid;justify-items:center;gap:4px}.showcase-fraction svg{width:210px;height:210px}.showcase-stage strong{font-size:24px;color:#25365e}.showcase-pair{display:flex;align-items:center;justify-content:center;gap:12px;width:100%}.showcase-pair>div{display:grid;justify-items:center;width:40%}.showcase-pair svg{width:100%;height:190px}.showcase-pair>span{font-size:36px;color:#7650b5}.course-showcase .guide-caption p{max-width:58ch}
@media(min-width:901px){.course-showcase .guide-intro{min-height:90px}.showcase-stage{height:254px}}
@media(max-width:760px){.course-showcase .guide-intro{min-height:76px}.showcase-stage{height:280px}}

/* Let account previews sit on the page while preserving their footprint. */
.family-guide.course-showcase{background:transparent;border-color:transparent;border-radius:0;box-shadow:none}

/* Unframed, consistently proportioned visitor previews. */
.course-showcase .guide-scene{border:0;border-radius:0;background:transparent;overflow:visible}
.course-showcase .guide-browser{display:none}
.course-showcase .showcase-stage{height:auto;aspect-ratio:8/5;min-height:0;background:transparent;border-radius:12px}
.course-showcase .guide-caption{padding-top:18px}

/* Integrated photography shares the section background without a frame. */
.learning-photo{overflow:visible;border-radius:0!important;mask:none!important;-webkit-mask:none!important}
.course-showcase .showcase-stage:has(.learning-photo),.studio-picture:has(.learning-photo),.story-drawing:has(.learning-photo){border-radius:0;overflow:visible}
.family-guide.course-showcase{padding-left:0;padding-right:0}

/* Keep preview controls and progress, without repeating promotional copy below. */
.course-showcase .guide-caption h3,.course-showcase .guide-caption p{display:none}
.course-showcase .guide-caption{min-height:0;margin-block:12px}