.young-online-page{--yn:#17344d;--yg:#b98248;color:var(--yn)}.young-online-page .yo-section{padding:65px max(24px,calc((100vw - 1180px)/2));box-sizing:border-box}.young-online-page .yo-section:nth-of-type(even){background:#faf7f0}.young-online-page h1,.young-online-page h2,.young-online-page h3{font-family:Georgia,serif}.young-online-page h1{font-size:clamp(36px,4.8vw,65px);line-height:1.1}.young-online-page h2{font-size:clamp(30px,3.3vw,46px);line-height:1.16}.young-online-page h1 em,.young-online-page h2 em{color:var(--yg);font-weight:400}.young-online-page p{line-height:1.65}.yo-label{font-size:11px;letter-spacing:.15em;font-weight:700;color:var(--yg)}.yo-heading{text-align:center;max-width:720px;margin:0 auto 34px}.yo-hero{display:grid;grid-template-columns:1fr 1fr;background:#f7f4ed;min-height:510px}.yo-hero-text{padding:65px clamp(28px,5vw,80px);align-self:center}.yo-hero-text>p:not(.yo-label){font-size:18px}.yo-button{display:inline-block;margin-top:18px;padding:13px 22px;background:var(--yn);color:white!important;border-radius:7px;text-decoration:none}.yo-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}.yo-cards article{background:white;border:1px solid #e7e4dd;border-radius:12px;padding:13px 13px 22px;box-shadow:0 9px 25px #17344d08}.yo-cards h3{font-size:21px;margin:15px 8px 7px}.yo-cards article>p{margin:0 8px;font-size:14px;color:#536574}.yo-asset{position:relative;overflow:hidden;background:linear-gradient(125deg,#efe3d0,#dce8eb);border-radius:8px;aspect-ratio:3/2}.yo-asset img{width:100%;height:100%;display:block;object-fit:cover}.yo-asset .yo-fallback{display:none;position:absolute;inset:0;align-items:center;justify-content:center;text-align:center;padding:16px;font-size:12px;color:#697a88}.yo-asset.is-missing img{display:none}.yo-asset.is-missing .yo-fallback{display:flex}.yo-hero .yo-asset{height:100%;min-height:480px;aspect-ratio:auto;border-radius:0}.yo-milo{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:46px}.yo-video{aspect-ratio:16/9;background:#dfe7e8;border-radius:14px;overflow:hidden;position:relative}.yo-video video{width:100%;height:100%;display:block;object-fit:cover}.yo-video-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#e6e5df;color:#586a79}.yo-small{font-size:13px;color:#687784}.yo-quiz{margin-top:20px;padding:17px;border:1px solid #dcd9d1;border-radius:10px;background:white}.yo-choices{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.yo-choices button{background:#f4f6f5;border:1px solid #d9e0df;padding:9px 12px;border-radius:7px;cursor:pointer}.yo-choices button:focus-visible{outline:3px solid var(--yg)}.yo-result{font-size:14px;min-height:20px}.yo-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.yo-method-grid h3{font-size:22px;margin-bottom:5px}.yo-method-grid p{margin-top:0;color:#5b6976}.yo-center{text-align:center;margin-top:28px}.yo-center a{color:var(--yn);font-weight:700}@media(max-width:760px){.yo-hero,.yo-milo,.yo-method-grid{grid-template-columns:1fr}.yo-hero .yo-asset{min-height:280px}.yo-hero-text{padding:32px 24px}.young-online-page .yo-section{padding:45px 22px}.yo-milo{gap:22px}}

/* v614: Milo video and quiz share a bottom baseline without cropping footage. */
.yo-video-empty[hidden]{display:none!important}
.yo-milo{align-items:stretch}
.yo-milo>div:first-child{display:flex;flex-direction:column}
.yo-milo .yo-quiz{margin-top:auto}
.yo-milo-media{display:flex;flex-direction:column;min-width:0}
.yo-milo-media>p.yo-small{margin:0 0 10px}
.yo-milo-media .yo-video{aspect-ratio:auto;flex:1;min-height:315px;background:#172d42}
.yo-milo-media .yo-video video{object-fit:contain;background:#172d42}
.yo-rewatch{margin-top:12px;padding:9px 13px;border-radius:7px;border:1px solid #b98248;background:#fffaf3;color:#17344d;cursor:pointer;font-weight:650}
.yo-rewatch:focus-visible{outline:3px solid #b98248;outline-offset:2px}
.yo-choices button.is-correct{background:#e0f3e7;border-color:#5caa7b;color:#174e30}
.yo-choices button.is-incorrect{background:#fff0d9;border-color:#c9974c}
@media(max-width:760px){.yo-milo .yo-quiz{margin-top:20px}.yo-milo-media .yo-video{min-height:0;aspect-ratio:16/9;flex:auto}}

/* v615 — Young Learners hero: fix nested .yo-hero grid on media element.
   The media child inherits .yo-hero's two-column grid; this made its image
   occupy only half the available left-hand panel. Scope to this hero only. */
.young-online-page .yo-hero > .yo-asset.yo-hero {
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 480px;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 0;
}
.young-online-page .yo-hero > .yo-asset.yo-hero > img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}
@media (max-width: 760px) {
  .young-online-page .yo-hero > .yo-asset.yo-hero {
    height: 320px;
    min-height: 280px;
  }
}

/* v616 — Young Learners discovery landscape: decorative background only.
   The full-width coastal artwork is bottom-anchored and never covers the cards.
   Image supplied separately in C2-MASTER-ASSETS (CODE-ONLY release). */
.young-online-page #discover {
  background-image: url('../assets/images/online-courses/young-learners/discovery-coastal-background.webp');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  background-color: #faf7f0;
  isolation: isolate;
}
.young-online-page #discover > * { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .young-online-page #discover {
    background-size: auto 38%;
    background-position: center bottom;
  }
}

/* v617 — Discovery cards: larger photographs, tighter intro-to-cards gap,
   and a little extra breathing space above the illustrated shoreline.
   Scoped exclusively to the Young Learners discovery section. */
@media (min-width: 761px) {
  .young-online-page #discover .yo-heading { margin-bottom: 19px; }
  .young-online-page #discover .yo-cards .yo-asset { aspect-ratio: auto; height: 155px; }
  .young-online-page #discover { padding-bottom: 85px; }
}

/* v618: Small decorative Milo/dinosaur, outside the content cards. */
.young-online-page #discover { position: relative; }
.young-online-page #discover .yo-dino-flight {
  position: absolute; top: 34px; right: max(18px, calc((100vw - 1320px)/2));
  width: clamp(85px, 7.5vw, 118px); height: auto;
  object-fit: contain; pointer-events: none; z-index: 2;
  filter: drop-shadow(0 3px 5px rgba(22,52,77,.12));
  animation: yo-dino-hover 5s ease-in-out infinite;
}
@keyframes yo-dino-hover { 0%,100% {transform: translateY(0)} 50% {transform: translateY(-5px)} }
@media (max-width: 1050px) { .young-online-page #discover .yo-dino-flight { width: 82px; right: 12px; top: 20px; } }
@media (max-width: 760px) { .young-online-page #discover .yo-dino-flight { width: 65px; right: 10px; top: 12px; opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .young-online-page #discover .yo-dino-flight { animation: none; } }

/* v619 — Milo section: pale edge illustrations behind existing content.
   Asset kept separate in C2-MASTER-ASSETS. */
.young-online-page #milo.yo-milo {
  background-color: #fffdf9;
  background-image: url('../assets/images/online-courses/young-learners/milo-learning-background.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
/* v619 — 50% larger dinosaur, shifted down, without altering cards. */
.young-online-page #discover .yo-dino-flight {
  width: clamp(127.5px, 11.25vw, 177px);
  top: 54px;
}
@media (max-width: 1050px) {
  .young-online-page #discover .yo-dino-flight { width: 123px; top: 40px; }
}
@media (max-width: 760px) {
  .young-online-page #discover .yo-dino-flight { width: 97.5px; top: 30px; }
  .young-online-page #milo.yo-milo { background-size: auto 100%; background-position: center center; }
}

/* v620 — narrative transition between Milo and academic development.
   Decorative illustration stays in a separate image; all text is accessible HTML. */
.young-online-page .yo-transition {
  position:relative; isolation:isolate; box-sizing:border-box;
  min-height:365px; display:flex; align-items:center;
  padding:54px max(24px,calc((100vw - 1180px)/2));
  background:#fffdf9 url('../assets/images/online-courses/young-learners/milo-to-learning-transition.webp') center center / cover no-repeat;
}
.young-online-page .yo-transition-inner {
  position:relative; z-index:1; margin-left:30%; width:min(630px,70%);
  padding:12px 0;
}
.young-online-page .yo-transition h2 {
  font-family:Georgia,serif; font-size:clamp(26px,2.5vw,40px);
  line-height:1.17; margin:14px 0 19px; color:#17344d;
}
.young-online-page .yo-transition h2 em { color:#b98248; font-weight:400; }
.young-online-page .yo-transition p:not(.yo-label) {
  font-size:clamp(14px,1vw,16px); line-height:1.52; margin:0 0 10px;
}
/* Watermark treatment: veil the existing illustrated background without
   reducing opacity of the quiz or video. */
.young-online-page #milo.yo-milo { position:relative; isolation:isolate; background-image:none; }
.young-online-page #milo.yo-milo::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: url('../assets/images/online-courses/young-learners/milo-learning-background.webp') center center / 100% 100% no-repeat;
  opacity:.42; /* source art is already faded; approx 10–12% effective strength */
}
@media(max-width:760px){
 .young-online-page .yo-transition {min-height:0;padding:52px 24px; background-position:left center; background-size:auto 100%;}
 .young-online-page .yo-transition::before {content:'';position:absolute;inset:0;background:rgba(255,253,249,.88);z-index:0;}
 .young-online-page .yo-transition-inner {margin:0;width:100%;}
 .young-online-page #milo.yo-milo::before {background-size:auto 100%;}
}

/* v622 — Young Learners: academic English progression timeline. Isolated to #growth. */
.young-online-page #growth.yo-growth-timeline { background:#fbfaf7; }
.young-online-page #growth .yo-heading {max-width:810px;margin-bottom:35px}
.young-online-page #growth .yo-heading>p:last-child{font-size:16px;color:#526577}
.young-online-page #growth .yo-growth-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;position:relative;max-width:1180px;margin:auto}
.young-online-page #growth .yo-growth-track::before{content:"";position:absolute;top:21px;left:16%;right:16%;height:2px;background:#d5b18a;z-index:0}
.young-online-page #growth .yo-growth-stage{position:relative;min-width:0;display:flex;flex-direction:column}
.young-online-page #growth .yo-growth-milestone{height:44px;display:flex;align-items:center;gap:11px;position:relative;z-index:1;margin-bottom:16px}
.young-online-page #growth .yo-growth-milestone>span:first-child{display:grid;place-items:center;background:#17344d;color:#fff;width:43px;height:43px;border-radius:50%;font:700 14px/1 system-ui,sans-serif;box-shadow:0 0 0 6px #fbfaf7}
.young-online-page #growth .yo-growth-stage-name{font:700 11px/1.2 system-ui,sans-serif;letter-spacing:.12em;color:#9c6c40;background:#fbfaf7;padding:6px 8px}
.young-online-page #growth .yo-growth-image{aspect-ratio:3/2;border-radius:12px;background:#e5e8e7}
.young-online-page #growth .yo-growth-stage h3{font-size:clamp(19px,1.6vw,23px);line-height:1.22;margin:19px 0 8px;color:#17344d}
.young-online-page #growth .yo-growth-stage>p{color:#526577;font-size:14px;line-height:1.65;margin:0 0 16px}
.young-online-page #growth .yo-growth-example{margin-top:auto;padding:16px 18px;background:#fff;border-left:3px solid #b98248;border-radius:0 10px 10px 0;box-shadow:0 5px 17px #17344d0a}
.young-online-page #growth .yo-growth-example span{display:block;font:700 10px/1.4 system-ui,sans-serif;letter-spacing:.08em;color:#96714f;margin-bottom:9px}
.young-online-page #growth .yo-growth-example q{font:italic 16px/1.5 Georgia,serif;color:#17344d}
.young-online-page #growth .yo-growth-note{max-width:940px;margin:35px auto 0;padding:15px 20px;text-align:center;background:#f1eee7;border-radius:10px;font-size:14px;color:#4b5e6c}
@media(max-width:760px){.young-online-page #growth .yo-growth-track{grid-template-columns:1fr;gap:30px}.young-online-page #growth .yo-growth-track::before{top:22px;bottom:0;left:21px;right:auto;width:2px;height:auto}.young-online-page #growth .yo-growth-milestone{padding-left:0}.young-online-page #growth .yo-growth-stage-name{margin-left:4px}.young-online-page #growth .yo-growth-image{aspect-ratio:3/2}.young-online-page #growth .yo-growth-note{margin-top:28px}}

/* v623: Young Learners progression timeline polish — scoped to #growth only. */
@media (min-width:761px){
.young-online-page #growth .yo-growth-track{align-items:stretch;gap:26px}
.young-online-page #growth .yo-growth-stage{display:grid;grid-template-rows:44px auto minmax(62px,auto) minmax(84px,auto) 1fr auto;align-items:start}
.young-online-page #growth .yo-growth-milestone{margin:0 0 16px}
.young-online-page #growth .yo-growth-image{margin-top:16px;width:100%}
.young-online-page #growth .yo-growth-stage h3{margin:17px 0 8px;align-self:start}
.young-online-page #growth .yo-growth-stage>p{margin:0 0 18px}
.young-online-page #growth .yo-growth-example{grid-row:6;margin-top:0;min-height:116px;box-sizing:border-box;width:100%}
.young-online-page #growth .yo-growth-track::before{top:21px;left:21px;right:calc(66.6667% + 13px);height:2px;background:#c89c70}
.young-online-page #growth .yo-growth-track::after{content:"";position:absolute;top:21px;left:calc(33.3333% + 13px);right:calc(33.3333% + 13px);height:2px;background:#c89c70;z-index:0;pointer-events:none}
}
.young-online-page #growth .yo-growth-note{max-width:940px;background:transparent;border-top:1px solid #d8c2a8;border-radius:0;padding:16px 10px 0;margin:28px auto 0;color:#526577;box-shadow:none}
@media(max-width:760px){.young-online-page #growth .yo-growth-track::after{display:none}.young-online-page #growth .yo-growth-note{padding:14px 8px 0}}

@media(min-width:761px){
.young-online-page #growth .yo-growth-track::before{left:21px;right:calc(66.6667% + 4px)}
.young-online-page #growth .yo-growth-track::after{left:calc(33.3333% + 4px);right:calc(33.3333% + 4px)}
}