/* Limelo Kids
   Two audiences, two temperatures:
   - Kid-facing (hero, language cards, shelf, player) = loud, bright, joyful.
   - Parent-facing (the promise block, Parent Zone) = calm and credible.
   The second is what makes a parent trust the first. */

:root{
  --paper:#FFFDF7;
  --card:#FFFFFF;
  --ink:#22262B;
  --ink-soft:#5D6670;
  --line:#E7E2D6;

  --red:#FF4F5A;
  --orange:#FF9130;
  --yellow:#FFC61A;
  --green:#3FBF6B;
  --green-deep:#2F9E52;
  --blue:#2FA8E8;
  --violet:#8B6CE8;

  --shadow:0 4px 0 rgba(34,38,43,.13), 0 16px 34px -22px rgba(34,38,43,.55);
  --r:22px;
}

*{box-sizing:border-box}
html,body{margin:0}
/* a soft sky wash behind the child-facing pages: warmer than plain cream, and
   pale enough that thumbnails and cards stay the loudest thing on screen */
body{
  background:#EEF6FB;color:var(--ink);
  font:500 17px/1.6 "Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-text-size-adjust:100%;
}
h2,h3{font-family:"Baloo 2","Hanken Grotesk",system-ui,sans-serif;font-weight:800;line-height:1.15;margin:0}
em{font-style:normal}
a{color:var(--green-deep)}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 14px;border-radius:10px;z-index:99}
[hidden]{display:none !important}
:focus-visible{outline:4px solid var(--violet);outline-offset:3px;border-radius:8px}

/* ---------- the wordmark ---------- */
.wm{font-family:"Baloo 2","Hanken Grotesk",sans-serif;font-weight:800;font-size:104px;letter-spacing:-1px}

/* ---------- top bar ---------- */
.topbar{background:var(--paper);border-bottom:3px solid var(--ink);position:sticky;top:0;z-index:20}
/* brand | Parent Zone, with the budget chip free to drop onto its own row
   rather than shoving the header into horizontal overflow on a small phone */
.topbar-in{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding-block:10px}
.brand{display:block;text-decoration:none;line-height:0;min-width:0;margin-right:auto}
.brand-wm{width:clamp(104px,34vw,168px);height:auto;aspect-ratio:640/128;display:block}
.budget-chip{order:3;background:var(--green-deep);color:#fff;border-radius:999px;
  padding:7px 15px;font-size:14px;font-weight:800;white-space:nowrap}

