/* The homepage only, on top of styles.css: the trust strip, Read to me, the
   problem, the evening tour, ages and siblings, the offer stack, the teens
   note, and a crisper rhythm on phones (shorter gaps between sections,
   full-width buttons) so the offer and the price come sooner. */

/* Below the fold, a section isn't laid out or painted until it nears the
   screen, so the first layout on a phone is the hero and not the whole
   page (that layout was over half a second of text shaping on a fast
   laptop, several on a phone, all of it while the intro was playing).
   The heights are rough guesses for the scrollbar; once a section has been
   seen, its real height is remembered. */
.problem, .library, .listen, .how, .ages, .inside, .auth, .compare, .pricing, .gift, .tn-strip, .faq, .final, .site-footer{
  content-visibility:auto; contain-intrinsic-size:auto 1100px}

/* the offer line in a button: one span, so the button's gap can't split it */
.btn > span b{font-weight:800}

/* ── The trust strip: what every book has, right under the offer ── */
.trust{background:#fff; border-block:1px solid var(--cream-200)}
.trust__list{list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding-block:22px}
.trust__list li{display:flex; align-items:center; gap:12px; min-width:0; padding-inline:18px; border-inline-start:1px solid var(--cream-200)}
.trust__list li:first-child{border-inline-start:0; padding-inline-start:0}
.trust__ic{flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--gold-100); color:var(--gold-700); box-shadow:inset 0 0 0 1px var(--gold-200)}
.trust__ic svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.trust__list p{font-size:.8125rem; font-weight:600; line-height:1.35; color:var(--navy-300)}
.trust__list b{display:block; font-family:var(--font-display); font-size:1.02rem; font-weight:800; line-height:1.2; color:var(--navy-700)}
@media (max-width:900px){
  .trust__list{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:18px}
  .trust__list li:nth-child(3){border-inline-start:0; padding-inline-start:0}
}
@media (max-width:420px){
  .trust__list{padding-block:18px}
  .trust__list li{gap:10px; padding-inline:12px}
  .trust__ic{width:34px; height:34px; border-radius:10px}
  .trust__ic svg{width:18px; height:18px}
  .trust__list b{font-size:.95rem}
  .trust__list p{font-size:.75rem}
}

/* ── Read to me ── */
.listen{padding-block:clamp(64px,9vw,128px); background:#fff; border-bottom:1px solid var(--cream-200); overflow:hidden}
.listen__inner{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,6vw,88px); align-items:center}
.listen__copy{display:grid; gap:18px; justify-items:start}
.listen__copy .section-title{margin-top:0}
.listen__list{list-style:none; margin:4px 0 6px; padding:0; display:grid; gap:12px; width:100%}
.listen__list li{display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:12px; align-items:start}
.listen__list li::before{content:""; grid-row:1/3; width:28px; height:28px; border-radius:9px; margin-top:1px;
  background:var(--gold-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23A8842F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/15px;
  box-shadow:inset 0 0 0 1px var(--gold-200)}
.listen__list b{font-family:var(--font-display); font-size:1.08rem; font-weight:800; color:var(--navy-700); line-height:1.3}
.listen__list span{font-size:.95rem; font-weight:600; color:var(--navy-300); line-height:1.45}
.listen__visual{position:relative; justify-self:center; width:min(380px,100%)}
.listen__page{position:relative; border-radius:6px 16px 16px 6px; overflow:hidden; box-shadow:var(--shadow-book); background:var(--cream-100); transform:rotate(-1.5deg)}
.listen__page img{display:block; width:100%; height:auto; aspect-ratio:520/738; object-fit:cover}
.listen__words{position:absolute; left:14px; right:14px; bottom:14px; margin:0; padding:12px 14px; border-radius:14px;
  background:rgba(255,255,255,.94); box-shadow:0 8px 24px rgba(11,18,41,.18); font-family:var(--font-display); font-size:1.15rem; font-weight:700; line-height:1.4; color:var(--navy-700)}
.listen__words span{border-radius:6px; padding:0 2px; transition:background .3s}
.listen__words .is-on{background:var(--gold-400); color:var(--navy-900)}
.listen__bar{position:relative; margin:-22px auto 0; width:88%; display:flex; align-items:center; gap:12px; padding:10px 14px 10px 10px; border-radius:999px;
  background:var(--navy-800); color:#fff; box-shadow:0 14px 30px rgba(11,18,41,.28)}
.listen__play{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; background:var(--gold-500); color:var(--navy-900)}
.listen__play svg{width:18px; height:18px; margin-left:2px}
.listen__track{flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.18); overflow:hidden}
.listen__track i{display:block; height:100%; width:38%; border-radius:3px; background:var(--gold-400)}
.listen__mode{font-size:.8rem; font-weight:800; letter-spacing:.04em; color:rgba(255,255,255,.75); white-space:nowrap}
/* the highlight walks along the line, the way the reader does (not for reduced motion) */
@media (prefers-reduced-motion:no-preference){
  .listen__words span{animation:say 3.5s steps(1) infinite}
  .listen__words .is-on{background:transparent; color:inherit}
  .listen__words span:nth-child(1){animation-delay:0s}   .listen__words span:nth-child(2){animation-delay:.5s}
  .listen__words span:nth-child(3){animation-delay:1s}   .listen__words span:nth-child(4){animation-delay:1.5s}
  .listen__words span:nth-child(5){animation-delay:2s}   .listen__words span:nth-child(6){animation-delay:2.5s}
  .listen__words span:nth-child(7){animation-delay:3s}   .listen__words span:nth-child(8){animation-delay:3.5s}
  .listen__track i{animation:track 3.5s linear infinite; transform-origin:left}
}
@keyframes say{0%{background:var(--gold-400); color:var(--navy-900)} 14%,100%{background:transparent; color:inherit}}
@keyframes track{from{width:0} to{width:100%}}

/* ── The problem: the feed against the path ── */
.problem{padding-block:clamp(80px,10vw,140px); background:var(--cream-50)}
.fp{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.4vw,28px); margin-top:clamp(40px,5vw,60px)}
.fp__panel{position:relative; display:flex; flex-direction:column; gap:22px; padding:clamp(22px,3vw,34px); border-radius:var(--r-xl); overflow:hidden}
.fp__label{display:flex; align-items:center; gap:10px; margin:0; font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase}
.fp__label i{display:grid; place-items:center; width:22px; height:22px; flex-shrink:0; border-radius:50%}
.fp__label svg{width:14px; height:14px}
.fp__foot{margin:auto 0 0; font-size:var(--fs-sm); line-height:1.55}
.fp__foot strong{display:block; margin-bottom:2px; font-family:var(--font-display); font-size:1.2rem; font-weight:800; line-height:1.25}

/* the feed: dull on purpose, and it never stops */
.fp__panel--feed{background:var(--cream-100); border:1px solid var(--cream-200); color:var(--navy-300)}
.fp__panel--feed .fp__label{color:var(--navy-300)}
.fp__panel--feed .fp__label i{background:rgba(20,28,61,.07); color:var(--navy-200)}
.fp__panel--feed .fp__foot strong{color:var(--navy-700)}
.feed{flex:1; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:14px}
.feed__notes{list-style:none; margin:0; padding:0; display:grid; gap:48px}
.feed__notes--l{justify-items:end; text-align:right}
.feed__notes li{position:relative; max-width:150px; padding:9px 13px; border-radius:14px; background:#fff; border:1px solid var(--cream-200); box-shadow:var(--shadow-1);
  font-size:.82rem; font-weight:700; line-height:1.3; color:var(--navy-300); rotate:var(--r,0deg)}
.feed__notes li::before{content:"?"; position:absolute; top:-9px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center;
  background:var(--cream-200); color:var(--navy-200); font-size:.7rem; font-weight:800}
