/* Refined case-study typography and visual evidence */
.tools>div>span{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;white-space:nowrap}.tools>div>span img{display:block;width:19px;height:19px;object-fit:contain;flex:none}.tools>div>span:nth-child(2) img{border-radius:5px}.tools>div>span:nth-child(3) img{width:17px}.tools>div>span:nth-child(4) img{width:17px}.brand-lockup-original{min-height:90px;display:flex;justify-content:flex-start}.brand-lockup-original img{width:min(100%,390px);height:auto;max-height:115px;object-fit:contain;object-position:left center}.character-showcase{padding:46px 0 12px;border-top:1px solid var(--rule);margin-top:35px}.character-intro,.process-intro{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:end}.character-intro h3,.process-intro h3{font-size:27px;line-height:1.2;letter-spacing:-.8px;margin-top:10px}.character-intro>p,.process-intro>p{font-size:14px;line-height:1.75;color:#626c62;margin:0;max-width:480px}.character-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:17px;margin-top:28px}.character-grid figure{min-width:0}.character-image{aspect-ratio:1.08;background:#f8f7f1;border-radius:14px;padding:13px;display:flex;align-items:center;justify-content:center}.character-image img{width:100%;height:100%;object-fit:contain}.character-grid figcaption{font-size:11px;color:#5f665b;margin-top:10px;text-align:center}.expression-row{border-top:1px solid var(--rule);margin-top:38px;padding:25px 0;display:grid;grid-template-columns:minmax(180px,1.4fr) repeat(4,minmax(0,.7fr));gap:25px;align-items:center}.expression-row>div span{font-size:10px;letter-spacing:1.3px;color:#626c62;font-weight:600}.expression-row>div p{font-size:12px;line-height:1.7;color:#626c62;margin-top:8px}.expression-row figure{text-align:center}.expression-row figure img{width:100%;height:78px;object-fit:contain}.expression-row figcaption{font-size:10px;color:#626c62;margin-top:5px}.process-story{margin:45px 0 58px;padding:32px;background:#f8f8f3;border-radius:18px}.process-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:30px}.process-steps figure{min-width:0}.process-steps button{height:380px;padding:12px;background:#f0eee7;border-radius:13px;overflow:hidden;display:flex;justify-content:center;align-items:center}.process-steps button img{width:100%;height:100%;max-width:100%;object-fit:contain;border-radius:7px}.process-steps button:hover{background:#eae8df}.process-steps figcaption{margin-top:12px}.process-steps figcaption b,.process-steps figcaption span{display:block}.process-steps figcaption b{font-size:12px;color:#30372c}.process-steps figcaption span{font-size:11px;line-height:1.6;color:#626c62;margin-top:5px}.process-note{font-size:11px;color:#626c62;line-height:1.7;margin-top:25px}.fidelity-header h3{font-size:23px}.section-heading h2{max-width:880px;text-wrap:balance}.section-deck{text-wrap:pretty}.research-grid h3,.decision-grid h3,.reflection-grid h3,.iteration-list h3{text-wrap:balance}.case-rail nav a{min-height:18px}.project-badge{font-size:15px}.project-badge::before{content:'✓';font-size:13px;line-height:1}.project-badge{font-size:0}
@media(max-width:900px){.character-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.character-image{aspect-ratio:1.15}.process-steps{gap:15px}.process-steps button{height:310px}.process-story{padding:25px}.expression-row{gap:16px}.character-intro,.process-intro{gap:25px}}
@media(max-width:600px){.tools{max-width:230px}.tools>div{gap:5px}.tools>div>span{font-size:9px;padding:6px 8px;gap:5px}.tools>div>span img{width:15px;height:15px}.tools>div>span:nth-child(3) img,.tools>div>span:nth-child(4) img{width:13px}.character-showcase{padding-top:34px;margin-top:25px}.character-intro,.process-intro{grid-template-columns:1fr;gap:12px}.character-intro h3,.process-intro h3{font-size:23px}.character-intro>p,.process-intro>p{font-size:13px;line-height:1.8}.character-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 10px;margin-top:22px}.character-image{padding:8px;border-radius:10px;aspect-ratio:1}.character-grid figcaption{font-size:10px;line-height:1.4;margin-top:7px}.expression-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:27px;padding-top:22px}.expression-row>div{grid-column:1/-1}.expression-row>div p{font-size:12px;margin-top:5px}.expression-row figure img{height:62px}.expression-row figcaption{font-size:9px}.process-story{padding:21px 16px;margin:32px 0 40px}.process-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:22px}.process-steps button{height:180px;padding:5px;border-radius:9px}.process-steps figcaption b{font-size:10px;line-height:1.45}.process-steps figcaption span{font-size:9px;line-height:1.5}.process-note{font-size:10px;margin-top:18px}.brand-lockup-original{min-height:75px}.brand-lockup-original img{max-height:90px}.section-heading h2{font-size:31px;text-wrap:balance}}
@media(max-width:350px){.tools{max-width:205px}.tools>div>span{font-size:8px;padding:5px 7px}.character-grid{gap:15px 8px}.process-steps{grid-template-columns:1fr}.process-steps button{height:320px}.process-steps figcaption span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.process-steps button:hover{transition:none}}
/* The supplied logo has generous transparent padding; frame its actual mark. */
.brand-lockup-original{height:92px;min-height:0;overflow:hidden;position:relative;display:block}.brand-lockup-original img{position:absolute;left:-8%;top:50%;width:112%;max-width:none;max-height:none;height:auto;transform:translateY(-50%)}.character-image{overflow:hidden}.character-image img{transform:scale(1.18)}
@media(max-width:600px){.brand-lockup-original{height:82px;min-height:0}.brand-lockup-original img{max-height:none}}
/* Reserve image space so chapter links land reliably before artwork finishes loading. */
html{scroll-behavior:auto}.wireframe-grid img,.sketch-grid img{aspect-ratio:390/820}.diagram img[src*="learner-journey"]{aspect-ratio:1280/660}.diagram img[src*="story-map"]{aspect-ratio:1280/850}.diagram img[src*="architecture"]{aspect-ratio:1280/700}.diagram img[src*="lesson-flow"]{aspect-ratio:1280/790}
.diagram .zoom>img,.wireframe-grid img,.sketch-grid img{height:auto}
@media(max-width:600px){.process-steps{grid-template-columns:1fr;gap:16px}.process-steps figure{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:15px;align-items:center}.process-steps button{height:240px;padding:8px}.process-steps figcaption{margin:0}.process-steps figcaption b{font-size:12px}.process-steps figcaption span{font-size:12px;line-height:1.65}}
.character-image{width:100%;border:0;cursor:pointer}.character-image:hover{background:#efeee7}.story-follow-through{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,.7fr);gap:32px;align-items:center;padding:25px;background:#f8f8f3;border-radius:16px;margin-top:24px}.story-screens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.story-screens button{background:#f1eee5;border-radius:15px;padding:6px;overflow:hidden}.story-screens img{width:100%;aspect-ratio:1206/2622;object-fit:cover;border-radius:11px}.story-screens figcaption{text-align:center;font-size:10px;color:#626c62}.story-explainer h3{font-size:23px;letter-spacing:-.7px;margin-top:10px}.story-explainer>p:not(.eyebrow){font-size:13px;line-height:1.8;color:#626c62;margin-top:13px}.story-explainer a{display:inline-block;font-size:11px;margin-top:16px;color:#3e4d38}
@media(max-width:600px){.story-follow-through{grid-template-columns:1fr;gap:22px;padding:19px}.story-screens{gap:10px}.story-explainer h3{font-size:21px}.story-explainer>p:not(.eyebrow){font-size:13px}.story-explainer a{font-size:12px}}
dialog.artwork-view .viewer-scroll img{max-width:100%;min-width:0;max-height:65vh;width:auto;height:auto;object-fit:contain}

/* A card-led close for the case study. */
.reflection-section{padding-top:92px;padding-bottom:75px}.reflection-intro{display:flex;justify-content:space-between;align-items:center;gap:40px}.reflection-intro>div:first-child{max-width:610px}.reflection-intro h2{font-size:clamp(38px,4.1vw,58px);line-height:1.08;letter-spacing:-.045em;margin-top:14px}.reflection-intro>div:first-child>p:last-child{color:#626c62;max-width:520px;font-size:16px;line-height:1.7;margin-top:20px}.reflection-mascot{display:flex;align-items:center;gap:15px;flex-shrink:0}.reflection-mascot img{width:110px;height:110px;object-fit:contain}.reflection-mascot span{font-family:Tsukimi,var(--sans);font-size:17px;font-weight:700;line-height:1.35;transform:rotate(-5deg)}.takeaway-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:52px}.takeaway-cards article{min-height:220px;padding:25px;display:flex;flex-direction:column;justify-content:space-between;border-radius:13px;box-shadow:0 9px 20px #363b2410}.takeaway-cards article:nth-child(1){background:#f7a5a5}.takeaway-cards article:nth-child(2){background:#ffc577}.takeaway-cards article:nth-child(3){background:#ffe676}.takeaway-cards article:nth-child(4){background:#a9e4bc}.takeaway-cards article:nth-child(5){background:#9cdee1}.takeaway-cards article:nth-child(6){background:#accdf7}.takeaway-cards article>p{font-size:19px;line-height:1.4;letter-spacing:-.025em;max-width:260px}.takeaway-cards article>div{border-top:1px solid #202b283d;display:flex;align-items:center;gap:12px;padding-top:15px;margin-top:25px}.takeaway-cards article span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#ffffffc9;font-size:19px;line-height:1}.takeaway-cards strong{font-size:10px;text-transform:uppercase;letter-spacing:.08em}.reflection-next{display:flex;align-items:center;gap:26px;margin:48px 0 42px}.reflection-next>span{background:#fff0b9;border-radius:50px;white-space:nowrap;padding:12px 19px;font-size:13px;font-weight:600}.reflection-next b{font-size:18px;margin-left:9px}.reflection-next p{border-left:1px solid #d5d9d1;padding-left:25px;max-width:600px;color:#626c62;font-size:14px;line-height:1.65}.reflection-section .source-details{margin-top:0}
@media(max-width:800px){.takeaway-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.reflection-mascot img{width:80px;height:80px}.reflection-mascot span{font-size:14px}}
@media(max-width:600px){.reflection-section{padding-top:60px;padding-bottom:55px}.reflection-intro{align-items:flex-start;gap:15px}.reflection-intro h2{font-size:35px}.reflection-intro>div:first-child>p:last-child{font-size:14px}.reflection-mascot{display:block;text-align:center}.reflection-mascot img{width:65px;height:65px}.reflection-mascot span{display:block;font-size:10px}.takeaway-cards{gap:10px;margin-top:33px}.takeaway-cards article{min-height:180px;padding:17px}.takeaway-cards article>p{font-size:15px;line-height:1.4}.takeaway-cards article>div{gap:8px;padding-top:12px;margin-top:18px}.takeaway-cards article span{width:30px;height:30px;font-size:16px;flex-shrink:0}.takeaway-cards strong{font-size:9px}.reflection-next{align-items:flex-start;flex-direction:column;gap:15px;margin:32px 0}.reflection-next p{border-left:0;padding-left:0;font-size:13px}}
/* Keep the chapter navigation available throughout the story. */
.chapter-nav{position:sticky;top:0;z-index:20;background:#fff;box-shadow:0 5px 12px #17201908}
.app-component-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:25px 0 48px}.app-component-grid figure{min-width:0}.component-crop{width:100%;height:220px;border-radius:15px;background-color:#fbf7ee;background-repeat:no-repeat;background-size:100% auto;display:block}.crop-recommendation{background-image:url('assets/owolingo/home-final.png');background-position:center 27%}.crop-topic{background-image:url('assets/owolingo/home-final.png');background-position:center 69%}.crop-lesson{background-image:url('assets/owolingo/topic-final.png');background-position:center 55%}.crop-feedback{background-image:url('assets/owolingo/feedback-stable-video.png');background-position:center 52%}.app-component-grid figcaption b,.app-component-grid figcaption span{display:block}.app-component-grid figcaption b{font-size:13px;color:#30372c}.app-component-grid figcaption span{font-size:12px;color:#626c62;margin-top:4px}.progress-feature{display:flex;align-items:center;gap:44px;padding:30px;background:#f8f7f1;border-radius:16px}.progress-feature figure{width:185px;flex:none}.progress-feature p{max-width:320px;color:#626c62;font-size:14px;line-height:1.7}
/* The reference uses one continuous, lightly staggered row. */
.takeaway-cards{display:flex;align-items:stretch;gap:0;overflow-x:auto;overflow-y:hidden;padding:20px 4px 25px;margin-top:34px;scroll-snap-type:x proximity}.takeaway-cards article{flex:1 0 175px;min-height:260px;scroll-snap-align:start;border-radius:11px;padding:22px;position:relative}.takeaway-cards article:nth-child(odd){transform:rotate(-2deg)}.takeaway-cards article:nth-child(even){transform:rotate(2deg);margin-top:8px}.takeaway-cards article>p{font-size:17px}.takeaway-cards article>div{gap:8px}.takeaway-cards strong{font-size:9px}
@media(max-width:800px){.takeaway-cards article{flex-basis:190px}.app-component-grid{gap:15px}.component-crop{height:180px}}
@media(max-width:600px){.takeaway-cards{margin-left:-8px;margin-right:-8px}.takeaway-cards article{min-height:235px;flex-basis:180px}.takeaway-cards article>p{font-size:16px}.app-component-grid{grid-template-columns:1fr}.component-crop{height:200px}.progress-feature{gap:20px;padding:20px}.progress-feature figure{width:42%}.progress-feature p{font-size:12px}.chapter-nav{top:58px}}
@media(min-width:701px){.takeaway-cards{overflow:visible;padding-left:4px;padding-right:4px}.takeaway-cards article{flex:1 1 0;min-width:0;padding:16px;min-height:270px}.takeaway-cards article>p{font-size:clamp(13px,1.15vw,17px)}.takeaway-cards article span{width:30px;height:30px;flex:none}.takeaway-cards strong{font-size:8px}}
.app-icon-capture{height:120px;border-radius:12px;background:#fdf8f1 url('assets/owolingo/home-final.png') center 96% / 100% auto no-repeat;margin-top:20px}main>section[id]{scroll-margin-top:0}
.diagram img[src*="learner-journey-reference"]{aspect-ratio:1500/690}.diagram img[src*="story-map-reference"],.diagram img[src*="story-map-sticky"]{aspect-ratio:1500/1120}
.pivot-story{margin:40px 0 58px}.pivot-intro{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:start}.pivot-intro h3{font-size:30px;line-height:1.18;margin-top:10px;max-width:380px}.pivot-intro>div:last-child p{font-size:14px;line-height:1.75;color:#626c62}.pivot-screens{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:15px;background:#f8f6f0;padding:25px;margin-top:30px;border-radius:18px}.pivot-screens figure{min-width:0}.pivot-screens .phone{width:100%;padding:4px;border-radius:18px}.pivot-screens .phone img{border-radius:14px}.pivot-screens figcaption{margin-top:10px}.pivot-screens figcaption b,.pivot-screens figcaption span{display:block}.pivot-screens figcaption b{font-size:11px;color:#30372c}.pivot-screens figcaption span{font-size:10px;line-height:1.5;margin-top:4px;color:#626c62}.pivot-caption,.pivot-note{font-size:11px;color:#626c62;margin-top:13px}.pivot-outcome{display:grid;grid-template-columns:1fr 40px 1fr 140px;align-items:center;gap:25px;margin-top:32px;padding:28px;background:#fff7dc;border-radius:16px}.pivot-outcome span{display:block;font-size:9px;letter-spacing:.1em;font-weight:700;color:#626c62}.pivot-outcome b{display:block;font-size:17px;line-height:1.3;margin-top:10px}.pivot-outcome p{font-size:12px;line-height:1.6;color:#626c62;margin-top:8px}.pivot-arrow{font-size:29px;text-align:center}.pivot-current{padding:0;background:transparent;max-width:115px;justify-self:end}.pivot-current img{border-radius:13px}.pivot-note{margin-top:15px}
@media(max-width:800px){.pivot-screens{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.pivot-outcome{grid-template-columns:1fr 30px 1fr}.pivot-current{display:none}}
@media(max-width:600px){.pivot-intro{grid-template-columns:1fr;gap:15px}.pivot-intro h3{font-size:25px}.pivot-screens{grid-template-columns:repeat(2,minmax(0,1fr));padding:18px;gap:22px 14px}.pivot-outcome{grid-template-columns:1fr;gap:15px;padding:22px}.pivot-arrow{text-align:left;transform:rotate(90deg);width:30px}.pivot-outcome b{font-size:16px}}

/* Final review: stable media, complete component crops, and consistent sticky offsets. */
html{scroll-padding-top:76px}img{height:auto}.component-detail{display:flex;align-items:center;justify-content:center;width:100%;height:260px;background:#fbf7ee;border-radius:15px;padding:22px}.component-detail svg{overflow:hidden;display:block;max-width:100%;max-height:100%;width:100%;height:auto}.component-detail:hover{background:#f6f1e7}.app-component-grid figcaption{margin-top:13px}.card-scroll-hint{display:none}.takeaway-cards:focus-visible{outline:3px solid #008b9e;outline-offset:4px}.reflection-intro>div{min-width:0}
@media(max-width:900px){.chapter-nav{top:65px}html{scroll-padding-top:142px}}
@media(max-width:700px){.card-scroll-hint{display:block;font-size:12px;color:#626c62;margin-top:25px}.takeaway-cards{margin-top:8px}}
@media(max-width:600px){.chapter-nav{top:58px}html{scroll-padding-top:128px}.component-detail{height:auto;min-height:130px;padding:17px}.component-detail svg{max-height:245px}.reflection-intro{display:block}.reflection-intro h2{font-size:34px}.reflection-mascot{display:flex;text-align:left;margin-top:22px;gap:14px}.reflection-mascot span{font-size:14px}.reflection-mascot img{width:68px;height:68px}.pivot-current{display:block;justify-self:center;grid-column:1/-1;max-width:150px}.diagram .zoom{touch-action:pan-x pan-y}.viewer-scroll img{height:auto}}
@media(max-width:600px){dialog.diagram-view .viewer-scroll img{width:1100px;min-width:1100px;max-width:none;max-height:none;height:auto}dialog.diagram-view .viewer-scroll{max-height:65vh}}

.diagram img[src*="story-map-sticky"]{aspect-ratio:1500/1260}