/* ---------- buttons ---------- */
.btn,.btn-ghost,.back{
  font:800 16px/1 "Hanken Grotesk",sans-serif;cursor:pointer;border-radius:999px;
  padding:13px 22px;border:3px solid var(--ink);transition:transform .12s ease;
}
.btn{background:var(--green-deep);color:#fff}
.btn-ghost{background:#fff;color:var(--ink)}
.btn-ghost.small{padding:9px 15px;font-size:14px;border-width:2px}
.btn:hover,.btn-ghost:hover{transform:translateY(-3px)}
.btn:active,.btn-ghost:active{transform:translateY(0)}
.back{background:none;border:none;padding:16px 0;color:var(--ink-soft);font-weight:800}
.back::before{content:"\2190";margin-right:8px}

/* ---------- hero: the one loud section, so it gets the living scene ---------- */
/* height tracks width so the slice-crop never eats the sky: the scene needs
   roughly h >= 0.29w to keep the top greeting row and the sun in frame */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;
  flex-direction:column;justify-content:center;min-height:min(31vw,800px)}
.scene{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.scallop{position:absolute;left:-4px;right:-4px;bottom:-4px;width:calc(100% + 8px);height:26px;display:block}
/* the bottom padding keeps the tagline clear of the scallop dips — if the pill
   reaches the hero's edge it shows through them as grey dashes */
/* width:100% matters: inside the flex hero, the auto margins would otherwise
   shrink this box to its content and the logo collapses to a fraction of its size */
.hero-in{width:100%;padding:clamp(20px,4vw,40px) 22px clamp(72px,8.5vw,88px);text-align:center}
/* very wide screens crop the scene from the top (slice keeps the bottom) —
   give the hero more height there so the sun stays in the picture */
@media (min-width:1500px){.hero-in{padding-top:80px;padding-bottom:140px}}
@media (min-width:1800px){.hero-in{padding-top:115px;padding-bottom:175px}}
/* the logo scales with the screen (36vw) so the greetings keep room around it;
   phones get the full width back below */
.hero-wm{width:min(100%,660px,36vw);height:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 6px 0 rgba(34,38,43,.22));cursor:pointer;
  -webkit-tap-highlight-color:transparent;user-select:none;overflow:visible}
/* the wordmark plays: letters tumble in, a wave passes through every few
   seconds, and a tap makes the lot boing (class added in app.js) */
.letters{font-family:"Baloo 2","Hanken Grotesk",sans-serif;font-weight:800;font-size:104px;
  letter-spacing:-1px}
.letters text{transform-box:fill-box;transform-origin:center 85%;
  animation:lt-in .45s cubic-bezier(.34,1.45,.64,1) calc(.1s + var(--i)*.045s) backwards,
            lt-wave 9s ease-in-out calc(2s + var(--i)*.11s) infinite}
@keyframes lt-in{
  0%{transform:translateY(-110px) scale(.6);opacity:0}
  55%{transform:translateY(8px) scale(1.06);opacity:1}
  80%{transform:translateY(-4px) scale(.99)}
  100%{transform:none;opacity:1}}
@keyframes lt-wave{
  0%,7%,100%{transform:none}
  3.5%{transform:translateY(-9px) scale(1.05)}}
.hero-wm.boing .letters text{animation:lt-boing .65s cubic-bezier(.34,1.4,.64,1) calc(var(--i)*.05s)}
@keyframes lt-boing{
  0%{transform:scale(1)}
  30%{transform:scale(1.22,.72)}
  55%{transform:scale(.84,1.18)}
  78%{transform:scale(1.08,.94)}
  100%{transform:scale(1)}}
/* a quiet caption under the logo, not a second headline — it was big enough
   to cover the scene */
.tagline{
  display:inline-block;margin:clamp(12px,1.8vw,18px) 0 0;background:#fff;
  border:2.5px solid var(--ink);border-radius:999px;padding:7px 18px;
  font-family:"Baloo 2",sans-serif;font-weight:700;white-space:nowrap;
  font-size:clamp(15px,1.55vw,20px);line-height:1.25;box-shadow:0 3px 0 rgba(34,38,43,.14);
  animation:floaty 4.5s ease-in-out infinite alternate;
}
.tagline em{color:var(--red)}
/* sized to the longest word (ekhaya) so the pill never jumps, left-aligned so
   no gap opens up before a short word like "home" */
#homeWord{display:inline-block;min-width:3.05em;text-align:left}
/* the wordmark is the page's h1 — keep the heading from adding its own spacing */
.hero-h1{margin:0;font-size:inherit;line-height:0;font-weight:inherit}
/* greetings that would be cut off or covered at this screen size are hidden
   (app.js); fading keeps the change gentle when a window is resized */
.hellos > g{transition:opacity .25s ease}
.hellos > g.hidden-word{opacity:0}
/* the scene rests while it is scrolled out of view — saves battery on cheap phones */
.hero.resting *{animation-play-state:paused !important}
#homeWord.turn{animation:word-turn .55s cubic-bezier(.34,1.4,.64,1)}
@keyframes word-turn{0%{transform:translateY(12px) scale(.7);opacity:0}100%{transform:none;opacity:1}}
.beadband{display:block;width:100%;margin:clamp(30px,5vw,46px) 0 22px;opacity:.85}

/* the meadow: picks up the scallop's green and lets it fade into the paper,
   so the hero and the page below it read as one continuous place */
.meadow{background:linear-gradient(180deg,#E4F4E4 0,#EAF6EE 240px,#EEF6FB 600px)}
/* the Parent Zone keeps its calm neutral paper */
body[data-view="parent"]{background:var(--paper)}

/* the scene breathes: every creature its own gentle loop, nothing fast */
@keyframes floaty{from{transform:translateY(0)}to{transform:translateY(-5px)}}
@keyframes rb-draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
.rb{animation:rb-draw 1.3s ease-out backwards}
.rb:nth-child(2){animation-delay:.12s}.rb:nth-child(3){animation-delay:.24s}
.rb:nth-child(4){animation-delay:.36s}.rb:nth-child(5){animation-delay:.48s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-back{to{transform:rotate(-360deg)}}
.rays{transform-box:fill-box;transform-origin:center;animation:spin 80s linear infinite}
.rays2{transform-box:fill-box;transform-origin:center;animation:spin-back 130s linear infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}95.5%,97.5%{transform:scaleY(.08)}}
.blink{transform-box:fill-box;transform-origin:center;animation:blink 5.2s infinite}
.pal-bob .blink{animation-delay:1.6s}
.p2 .blink{animation-delay:3.1s}
@keyframes drift{from{transform:translateX(-22px)}to{transform:translateX(26px)}}
.drift{animation:drift 16s ease-in-out infinite alternate}
.d2{animation-duration:21s;animation-delay:-6s}
.d3{animation-duration:26s;animation-delay:-12s}
/* gentler than before — these flowers are planted, not floating */
@keyframes sway{from{transform:rotate(-3.5deg)}to{transform:rotate(3.5deg)}}
.sway{transform-box:fill-box;transform-origin:bottom center;animation:sway 3.8s ease-in-out infinite alternate}
.s2{animation-duration:4.6s;animation-delay:-1.4s}
.s3{animation-duration:3.2s;animation-delay:-2.2s}
@keyframes fly{0%{transform:translate(-90px,168px)}12%{transform:translate(214px,128px)}
  28%{transform:translate(560px,158px)}45%{transform:translate(900px,118px)}
  60%{transform:translate(1300px,140px)}100%{transform:translate(1300px,140px)}}
.bird-track{animation:fly 34s linear infinite}
@keyframes flap{from{transform:rotate(-24deg)}to{transform:rotate(30deg)}}
.wing{transform-box:fill-box;transform-origin:top right;animation:flap .3s ease-in-out infinite alternate}
@keyframes trunk-wave{from{transform:rotate(-5deg)}to{transform:rotate(6deg)}}
/* hello in every language, adrift. Small, funky, never in the way. */
.hellos{font-family:"Baloo 2","Hanken Grotesk",sans-serif}
.hello{transform-box:fill-box;transform-origin:center;
  animation:hfloat var(--d,5.5s) ease-in-out var(--dl,0s) infinite alternate}
.hello .w{font-weight:800;stroke:#fff;stroke-width:5;stroke-linejoin:round;paint-order:stroke}
.hello .lbl{font:800 8.5px "Hanken Grotesk",sans-serif;letter-spacing:.09em;fill:#4A6A78}
@keyframes hfloat{from{transform:translateY(-5px) rotate(-1.6deg)}to{transform:translateY(5px) rotate(1.6deg)}}
.wavehand{transform-box:fill-box;transform-origin:50% 88%;
  animation:wave-hi 1.7s ease-in-out infinite alternate}
@keyframes wave-hi{from{transform:rotate(-13deg)}to{transform:rotate(13deg)}}
.trunk{transform-box:fill-box;transform-origin:top left;animation:trunk-wave 2.6s ease-in-out infinite alternate}

/* ---------- steps ---------- */
.step{display:flex;align-items:center;gap:14px;font-size:clamp(24px,4vw,36px);margin:0 0 16px;padding-top:12px}
.step span{flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:var(--yellow);border:3px solid var(--ink);font-size:22px;font-family:"Baloo 2",sans-serif;
  animation:wobble 3.6s ease-in-out infinite alternate}
@keyframes wobble{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}

/* ---------- home groups: languages, subjects, activities ---------- */
.group-h{font-family:"Baloo 2","Hanken Grotesk",sans-serif;font-weight:800;
  font-size:clamp(20px,2.9vw,25px);color:var(--ink);margin:38px 0 13px}
.group-h:first-child{margin-top:0}
.langs-row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(196px,100%),1fr))}
.langs-acts{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.langs-acts .lang small{font-size:15.5px;max-width:75%}

/* ---------- language cards: loud but compact, each its own colour ---------- */
.langs{display:block}
.lang{
  position:relative;cursor:pointer;text-align:left;font:inherit;color:var(--ink);
  border:4px solid var(--ink);border-radius:var(--r);padding:16px 16px 58px;
  box-shadow:var(--shadow);transition:transform .14s ease;overflow:hidden;
}
.lang:hover:not(:disabled){transform:translateY(-6px) rotate(-1deg)}
.lang[data-lang="en"]{background:#FFE9A8}
.lang[data-lang="zu"]{background:#BDEBFF}
.lang[data-lang="xh"]{background:#CFF3D6}
.lang[data-lang="tn"]{background:#E6DEFF}
.lang[data-lang="af"]{background:#FFE0EA}
.lang[data-lang="science"]{background:#DFF3FF}
.lang[data-lang="biology"]{background:#FFE4E0}
.lang[data-lang="maths"]{background:#EFEAFF}
.lang[data-lang="st"]{background:#FFE3C7}
.lang[data-lang="art"]{background:#FFF1CC}
.lang[data-lang="feelings"]{background:#DDF4F0}
/* the Games card is a link, not a button, but wears the same clothes */
.lang-games{display:block;text-decoration:none;background:#FFF3C4 !important}
.lang-games:hover{transform:translateY(-6px) rotate(-1deg)}
.lang-books{display:block;text-decoration:none;background:#E7F2E4 !important}
.lang-books:hover{transform:translateY(-6px) rotate(-1deg)}
/* asleep, not dead: coming-soon shelves keep their colour, the creature naps */
.lang:disabled{cursor:not-allowed;filter:saturate(.5);opacity:.85;box-shadow:none}
.lang b{position:relative;display:block;font-family:"Baloo 2",sans-serif;
  font-size:clamp(23px,2.6vw,30px);font-weight:800;line-height:1.05}
.lang small{position:relative;display:block;font-size:13.5px;font-weight:600;color:#3E4650;margin-top:6px;max-width:70%}
.lang i{position:relative;display:inline-block;font-style:normal;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.07em;background:var(--ink);color:#fff;
  border-radius:999px;padding:4px 10px;margin-bottom:9px}
.lang:disabled i{background:#9AA1AA}
/* a big soft blob so the cards aren't flat rectangles */
.lang::after{content:"";position:absolute;right:-40px;bottom:-52px;width:130px;height:130px;
  border-radius:50%;background:rgba(255,255,255,.55)}
/* each shelf has its own animal friend, sitting on the blob */
.pal{position:absolute;right:6px;bottom:-5px;width:76px;height:auto;pointer-events:none;
  transition:transform .18s ease}
.lang:hover:not(:disabled) .pal{transform:rotate(-5deg) translateY(-4px)}
.lang .hi{position:relative;display:block;font-family:"Baloo 2",sans-serif;font-weight:700;
  font-size:15px;color:rgba(34,38,43,.55);margin-top:3px}
.lang .lid,.lang .zz{display:none}
.lang:disabled .eye{display:none}
.lang:disabled .lid{display:block}
.lang:disabled .zz{display:block}
/* six languages sit as two even rows of three (6 in one row squeezed the names, 5+1 left an orphan);
   five subjects share one row on wide screens */
.langs-row.langs-lang{grid-template-columns:repeat(3,1fr)}
@media (min-width:1000px){.langs-row.langs-sub{grid-template-columns:repeat(5,1fr)}}
@media (min-width:621px) and (max-width:999px){.langs-row.langs-sub{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.langs{grid-template-columns:1fr}.lang:nth-child(1){grid-column:span 1}
  .pal{width:88px}
  /* phones: two across, so thirteen cards don't become one endless scroll */
  .langs-row.langs-lang,.langs-row.langs-sub{grid-template-columns:repeat(2,1fr);gap:10px}
  .langs-lang .lang,.langs-sub .lang{padding:14px 12px 70px;border-width:3px}
  .langs-lang .lang b,.langs-sub .lang b{font-size:clamp(18px,5.4vw,22px);overflow-wrap:anywhere}
  .langs-lang .lang small,.langs-sub .lang small{display:none}
  .langs-lang .pal,.langs-sub .pal{width:70px}
  .langs-row .lang:last-child:nth-child(odd){grid-column:span 2}}

/* ---------- Parent Zone: tray, language balance, PIN ---------- */
.lang-tray{background:#FFE9A8 !important;text-align:left}
.gate-alt{margin-top:14px}
.tray,.trayresults{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.tray li,.trayresults li{display:flex;align-items:center;gap:12px;font-size:15.5px;
  padding:8px 10px;border:1.5px solid var(--line);border-radius:12px;background:#fff}
.tray li img{width:64px;height:36px;object-fit:cover;border-radius:6px;flex:none}
.tray li span,.trayresults li span{flex:1;min-width:0;line-height:1.3}
.trayresults li small{display:block;color:var(--ink-soft);font-size:13px}
.tray li.none,.trayresults li.none{border:0;background:none;padding:4px 0;color:var(--ink-soft)}
.traypick{margin-top:14px}
.traypick .searchwrap{max-width:none;margin-bottom:0}
.mini-act[disabled]{opacity:.5;cursor:not-allowed}
.homelang{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:800;font-size:15px;margin:6px 0 12px}
.homelang select{font:600 16px "Hanken Grotesk",sans-serif;padding:8px 10px;border:2px solid var(--line);
  border-radius:10px;background:var(--paper);min-height:44px}
.balance{display:grid;gap:9px}
.bal-row{display:grid;grid-template-columns:minmax(90px,130px) 1fr 44px;align-items:center;gap:10px;font-size:15px}
.bal-name{font-weight:700}
.bal-bar{height:14px;border-radius:999px;background:#EFEBE2;overflow:hidden}
.bal-bar i{display:block;height:100%;border-radius:999px}
.bal-pct{text-align:right;font-weight:800;color:var(--ink-soft)}
.balance-note{margin:12px 0 0;font-weight:700;color:#1D6B43;font-size:15.5px}
.pinrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pinrow input{font:800 20px "Hanken Grotesk",sans-serif;letter-spacing:.3em;width:130px;padding:9px 12px;
  border:2px solid var(--line);border-radius:10px;background:var(--paper);min-height:44px}
.pinrow input::placeholder{letter-spacing:normal;font-size:15px;font-weight:600}

/* ---------- iPhone "add to home screen" picture guide ---------- */
.iosguide{max-width:420px;margin:14px auto 0;background:#fff;border:2px solid var(--line);
  border-radius:18px;padding:16px 18px}
.iosguide ol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.iosguide li{display:flex;align-items:center;gap:12px;font-size:15.5px;line-height:1.35}
.iosguide .ig{flex:none;width:40px;height:40px;border-radius:12px;background:#E6F1FB;
  color:#1E6FB8;display:grid;place-items:center}
.iosguide .ig svg{width:22px;height:22px}

/* ---------- the landing page's one trust line ---------- */
.trustline{text-align:center;color:var(--ink-soft);font-size:17px;max-width:52ch;
  margin:14px auto clamp(48px,8vw,84px)}
.linkish{background:none;border:none;padding:0;font:inherit;font-weight:800;
  color:var(--green-deep);text-decoration:underline;cursor:pointer}

/* ---------- the parent promise: calm on purpose (lives in the Parent Zone) ---------- */
.pledge{margin:18px 0 0;background:var(--card);border:2px solid var(--line);
  border-radius:16px;padding:clamp(22px,4vw,34px)}
.pledge h3{font-family:"Hanken Grotesk",sans-serif;font-weight:800;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:20px}
.pledge-cols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.pledge ul{margin:0;padding:0;list-style:none;display:grid;gap:12px;font-size:16px}
.pledge li{padding-left:28px;position:relative;color:var(--ink-soft)}
.pledge li::before{position:absolute;left:0;top:-1px;font-weight:800}
.yes li::before{content:"\2713";color:var(--green-deep)}
.no li::before{content:"\2013";color:var(--red)}

/* ---------- beadwork & stamps: the page's seams, strung like beads ---------- */
.beads{display:flex;justify-content:center;gap:12px;margin:clamp(34px,6vw,54px) 0 22px}
.beads i{width:11px;height:11px;border-radius:50%;box-shadow:0 2px 0 rgba(34,38,43,.15)}
.beads i:nth-child(1){background:var(--red)}.beads i:nth-child(2){background:var(--orange)}
.beads i:nth-child(3){background:var(--yellow)}.beads i:nth-child(4){background:var(--green)}
.beads i:nth-child(5){background:var(--blue)}.beads i:nth-child(6){background:var(--violet)}
.beads i:nth-child(7){background:#FF7A85}
.stamps{display:flex;flex-wrap:wrap;justify-content:center;gap:11px;margin:0 0 8px}
.stamp{display:inline-flex;align-items:center;gap:9px;font:800 14.5px "Hanken Grotesk",sans-serif;
  color:#2E353D;background:#fff;border:2px solid var(--line);border-radius:999px;padding:10px 17px}
.stamp i{width:10px;height:10px;border-radius:50%;flex:none}

/* ---------- filters ---------- */
.searchwrap{display:flex;align-items:center;gap:10px;max-width:360px;margin-bottom:13px;
  background:#fff;border:3px solid var(--ink);border-radius:999px;padding:10px 18px;
  color:var(--ink-soft)}
.searchwrap svg{width:19px;height:19px;flex:none}
.searchwrap input{border:0;outline:0;background:none;width:100%;
  font:600 16px "Hanken Grotesk",sans-serif;color:var(--ink)}
.searchwrap:focus-within{outline:4px solid var(--violet);outline-offset:2px}
.shelf-title{display:flex;align-items:center;gap:14px;font-size:clamp(30px,5vw,48px);margin-bottom:18px}
.shelf-pal{flex:none;width:clamp(54px,8vw,72px);line-height:0}
.shelf-pal .pal{position:static;width:100%;height:auto}
.shelf-pal .zz,.shelf-pal .lid{display:none}
.chip-pillar{display:inline-flex;align-items:center;gap:8px}
.chip-ic{width:19px;height:19px;flex:none}
.chip[aria-pressed="true"] .chip-ic{filter:brightness(1.35) saturate(.9)}
.filters{margin-bottom:26px}
.filter-row{display:flex;flex-wrap:wrap;gap:10px}
.filter-row.sub{margin-top:11px}
.chip{cursor:pointer;font:800 15px/1 "Hanken Grotesk",sans-serif;padding:11px 18px;
  border-radius:999px;border:3px solid var(--ink);background:#fff;color:var(--ink)}
.filter-row.sub .chip{font-size:14px;padding:9px 15px;border-width:2px;border-color:var(--line);color:var(--ink-soft)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
/* phones: the energy chips wait behind one button so the videos start sooner */
.more-choices{display:none}
@media (max-width:620px){
  .more-choices{display:inline-flex;align-items:center;gap:6px;margin-top:11px;cursor:pointer;
    font:800 14px/1 "Hanken Grotesk",sans-serif;padding:10px 14px;min-height:44px;border-radius:999px;
    border:2px dashed var(--line);background:transparent;color:var(--ink-soft)}
  .more-choices::after{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 2.5px 2.5px 0;
    transform:rotate(45deg) translateY(-2px);transition:transform .15s ease}
  .more-choices[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}
  #pacings:not(.open){display:none}
}

/* Parent Zone: the QR code that puts Limelo Kids on a child's phone */
.qrwrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:14px}
.qr{flex:0 0 auto;width:196px;height:196px;padding:10px;background:#fff;border:3px solid var(--ink);border-radius:16px}
.qr svg{display:block;width:100%;height:100%}
.qrside{flex:1 1 220px;min-width:0}
.qrside .fineprint{margin-top:8px}
.qrside b{overflow-wrap:anywhere}
.install-self{margin-top:18px;padding-top:16px;border-top:2px dashed var(--line)}
@media (max-width:620px){.qrwrap{justify-content:center}.qr{width:min(240px,70vw);height:min(240px,70vw)}}
/* the one-time "set up from your phone" message on a child's phone */
.setup-note{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:#E3F6E8;border:3px solid var(--green-deep);border-radius:16px;padding:14px 16px;margin:0 0 22px}
.setup-note p{margin:0;font-weight:700;font-size:15.5px;flex:1 1 220px}

/* Parent Zone: set-once and look-back sections fold away */
.fold-group{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:21px;margin:40px 0 -8px;color:var(--ink)}
.card.fold{padding:0}
.card.fold > summary{list-style:none;cursor:pointer;padding:20px 58px 20px 26px;position:relative;min-height:44px}
.card.fold > summary::-webkit-details-marker{display:none}
.card.fold > summary h3{margin:0}
.card.fold > summary .fold-hint{display:block;font-size:14.5px;color:var(--ink-soft);margin-top:3px}
.card.fold > summary::after{content:"";position:absolute;right:26px;top:50%;width:10px;height:10px;
  border:solid var(--ink);border-width:0 3px 3px 0;transform:translateY(-70%) rotate(45deg);transition:transform .15s ease}
.card.fold[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
.card.fold > summary:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;border-radius:14px}
.card.fold > :not(summary){margin-left:26px;margin-right:26px}
.card.fold[open]{padding-bottom:22px}

/* ---------- shelf: style B poster cards — picture + name, nothing else ---------- */
.shelf{display:grid;gap:26px 22px;grid-template-columns:repeat(auto-fill,minmax(min(264px,100%),1fr));padding:10px 0 44px}
.vid{position:relative;text-align:center;cursor:pointer;font:inherit;color:inherit;background:var(--card);
  border:4px solid var(--ink);border-radius:26px;box-shadow:0 6px 0 rgba(34,38,43,.16);
  transition:transform .14s ease;display:flex;flex-direction:column;overflow:hidden}
.vid:hover{transform:translateY(-6px)}
.dot{position:absolute;left:11px;top:11px;color:#fff;font-size:11px;font-weight:800;
  border-radius:999px;padding:5px 11px;text-transform:uppercase;letter-spacing:.06em;
  box-shadow:0 2px 0 rgba(34,38,43,.2)}
.vid-name{display:block;font-family:"Baloo 2",sans-serif;font-size:22px;font-weight:800;
  line-height:1.18;padding:14px 16px 4px;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
/* on a grid row the duration line sits at the bottom of the tallest card; on a
   phone (one column) it follows the title directly, with no gap */
.vid-meta{margin-top:auto}
/* honest data line: duration + a visibly rough estimate (it plays on YouTube) */
.vid-meta{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);padding:0 16px 14px}
/* the thumbnail clips inside its own frame so the card can keep overflow visible
   for the tape. height:auto is load-bearing — without it the img's height
   attribute wins over aspect-ratio, the box goes 4:3, and YouTube's letterbox
   bars stop being cropped */
.thumb{position:relative;display:block;overflow:hidden;border-radius:17px 17px 0 0;
  border-bottom:4px solid var(--ink);background:#DCEEF7}
.vid img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform .35s ease}
.vid:hover img{transform:scale(1.05)}
/* a chunky play badge, so "tap me" needs no reading */
.play{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%;
  background:#fff;border:3px solid var(--ink);display:grid;place-items:center;
  box-shadow:0 3px 0 rgba(34,38,43,.25);transition:transform .15s ease,background .15s ease}
.play svg{width:19px;height:19px;fill:var(--ink);margin-left:3px}
.vid:hover .play{transform:scale(1.14) rotate(-6deg);background:var(--yellow)}
.vid-b{padding:16px 17px 18px;display:flex;flex-direction:column;gap:10px;flex:1;
  border-radius:0 0 17px 17px}
/* card bodies take a whisper of their tape's colour */
.vid:nth-child(5n+1) .vid-b{background:#FFFAEB}
.vid:nth-child(5n+2) .vid-b{background:#F0F8FD}
.vid:nth-child(5n+3) .vid-b{background:#FFF4F5}
.vid:nth-child(5n+4) .vid-b{background:#F1FAF3}
.vid:nth-child(5n)   .vid-b{background:#F6F2FE}
.vid b{font-family:"Baloo 2",sans-serif;font-size:24px;font-weight:800;line-height:1.15;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:12.5px;font-weight:800;padding:5px 11px;border-radius:999px;background:#F1EEE5;color:#4A525B}
.tag.calm{background:#D8F1E2;color:#1D6B43}
.tag.moderate{background:#FFEFCC;color:#8A5B12}
.tag.energetic{background:#FFDED8;color:#A5321F}
.vid .src{font-size:12.5px;color:var(--ink-soft);border-top:2px solid var(--line);padding-top:10px}
.empty{background:var(--card);border:3px dashed var(--line);border-radius:var(--r);padding:38px;text-align:center;color:var(--ink-soft);font-weight:600}

/* ---------- player ---------- */
.stage{position:relative;background:#101418;border:4px solid var(--ink);border-radius:var(--r);overflow:hidden;aspect-ratio:16/9}
.stage-wait{position:absolute;inset:0;z-index:0;display:grid;place-content:center;justify-items:center;
  gap:12px;color:#B9C4CF;font-size:15px;font-weight:600;text-align:center;padding:20px}
.stage-wait p{margin:0;max-width:40ch}
.wdot{animation:wpulse 1.2s ease-in-out infinite}
.wdot.d2{animation-delay:.2s}.wdot.d3{animation-delay:.4s}
@keyframes wpulse{0%,100%{opacity:.25}50%{opacity:1}}
.stage{display:flex;flex-direction:column}
#ytplayer{position:relative;z-index:1;flex:1;min-height:0;transition:opacity .35s ease}
/* #ytplayer must fill the stage too — the iframe's 100% height resolves against
   it, and with no height set the video collapses to the 150px iframe default */
#ytplayer,.stage iframe{width:100%;height:100%;border:0;display:block}
/* like a TV channel: our own loader shows until the video is actually playing,
   so the child never lands on YouTube's "press play" card */
.stage.loading #ytplayer{opacity:0}
/* full screen: the video fills the whole screen, no frame */
.stage:fullscreen{border:0;border-radius:0;background:#000;aspect-ratio:auto;width:100vw;height:100vh}
.stage:-webkit-full-screen{border:0;border-radius:0;background:#000;aspect-ratio:auto;width:100vw;height:100vh}
.stage-bar{display:none;position:relative;z-index:2;flex:0 0 auto;align-items:center;gap:10px;
  padding:8px 12px;background:#000}
/* .fs is set by app.js on fullscreenchange (one class instead of prefixed selectors) */
/* the strip is always there: our own Pause/Play replaces YouTube's control bar */
.stage-bar{display:flex}
.stage:not(.fs){aspect-ratio:auto}
.stage:not(.fs) #ytplayer{flex:none;aspect-ratio:16/9;height:auto}
.stage:not(.fs) #stageBack{display:none}
.stage-btn{font:800 16px/1 "Hanken Grotesk",sans-serif;min-height:44px;padding:10px 18px;border-radius:999px;
  border:2px solid #fff;background:transparent;color:#fff;cursor:pointer}
.stage-pause{min-width:112px}
.stage-pause svg{width:15px;height:15px;margin-right:7px;vertical-align:-2px}
.stage-sound{margin-left:auto;background:#FFC61A;border-color:#FFC61A;color:#22262B}
.nowinfo{margin:18px 0 44px}
.nowinfo b{display:block;font-family:"Baloo 2",sans-serif;font-size:26px;font-weight:800}
.nowinfo p{color:var(--ink-soft);margin:6px 0 0;font-size:15px}

/* ---------- done ---------- */
.done{text-align:center;padding:clamp(46px,9vw,96px) 22px}
.done-art{width:min(220px,52vw);height:auto;margin-bottom:6px}
.snooze{animation:snore 3.4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes snore{from{transform:scale(1)}to{transform:scale(1.045)}}
.zz text{animation:zz-float 2.6s ease-in-out infinite}
.zz text:last-child{animation-delay:1.3s}
@keyframes zz-float{0%,100%{opacity:.35}50%{opacity:1}}
.done h2{font-size:clamp(34px,6.4vw,58px)}
.done p{color:var(--ink-soft);font-size:19px;margin:14px 0 30px}

/* ---------- parent zone ---------- */
.parent{max-width:760px;margin:0 auto;padding-bottom:60px}
.parent h2{font-family:"Hanken Grotesk",sans-serif;font-weight:800;font-size:clamp(26px,4.4vw,36px);margin-bottom:8px}
.lede{color:var(--ink-soft);max-width:56ch;margin:20px 0 0}
.lede.small{font-size:16px;margin:4px 0 14px}
.sum{font-family:"Baloo 2",sans-serif;font-size:48px;font-weight:800;margin:18px 0 12px}
#sumA{font:800 22px "Hanken Grotesk",sans-serif;padding:12px 16px;width:130px;
  border:3px solid var(--ink);border-radius:12px;background:#fff;margin-right:10px}
.err{color:var(--red);font-weight:800}
.card{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:26px;margin-top:22px}
.card h3{font-family:"Hanken Grotesk",sans-serif;font-weight:800;font-size:19px;margin-bottom:6px}
.stats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr));margin:14px 0 6px}
.stat b{display:block;font-family:"Baloo 2",sans-serif;font-size:36px;font-weight:800;line-height:1}
.stat span{font-size:14.5px;color:var(--ink-soft)}
.fineprint{font-size:14px;color:var(--ink-soft);margin:10px 0 0}
.times{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px}
.times label{font-size:14px;font-weight:800;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.times input{font:600 16px "Hanken Grotesk",sans-serif;padding:9px 11px;border:2px solid var(--line);border-radius:10px;background:var(--paper)}
/* a proper pill toggle, full row clickable */
.switch{display:flex;align-items:center;gap:12px;font-weight:800;margin-top:8px;cursor:pointer;
  padding:6px 0;font-size:15.5px}
.switch input{appearance:none;-webkit-appearance:none;width:46px;height:26px;border-radius:999px;
  background:#D5D0C4;border:2px solid #B9B2A2;position:relative;cursor:pointer;transition:background .15s;flex:none}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.switch input:checked{background:var(--green-deep);border-color:var(--green-deep)}
.switch input:checked::after{left:22px}
/* small inline actions inside list rows */
.mini-act{font:800 13.5px "Hanken Grotesk",sans-serif;color:var(--green-deep);background:none;
  border:2px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;
  text-decoration:none;display:inline-block;margin-top:6px}
.mini-act:hover{border-color:var(--green-deep)}
.mini-primary{background:var(--green-deep);color:#fff;border-color:var(--green-deep)}
.mini-primary:hover{background:#278244}
.mini-quiet{border:none;text-decoration:underline;color:var(--ink-soft);padding:6px 6px}
.recent{list-style:none;margin:12px 0 16px;padding:0;display:grid;gap:9px}
.recent li{font-size:16px;padding-bottom:12px;border-bottom:1px solid var(--line);color:var(--ink-soft)}
#clearBtn{margin-top:18px}
.recent li b{color:var(--ink);font-weight:800}
.recent .none{border:0}

/* ---------- legal page: calm prose, parent temperature ---------- */
.legal{max-width:760px;padding-bottom:64px}
.legal h1{font-family:"Hanken Grotesk",sans-serif;font-weight:800;font-size:clamp(26px,4.4vw,36px);margin:0 0 8px}
.legal .back{display:inline-block;text-decoration:none}
.legal .card{margin-top:22px}
.legal h2{font-family:"Hanken Grotesk",sans-serif;font-weight:800;font-size:22px;margin-bottom:4px}
.legal h3{font-family:"Hanken Grotesk",sans-serif;font-weight:800;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:22px 0 6px}
.legal p{margin:8px 0;color:#3E4650;font-size:15.5px}
.legal ul{margin:8px 0;padding-left:22px;color:#3E4650;font-size:15.5px;display:grid;gap:7px}
.legal .lede{font-size:16.5px}

/* ---------- footer ---------- */
.foot{position:relative;border-top:3px solid var(--ink);background:#FFF6DF;padding:30px 0 48px;margin-top:96px}
.foot p{margin:0 0 10px;font-size:14.5px;color:var(--ink-soft)}
/* zero-data reporting: just a styled mailto, no forms, no widgets */
.report-btn{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;
  font:800 15px/1 "Hanken Grotesk",sans-serif;color:var(--ink);text-decoration:none;
  background:#fff;border:3px solid var(--ink);border-radius:999px;padding:12px 20px;
  transition:transform .12s ease}
.report-btn svg{width:18px;height:18px;color:var(--green-deep)}
.report-btn:hover{transform:translateY(-3px)}
.report-line{margin-top:10px}
.report-line a{font-size:13.5px;color:var(--ink-soft)}
/* Kiki peeking over the edge, rising a little when you arrive */
.peeker{position:absolute;right:clamp(18px,8vw,90px);bottom:100%;width:104px;height:auto;
  margin-bottom:-3px;overflow:hidden}
/* pops up once when the page loads, then settles into a slow bob */
.peek{animation:peek-up 1.4s cubic-bezier(.34,1.4,.64,1) 1.2s backwards,
  peek-bob 5s ease-in-out 2.6s infinite alternate}
@keyframes peek-up{from{transform:translateY(64px)}to{transform:translateY(6px)}}
@keyframes peek-bob{from{transform:translateY(6px)}to{transform:translateY(2px)}}

/* ---------- small screens ---------- */
@media (max-width:520px){
  .topbar-in{padding-block:8px;gap:8px 10px}
  /* keeps the tap target at the 44px minimum on a phone */
  .topbar .btn-ghost{padding:13px 15px;font-size:14px;border-width:2px}
  /* full-width own row, so it can never squeeze the brand off the edge */
  .budget-chip{flex-basis:100%;text-align:center;padding:7px 12px;font-size:13.5px}
  .wrap{padding:0 16px}
  /* a taller phone hero, so the scene is a scene and not a strip; the sun
     slides left (CSS transform replaces the SVG attribute on purpose) so it
     stays inside the slice-crop band on a narrow screen */
  .hero-in{padding:32px 16px 100px}
  /* small, in the top-right corner of the sky, clear of the logo */
  .sunpos{transform:translate(832px,66px) scale(.56)}
  /* the phone crop hides the sky's edges, so three greetings move into the
     middle of the scene: Sawubona under the rainbow's arch, the Sotho pair
     either side of it (CSS transform replaces the SVG attribute on purpose) */
  .hz-zu{transform:translate(600px,335px)}
  .hz-tn{transform:translate(370px,295px)}
  .hz-nso{transform:translate(852px,302px)}
  .hz-sasl{transform:translate(573px,362px)}
  /* one line on a phone: wrapping turned the pill into a big white slab over the scene */
  .tagline{padding:5px 11px;font-size:min(3.5vw,14px);border-width:2px;margin-top:9px}
  /* phones: a row of sky above the logo holds the greetings, which take turns */
  .hero-in{padding-top:46px}
  .hero-wm{width:100%}
  .hellos > g.slot{transition:opacity .45s ease}
  .hellos > g.slot:not(.on){opacity:0}
  .step span{width:38px;height:38px;font-size:19px}
  .lang{padding:20px 18px 78px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  /* with animations off, the peeker must still be visible, not parked below the fold */
  .peek{transform:translateY(6px)}
}

/* ---------- mobile-first pass (13 Sept): most families are on a phone ----------
   every tap target at least 44px tall, small print at least 12-13px, and the topic
   chips become one swipeable row so the first videos show without scrolling */
.brand{display:flex;align-items:center;min-height:44px}
.searchwrap input{min-height:44px}
.btn-ghost.small{min-height:44px}
.linkish{padding:10px 4px;margin:-10px -4px}
.lang i{font-size:12px}
.dot{font-size:12px}
.vid-meta{font-size:13.5px}
@media (max-width:620px){
  #pillars{flex-wrap:nowrap;overflow-x:auto;margin:0 -22px;padding:3px 22px 8px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  #pillars::-webkit-scrollbar{display:none}
  #pillars .chip{flex:0 0 auto;scroll-snap-align:start}
  .more-choices{margin-top:4px}
}