.feed__notes--l li::before{right:-6px}
.feed__notes--r li::before{left:-6px}
.feed__phone{width:224px; height:470px; padding:9px; border-radius:36px; background:#2A2F44; box-shadow:var(--shadow-3)}
.feed__screen{position:relative; height:100%; border-radius:28px; overflow:hidden; background:#EEF0F4; filter:saturate(.45)}
.feed__bar{position:absolute; inset:0 0 auto; z-index:1; display:flex; align-items:center; gap:8px; padding:14px 12px 9px; background:#EEF0F4; box-shadow:0 6px 10px -4px rgba(20,28,61,.12)}
.feed__search{flex:1; height:20px; border-radius:10px; background:#DCE0E8}
.feed__auto{display:flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#5B6278}
.feed__auto i{width:22px; height:12px; border-radius:6px; background:#7D8499; position:relative}
.feed__auto i::after{content:""; position:absolute; right:2px; top:2px; width:8px; height:8px; border-radius:50%; background:#fff}
.feed__list{list-style:none; margin:0; padding:52px 10px 0}
/* margin, not gap, so the two halves are exactly the same height and the loop has no seam */
.feed__list li{display:grid; gap:4px; margin-bottom:14px}
.feed__thumb{position:relative; aspect-ratio:16/9; border-radius:10px; background:var(--c); display:grid; place-items:center;
  font:800 1.35rem/1 var(--font-display); letter-spacing:.02em; color:rgba(20,28,61,.5)}
.feed__thumb b{position:absolute; right:6px; bottom:6px; padding:1px 5px; border-radius:4px; background:rgba(11,18,41,.72); color:#fff; font:700 10px/1.4 var(--font-ui)}
.feed__t{font-size:12px; font-weight:700; line-height:1.3; color:#3B4258}
.feed__m{font-size:11px; font-weight:600; color:#8A90A3}
@media (prefers-reduced-motion:no-preference){
  .feed__list{animation:feed 26s linear infinite}
  .js .fp__panel--feed:not(.is-in) .feed__list{animation-play-state:paused}
}
@keyframes feed{to{transform:translateY(-50%)}}

/* the path: Series 01 as a road, walked by the bee */
.fp__panel--path{background:var(--navy-800); border:1px solid var(--navy-500); color:rgba(255,255,255,.64)}
.fp__panel--path::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 45% at 50% 0%,rgba(214,175,87,.18),transparent 70%)}
.fp__panel--path > *{position:relative}
.fp__panel--path .fp__label{color:var(--gold-400)}
.fp__panel--path .fp__label i{background:var(--gold-200); color:var(--gold-700)}
.fp__panel--path .fp__foot strong{color:var(--cream-50)}
.road{position:relative; width:min(100%,370px); margin-inline:auto; aspect-ratio:400/612; container-type:inline-size}
.road > svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.road__track{fill:none; stroke:rgba(255,255,255,.22); stroke-width:3; stroke-linecap:round; stroke-dasharray:.1 10}
.road__line{fill:none; stroke:var(--gold-500); stroke-width:3.5; stroke-linecap:round; stroke-dasharray:1 1}
.road__stops{list-style:none; margin:0; padding:0}
.road__stop{position:absolute; left:var(--x); top:var(--y); width:0; height:0}
.road__cover{position:absolute; left:0; top:0; width:16cqw; translate:-50% -50%; border-radius:3px 7px 7px 3px;
  box-shadow:0 10px 22px rgba(0,0,0,.42); transition:opacity .45s, filter .45s, scale .45s var(--ease)}
.road__cover img{display:block; width:100%; height:auto; border-radius:inherit}
.road__hex{box-shadow:none}
.road__hex svg{display:block; width:100%; height:auto; overflow:visible; filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}
.road__hex path{fill:var(--gold-500); stroke:var(--gold-400); stroke-width:2}
.road__hex text{font:800 21px var(--font-display); fill:var(--navy-900)}
.road__txt{position:absolute; top:0; translate:0 -50%; width:max-content; max-width:54cqw; display:grid; gap:2px; transition:opacity .45s}
.road__stop--l .road__txt{left:calc(8cqw + 14px)}
.road__stop--r .road__txt{right:calc(8cqw + 14px); text-align:right; justify-items:end}
.road__txt b{font-size:max(11px,2.8cqw); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-400)}
.road__txt span{font-family:var(--font-display); font-size:max(15px,4.7cqw); font-weight:800; line-height:1.15; color:var(--cream-50)}
.road__txt .road__saw{font-family:var(--font-ar); font-weight:700; font-size:1.05em; line-height:1; unicode-bidi:isolate}
.road__fly{pointer-events:none}
.road__wing{fill:rgba(255,255,255,.82); transform-box:fill-box; transform-origin:50% 100%}
/* before the walk (set by roadWalk), stops wait dimmed until the bee reaches them */
.road.is-set .road__stop:not(.is-on) .road__cover{opacity:.3; filter:grayscale(.85); scale:.88}
.road.is-set .road__stop:not(.is-on) .road__txt{opacity:.3}
.road__stop--end.is-on .road__hex{animation:land .6s var(--ease)}
@keyframes land{40%{scale:1.14}}
@media (prefers-reduced-motion:no-preference){
  .road__wing{animation:flap .16s ease-in-out infinite alternate}
  .road__wing--2{animation-delay:-.08s}
  .road__bob{animation:bob 1.6s ease-in-out infinite}
}
@keyframes flap{to{transform:scaleY(.45)}}
@keyframes bob{50%{transform:translateY(-3px)}}

@media (max-width:900px){
  .fp{grid-template-columns:1fr}
}
@media (max-width:560px){
  .feed{grid-template-columns:1fr; justify-items:center; gap:12px}
  .feed__phone{grid-row:1; width:196px; height:310px}
  .feed__notes{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 8px}
  .feed__notes--l{text-align:left}
  .feed__notes li{max-width:none}
}

/* ── How it works: one evening, as a phone to step through ── */
.tour{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:clamp(32px,6vw,80px);
  max-width:1000px; margin:clamp(40px,5vw,60px) auto 0}
.tour__steps{display:grid; gap:8px}
.tour__step{position:relative; display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:16px; align-items:center;
  width:100%; padding:16px 20px; border:0; border-radius:20px; background:transparent; text-align:left; font:inherit; color:inherit;
  cursor:pointer; overflow:hidden; transition:background .3s, box-shadow .3s}
.tour__step:hover{background:rgba(255,255,255,.55)}
.tour__step:focus-visible{outline:2px solid var(--gold-600); outline-offset:2px}
.tour__n{grid-row:1/3; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font:800 1.05rem/1 var(--font-display); color:var(--navy-300); background:#fff; box-shadow:inset 0 0 0 1.5px var(--cream-200); transition:background .3s, color .3s, box-shadow .3s}
.tour__t{font-family:var(--font-display); font-size:1.18rem; font-weight:800; line-height:1.25; color:var(--navy-300); transition:color .3s}
.tour__b{display:block; max-height:0; overflow:hidden; font-size:.95rem; font-weight:600; line-height:1.5; color:var(--navy-300); opacity:0; transition:max-height .45s var(--ease), opacity .3s, margin .45s}
.tour__step.is-on{background:#fff; box-shadow:var(--shadow-2)}
.tour__step.is-on .tour__n{background:var(--gold-500); color:var(--navy-900); box-shadow:none}
.tour__step.is-on .tour__t{color:var(--navy-700)}
.tour__step.is-on .tour__b{max-height:7.5em; opacity:1; margin-top:4px}
.tour__bar{position:absolute; left:20px; right:20px; bottom:0; height:3px; border-radius:3px; background:var(--gold-500); transform:scaleX(0); transform-origin:left}
.tour.is-playing .tour__step.is-on .tour__bar{animation:tourbar 5s linear forwards}
@keyframes tourbar{to{transform:scaleX(1)}}

.tour__phone{width:300px; height:620px; padding:10px; border-radius:46px; background:var(--navy-900); box-shadow:var(--shadow-3)}
.tour__glass{position:relative; height:100%; border-radius:36px; overflow:hidden; background:#FFF7E6; isolation:isolate}
.tour__screen{position:absolute; inset:0; opacity:0; translate:0 12px; pointer-events:none; transition:opacity .45s var(--ease), translate .45s var(--ease)}
.tour__screen.is-on{opacity:1; translate:0 0; pointer-events:auto}
.tour__foot{margin:clamp(32px,4vw,44px) 0 0; text-align:center; font-weight:700; color:var(--navy-300)}
.tour__foot a{color:var(--gold-700); text-decoration:underline; text-underline-offset:3px}

/* the screens, drawn in the app's own look */
.ts{display:flex; flex-direction:column; gap:12px; padding:22px 16px 16px; color:#141C3D; font-size:12px}
.ts small{font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#C08A2C}
.ts__big{font:800 1.45rem/1.15 var(--font-display); color:#141C3D}
.ts__sub{font-size:12.5px; font-weight:600; color:#55607F}
.ts__card{display:grid; align-items:center; gap:12px; padding:12px; border-radius:18px; background:#fff; box-shadow:0 2px 4px rgba(20,28,61,.04),0 10px 22px rgba(20,28,61,.08)}
.ts__ct{display:grid; gap:2px; min-width:0}
.ts__ct b{font:800 1rem/1.2 var(--font-display)}
.ts__ct span{font-size:11.5px; font-weight:600; color:#55607F}
.ts img{display:block; border-radius:3px 6px 6px 3px}

.ts__hello{display:flex; align-items:center; gap:10px}
.ts__av{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; background:#F7D27A; color:#3A2A05; font:800 1.1rem var(--font-display); box-shadow:inset 0 -3px 0 rgba(0,0,0,.08)}
.ts__hi{display:grid; line-height:1.15}
.ts__hi small{font-size:11px; font-weight:600; letter-spacing:0; text-transform:none; color:#55607F; white-space:nowrap}
.ts__hi b{font:800 1.3rem var(--font-display)}
.ts__chip{margin-left:auto; white-space:nowrap; display:flex; align-items:center; gap:5px; padding:5px; border-radius:99px; background:#fff; font-size:10.5px; font-weight:800; box-shadow:0 2px 8px rgba(20,28,61,.08)}
.ts__chip i, .ts__hex{display:grid; place-items:center; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background:#EDB94E; color:#3A2A05; font-style:normal; font-family:var(--font-display); font-weight:800}
.ts__chip i{width:24px; height:27px; font-size:12px}
.ts__cont{grid-template-columns:58px minmax(0,1fr) auto}
.ts__cont img{width:58px; height:auto; box-shadow:2px 4px 10px rgba(11,18,41,.2)}
.ts__prog{display:block; height:6px; margin-top:6px; border-radius:6px; background:#F3EADB; overflow:hidden}
.ts__prog i{display:block; width:18%; height:100%; border-radius:6px; background:#EDB94E}
.ts__play, .ts__pp{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; background:#EDB94E; color:#3A2A05; box-shadow:inset 0 -3px 0 rgba(0,0,0,.1)}
.ts__play svg, .ts__pp svg{width:16px; height:16px}
.ts__stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.ts__stats span{display:grid; justify-items:center; gap:1px; padding:10px 4px; border-radius:14px; background:#fff; font-size:10.5px; font-weight:600; color:#55607F; text-align:center; line-height:1.2}
.ts__stats b{font:800 1.15rem var(--font-display); color:#141C3D}
.ts__shelf{display:grid; gap:8px}
.ts__tabs{margin:auto -6px 0; display:grid; grid-template-columns:repeat(4,1fr); padding:6px; border-radius:22px; background:#fff; box-shadow:0 6px 18px rgba(20,28,61,.1)}
.ts__tabs span{display:grid; justify-items:center; gap:2px; padding:6px 0; border-radius:16px; font-size:10px; font-weight:800; color:#8A92AC}
.ts__tabs svg{width:17px; height:17px; fill:currentColor}
.ts__tabs .is-on{background:#F7D27A; color:#3A2A05}
.ts__row{display:flex; gap:8px}
.ts__row img{width:calc((100% - 24px) / 4); height:auto; box-shadow:2px 3px 8px rgba(11,18,41,.16)}

.ts--read{padding:0 0 18px; gap:0; background:#2E2A44}
.ts__rbar{display:flex; align-items:center; gap:8px; padding:16px 14px 10px; background:#2E2A44; color:rgba(255,255,255,.85)}
.ts__rbar svg{width:16px; height:16px; flex-shrink:0}
.ts__rbar b{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:800 .9rem var(--font-display); color:#fff}
.ts__rbar span{font-size:11px; font-weight:800}
.ts--read .ts__player{margin-top:auto}
.ts__page{width:100%; height:auto; border-radius:0 !important}
.ts__words{position:relative; margin:-62px 12px 0; padding:11px 13px; border-radius:14px; background:rgba(255,255,255,.96); box-shadow:0 8px 22px rgba(11,18,41,.25);
  font:700 .98rem/1.45 var(--font-display); color:#141C3D}
.ts__words span{border-radius:5px; padding:0 2px}
.ts__player{display:flex; align-items:center; gap:10px; margin:12px 12px 0; padding:8px 14px 8px 8px; border-radius:99px; background:#141C3D; color:rgba(255,255,255,.8); font-size:11px; font-weight:800}
.ts__track{flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.18); overflow:hidden}
.ts__track i{display:block; width:46%; height:100%; background:#F7D27A}

.ts--done, .ts--level{align-items:center; justify-content:center; text-align:center; gap:10px}
.ts__won{position:relative; margin-bottom:8px}
.ts__won img{width:116px; height:auto; rotate:-4deg; box-shadow:4px 10px 24px rgba(11,18,41,.28)}
.ts__won i{position:absolute; right:-12px; bottom:-10px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#3FAE6E; color:#fff; box-shadow:0 0 0 4px #FFF7E6}
.ts__won svg{width:20px; height:20px}
.ts__honey{padding:6px 14px; border-radius:99px; background:#FDEBC4; color:#7A5410; font-size:12.5px; font-weight:800}
.ts__next{grid-template-columns:44px minmax(0,1fr) auto; width:100%; margin-top:10px; text-align:left}
.ts__next img{width:44px; height:auto}
.ts__open{padding:8px 14px; border-radius:99px; background:#EDB94E; color:#3A2A05; font-size:12px; font-weight:800; box-shadow:inset 0 -3px 0 rgba(0,0,0,.1)}
.ts__hex{width:84px; height:94px; font-size:2.4rem; margin-bottom:4px}
.ts__kick{margin-bottom:-6px}
.ts__cert{display:grid; justify-items:center; gap:3px; width:100%; margin-top:8px; padding:16px 12px; border-radius:10px; background:#FFF9EC;
  box-shadow:inset 0 0 0 1.5px #E3C579, inset 0 0 0 5px #FFF9EC, inset 0 0 0 6px #F2E3BE, 0 8px 20px rgba(11,18,41,.1)}
.ts__mark{width:26px; height:26px; color:#C09640}
.ts__cert small{font-size:9.5px; letter-spacing:.14em}
.ts__cert span{font-size:10.5px; color:#5C6585}
.ts__cert b{font:800 1.35rem/1.1 var(--font-display); color:#141C3D}
.ts__cert em{font-style:normal; font-size:12px; font-weight:800; color:#141C3D}
.ts__btn{margin-top:6px; padding:10px 18px; border-radius:99px; background:#EDB94E; color:#3A2A05; font-size:12.5px; font-weight:800; box-shadow:inset 0 -3px 0 rgba(0,0,0,.1)}

@media (prefers-reduced-motion:no-preference){
  /* Read to me: the words light up in turn, the way the reader does */
  .ts__words span{animation:tsay 5s steps(1) infinite}
  .ts__words span:nth-child(2){animation-delay:.45s}  .ts__words span:nth-child(3){animation-delay:.9s}
  .ts__words span:nth-child(4){animation-delay:1.35s} .ts__words span:nth-child(5){animation-delay:1.8s}
  .ts__words span:nth-child(6){animation-delay:2.25s} .ts__words span:nth-child(7){animation-delay:2.7s}
  .ts__words span:nth-child(8){animation-delay:3.15s} .ts__words span:nth-child(9){animation-delay:3.6s}
  .ts__words span:nth-child(10){animation-delay:4.05s}
  .ts__track i{animation:ttrack 5s linear infinite}
  /* each screen arrives with its one moment */
  .ts--done.is-on .ts__won{animation:tpop .6s var(--ease) both}
  .ts--done.is-on .ts__honey{animation:tpop .5s var(--ease) .35s both}
  .ts--done.is-on .ts__next{animation:tup .5s var(--ease) .55s both}
  .ts--level.is-on .ts__hex{animation:tpop .7s var(--ease) both}
  .ts--level.is-on .ts__cert{animation:tup .55s var(--ease) .3s both}
}
@keyframes tsay{0%{background:#F7D27A} 9%,100%{background:transparent}}
@keyframes ttrack{from{width:0} to{width:100%}}
@keyframes tpop{0%{scale:.6; opacity:0} 60%{scale:1.08; opacity:1} 100%{scale:1}}
@keyframes tup{from{translate:0 14px; opacity:0}}

@media (max-width:900px){
  .tour{grid-template-columns:1fr; justify-items:center; gap:28px}
  .tour__phone{order:-1}
  .tour__steps{width:100%; max-width:520px}
}
@media (max-width:560px){
  .tour__phone{width:272px; height:560px; border-radius:42px}
  .tour__glass{border-radius:33px}
  .tour__step{padding:13px 14px; column-gap:12px; grid-template-columns:34px minmax(0,1fr)}
  .tour__n{width:34px; height:34px; font-size:.95rem}
  .tour__t{font-size:1.05rem}
  .tour__b{font-size:.9rem}
}

/* ── Ages and siblings ── */
.ages{padding-block:clamp(80px,10vw,130px); background:var(--cream-50)}
.ages__grid{list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,24px); max-width:1000px; margin:clamp(40px,5vw,56px) auto 0; padding:0}
.age{display:grid; align-content:start; gap:8px; padding:clamp(22px,2.6vw,30px); border-radius:var(--r-lg); background:#fff; border:1px solid rgba(20,28,61,.09); box-shadow:var(--shadow-1)}
.age__n{font-family:var(--font-display); font-size:2.5rem; font-weight:800; line-height:1; letter-spacing:-.02em; color:var(--gold-600)}
.age__n::before{content:"Ages"; display:block; margin-bottom:6px; font:800 .6875rem/1 var(--font-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--navy-300)}
.age__t{margin-top:8px; font-size:1.3rem}
.age p{font-size:.95rem; line-height:1.55; color:var(--navy-300)}
.js .ages__grid .age{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out) var(--d,0s), transform .6s var(--ease-out) var(--d,0s)}
.js .ages__grid.is-in .age{opacity:1; transform:none}
.ages__family{display:flex; align-items:center; gap:18px; max-width:1000px; margin:clamp(16px,2vw,24px) auto 0; padding:16px 16px 16px 20px; border-radius:var(--r-lg); background:var(--navy-800); color:rgba(255,255,255,.7)}
.ages__family p{flex:1; font-size:.95rem; line-height:1.45}
.ages__family b{color:#fff}
.ages__family .btn{flex:none}
.ages__avs{display:flex; flex:none}
.ages__avs i{display:grid; place-items:center; width:38px; height:38px; margin-inline-start:-8px; border-radius:50%; background:var(--c); color:var(--navy-800); font:800 .95rem/1 var(--font-display); font-style:normal; box-shadow:0 0 0 3px var(--navy-800)}
.ages__avs i:first-child{margin-inline-start:0}
.ages__avs .is-add{background:var(--navy-800); color:var(--gold-400); box-shadow:0 0 0 3px var(--navy-800), inset 0 0 0 1.5px rgba(214,175,87,.6)}
@media (max-width:860px){
  .ages__grid{grid-template-columns:minmax(0,1fr); max-width:520px}
  .ages__family{flex-wrap:wrap; max-width:520px}
  .ages__family .btn{width:100%}
}
@media (max-width:560px){
  /* each age a row: the number beside its words, so three cards stay short */
  .age{grid-template-columns:76px minmax(0,1fr); column-gap:14px; row-gap:4px; padding:18px}
  .age__n{grid-row:1/3; font-size:1.75rem}
  .age__t{margin-top:0; font-size:1.15rem}
  .age p{font-size:.9rem}
}

/* ── Inline ﷺ beside English text ── */
.saw{font-family:var(--font-ar); font-weight:700; font-size:1.05em; line-height:1; unicode-bidi:isolate}

/* ── Comparison on phones: every row a small card, nothing to scroll sideways
   (the table needs 640px; below 700px it would scroll inside its box) ── */
@media (max-width:700px){
  .ctable-wrap{overflow:visible; border:0; border-radius:0; background:none; box-shadow:none}
  .ctable{display:block; min-width:0}
  .ctable caption, .ctable thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  .ctable tbody{display:grid; gap:10px}
  .ctable tbody tr, .ctable tbody tr:last-child{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:14px 12px 12px; border:1px solid var(--cream-200); border-radius:var(--r-md); background:#fff; box-shadow:var(--shadow-1)}
  .ctable tbody th{grid-column:1/-1; min-width:0; padding:0 4px 6px; font-size:.95rem; line-height:1.3}
  .ctable td{display:grid; justify-items:center; align-content:start; gap:6px; padding:9px 2px 8px; border-radius:10px; font-size:.75rem; font-weight:700; line-height:1.2; text-align:center}
  .ctable td::before{content:attr(data-label); font-size:.6875rem; font-weight:700; color:var(--navy-300)}
  .ctable tbody td.ctable__us, .ctable tbody tr:last-child td.ctable__us{box-shadow:inset 0 0 0 1px var(--gold-400)}
  .ctable td.ctable__us::before{color:var(--gold-700)}
  .ctable tbody tr:last-child td{font-size:.75rem}
}

/* ── Pricing: the offer stack and the way back ── */
.plan__each{margin-top:8px; font-size:.95rem; font-weight:600; color:rgba(255,255,255,.72)}
.plan__each b{color:var(--gold-400); font-weight:800}
.plan__what{margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:var(--fs-xs); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5)}
.plan__what + .plan__list{margin-top:12px; padding-top:0; border-top:0}
.risk{list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:min(100%,1120px); margin:clamp(28px,4vw,40px) auto 0; padding:0; border-radius:var(--r-xl); border:1px dashed rgba(214,175,87,.38)}
.risk li{display:flex; align-items:flex-start; gap:14px; padding:20px 22px}
.risk li + li{border-inline-start:1px dashed rgba(214,175,87,.25)}
.risk__n{flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:rgba(214,175,87,.16); color:var(--gold-400); font:800 .95rem/1 var(--font-display)}
.risk p{font-size:var(--fs-sm); line-height:1.5; color:rgba(255,255,255,.6)}
.risk b{display:block; font-family:var(--font-display); font-size:1.05rem; font-weight:800; color:var(--cream-50)}
/* the both-series bundle can't be bought until Teens is out: no teaser for it
   beside the plans that can (the Teens card already says it's coming) */
.bundle-strip:not(.is-live){display:none}
.hero__lead{text-wrap:pretty}
@media (max-width:1040px){
  .risk{grid-template-columns:minmax(0,1fr); width:min(100%,460px)}
  .risk li + li{border-inline-start:0; border-top:1px dashed rgba(214,175,87,.25)}
}

/* ── Teens: a short note, the stage itself lives on /teens ── */
.tn-strip{padding-block:clamp(56px,7vw,96px); background:var(--cream-100)}
.tn-strip__card{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:clamp(20px,3vw,40px); max-width:1000px; margin-inline:auto;
  padding:clamp(24px,3vw,32px) clamp(22px,3.4vw,40px); border-radius:var(--r-xl); background:linear-gradient(120deg,#18214A,#0B1229 70%); color:rgba(255,255,255,.66); box-shadow:var(--shadow-3)}
.tn-strip__art{display:flex; align-items:flex-end; padding-inline:6px}
.tn-strip__art img{width:60px; height:auto; border-radius:3px 6px 6px 3px; box-shadow:3px 6px 14px rgba(0,0,0,.5)}
.tn-strip__art img:nth-child(1){transform:rotate(-9deg) translate(16px,6px)}
.tn-strip__art img:nth-child(2){position:relative; z-index:1; width:70px}
.tn-strip__art img:nth-child(3){transform:rotate(9deg) translate(-16px,6px)}
.tn-strip__t .eyebrow{color:var(--gold-400)}
.tn-strip__t h2{margin-top:8px; font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem); color:var(--cream-50)}
.tn-strip__t p:last-child{margin-top:8px; max-width:48ch; font-size:.95rem; line-height:1.5}
.tn-strip__cta{display:grid; justify-items:center; gap:2px}
.tn-strip__more{display:inline-block; padding:12px 8px; font-size:var(--fs-sm); font-weight:700; color:var(--gold-400); text-decoration:underline; text-decoration-color:rgba(214,175,87,.5); text-underline-offset:4px}
.tn-strip__more:hover{color:var(--gold-200)}
@media (max-width:860px){
  .tn-strip__card{grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center}
  .tn-strip__t p:last-child{margin-inline:auto}
  .tn-strip__cta{width:100%}
  .tn-strip__cta .btn{width:100%}
}

/* the gift card link: a full-size target under the button */
.gift__more{padding-block:12px; margin-top:2px}

/* ── The last call: the offer, once more ── */
.final__ticks{list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin-top:26px; padding:0}
.final__ticks li{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); font-weight:600; color:rgba(255,255,255,.72)}
.final__ticks svg{width:18px; height:18px; flex:none; padding:2px; border-radius:50%; background:rgba(214,175,87,.18); color:var(--gold-400)}

/* ── Phones: shorter gaps, full-width buttons, the offer first ── */
@media (max-width:760px){
  .problem, .library, .how, .listen, .ages, .inside, .pricing, .auth, .compare, .gift, .tn-strip, .faq{padding-block:56px}
  /* the sticky "3 books free" bar covers the bottom 80px or so: a link or
     button reached by keyboard is scrolled clear of it, not hidden under it */
  html{scroll-padding-bottom:96px}
  .final__cta .btn{width:100%}
  .listen__inner{grid-template-columns:1fr; gap:36px}
  .listen__visual{width:min(300px,86%); order:-1}
  .listen__copy .btn{width:100%; justify-content:center}
  .hero__cta{display:grid; grid-template-columns:1fr; gap:10px; width:100%}
  .hero__cta .btn{width:100%; justify-content:center}
  .assurances{gap:6px 14px}
}