/* A New Page, "WHY WE'RE DIFFERENT" (/css/anp-why.css, Joel's Part 8, Oct 17 evening: R, D1 to D6, O1 to O4, 233).
   Everything here is new and lives only in this file (the shared home and marketing CSS is not touched):
     - the reading-check sample CARD (R) and the 3-step STRIP (D3) and the one honest line (D5), in that order, on the home page,
       /ages-5-10 (map style, sunny gold), /ages-11-18 (dark glass, white text, 1px #8FA3D1 borders) and /littles (white cards with
       soft rainbow edges)
     - the home page's white hero card behind the words, the quiet "or read one night free" link and the proof line (O1 to O4, 233)
     - the shelf that shows 3 featured worlds and opens the rest in place (D1)
     - the sample pop-up's sound-chip card (D1), the "Show how this story is built" switch (D2) and the end line (D6)
   Approved pairs only (anp-tokens.css): navy #1F2E55 on cream/white (11 to 13:1); muted #4B5674 (4.8 to 7.3:1); the D5 line #5E5A54 on cream
   #FBF8F1 (6.4:1); white on navy; navy on gold #F2B544 (7.3:1). No text over a picture: every word sits on a solid card or band.
   Nothing moves; reduced motion changes nothing here because nothing here animates. */

/* ---------- shared tokens ---------- */
.why-r,.why-feat,.why-steps,.why-d5,.why-chipcard,.why-build,.why-more{--w-navy:#1F2E55;--w-ink:#1B2440;--w-muted:#4B5674;--w-d5:#5E5A54;--w-cream:#FBF8F1;--w-paper:#F4ECDC;--w-white:#FFFFFF;--w-gold:#F2B544;--w-gold-edge:#D99A2B;--w-line:rgba(31,46,85,.14);--w-steel:#8FA3D1;--w-serif:var(--font-serif,"Fraunces",Georgia,serif);--w-sans:var(--font-sans,"Lexend",system-ui,sans-serif)}
.why-wrap{box-sizing:border-box;width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
@media (min-width:768px){.why-wrap{padding:0 32px}}
.why-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.why-tag{display:inline-block;padding:3px 10px;border-radius:999px;background:#FFF4DC;color:var(--w-navy,#1F2E55);border:1px solid #E7CF98;font:700 14px/1.3 var(--font-sans,"Lexend",system-ui,sans-serif);letter-spacing:.06em;text-transform:uppercase}

/* ---------- R: the reading-check sample card ---------- */
.why-r{padding:28px 0 8px;background:var(--w-cream)}
@media (min-width:1024px){.why-r{padding:40px 0 12px}}
.why-r-card{display:grid;grid-template-columns:minmax(0,1fr);gap:0;overflow:hidden;border-radius:24px;background:var(--w-white);color:var(--w-navy);border:2px dashed #C9B98F;box-shadow:0 1px 2px rgba(31,46,85,.06),0 14px 34px -16px rgba(31,46,85,.25)}
@media (min-width:860px){.why-r-card{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch}}
.why-r-pic{position:relative;margin:0;display:flex;align-items:center;justify-content:center;background:#EAF2FF;padding:14px}
.why-r-pic picture{display:block;width:100%}
.why-r-pic img{display:block;width:100%;height:auto;max-height:340px;object-fit:contain;border-radius:14px;margin:0 auto}
.why-r-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:22px 22px 26px}
@media (min-width:860px){.why-r-copy{padding:30px 34px}}
.why-r-ex{margin:0}
.why-r-h{margin:0;font:600 clamp(26px,1.6vw + 20px,34px)/1.15 var(--w-serif,"Fraunces",Georgia,serif);color:var(--w-navy);letter-spacing:0}
.why-r-sub{margin:0;font:500 18px/1.45 var(--w-sans,"Lexend",system-ui,sans-serif);color:var(--w-navy)}
.why-r-line{margin:0;max-width:52ch;font:400 16px/1.55 var(--w-sans,"Lexend",system-ui,sans-serif);color:var(--w-muted)}
.why-r-go{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin-top:6px;padding:0 24px;border:2px solid var(--w-navy);border-radius:999px;background:var(--w-navy);color:#fff;font:700 17px/1.2 var(--w-sans,"Lexend",system-ui,sans-serif);cursor:pointer;text-align:center}
.why-r-go:hover{background:#2C3D6E;border-color:#2C3D6E}
.why-r-go:focus-visible{outline:3px solid var(--w-navy);outline-offset:3px}
/* the home page serves every age: the 5 to 10 card unless the visitor is a teen */
body[data-age="older"] .why-r--home .y-only{display:none!important}
body:not([data-age="older"]) .why-r--home .o-only{display:none!important}
/* 5 to 10: a map-style card, sunny gold tag */
.why-r--kids .why-r-card,.why-r--home .why-r-card--kids{border-color:#C9B98F}
/* 11 to 18: a dark case file, built with CSS over the case-room picture */
.why-r-card--teen{background:linear-gradient(160deg,#141E3C,#1F2E55);color:#fff;border:1px solid var(--w-steel,#8FA3D1);border-radius:14px;box-shadow:0 18px 40px -18px rgba(5,7,15,.6)}
.why-r-card--teen .why-r-pic{background:#0B1022;padding:14px;border-right:0}
.why-r-card--teen .why-r-pic img{border-radius:6px;filter:grayscale(.35) contrast(1.06) brightness(.82)}
.why-r-card--teen .why-r-pic::after{content:"";position:absolute;top:14px;right:14px;bottom:14px;left:14px;border-radius:6px;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(143,163,209,.10) 0 1px,transparent 1px 28px),linear-gradient(180deg,rgba(20,30,60,.0) 55%,rgba(11,16,34,.55))}
.why-r-tab{position:absolute;z-index:2;top:22px;left:22px;padding:4px 12px;border-radius:4px;background:#0B1022;border:1px solid var(--w-steel,#8FA3D1);color:#fff;font:700 14px/1.3 var(--font-sans,"Lexend",system-ui,sans-serif);letter-spacing:.12em;text-transform:uppercase}
.why-r-card--teen .why-r-h,.why-r-card--teen .why-r-sub{color:#fff}
.why-r-card--teen .why-r-line{color:#D9D2C4}
.why-r-card--teen .why-tag{background:transparent;color:#fff;border-color:var(--w-steel,#8FA3D1)}
.why-r-card--teen .why-r-go{background:#fff;color:var(--w-navy);border-color:#fff}
.why-r-card--teen .why-r-go:hover{background:#E8EDF8;border-color:#E8EDF8}
.why-r-card--teen .why-r-go:focus-visible{outline-color:#fff}
.why-r--teen{background:var(--w-cream)}
/* Littles: white card, soft rainbow edge, the garden picture whole */
.why-r--littles{background:#FFF6E6}
.why-r-card--littles{border:5px solid transparent;border-radius:28px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#FFB3C1,#FFD59A,#BDE6A6,#A9D6FF,#D3B8FF) border-box}
.why-r-card--littles .why-r-pic{background:linear-gradient(#BDE6FF 0 64%,#CDEFC4 64%)}
.why-r-card--littles .why-r-pic img{max-height:300px}
.why-r-card--littles .why-r-line{color:#434D6B}   /* 2026-10-18 AA: 4.8:1 even on the rainbow border's lilac (#D3B8FF), 8.4:1 on the card's white */
.why-r-card--littles .why-r-go{background:var(--w-navy)}

/* ---------- D3: the 3-step strip ---------- */
.why-steps{padding:32px 0 36px;background:var(--w-paper);color:var(--w-navy)}
@media (min-width:1024px){.why-steps{padding:44px 0 48px}}
.why-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;counter-reset:why}
@media (min-width:860px){.why-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}
.why-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0;padding:22px 22px 24px;border-radius:20px;background:var(--w-white);border:2px dashed #C9B98F;box-shadow:0 1px 2px rgba(31,46,85,.05),0 10px 26px -16px rgba(31,46,85,.28);counter-increment:why}
.why-step::before{content:counter(why);position:absolute;top:-14px;left:18px;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--w-gold);color:var(--w-navy);font:700 15px/1 var(--w-sans,"Lexend",system-ui,sans-serif);box-shadow:0 0 0 3px var(--w-paper)}
.why-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--w-gold);color:var(--w-navy)}
.why-ico svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.why-st{display:flex;flex-direction:column;gap:8px;min-width:0}
.why-t{margin:0;font:500 20px/1.4 var(--w-sans,"Lexend",system-ui,sans-serif);color:var(--w-navy)}
.why-s{margin:0;font:400 16px/1.5 var(--w-sans,"Lexend",system-ui,sans-serif);color:var(--w-muted)}
@media (min-width:860px){.why-grid .why-step:not(:last-child)::after{content:"";position:absolute;top:50px;right:-22px;width:22px;border-top:3px dotted #C9B98F}}
.why-note{margin:18px 0 0;text-align:center;font:600 18px/1.45 var(--w-sans,"Lexend",system-ui,sans-serif);color:var(--w-navy)}
/* 11 to 18: sleek dark glass, white text */
.why-steps--teen{background:linear-gradient(180deg,#141E3C,#1F2E55);color:#fff}
.why-steps--teen .why-step{background:rgba(255,255,255,.06);border:1px solid var(--w-steel,#8FA3D1);border-radius:12px;box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.why-steps--teen .why-step::before{background:#0B1022;color:#fff;border:1px solid var(--w-steel,#8FA3D1);box-shadow:none;border-radius:6px;width:30px;height:28px}
.why-steps--teen .why-ico{background:rgba(143,163,209,.16);color:#D9E2F7;border-radius:12px;border:1px solid rgba(143,163,209,.5)}
.why-steps--teen .why-t{color:#fff}
.why-steps--teen .why-s{color:#D9D2C4}
.why-steps--teen .why-grid .why-step:not(:last-child)::after{border-top-color:rgba(143,163,209,.6)}
/* Littles: white cards, soft rainbow edges */
.why-steps--littles{background:#EAF6FF}
.why-steps--littles .why-step{border:5px solid transparent;border-radius:28px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#FFB3C1,#FFD59A,#BDE6A6,#A9D6FF,#D3B8FF) border-box;box-shadow:0 1px 2px rgba(31,46,85,.05)}
.why-steps--littles .why-step::before{background:#FFD59A;box-shadow:0 0 0 3px #EAF6FF;top:-16px}
.why-steps--littles .why-ico{background:#FFE9C7}
.why-steps--littles .why-grid .why-step:not(:last-child)::after{border-top-color:#A9D6FF}
.why-steps--littles .why-s{color:var(--w-navy)}   /* the minutes under each part: navy, so it passes AA on every stop of the rainbow border too */
/* Oct 23 (Julie's routine, game / review / letters / story): the Littles strip has FOUR parts. Four across from 1100px, two by two from 860px (no connector dots, they would cross the row break), one column on a phone. */
@media (min-width:860px){.why-steps--littles .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.why-steps--littles .why-grid .why-step:not(:last-child)::after{display:none}}
@media (min-width:1100px){.why-steps--littles .why-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.why-steps--littles .why-grid .why-step:not(:last-child)::after{display:block;right:-18px;width:18px}}
/* Oct 24: seven parts, four across then three; the arrow between cards stops at the end of each row */
@media (min-width:1100px){.why-steps--littles .why-grid .why-step:nth-child(4n)::after{display:none}}

/* ---------- D5: the one honest line ---------- */
.why-d5{padding:26px 0 30px;background:var(--w-cream)}
.why-d5-line{margin:0 auto;max-width:44ch;text-align:center;font:400 18px/1.55 var(--w-sans,"Lexend",system-ui,sans-serif);color:var(--w-d5);text-wrap:balance}

/* ---------- O1 to O4, 233: the hero's buttons, the quiet one-night link and the proof line ---------- */
.why-quiet{margin:10px 0 0;font:500 16px/1.4 var(--font-sans,"Lexend",system-ui,sans-serif)}
.why-quiet a{color:var(--w-navy,#1F2E55);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:6px 0}
.hero-v2 .why-quiet a,.band-night .why-quiet a{color:#FFF8EC}
.why-proof{margin:14px 0 0;max-width:48ch;font:400 15px/1.5 var(--font-sans,"Lexend",system-ui,sans-serif);color:#D9D2C4}
.why-proof a{color:#FFF8EC;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.hero-v2 .why-quiet.why-quiet{margin-top:10px}
/* the home page: a white card behind the words (navy #1B2440, AA) */
.anp-home-hero.hero-v2 .hero-copy.why-card{max-width:620px;padding:22px 20px 24px;border-radius:24px;background:#fff;color:#1B2440;box-shadow:0 20px 50px -20px rgba(5,7,15,.55)}
@media (min-width:768px){.anp-home-hero.hero-v2 .hero-copy.why-card{padding:30px 32px 32px}}
.hero-v2 .why-card .hero-k{color:#4B5674}
.hero-v2 .why-card h1{color:#1B2440;text-shadow:none}
.hero-v2 .why-card h1 em,.hero-v2 .why-card h1 .gold-thread{color:#1B2440}
.hero-v2 .why-card h1 .gold-thread em{background:linear-gradient(transparent 82%,#F2B544 82%,#F2B544 94%,transparent 94%)}
.hero-v2 .why-card .lede,.hero-v2 .why-card .lede span{color:#1B2440;max-width:36rem}
.hero-v2 .why-card .ha-label{color:#4B5674}
.hero-v2 .why-card .door{background:#F4ECDC;border:1px solid rgba(31,46,85,.18);color:#1B2440}
.hero-v2 .why-card .door .ha-name{color:#1B2440}
.hero-v2 .why-card .door .ha-sub{color:#4B5674;opacity:1}
.hero-v2 .why-card .door.is-picked{background:#FFF4DC;border-color:#C98E1C}
.hero-v2 .why-card .door .door-img{border-color:#fff}
.hero-v2 .why-card .why-quiet a{color:#1F2E55}
.hero-v2 .why-card .why-proof{color:#5E5A54}   /* O1: the proof line is 15px #5E5A54 (6.9:1 on the white card) */
.hero-v2 .why-card .why-proof a{color:#1F2E55}
.hero-v2 .why-card .ha-worlds,.hero-v2 .why-card .anp-home-price{color:#4B5674}
.hero-v2 .why-card .ha-worlds a,.hero-v2 .why-card .anp-home-price a{color:#1F2E55}
.hero-v2 .why-card .hero-fig figcaption{background:#F4ECDC}
/* the home hero's picture pair keeps its place behind the card */

/* ---------- the covers (Joel's final samples plan): one featured book, every other world a cover and a teaser ---------- */

/* ---------- D1 / D2 / D6: inside the sample pop-up ---------- */
.why-chipcard{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;max-width:880px;margin:0 auto 12px;padding:8px 14px 10px;border-radius:16px;background:#fff;border:1px solid var(--w-line,rgba(31,46,85,.14));text-align:center}
.why-chipcard[hidden]{display:none}
.why-cc-h{flex:1 1 100%;margin:0;font:600 16px/1.35 var(--font-sans,"Lexend",system-ui,sans-serif);color:#1F2E55}
.why-chips{flex:1 1 auto;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.why-chip{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 9px;border-radius:999px;background:#F4ECDC;color:#1F2E55;border:1px solid rgba(31,46,85,.2);font:700 16px/1 var(--font-sans,"Lexend",system-ui,sans-serif);letter-spacing:.02em}
.why-cc-plus{flex:1 1 100%;margin:0;font:400 15px/1.35 var(--font-sans,"Lexend",system-ui,sans-serif);color:#4B5674}
.why-cc-plus[hidden]{display:none}
.why-build{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:4px 12px;border:0;border-radius:999px;background:transparent;color:#4B5674;font:500 15px/1.3 var(--font-sans,"Lexend",system-ui,sans-serif);cursor:pointer}
.why-build-sw{position:relative;flex:none;width:40px;height:24px;border-radius:999px;background:#fff;border:2px solid #6B7390}
.why-build-sw i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#6B7390}
.why-build.is-on .why-build-sw{background:#1F2E55;border-color:#1F2E55}
.why-build.is-on .why-build-sw i{left:18px;background:#fff}
.why-build:focus-visible{outline:3px solid #1F2E55;outline-offset:2px}
.why-build:hover .why-build-t{text-decoration:underline}
.why-u{display:inline-block;padding:0 1px;margin:0 1px;border-bottom:4px solid transparent}
.why-u0{border-bottom-color:#A86A00}
.why-u1{border-bottom-color:#1E6B43}
.why-d6{margin:16px auto 0;max-width:34ch;text-align:center;font:500 17px/1.5 var(--font-sans,"Lexend",system-ui,sans-serif);color:#1F2E55}
.why-d6[hidden]{display:none}
@media (max-width:700px){.why-chipcard{padding:8px 10px 10px;margin-bottom:10px;gap:4px 8px}.why-chip{min-width:30px;height:30px;padding:0 7px;font-size:15px}.why-chips{gap:5px}}

@media (min-width:1024px){
  /* the card takes about 110px (190px with a teen's longer list): the picture gives it back, so page 1 still fits */
  .sd-body .why-card-on .book .art img:not(.hs-reveal){max-height:min(calc(90vh - 430px),520px);max-height:min(calc(90dvh - 430px),520px)}
}

/* the grown-up's two small controls sit side by side in the pop-up, so page 1 keeps its picture and both boxes in view */
.sd-body .hs-under{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 18px;margin-top:6px}
.sd-body .hs-under .hs-honest{flex:1 1 100%;text-align:center;margin:0}

@media (min-width:1024px){
  .why-chipcard{justify-content:flex-start;text-align:left;margin-bottom:8px;padding:8px 14px}
  .why-cc-h{flex:0 1 auto}
  .why-chips{flex:1 1 0;justify-content:flex-start}
  .sd-body .bookcap-top{margin-bottom:8px}
}
@media (min-width:1024px){.sp-body.sd-body{padding-top:12px;padding-bottom:12px}}

/* ---------- 62: the /ages-11-18 headline's gold phrase is one unbroken piece ("your teen." with its full stop), so no mark starts a line ---------- */
.why-nw{white-space:nowrap!important}

/* ---------- 250: the /littles garden map strip shows each subject whole, on a tinted disc, never a cropped slice ---------- */
.lt-map-pic{display:flex;align-items:center;justify-content:center;background:#FFF6E6}
.lt-map-pic img{width:100%;height:auto;max-height:100%;object-fit:contain}
.lt-map-pic.m1{background:#FFE9C7}.lt-map-pic.m2{background:#E2F5DA}.lt-map-pic.m3{background:#DDF0FF}.lt-map-pic.m4{background:#FFE3EA}.lt-map-pic.m5{background:#EFE6FF}
.lt-map-pic.lt-map-subject img{width:84%;height:84%;object-fit:contain}
.lt-map-pic .lt-map-gate{display:block;width:74%;height:auto}
/* the Littles hero card: the proof line and the quiet link sit on the white card in navy */
.lt-card .why-proof{margin-top:12px;color:#4B5674;font-size:15px;max-width:none}
.lt-card .why-quiet a{color:#1F2E55}
.why-note{padding-top:2px}

.hero-after{margin-top:12px}
.hero-v2 .hero-after .ha-worlds{margin-top:14px}

/* ---------- phones: the card and the three steps are compact (a picture 200px tall; each step a row with its icon at the left) ---------- */
@media (max-width:859px){
  .why-r{padding:20px 0 4px}
  .why-r-pic{padding:10px}
  .why-r-pic img{max-height:200px}
  .why-r-copy{padding:16px 16px 20px;gap:8px}
  .why-steps{padding:26px 0 28px}
  .why-grid{gap:20px}
  .why-step{flex-direction:row;align-items:center;gap:14px;padding:16px 16px 16px 14px}
  .why-ico{width:52px;height:52px}
  .why-ico svg{width:32px;height:32px}
  .why-d5{padding:16px 0 22px}
  .why-step::before{top:-12px;left:14px;width:26px;height:26px;font-size:14px}
}

/* ---------- the pair: the reading-check card (the star) beside the ONE featured sample book ---------- */
.why-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:stretch}
@media (min-width:900px){.why-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
  .why-pair .why-r-card{grid-template-columns:minmax(0,1fr)}
  .why-pair .why-r-pic img,.why-pair .why-feat-pic img{max-height:300px}}
.why-feat{position:relative;display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;border-radius:24px;background:var(--w-white);color:var(--w-navy);border:2px solid #E7CF98;box-shadow:0 1px 2px rgba(31,46,85,.06),0 14px 34px -16px rgba(31,46,85,.25)}
.why-feat-pic{position:relative;margin:0;display:flex;align-items:center;justify-content:center;background:#FFF4DC;padding:14px}
.why-feat-pic picture{display:block;width:100%}
.why-feat-pic img{display:block;width:100%;height:auto;max-height:340px;object-fit:contain;border-radius:14px;margin:0 auto}
.why-feat-badge{position:absolute;z-index:2;top:22px;left:22px;padding:6px 12px;border-radius:999px;background:var(--w-gold);color:var(--w-navy);font:700 14px/1 var(--font-sans,"Lexend",system-ui,sans-serif);letter-spacing:.02em;box-shadow:0 2px 6px rgba(31,46,85,.25)}
.why-feat-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:22px 22px 26px}
@media (min-width:860px){.why-feat-copy{padding:26px 30px}}
.why-feat-h{margin:0;font:600 clamp(26px,1.6vw + 20px,34px)/1.15 var(--w-serif,"Fraunces",Georgia,serif);color:var(--w-navy)}
.why-feat-t{margin:0;font:500 18px/1.45 var(--w-sans,"Lexend",system-ui,sans-serif);color:var(--w-navy);max-width:40ch}
.why-feat--teen{background:linear-gradient(160deg,#141E3C,#1F2E55);color:#fff;border:1px solid var(--w-steel,#8FA3D1);border-radius:14px;box-shadow:0 18px 40px -18px rgba(5,7,15,.6)}
.why-feat--teen .why-feat-pic{background:#0B1022}
.why-feat--teen .why-feat-pic img{border-radius:6px}
.why-feat--teen .why-feat-h,.why-feat--teen .why-feat-t{color:#fff}
.why-feat--teen .why-tag{background:transparent;color:#fff;border-color:var(--w-steel,#8FA3D1)}
.why-feat--teen .why-r-go{background:#fff;color:var(--w-navy);border-color:#fff}
.why-feat--teen .why-feat-badge{border-radius:6px}
@media (max-width:859px){.why-feat-pic{padding:10px}.why-feat-pic img{max-height:210px}.why-feat-copy{padding:16px 16px 20px;gap:8px}.why-pair{gap:16px}}

/* every other world: a cover and a teaser, pictures whole. The featured world has its big card; its tile and the old "Featured" badge go. */
.wp-feat{display:none}
body.age-kids .wp-tile[data-w="emberwing"],body.age-teen .wp-tile[data-w="agency"]{display:none}
.wp-invite{background:transparent;border-color:transparent}
.wp-tile{cursor:pointer}
.wp-pic{background:#EAF2FF}
.wp-pic img{object-fit:contain}
.sp-info-go{margin-top:14px;min-height:56px}
/* 11 to 18: a cinematic shelf, dark glass covers */
body.age-teen .wp-band,body.age-teen .wp-band.band-light{background:linear-gradient(180deg,#0B1022,#141E3C)}
body.age-teen .wp-band .sh h2,body.age-teen .wp-band .sh p,body.age-teen .wp-band .sh .anp-eyebrow,body.age-teen .wp-sec-h,body.age-teen .wp-band .mixline{color:#fff}
body.age-teen .wp-band .wp-sec-p,body.age-teen .wp-more-h{color:#D9D2C4}
body.age-teen .wp-invite{color:#fff}
body.age-teen .wp-tile{background:rgba(255,255,255,.06);border:1px solid var(--w-steel,#8FA3D1)}
body.age-teen .wp-pic{background:#05070F}
body.age-teen .wp-name{color:#fff}
body.age-teen .wp-sub{color:#D9D2C4}
body.age-teen .wp-tile:focus-visible{outline-color:#fff}
body.age-teen .wp-tile[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 2px #fff}
body.age-teen .wp-line,body.age-teen .wp-line-k{color:#fff}
body.age-teen .wp-line-a,body.age-teen .sn-film a{color:#fff}

/* Part 10b (Oct 18): the level pill on a story opened at the level the reading check found: "Built for: 14 sounds", 13px uppercase,
   letter-spacing .08em, ink #1F2E55 on the soft paper --bg-3 (#F4ECDC), 10.8:1 */
.why-pill{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--bg-3,#F4ECDC);color:#1F2E55;border:1px solid rgba(31,46,85,.22);font:700 13px/1.3 var(--font-sans,"Lexend",system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase}