:root{
  --navy:#143a78;
  --blue:#2f9fe8;
  --green:#69a934;
  --lime:#a6ca38;
  --orange:#ff8c16;
  --yellow:#ffd84a;
  --pink:#ef4f9b;
  --ink:#18304f;
  --soft:#f6fbff;
  --white:#fff;
  --shadow:0 22px 60px rgba(31,74,123,.16);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,-apple-system,sans-serif;color:var(--ink);background:linear-gradient(180deg,#fbfdff 0%,#fff 42%,#f9fff5 100%);overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
.site-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:38px;padding:18px clamp(22px,5vw,72px);background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(20,58,120,.07)}
.brand{position:relative;display:inline-flex;flex-direction:column;line-height:.72;font-weight:1000;font-size:23px;letter-spacing:.5px;color:var(--navy);min-width:110px}.brand__spark{position:absolute;width:12px;height:4px;border-radius:8px;right:-6px}.brand__spark--blue{background:var(--blue);top:4px;transform:rotate(-35deg)}.brand__spark--green{background:var(--green);top:14px;right:-12px}.brand__spark--orange{background:var(--orange);top:24px;transform:rotate(35deg)}
.top-nav{display:flex;gap:28px;margin-left:auto;font-weight:800;color:#46617f}.top-nav a{padding:10px 0}.top-nav a:hover{color:var(--navy)}
.btn{border:0;border-radius:16px;padding:15px 22px;font-weight:1000;transition:.18s transform,.18s box-shadow,.18s background}.btn:hover{transform:translateY(-2px)}.btn--small{padding:11px 17px}.btn--primary{color:white;background:linear-gradient(135deg,var(--orange),#ff6d20);box-shadow:0 10px 24px rgba(255,117,25,.26)}.btn--secondary{color:var(--navy);background:#fff;border:2px solid #d9e9f8}.btn--ghost{color:var(--navy);background:#eff7ff;border:1px solid #d8ebff}.btn--full{width:100%}
.hero{min-height:720px;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.92fr);align-items:center;gap:7vw;padding:70px clamp(24px,7vw,110px) 56px;position:relative}.hero__copy{max-width:670px}.eyebrow{display:inline-flex;align-items:center;gap:9px;background:#fff7cf;color:#796117;border:1px solid #ffe692;border-radius:999px;padding:9px 14px;font-size:14px;font-weight:900;margin-bottom:18px}.eyebrow span{color:var(--orange)}
h1{font-size:clamp(48px,6vw,86px);line-height:.95;margin:0 0 22px;color:var(--navy);letter-spacing:-3px}.hero h1 span{color:var(--green)}.hero__lead{font-size:clamp(18px,2vw,22px);line-height:1.6;color:#55708c;max-width:620px}.hero__actions{display:flex;gap:13px;margin:30px 0 38px}.hero__trust{display:flex;gap:34px;flex-wrap:wrap}.hero__trust div{display:flex;flex-direction:column}.hero__trust strong{font-size:19px;color:var(--navy)}.hero__trust span{font-size:13px;color:#7890a7;margin-top:3px}
.hero__visual{position:relative;min-height:620px;display:grid;place-items:center}.book-card{position:relative;width:min(410px,82%);aspect-ratio:700/993;border-radius:27px;overflow:hidden;background:white;box-shadow:0 32px 70px rgba(32,78,118,.26);transform:rotate(2.2deg);z-index:3;border:8px solid white}.book-card img{width:100%;height:100%;object-fit:cover;display:block}.book-card__shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 45%,transparent 58%);transform:translateX(-130%);animation:shine 6s ease-in-out infinite}.hero__blob{position:absolute;border-radius:50%;filter:saturate(.9)}.hero__blob--yellow{width:460px;height:460px;background:#fff2a8;right:4%;top:7%}.hero__blob--green{width:180px;height:180px;background:#dff2ab;left:3%;bottom:12%}.hero__blob--blue{width:120px;height:120px;background:#cceeff;right:0;bottom:7%}
.float-badge{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(24,73,120,.08);box-shadow:0 12px 30px rgba(32,78,118,.16);border-radius:18px;padding:10px 14px;font-size:22px}.float-badge span{font-size:13px;font-weight:900;color:#42617f}.float-badge--sound{left:1%;top:21%;transform:rotate(-4deg)}.float-badge--play{right:-1%;top:38%;transform:rotate(4deg)}.float-badge--touch{left:3%;bottom:17%;transform:rotate(2deg)}
.feature-strip{max-width:1180px;margin:0 auto 35px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 24px}.feature-strip article{display:flex;align-items:center;gap:13px;background:white;border:1px solid #e8f1f8;border-radius:22px;padding:17px 18px;box-shadow:0 8px 25px rgba(32,78,118,.07)}.feature-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#f3f9ff;font-size:24px}.feature-strip strong,.feature-strip small{display:block}.feature-strip strong{color:var(--navy)}.feature-strip small{color:#8193a7;margin-top:3px}
.section{padding:95px clamp(24px,7vw,110px)}.section-heading{text-align:center;max-width:760px;margin:0 auto 52px}.section-heading--left{text-align:left;margin-left:0}.section-kicker{display:inline-block;font-size:13px;font-weight:1000;letter-spacing:1.7px;color:var(--orange);margin-bottom:10px}.section h2{font-size:clamp(34px,4vw,54px);line-height:1.05;margin:0 0 15px;color:var(--navy);letter-spacing:-1.4px}.section h2 span{color:var(--green)}.section-heading p,.parent-card p{color:#67809a;line-height:1.65;font-size:18px}
.book-section{background:linear-gradient(180deg,#f5fbff,#fff)}.book-layout{max-width:1180px;margin:auto;display:grid;grid-template-columns:340px 1fr;gap:42px;align-items:center}.book-preview{background:linear-gradient(145deg,#eaf6ff,#eff9df);border-radius:38px;padding:24px;box-shadow:var(--shadow)}.book-preview img{width:100%;border-radius:20px;display:block;box-shadow:0 16px 34px rgba(31,74,123,.18)}.unit-panel{background:white;border:1px solid #e8f1f8;border-radius:34px;padding:29px;box-shadow:var(--shadow)}.unit-panel__top{display:flex;justify-content:space-between;align-items:center}.unit-panel__top strong{font-size:29px;color:var(--navy)}.mini-label{display:block;font-size:11px;letter-spacing:1.5px;color:#7a93aa;font-weight:900;margin-bottom:4px}.progress-pill{background:#eff8df;color:#568721;padding:8px 12px;border-radius:999px;font-weight:1000}.progress-track{height:10px;background:#edf2f7;border-radius:20px;margin:17px 0 24px;overflow:hidden}.progress-track span{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--lime))}.unit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.unit-card{text-align:left;border:1px solid #e5eef6;background:#fbfdff;border-radius:18px;padding:13px;display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;column-gap:11px;color:#637a91}.unit-card span{grid-row:1/3;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#edf4fb;color:var(--navy);font-weight:1000}.unit-card b{color:#294a6d}.unit-card small{font-size:11px}.unit-card--active{border-color:#cfe9ae;background:#f8ffef}.unit-card--active span{background:var(--green);color:white}.unit-card--active b{color:#477b1e}
.how-section{background:#fffaf0}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1160px;margin:auto}.steps article{position:relative;background:white;border-radius:28px;padding:31px;border:1px solid #f2e9d7;box-shadow:0 12px 30px rgba(112,86,37,.08)}.steps article>span{display:grid;place-items:center;width:49px;height:49px;border-radius:15px;background:#fff0bb;color:#b47200;font-weight:1000;font-size:21px}.steps h3{color:var(--navy);font-size:22px;margin:17px 0 8px}.steps p{color:#71849a;line-height:1.55;margin:0}
.parent-section{padding-top:70px}.parent-card{max-width:1160px;margin:auto;display:grid;grid-template-columns:1.2fr .8fr;gap:52px;align-items:center;background:linear-gradient(135deg,#edf8ff,#f5ffe5);padding:55px;border-radius:40px;border:1px solid #dceef3;box-shadow:var(--shadow)}.mini-dashboard{background:white;border-radius:27px;padding:23px;box-shadow:0 18px 38px rgba(35,78,119,.14);transform:rotate(1.5deg)}.mini-dashboard__header{display:flex;justify-content:space-between;font-size:20px;color:var(--navy);margin-bottom:16px}.mini-dashboard__row{display:flex;justify-content:space-between;padding:13px 0;border-top:1px solid #eef2f5;color:#61778d}.mini-dashboard__progress{height:9px;background:#edf2f5;border-radius:20px;margin-top:17px;overflow:hidden}.mini-dashboard__progress span{display:block;width:7%;height:100%;background:var(--green)}
footer{text-align:center;padding:42px 20px;color:#7e92a6}.footer-brand{font-weight:1000;color:var(--navy);font-size:22px;letter-spacing:1px}
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px}.modal.is-open{display:grid}.modal__backdrop{position:absolute;inset:0;background:rgba(9,29,53,.56);backdrop-filter:blur(6px)}.modal__panel{position:relative;width:min(450px,100%);background:white;border-radius:30px;padding:32px;box-shadow:0 28px 80px rgba(9,29,53,.32);z-index:2}.modal__close{position:absolute;right:16px;top:13px;border:0;background:#f0f6fb;width:38px;height:38px;border-radius:50%;font-size:26px;color:#55708a}.auth-logo{font-weight:1000;color:var(--navy);font-size:20px}.auth-logo span{color:var(--green)}.modal h2{font-size:34px;color:var(--navy);margin:16px 0 5px}.modal p{color:#6f8498;margin:0 0 22px}.modal label{display:block;font-size:13px;font-weight:900;color:#4b6680;margin:13px 0}.modal input{width:100%;margin-top:7px;padding:14px 15px;border:1.5px solid #d8e5ef;border-radius:14px;outline:0;background:#fbfdff}.modal input:focus{border-color:#68a7d8;box-shadow:0 0 0 4px #eaf6ff}.auth-switch{width:100%;border:0;background:transparent;color:#63798e;margin-top:14px}.auth-switch strong{color:var(--navy)}.auth-note{font-size:11px;color:#95a4b2;text-align:center;margin-top:16px}.toast{position:fixed;z-index:150;left:50%;bottom:28px;transform:translate(-50%,30px);opacity:0;background:var(--navy);color:white;padding:13px 18px;border-radius:14px;font-weight:800;box-shadow:0 14px 36px rgba(15,54,102,.27);transition:.2s}.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.sky-dot{position:fixed;border-radius:50%;z-index:-1;filter:blur(2px);opacity:.4}.sky-dot--1{width:210px;height:210px;background:#dff3ff;top:14%;left:-80px}.sky-dot--2{width:150px;height:150px;background:#fff1ad;top:42%;right:-70px}.sky-dot--3{width:100px;height:100px;background:#daf0bd;top:74%;left:3%}
@keyframes shine{0%,55%{transform:translateX(-130%)}75%,100%{transform:translateX(130%)}}
@media(max-width:980px){.top-nav{display:none}.site-header{justify-content:space-between}.hero{grid-template-columns:1fr;padding-top:45px}.hero__copy{max-width:760px}.hero__visual{min-height:560px}.book-layout{grid-template-columns:1fr}.book-preview{max-width:330px;margin:auto}.parent-card{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.feature-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.site-header{padding:14px 18px}.brand{font-size:19px}.hero{padding:40px 20px 36px;gap:20px;min-height:auto}.hero h1{font-size:50px;letter-spacing:-2px}.hero__actions{flex-direction:column}.hero__actions .btn{width:100%}.hero__trust{gap:18px}.hero__visual{min-height:500px}.book-card{width:80%}.float-badge{font-size:18px}.float-badge span{font-size:11px}.feature-strip{grid-template-columns:1fr;padding:0 18px}.section{padding:68px 20px}.unit-grid{grid-template-columns:1fr}.parent-card{padding:31px 22px;border-radius:28px}.modal__panel{padding:27px 21px}}

.activity-section{background:linear-gradient(180deg,#fff,#f7fbff)}
.activity-grid{max-width:1160px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.activity-card{position:relative;overflow:hidden;background:#fff;border:1px solid #e6eef7;border-radius:30px;padding:29px;box-shadow:0 14px 38px rgba(31,74,123,.09);min-height:330px;transition:.2s transform,.2s box-shadow}
.activity-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(31,74,123,.14)}
.activity-card:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-55px;top:-55px;opacity:.38}
.activity-card--listen:before{background:#cfeeff}.activity-card--colour:before{background:#fff0a8}.activity-card--match:before{background:#dff0be}
.activity-card__icon{font-size:38px;margin-bottom:18px}.activity-card__tag{font-size:11px;font-weight:1000;letter-spacing:1.3px;color:var(--orange)}
.activity-card h3{font-size:25px;color:var(--navy);margin:8px 0 8px}.activity-card p{color:#71879c;line-height:1.55;margin:0 0 24px}
.mini-choice{display:flex;gap:10px}.mini-choice button{border:2px solid #e0ebf4;background:#fbfdff;border-radius:18px;width:64px;height:64px;font-size:31px}.mini-choice button:hover{border-color:#74b8eb;background:#eef8ff;transform:translateY(-2px)}
.colour-demo{display:flex;gap:12px;align-items:center}.colour-dot{width:48px;height:48px;border-radius:50%;border:5px solid white;box-shadow:0 0 0 2px #e4ecf2,0 8px 18px rgba(31,74,123,.12)}.colour-dot--red{background:#ef3d46}.colour-dot--yellow{background:#ffd33f}.colour-dot--green{background:#63af4b}.colour-dot--blue{background:#3a9ee8}
.match-demo{display:flex;align-items:center;gap:12px;background:#f7fbff;border:1px dashed #bfd7ea;border-radius:18px;padding:13px}.match-demo span{font-size:35px}.match-demo b{color:var(--navy);font-size:18px}.match-demo i{margin-left:auto;font-style:normal;color:#4d9a37;font-size:25px;font-weight:1000}
@media(max-width:980px){.activity-grid{grid-template-columns:1fr}}

/* V3 – seria 1–12 */
.book-card__status{position:absolute;z-index:5;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--orange);color:#fff;font-size:11px;font-weight:1000;letter-spacing:1.2px;padding:8px 13px;border-radius:999px;box-shadow:0 9px 20px rgba(239,126,31,.28)}
.series-section{background:linear-gradient(180deg,#fffaf1 0%,#fff 100%)}
.series-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.series-card{position:relative;min-height:205px;background:#fff;border:1px solid #e7edf3;border-radius:26px;padding:22px;box-shadow:0 10px 27px rgba(31,74,123,.07);display:flex;flex-direction:column;overflow:hidden;opacity:.82}
.series-card:after{content:"";position:absolute;width:95px;height:95px;border-radius:50%;right:-30px;bottom:-35px;background:#edf3f8}
.series-card__number{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:#eef3f8;color:#6c8297;font-weight:1000;font-size:21px;margin-bottom:13px}
.series-card__status{font-size:10px;letter-spacing:1.2px;font-weight:1000;color:#9aa8b5}
.series-card h3{font-size:22px;color:var(--navy);margin:4px 0 5px}
.series-card p{font-size:13px;line-height:1.45;color:#8293a4;margin:0;padding-right:16px}
.series-card__lock{position:absolute;right:19px;top:19px;font-size:19px;filter:grayscale(1);opacity:.45}
.series-card--available{grid-column:span 2;background:linear-gradient(135deg,#f5ffe8,#eef8ff);border-color:#cfe6b4;opacity:1;box-shadow:0 16px 40px rgba(60,112,59,.12)}
.series-card--available .series-card__number{background:var(--green);color:#fff}
.series-card--available .series-card__status{color:#4c942e}
.series-card__button{align-self:flex-start;margin-top:auto;position:relative;z-index:2;border:0;background:var(--navy);color:#fff;border-radius:12px;padding:10px 14px;font-weight:900;cursor:pointer}
.series-card__button:hover{transform:translateY(-1px)}
@media(max-width:980px){.series-grid{grid-template-columns:repeat(2,1fr)}.series-card--available{grid-column:span 2}}
@media(max-width:640px){.series-grid{grid-template-columns:1fr}.series-card--available{grid-column:auto}.series-card{min-height:185px}}


/* V4 – metoda bezpośrednia + cena */
.pricing-section{background:linear-gradient(180deg,#f7fbff 0%,#fffaf1 100%)}
.pricing-card{position:relative;max-width:930px;margin:0 auto;background:#fff;border:1px solid #dbe8f2;border-radius:34px;padding:32px 34px;display:grid;grid-template-columns:190px 1fr auto;align-items:center;gap:28px;box-shadow:0 22px 60px rgba(31,74,123,.12);overflow:hidden}
.pricing-card:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-90px;top:-100px;background:#fff1ad;opacity:.65;z-index:0}
.pricing-card>*{position:relative;z-index:1}
.pricing-card__badge{position:absolute;top:17px;left:20px;background:var(--green);color:white;font-size:10px;font-weight:1000;letter-spacing:1.2px;padding:7px 10px;border-radius:999px}
.pricing-card__price{padding-top:24px}.pricing-card__price strong{display:block;color:var(--navy);font-size:48px;line-height:1;font-weight:1000;letter-spacing:-1.7px}.pricing-card__price span{display:block;margin-top:5px;color:#6f8498;font-weight:800}
.pricing-card__copy h3{margin:0 0 6px;color:var(--navy);font-size:24px}.pricing-card__copy p{margin:0 0 14px;color:#71879c;line-height:1.55}.pricing-card__copy ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}.pricing-card__copy li{font-size:13px;font-weight:800;color:#4d667e}
.pricing-card__cta{white-space:nowrap}.pricing-card__note{grid-column:1/-1;color:#8a9bad;font-size:11px;border-top:1px solid #edf2f6;padding-top:13px}
@media(max-width:900px){.pricing-card{grid-template-columns:1fr}.pricing-card__copy ul{grid-template-columns:1fr}.pricing-card__cta{justify-self:start}.pricing-card__note{grid-column:auto}}


.site-footer {
  margin-top: 48px;
  padding: 22px 20px;
  background: #111827;
  color: rgba(255,255,255,.92);
  font-size: 14px;
}
.site-footer .footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.site-footer a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
}
@media (max-width: 700px) {
  .site-footer .footer-inner {
    justify-content: center;
    text-align: center;
  }
}


/* ===== V6: panel użytkownika ===== */
.dashboard-shell{min-height:100vh;background:linear-gradient(180deg,#f7fbff 0%,#ffffff 45%,#f8fff0 100%);padding-bottom:60px}
.dashboard-shell[hidden]{display:none!important}.dashboard-topbar{max-width:1240px;margin:auto;padding:22px 28px;display:flex;align-items:center;justify-content:space-between}.dashboard-brand{text-decoration:none}.dashboard-user{display:flex;align-items:center;gap:12px;color:var(--navy)}.dashboard-user small{display:block;color:#7d91a5;font-size:11px}.dashboard-user strong{display:block}.dashboard-user__avatar{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--orange),#ffca65);display:grid;place-items:center;color:#fff;font-weight:1000;box-shadow:0 8px 20px rgba(244,144,28,.22)}
.dashboard-hero{max-width:1180px;margin:20px auto 28px;padding:38px 42px;border-radius:34px;background:linear-gradient(125deg,#153c7a 0%,#245a9e 55%,#2e7db5 100%);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px;box-shadow:0 24px 60px rgba(20,60,120,.18);position:relative;overflow:hidden}.dashboard-hero:after{content:"";position:absolute;right:-80px;top:-100px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.08)}.dashboard-hero .section-kicker{color:#ffd36a}.dashboard-hero h1{font-size:clamp(34px,4vw,56px);margin:4px 0 10px;letter-spacing:-1.4px}.dashboard-hero h1 span{color:#aee462}.dashboard-hero p{max-width:720px;color:#d8e7f7;line-height:1.6;font-size:17px}.subscription-card{min-width:220px;background:#fff;color:var(--navy);border-radius:24px;padding:19px 20px;display:flex;align-items:center;gap:14px;position:relative;z-index:2;box-shadow:0 15px 35px rgba(0,0,0,.12)}.subscription-card__dot{width:16px;height:16px;background:var(--green);border-radius:50%;box-shadow:0 0 0 6px #eef8dd}.subscription-card small,.subscription-card span{display:block;color:#7b91a6;font-size:11px}.subscription-card strong{display:block;font-size:20px;color:#4d8024;margin:2px 0}
.dashboard-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:280px 1fr;gap:24px}.child-card,.learning-card{background:#fff;border:1px solid #e5eef6;border-radius:30px;box-shadow:0 16px 40px rgba(31,74,123,.08)}.child-card{padding:28px}.child-card__avatar{width:78px;height:78px;border-radius:25px;background:linear-gradient(145deg,#fff1a7,#ffd76d);display:grid;place-items:center;font-size:36px;color:#f59b21;margin-bottom:22px}.child-card h2{font-size:24px;color:var(--navy);margin:5px 0}.child-card>p{color:#8194a6;margin-top:4px}.child-stat{display:flex;justify-content:space-between;gap:15px;padding:15px 0;border-top:1px solid #edf2f6;color:#72879b;font-size:13px}.child-stat strong{color:var(--navy)}
.learning-card{padding:28px}.learning-card__head{display:flex;align-items:center;justify-content:space-between;gap:25px}.learning-card__head h2{font-size:35px;color:var(--navy);margin:3px 0}.learning-card__head p{margin:0;color:#7b91a6}.learning-card__head img{width:90px;border-radius:11px;box-shadow:0 10px 22px rgba(31,74,123,.18)}.dashboard-progress{height:11px;background:#edf3f7;border-radius:20px;margin:24px 0;overflow:hidden}.dashboard-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--lime))}.dashboard-units{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.dash-unit{border:1px solid #e5edf4;background:#fbfdff;border-radius:18px;padding:14px;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;text-align:left;color:#7a8fa3;cursor:pointer;transition:.18s}.dash-unit:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,73,116,.08)}.dash-unit>span{width:44px;height:44px;border-radius:14px;background:#eef4f9;display:grid;place-items:center;color:var(--navy);font-weight:1000}.dash-unit strong{display:block;color:#294d70}.dash-unit small{font-size:11px}.dash-unit b{font-size:10px;letter-spacing:.6px;background:#eef2f6;padding:6px 8px;border-radius:999px}.dash-unit--active{background:#f8ffef;border-color:#cfe9ae}.dash-unit--active>span{background:var(--green);color:#fff}.dash-unit--active b{background:#def0c5;color:#4e7a28}
.future-books{max-width:1180px;margin:28px auto 0;background:#fff;border:1px solid #e5eef6;border-radius:28px;padding:25px 28px;box-shadow:0 12px 30px rgba(31,74,123,.06)}.future-books__head{display:flex;justify-content:space-between;align-items:end;gap:20px}.future-books__head h2{color:var(--navy);margin:3px 0 0}.future-books__head>span{color:#8093a6;font-size:13px}.future-books__row{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-top:18px}.future-book{height:66px;border-radius:16px;background:#f2f6f9;color:#6f8498;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:1000}.future-book small{font-size:7px;letter-spacing:.5px;margin-top:4px}.future-book--active{background:linear-gradient(145deg,#79b63c,#9fce5d);color:#fff}
body.dashboard-mode>header,body.dashboard-mode>main,body.dashboard-mode>.sky-dot{display:none!important}body.dashboard-mode>.site-footer{margin-top:0}
@media(max-width:900px){.dashboard-grid{grid-template-columns:1fr}.child-card{display:grid;grid-template-columns:auto 1fr;gap:0 18px}.child-card__avatar{grid-row:1/4}.future-books__row{grid-template-columns:repeat(6,1fr)}}
@media(max-width:650px){.dashboard-topbar{padding:16px}.dashboard-user small,.dashboard-user strong{display:none}.dashboard-hero{margin:10px 16px 20px;padding:28px 22px;flex-direction:column;align-items:flex-start}.subscription-card{width:100%;min-width:0}.dashboard-grid{padding:0 16px}.dashboard-units{grid-template-columns:1fr}.learning-card__head img{width:70px}.future-books{margin:20px 16px 0;padding:22px 18px}.future-books__head{align-items:flex-start;flex-direction:column}.future-books__row{grid-template-columns:repeat(4,1fr)}}


/* ===== V7: Unit 1 interactive lesson ===== */
.lesson-shell{min-height:100vh;background:linear-gradient(180deg,#eff9ff 0,#fff9e9 52%,#f6fff2 100%);padding:0 24px 48px;color:#122a52}
.lesson-shell[hidden]{display:none!important}
.lesson-topbar{max-width:1180px;margin:0 auto;min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.lesson-back{border:2px solid #d4e2f1;background:#fff;color:#173c7a;border-radius:16px;padding:11px 17px;font:inherit;font-weight:900;cursor:pointer;box-shadow:0 7px 18px rgba(30,70,120,.08)}
.lesson-title{text-align:center;display:flex;flex-direction:column;line-height:1.1}.lesson-title span{font-size:12px;font-weight:900;letter-spacing:.11em;color:#6d7e95}.lesson-title strong{font-size:24px;color:#173c7a}
.lesson-stars{display:flex;align-items:center;gap:8px;border-radius:999px;background:#fff5bd;padding:9px 16px;color:#cb8700;font-size:22px;font-weight:950}.lesson-stars b{color:#173c7a;font-size:18px}
.lesson-progress-wrap{max-width:930px;margin:0 auto 24px}.lesson-progress-label{display:flex;justify-content:space-between;font-size:13px;font-weight:900;margin-bottom:8px;color:#60718a}.lesson-progress{height:13px;background:#dfeaf4;border-radius:99px;overflow:hidden}.lesson-progress span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#35b95f,#ffd447,#ff8b32);transition:width .35s ease}
.lesson-stage{max-width:1020px;margin:0 auto}.lesson-screen{display:none;background:rgba(255,255,255,.95);border:1px solid #dfeaf4;border-radius:34px;padding:34px;box-shadow:0 24px 70px rgba(34,75,115,.13);text-align:center}.lesson-screen.is-active{display:block;animation:lessonIn .3s ease}@keyframes lessonIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.lesson-kicker{font-weight:950;letter-spacing:.12em;font-size:12px;color:#ec7b22;margin-bottom:9px}.lesson-screen h1{font-size:clamp(32px,5vw,56px);line-height:1.02;margin:0;color:#173c7a}.lesson-lead{font-size:18px;color:#5d7089;max-width:700px;margin:14px auto 26px}
.picture-grid{display:grid;gap:20px;margin:22px auto}.picture-grid--3{grid-template-columns:repeat(3,1fr)}.picture-grid--2{grid-template-columns:repeat(2,minmax(0,320px));justify-content:center}.picture-card{border:2px solid #dce9f3;background:#fff;border-radius:24px;padding:12px;cursor:pointer;font:inherit;color:#173c7a;transition:.18s ease;box-shadow:0 8px 20px rgba(34,75,115,.07)}.picture-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(34,75,115,.14)}.picture-card img{width:100%;height:230px;object-fit:contain;border-radius:16px;background:#fff}.picture-card b{display:block;font-size:21px;margin-top:8px}.picture-card span{display:block;font-size:13px;color:#6d7e95;margin-top:5px}.picture-card.is-correct{border-color:#43bb65;box-shadow:0 0 0 4px rgba(67,187,101,.14)}.picture-card.is-wrong{border-color:#ef6d69;animation:shake .25s linear}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.repeat-strip{display:flex;align-items:center;gap:15px;text-align:left;max-width:730px;margin:20px auto 28px;padding:17px 20px;border-radius:20px;background:#eef8ff;border:1px solid #d5eafb}.repeat-strip>span{font-size:32px}.repeat-strip b,.repeat-strip strong{display:block}.repeat-strip strong{color:#288a49;margin-top:4px}.lesson-next{min-width:170px}
.listen-button,.listen-mini{border:0;background:#173c7a;color:#fff;font:inherit;font-weight:950;border-radius:999px;padding:15px 24px;cursor:pointer;box-shadow:0 10px 24px rgba(23,60,122,.22)}.listen-button{font-size:17px;margin-bottom:6px}.listen-mini{margin:16px 0 20px;background:#2487d6}.listen-button:hover,.listen-mini:hover{transform:translateY(-2px)}
.focus-picture{width:min(310px,75vw);margin:18px auto 5px}.focus-picture img{width:100%;height:280px;object-fit:contain;border:2px solid #dce9f3;border-radius:26px;background:#fff}
.answer-grid{max-width:690px;margin:0 auto;display:grid;gap:12px}.answer-grid--2{grid-template-columns:repeat(2,1fr)}.answer-option{border:2px solid #dbe7f1;background:#fff;border-radius:18px;padding:16px 18px;font:inherit;font-size:18px;font-weight:900;color:#173c7a;cursor:pointer;transition:.15s ease}.answer-option:hover{border-color:#69a7da;background:#f4faff}.answer-option.is-correct{background:#e9faed;border-color:#43bb65;color:#218545}.answer-option.is-wrong{background:#fff0ef;border-color:#ef6d69;color:#c54642}
.lesson-feedback{min-height:36px;margin:15px auto 0;font-size:17px;font-weight:900}.lesson-feedback.good{color:#258849}.lesson-feedback.bad{color:#c74c48}.lesson-feedback .continue-btn{margin-left:10px;border:0;border-radius:999px;background:#2eb35c;color:#fff;padding:8px 14px;font:inherit;font-weight:900;cursor:pointer}
.lesson-finish{padding-top:54px;padding-bottom:54px}.finish-stars{font-size:44px;color:#ffc928;letter-spacing:8px;margin-bottom:12px}.lesson-finish p{font-size:18px;color:#5f728a;max-width:600px;margin:15px auto 25px}.finish-score{display:inline-flex;gap:30px;align-items:center;background:#fff7c9;border-radius:22px;padding:15px 25px;margin-bottom:25px}.finish-score span{font-weight:800}.finish-score strong{font-size:24px;color:#c47d00}.finish-actions{display:flex;gap:12px;justify-content:center;margin-bottom:22px}.lesson-finish small{display:block;color:#8090a3}
.dashboard-mode .site-footer{display:block}.lesson-mode>main,.lesson-mode>.site-header,.lesson-mode>#dashboard,.lesson-mode>.site-footer,.lesson-mode>.sky-dot{display:none!important}
@media(max-width:760px){.lesson-shell{padding:0 12px 30px}.lesson-topbar{min-height:74px}.lesson-title span{display:none}.lesson-title strong{font-size:19px}.lesson-screen{padding:24px 15px;border-radius:25px}.picture-grid--3{grid-template-columns:1fr}.picture-grid--2{grid-template-columns:1fr}.picture-card img{height:210px}.answer-grid--2{grid-template-columns:1fr}.finish-actions{flex-direction:column}.lesson-back{padding:9px 12px}.lesson-stars{padding:8px 12px}.learn-cards .picture-card{display:grid;grid-template-columns:120px 1fr;align-items:center;text-align:left}.learn-cards .picture-card img{height:135px;grid-row:1/3}.learn-cards .picture-card b{font-size:22px}.learn-cards .picture-card span{font-size:14px}}


/* ===== V7.7 — tylko branding, bez ruszania layoutu V7 ===== */
.hero__copy{
  position:relative;
}
.direct-english-topright{
  position:absolute;
  top:2px;
  right:0;
  z-index:2;
  line-height:0;
}
.direct-english-topright img{
  display:block;
  width:104px;
  height:auto;
  max-height:28px;
  object-fit:contain;
  background:transparent;
}

.cb-footer{
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
.cb-official-rosette{
  display:inline-block;
  width:27px;
  height:27px;
  flex:0 0 27px;
  background-image:url("https://computerbest.pl/assets/brand/computerbest-logo.png");
  background-repeat:no-repeat;
  background-position:left center;
  background-size:auto 27px;
}

@media(max-width:900px){
  .direct-english-topright{
    top:0;
    right:0;
  }
  .direct-english-topright img{
    width:92px;
    max-height:25px;
  }
}
@media(max-width:700px){
  .direct-english-topright{
    position:static;
    display:flex;
    justify-content:flex-end;
    margin:-2px 0 8px;
  }
  .direct-english-topright img{
    width:88px;
    max-height:24px;
  }
  .cb-footer{justify-content:center}
}

/* V8 backend – drobne stany bez zmiany layoutu */
.subscription-card strong.is-inactive{color:#b42318}
#authSubmit:disabled{opacity:.68;cursor:wait}



/* ===== V8.2 — poprawione logotypy metody ===== */
.method-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  width: 100%;
}

.method-brand-row .eyebrow {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.method-brand-logos {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.method-brand-logo {
  display: block;
  object-fit: contain;
  max-width: none;
  background: transparent;
}

.method-brand-logo--direct {
  width: 108px !important;
  height: 30px !important;
}

.method-brand-logo--englishbest {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50%;
}

@media (max-width: 760px) {
  .method-brand-row {
    gap: 10px;
  }

  .method-brand-row .eyebrow {
    font-size: 12px;
  }

  .method-brand-logos {
    gap: 7px;
  }

  .method-brand-logo--direct {
    width: 90px !important;
    height: 25px !important;
  }

  .method-brand-logo--englishbest {
    width: 38px !important;
    height: 38px !important;
  }
}

@media (max-width: 560px) {
  .method-brand-row {
    align-items: flex-start;
  }

  .method-brand-logos {
    flex: 0 0 auto;
  }

  .method-brand-logo--direct {
    width: 78px !important;
    height: 22px !important;
  }

  .method-brand-logo--englishbest {
    width: 34px !important;
    height: 34px !important;
  }
}


/* ===== V8.8 Unit 2 — MOVE & SAY ===== */
.dash-unit--ready{background:linear-gradient(135deg,#fff8e8,#f2fbff);border-color:#ffd89a}
.dash-unit--ready>span{background:linear-gradient(145deg,#ff9c37,#ffd54b);color:#fff;box-shadow:0 7px 18px rgba(244,151,45,.24)}
.dash-unit--ready b{background:#fff0c7;color:#a65a00}
.lesson-shell--unit2{background:
  radial-gradient(circle at 12% 13%,rgba(255,214,78,.24),transparent 25%),
  radial-gradient(circle at 87% 18%,rgba(85,190,225,.20),transparent 26%),
  linear-gradient(180deg,#f4fbff 0,#fff9e8 48%,#f2fff5 100%)}
.lesson-shell--unit2 .lesson-kicker{color:#ef8426}
.unit2-card img{background:transparent!important}
.unit2-card{overflow:hidden;position:relative}
.unit2-card::before{content:"";position:absolute;inset:0;opacity:.62;pointer-events:none}
.unit2-card>*{position:relative;z-index:1}
.unit2-card--walk{background:linear-gradient(145deg,#fff6cf,#fffdf2)}
.unit2-card--swim{background:linear-gradient(145deg,#dff6ff,#f8fdff)}
.unit2-card--mouse{background:linear-gradient(145deg,#f2ebff,#fcfaff)}
.unit2-card--frog{background:linear-gradient(145deg,#e5f8dd,#fbfff8)}
.unit2-card img{height:250px;object-fit:contain;padding:12px}
.unit2-focus{border-radius:28px;padding:14px;background:linear-gradient(145deg,#fff8df,#eefaff)}
.unit2-focus img{border:none!important;background:transparent!important}
.move-challenge{max-width:620px;margin:20px auto 22px;padding:24px;border-radius:28px;background:linear-gradient(145deg,#fff7d7,#eaf8ff);border:2px dashed #ffd269}
.move-challenge__icon{font-size:68px;line-height:1;margin-bottom:8px}
.move-challenge p{margin:13px 0 0;color:#5d7089;font-weight:700}
.unit2-mix-grid{max-width:760px}
.lesson-shell--unit2 .finish-stars{color:#ffb72d}
@media(max-width:760px){
  .unit2-card img{height:190px}
  .unit2-mix-grid{grid-template-columns:repeat(2,1fr)!important}
  .unit2-mix-grid .picture-card img{height:145px}
  .unit2-mix-grid .picture-card b{font-size:16px}
}


/* ===== V8.8.4 Unit 2 Book 1 colour graphics ===== */
.lesson-shell--unit2 .unit2-card{
  min-height: 360px;
  border-radius: 28px;
  padding: 18px 18px 16px;
}
.lesson-shell--unit2 .unit2-card img{
  width: 100%;
  height: 250px;
  object-fit: contain;
  object-position: center center;
  padding: 4px;
  background: transparent !important;
  border: 0 !important;
}
.lesson-shell--unit2 .unit2-card b{
  margin-top: 6px;
  letter-spacing: .03em;
}
.lesson-shell--unit2 .unit2-card span{
  display:block;
  margin-top: 6px;
}
.lesson-shell--unit2 .focus-picture{
  padding: 18px;
}
.lesson-shell--unit2 .focus-picture img{
  width: min(100%, 430px);
  height: auto;
  max-height: 280px;
  object-fit: contain;
}
.lesson-shell--unit2 .quiz-pictures .picture-card{
  min-height: 310px;
}
.lesson-shell--unit2 .quiz-pictures .picture-card img{
  height: 205px;
}
@media (max-width: 760px){
  .lesson-shell--unit2 .unit2-card{
    min-height: 300px;
    padding: 14px 14px 14px;
  }
  .lesson-shell--unit2 .unit2-card img{
    height: 180px;
  }
  .lesson-shell--unit2 .quiz-pictures .picture-card{
    min-height: 250px;
  }
  .lesson-shell--unit2 .quiz-pictures .picture-card img{
    height: 150px;
  }
}


/* ===== V8.8.8 Unit 2 mobile layout fix ===== */
@media (max-width: 760px){
  .lesson-shell--unit2{
    padding-left: 8px;
    padding-right: 8px;
  }

  .lesson-shell--unit2 .lesson-screen{
    padding: 22px 12px 24px;
    border-radius: 24px;
  }

  .lesson-shell--unit2 .lesson-screen h1{
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.05;
    margin-top: 2px;
  }

  .lesson-shell--unit2 .lesson-lead{
    font-size: 16px;
    line-height: 1.4;
    margin: 10px auto 18px;
  }

  /* Unit 2 learning cards: compact horizontal layout on phones */
  .lesson-shell--unit2 .learn-cards{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 16px auto 18px;
  }

  .lesson-shell--unit2 .learn-cards .unit2-card{
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 118px minmax(0,1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 14px;
    row-gap: 4px;
    align-items: center;
    text-align: left;
    padding: 14px !important;
    border-radius: 22px;
  }

  .lesson-shell--unit2 .learn-cards .unit2-card img{
    width: 118px !important;
    height: 118px !important;
    max-width: 118px !important;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: contain !important;
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
  }

  .lesson-shell--unit2 .learn-cards .unit2-card b{
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    font-size: 21px !important;
    line-height: 1.1;
    align-self: end;
  }

  .lesson-shell--unit2 .learn-cards .unit2-card span{
    grid-column: 2;
    grid-row: 2;
    margin: 2px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.25;
    align-self: start;
  }

  .lesson-shell--unit2 .repeat-strip{
    margin: 14px auto 18px;
    padding: 14px 15px;
    gap: 11px;
    border-radius: 18px;
  }

  .lesson-shell--unit2 .repeat-strip>span{
    font-size: 26px;
    flex: 0 0 auto;
  }

  .lesson-shell--unit2 .repeat-strip b,
  .lesson-shell--unit2 .repeat-strip strong{
    font-size: 14px;
    line-height: 1.3;
  }

  /* Question screens */
  .lesson-shell--unit2 .unit2-focus{
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    padding: 12px;
  }

  .lesson-shell--unit2 .unit2-focus img{
    width: 100% !important;
    height: 190px !important;
    max-height: 190px !important;
    object-fit: contain !important;
  }

  /* 4-choice final challenge: still 2 columns, but compact */
  .lesson-shell--unit2 .unit2-mix-grid{
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px;
  }

  .lesson-shell--unit2 .unit2-mix-grid .unit2-card{
    min-height: 0 !important;
    padding: 10px !important;
  }

  .lesson-shell--unit2 .unit2-mix-grid .unit2-card img{
    height: 120px !important;
    padding: 0 !important;
  }

  .lesson-shell--unit2 .unit2-mix-grid .unit2-card b{
    font-size: 15px !important;
    margin-top: 5px !important;
  }
}

@media (max-width: 390px){
  .lesson-shell--unit2 .learn-cards .unit2-card{
    grid-template-columns: 102px minmax(0,1fr) !important;
    column-gap: 11px;
  }
  .lesson-shell--unit2 .learn-cards .unit2-card img{
    width: 102px !important;
    height: 102px !important;
    max-width: 102px !important;
  }
  .lesson-shell--unit2 .learn-cards .unit2-card b{
    font-size: 19px !important;
  }
}


/* ===== V8.9.0 — UNIT 2 PREMIUM MOBILE ===== */
@media (max-width: 760px){

  /* Overall spacing */
  #lessonUnit2{
    background:
      radial-gradient(circle at 15% 8%, rgba(255,223,117,.22), transparent 28%),
      radial-gradient(circle at 90% 12%, rgba(104,206,255,.18), transparent 25%),
      linear-gradient(180deg,#f9fcff 0%,#fffdf8 100%);
  }

  #lessonUnit2 .lesson-topbar{
    padding: 14px 14px 10px;
    gap: 10px;
    align-items:center;
  }

  #lessonUnit2 .lesson-title strong{
    font-size: 18px;
    line-height: 1.15;
    text-align:center;
  }

  #lessonUnit2 .lesson-title span{
    font-size: 11px;
  }

  #lessonUnit2 .lesson-back{
    min-width: 74px;
    padding: 10px 12px;
    border-radius: 18px;
    font-size: 14px;
  }

  #lessonUnit2 .lesson-stars{
    min-width: 72px;
    justify-content:center;
    padding: 10px 12px;
    border-radius: 18px;
  }

  #lessonUnit2 .lesson-progress-wrap{
    padding: 4px 18px 14px;
  }

  #lessonUnit2 .lesson-stage{
    padding: 0 10px 24px;
  }

  #lessonUnit2 .lesson-screen{
    max-width: 680px;
    margin: 0 auto;
    padding: 24px 16px 26px;
    border-radius: 28px;
    box-shadow: 0 18px 42px rgba(38,74,116,.10);
  }

  #lessonUnit2 .lesson-kicker{
    font-size: 12px;
    letter-spacing: .18em;
    margin-bottom: 8px;
  }

  #lessonUnit2 .lesson-screen h1{
    font-size: clamp(30px, 8.5vw, 40px);
    line-height: 1.02;
    letter-spacing: -.025em;
    margin: 0 0 12px;
    text-align:center;
  }

  #lessonUnit2 .lesson-lead{
    max-width: 560px;
    margin: 0 auto 22px;
    font-size: 16px;
    line-height: 1.45;
    text-align:center;
  }

  /* PREMIUM LEARNING CARDS — centered, balanced, no side drift */
  #lessonUnit2 .learn-cards{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width:100%;
    max-width: 560px;
    margin: 0 auto 18px !important;
  }

  #lessonUnit2 .learn-cards .unit2-card{
    display:grid !important;
    grid-template-columns: 132px minmax(0,1fr) !important;
    grid-template-rows: auto auto !important;
    align-items:center !important;
    column-gap: 16px !important;
    row-gap: 6px !important;
    width:100% !important;
    min-height: 156px !important;
    height:auto !important;
    margin:0 !important;
    padding: 14px 16px !important;
    border-radius: 24px !important;
    text-align:left !important;
    overflow:hidden !important;
    box-shadow:
      0 12px 28px rgba(34,67,105,.08),
      inset 0 0 0 1px rgba(255,255,255,.8);
  }

  #lessonUnit2 .learn-cards .unit2-card img{
    grid-column:1 !important;
    grid-row:1 / 3 !important;
    width:132px !important;
    height:132px !important;
    max-width:132px !important;
    min-width:132px !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:contain !important;
    object-position:center !important;
    justify-self:center !important;
    align-self:center !important;
    border-radius:18px !important;
  }

  #lessonUnit2 .learn-cards .unit2-card b{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:end !important;
    margin:0 !important;
    font-size:23px !important;
    line-height:1.05 !important;
    letter-spacing:.015em !important;
    text-align:left !important;
  }

  #lessonUnit2 .learn-cards .unit2-card span{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
    margin:0 !important;
    font-size:15px !important;
    line-height:1.3 !important;
    text-align:left !important;
    opacity:.9;
  }

  /* Repeat panel */
  #lessonUnit2 .repeat-strip{
    width:100%;
    max-width:560px;
    margin: 14px auto 18px !important;
    padding: 14px 16px !important;
    border-radius: 20px !important;
    display:flex;
    align-items:flex-start;
    gap:12px;
  }

  #lessonUnit2 .repeat-strip>span{
    font-size:26px;
    line-height:1;
    margin-top:2px;
  }

  #lessonUnit2 .repeat-strip b,
  #lessonUnit2 .repeat-strip strong{
    display:block;
    font-size:14px !important;
    line-height:1.35 !important;
  }

  /* Focus image on question screens */
  #lessonUnit2 .unit2-focus{
    width:100%;
    max-width:360px;
    margin: 16px auto 18px !important;
    padding: 14px !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 26px rgba(32,66,106,.08);
  }

  #lessonUnit2 .unit2-focus img{
    display:block !important;
    width:100% !important;
    height:220px !important;
    max-height:220px !important;
    object-fit:contain !important;
    margin:0 auto !important;
  }

  /* Answer buttons */
  #lessonUnit2 .answer-grid{
    width:100%;
    max-width:560px;
    margin: 14px auto 0 !important;
    gap:10px !important;
  }

  #lessonUnit2 .answer-option{
    min-height:58px;
    padding:14px 16px;
    border-radius:18px;
    font-size:16px;
    line-height:1.25;
  }

  #lessonUnit2 .listen-button,
  #lessonUnit2 .listen-mini{
    margin-left:auto;
    margin-right:auto;
  }

  /* Final mixed grid */
  #lessonUnit2 .unit2-mix-grid{
    width:100%;
    max-width:560px;
    margin: 18px auto 0 !important;
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap:12px !important;
  }

  #lessonUnit2 .unit2-mix-grid .unit2-card{
    min-height: 210px !important;
    height:auto !important;
    padding:12px !important;
    border-radius:22px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  #lessonUnit2 .unit2-mix-grid .unit2-card img{
    width:100% !important;
    height:135px !important;
    object-fit:contain !important;
    margin:0 auto 8px !important;
    padding:0 !important;
  }

  #lessonUnit2 .unit2-mix-grid .unit2-card b{
    font-size:16px !important;
    margin:0 !important;
    text-align:center !important;
  }
}

@media (max-width: 390px){
  #lessonUnit2 .lesson-stage{
    padding-left:6px;
    padding-right:6px;
  }

  #lessonUnit2 .lesson-screen{
    padding-left:12px;
    padding-right:12px;
  }

  #lessonUnit2 .learn-cards .unit2-card{
    grid-template-columns: 112px minmax(0,1fr) !important;
    column-gap:12px !important;
    padding:12px 13px !important;
    min-height:138px !important;
  }

  #lessonUnit2 .learn-cards .unit2-card img{
    width:112px !important;
    height:112px !important;
    max-width:112px !important;
    min-width:112px !important;
  }

  #lessonUnit2 .learn-cards .unit2-card b{
    font-size:20px !important;
  }

  #lessonUnit2 .learn-cards .unit2-card span{
    font-size:14px !important;
  }
}


/* ===== V8.9.1 — UNIT 2 PREMIUM VERTICAL CARDS ===== */
@media (max-width: 760px){

  /* User-approved mobile hierarchy:
     TITLE -> IMAGE -> PHRASE */
  #lessonUnit2 .learn-cards{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap:18px !important;
    width:100%;
    max-width:560px;
    margin:0 auto 20px !important;
  }

  #lessonUnit2 .learn-cards .unit2-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    padding:22px 18px 20px !important;
    margin:0 !important;
    text-align:center !important;
    border-radius:26px !important;
    overflow:hidden !important;
    box-shadow:
      0 14px 34px rgba(34,67,105,.09),
      inset 0 0 0 1px rgba(255,255,255,.88);
  }

  #lessonUnit2 .learn-cards .unit2-card b{
    order:1 !important;
    width:100% !important;
    margin:0 0 16px !important;
    padding:0 8px !important;
    font-size:25px !important;
    line-height:1.05 !important;
    letter-spacing:.015em !important;
    text-align:center !important;
  }

  #lessonUnit2 .learn-cards .unit2-card img{
    order:2 !important;
    display:block !important;
    width:min(74vw, 250px) !important;
    height:auto !important;
    max-width:250px !important;
    min-width:0 !important;
    max-height:250px !important;
    margin:0 auto 16px !important;
    padding:0 !important;
    object-fit:contain !important;
    object-position:center center !important;
    border-radius:20px !important;
  }

  #lessonUnit2 .learn-cards .unit2-card span{
    order:3 !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 8px 2px !important;
    font-size:16px !important;
    line-height:1.35 !important;
    text-align:center !important;
    color:#61738c !important;
  }

  /* Keep question cards visually centered too */
  #lessonUnit2 .unit2-focus{
    width:100% !important;
    max-width:340px !important;
    margin:16px auto 18px !important;
    padding:16px !important;
    text-align:center !important;
  }

  #lessonUnit2 .unit2-focus img{
    display:block !important;
    width:min(68vw, 240px) !important;
    height:auto !important;
    max-height:240px !important;
    margin:0 auto !important;
    object-fit:contain !important;
  }
}

@media (max-width: 390px){
  #lessonUnit2 .learn-cards .unit2-card{
    padding:20px 14px 18px !important;
    border-radius:24px !important;
  }

  #lessonUnit2 .learn-cards .unit2-card b{
    font-size:23px !important;
    margin-bottom:14px !important;
  }

  #lessonUnit2 .learn-cards .unit2-card img{
    width:min(70vw, 220px) !important;
    max-width:220px !important;
    max-height:220px !important;
    margin-bottom:14px !important;
  }

  #lessonUnit2 .learn-cards .unit2-card span{
    font-size:15px !important;
  }
}

/* ===== V9.0 Unit 3 — COLOURS & COMMUNICATION ===== */
.lesson-shell--unit3{background:
  radial-gradient(circle at 10% 12%,rgba(255,228,108,.22),transparent 24%),
  radial-gradient(circle at 88% 18%,rgba(96,195,255,.18),transparent 26%),
  radial-gradient(circle at 82% 76%,rgba(105,214,126,.15),transparent 24%),
  linear-gradient(180deg,#f7fbff 0,#fffdf3 52%,#f4fff6 100%)}
.lesson-shell--unit3 .lesson-kicker{color:#ef8426}
.unit3-card{overflow:hidden;position:relative}
.unit3-card img{background:transparent!important}
.unit3-card::before{content:"";position:absolute;inset:0;opacity:.64;pointer-events:none}
.unit3-card>*{position:relative;z-index:1}
.unit3-card--blue{background:linear-gradient(145deg,#e6f4ff,#f8fcff)}
.unit3-card--red{background:linear-gradient(145deg,#ffe8ef,#fff9fb)}
.unit3-card--green{background:linear-gradient(145deg,#e8f8e6,#fcfffb)}
.unit3-card--yellow{background:linear-gradient(145deg,#fff7d3,#fffdf4)}
.unit3-card--flying{background:linear-gradient(145deg,#eaf6ff,#fff4fb)}
.unit3-card--standing{background:linear-gradient(145deg,#fff7d8,#fffaf0)}
.unit3-card--walking{background:linear-gradient(145deg,#eefbe6,#fbfffb)}

.lesson-shell--unit3 .unit3-card{
  min-height: 340px;
  border-radius: 28px;
  padding: 18px 18px 16px;
}
.lesson-shell--unit3 .unit3-card img{
  width: 100%;
  height: 230px;
  object-fit: contain;
  object-position: center center;
  padding: 6px;
  border:0!important;
}
.lesson-shell--unit3 .unit3-card b{
  margin-top: 6px;
  letter-spacing: .03em;
}
.lesson-shell--unit3 .unit3-card span{
  display:block;
  margin-top: 6px;
}
.lesson-shell--unit3 .focus-picture{
  padding: 18px;
}
.lesson-shell--unit3 .focus-picture img{
  width: min(100%, 430px);
  height: auto;
  max-height: 280px;
  object-fit: contain;
}
.lesson-shell--unit3 .quiz-pictures .picture-card{
  min-height: 300px;
}
.lesson-shell--unit3 .quiz-pictures .picture-card img{
  height: 185px;
}
.lesson-shell--unit3 .finish-stars{color:#ffb72d}
.unit3-colour-grid{max-width: 820px}
.unit3-action-grid{max-width: 960px}
.unit3-focus{border-radius:28px;padding:14px;background:linear-gradient(145deg,#fff9df,#eefaff)}
.unit3-focus img{border:none!important;background:transparent!important}

@media (max-width: 760px){
  #lessonUnit3{
    background:
      radial-gradient(circle at 15% 8%, rgba(255,223,117,.22), transparent 28%),
      radial-gradient(circle at 90% 12%, rgba(104,206,255,.18), transparent 25%),
      linear-gradient(180deg,#f9fcff 0%,#fffdf8 100%);
  }

  #lessonUnit3 .lesson-topbar{
    padding: 14px 14px 10px;
    gap: 10px;
    align-items:center;
  }

  #lessonUnit3 .lesson-title strong{
    font-size: 18px;
    line-height: 1.15;
    text-align:center;
  }

  #lessonUnit3 .lesson-title span{
    font-size: 11px;
  }

  #lessonUnit3 .lesson-back{
    min-width: 74px;
    padding: 10px 12px;
    border-radius: 18px;
    font-size: 14px;
  }

  #lessonUnit3 .lesson-stars{
    min-width: 72px;
    justify-content:center;
    padding: 10px 12px;
    border-radius: 18px;
  }

  #lessonUnit3 .lesson-progress-wrap{
    padding: 4px 18px 14px;
  }

  #lessonUnit3 .lesson-stage{
    padding: 0 10px 24px;
  }

  #lessonUnit3 .lesson-screen{
    max-width: 680px;
    margin: 0 auto;
    padding: 24px 16px 26px;
    border-radius: 28px;
    box-shadow: 0 18px 42px rgba(38,74,116,.10);
  }

  #lessonUnit3 .lesson-kicker{
    font-size: 12px;
    letter-spacing: .18em;
    margin-bottom: 8px;
  }

  #lessonUnit3 .lesson-screen h1{
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.02;
    letter-spacing: -.025em;
    margin: 0 0 12px;
    text-align:center;
  }

  #lessonUnit3 .lesson-lead{
    max-width: 560px;
    margin: 0 auto 22px;
    font-size: 16px;
    line-height: 1.45;
    text-align:center;
  }

  /* User-approved mobile hierarchy: title -> image -> phrase */
  #lessonUnit3 .learn-cards{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap:18px !important;
    width:100%;
    max-width:560px;
    margin:0 auto 20px !important;
  }

  #lessonUnit3 .learn-cards .unit3-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    padding:22px 18px 20px !important;
    margin:0 !important;
    text-align:center !important;
    border-radius:26px !important;
    overflow:hidden !important;
    box-shadow:
      0 14px 34px rgba(34,67,105,.09),
      inset 0 0 0 1px rgba(255,255,255,.88);
  }

  #lessonUnit3 .learn-cards .unit3-card b{
    order:1 !important;
    width:100% !important;
    margin:0 0 16px !important;
    padding:0 8px !important;
    font-size:24px !important;
    line-height:1.05 !important;
    text-align:center !important;
  }

  #lessonUnit3 .learn-cards .unit3-card img{
    order:2 !important;
    display:block !important;
    width:min(74vw, 250px) !important;
    height:auto !important;
    max-width:250px !important;
    min-width:0 !important;
    max-height:250px !important;
    margin:0 auto 16px !important;
    padding:0 !important;
    object-fit:contain !important;
    object-position:center center !important;
    border-radius:20px !important;
  }

  #lessonUnit3 .learn-cards .unit3-card span{
    order:3 !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 8px 2px !important;
    font-size:16px !important;
    line-height:1.35 !important;
    text-align:center !important;
    color:#61738c !important;
  }

  #lessonUnit3 .repeat-strip{
    width:100%;
    max-width:560px;
    margin: 14px auto 18px !important;
    padding: 14px 16px !important;
    border-radius: 20px !important;
    display:flex;
    align-items:flex-start;
    gap:12px;
  }

  #lessonUnit3 .repeat-strip>span{
    font-size:26px;
    line-height:1;
    margin-top:2px;
  }

  #lessonUnit3 .repeat-strip b,
  #lessonUnit3 .repeat-strip strong{
    display:block;
    font-size:14px !important;
    line-height:1.35 !important;
  }

  #lessonUnit3 .unit3-focus{
    width:100% !important;
    max-width:340px !important;
    margin:16px auto 18px !important;
    padding:16px !important;
    text-align:center !important;
  }

  #lessonUnit3 .unit3-focus img{
    display:block !important;
    width:min(68vw, 240px) !important;
    height:auto !important;
    max-height:240px !important;
    margin:0 auto !important;
    object-fit:contain !important;
  }

  #lessonUnit3 .answer-grid{
    width:100%;
    max-width:560px;
    margin: 14px auto 0 !important;
    gap:10px !important;
  }

  #lessonUnit3 .answer-option{
    min-height:58px;
    padding:14px 16px;
    border-radius:18px;
    font-size:16px;
    line-height:1.25;
  }

  #lessonUnit3 .listen-button,
  #lessonUnit3 .listen-mini{
    margin-left:auto;
    margin-right:auto;
  }

  #lessonUnit3 .unit3-colour-grid.quiz-pictures{
    width:100%;
    max-width:560px;
    margin:18px auto 0 !important;
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap:12px !important;
  }

  #lessonUnit3 .unit3-colour-grid.quiz-pictures .unit3-card,
  #lessonUnit3 .unit3-action-grid.quiz-pictures .unit3-card{
    min-height: 210px !important;
    height:auto !important;
    padding:12px !important;
    border-radius:22px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  #lessonUnit3 .unit3-colour-grid.quiz-pictures .unit3-card img,
  #lessonUnit3 .unit3-action-grid.quiz-pictures .unit3-card img{
    width:100% !important;
    height:128px !important;
    object-fit:contain !important;
    margin:0 auto 8px !important;
    padding:0 !important;
  }

  #lessonUnit3 .unit3-colour-grid.quiz-pictures .unit3-card b,
  #lessonUnit3 .unit3-action-grid.quiz-pictures .unit3-card b{
    font-size:16px !important;
    margin:0 !important;
    text-align:center !important;
  }

  #lessonUnit3 .unit3-action-grid.quiz-pictures{
    width:100%;
    max-width:560px;
    margin:18px auto 0 !important;
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap:12px !important;
  }
}

@media (max-width: 390px){
  #lessonUnit3 .lesson-stage{
    padding-left:6px;
    padding-right:6px;
  }

  #lessonUnit3 .lesson-screen{
    padding-left:12px;
    padding-right:12px;
  }

  #lessonUnit3 .learn-cards .unit3-card{
    padding:20px 14px 18px !important;
    border-radius:24px !important;
  }

  #lessonUnit3 .learn-cards .unit3-card b{
    font-size:22px !important;
    margin-bottom:14px !important;
  }

  #lessonUnit3 .learn-cards .unit3-card img{
    width:min(70vw, 220px) !important;
    max-width:220px !important;
    max-height:220px !important;
    margin-bottom:14px !important;
  }

  #lessonUnit3 .learn-cards .unit3-card span{
    font-size:15px !important;
  }

  #lessonUnit3 .unit3-colour-grid.quiz-pictures{
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}


/* ===== V9.1 Unit 4 — PEOPLE & ACTIONS ===== */
.lesson-shell--unit4{background:
  radial-gradient(circle at 12% 12%,rgba(120,200,255,.20),transparent 26%),
  radial-gradient(circle at 88% 18%,rgba(255,180,210,.18),transparent 25%),
  linear-gradient(180deg,#f8fcff 0,#fffafc 52%,#f8fff6 100%)}
.lesson-shell--unit4 .lesson-kicker{color:#ef8426}
.unit4-card{overflow:hidden;position:relative}
.unit4-card>*{position:relative;z-index:1}
.unit4-card img{background:transparent!important;border:0!important}
.unit4-card--john{background:linear-gradient(145deg,#eaf8e8,#fbfffb)}
.unit4-card--maggie{background:linear-gradient(145deg,#ffeaf3,#fff9fc)}
.unit4-card--dog{background:linear-gradient(145deg,#e8f5ff,#fbfdff)}
.unit4-card--cat{background:linear-gradient(145deg,#fff0f6,#fffafd)}
.unit4-card--boy{background:linear-gradient(145deg,#eef9e9,#fbfffa)}
.unit4-card--mike{background:linear-gradient(145deg,#edf4ff,#fbfdff)}
.unit4-card--jane{background:linear-gradient(145deg,#f3ecff,#fdfbff)}
.lesson-shell--unit4 .unit4-card{min-height:340px;border-radius:28px;padding:18px 18px 16px}
.lesson-shell--unit4 .unit4-card img{width:100%;height:230px;object-fit:contain;padding:6px}
.lesson-shell--unit4 .unit4-card b{margin-top:6px;letter-spacing:.03em}
.lesson-shell--unit4 .unit4-card span{display:block;margin-top:6px}
.lesson-shell--unit4 .unit4-focus{border-radius:28px;padding:16px;background:linear-gradient(145deg,#fff9e8,#eef7ff)}
.lesson-shell--unit4 .unit4-focus img{width:min(100%,430px);height:auto;max-height:280px;object-fit:contain}
.lesson-shell--unit4 .quiz-pictures .picture-card{min-height:300px}
.lesson-shell--unit4 .quiz-pictures .picture-card img{height:185px}
.lesson-shell--unit4 .finish-stars{color:#ffb72d}

@media (max-width:760px){
  #lessonUnit4 .lesson-topbar{padding:14px 14px 10px;gap:10px;align-items:center}
  #lessonUnit4 .lesson-title strong{font-size:18px;line-height:1.15;text-align:center}
  #lessonUnit4 .lesson-title span{font-size:11px}
  #lessonUnit4 .lesson-back{min-width:74px;padding:10px 12px;border-radius:18px;font-size:14px}
  #lessonUnit4 .lesson-stars{min-width:72px;justify-content:center;padding:10px 12px;border-radius:18px}
  #lessonUnit4 .lesson-progress-wrap{padding:4px 18px 14px}
  #lessonUnit4 .lesson-stage{padding:0 10px 24px}
  #lessonUnit4 .lesson-screen{max-width:680px;margin:0 auto;padding:24px 16px 26px;border-radius:28px;box-shadow:0 18px 42px rgba(38,74,116,.10)}
  #lessonUnit4 .lesson-kicker{font-size:12px;letter-spacing:.18em;margin-bottom:8px}
  #lessonUnit4 .lesson-screen h1{font-size:clamp(28px,8vw,38px);line-height:1.02;letter-spacing:-.025em;margin:0 0 12px;text-align:center}
  #lessonUnit4 .lesson-lead{max-width:560px;margin:0 auto 22px;font-size:16px;line-height:1.45;text-align:center}

  /* Approved premium mobile hierarchy: title -> image -> phrase */
  #lessonUnit4 .learn-cards{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;width:100%;max-width:560px;margin:0 auto 20px!important}
  #lessonUnit4 .learn-cards .unit4-card{
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    width:100%!important;min-height:0!important;height:auto!important;padding:22px 18px 20px!important;margin:0!important;text-align:center!important;
    border-radius:26px!important;box-shadow:0 14px 34px rgba(34,67,105,.09),inset 0 0 0 1px rgba(255,255,255,.88)
  }
  #lessonUnit4 .learn-cards .unit4-card b{order:1!important;width:100%!important;margin:0 0 16px!important;font-size:24px!important;line-height:1.05!important;text-align:center!important}
  #lessonUnit4 .learn-cards .unit4-card img{order:2!important;display:block!important;width:min(74vw,250px)!important;height:auto!important;max-width:250px!important;max-height:250px!important;margin:0 auto 16px!important;padding:0!important;object-fit:contain!important;border-radius:20px!important}
  #lessonUnit4 .learn-cards .unit4-card span{order:3!important;display:block!important;width:100%!important;margin:0!important;padding:0 8px 2px!important;font-size:16px!important;line-height:1.35!important;text-align:center!important;color:#61738c!important}

  #lessonUnit4 .unit4-focus{width:100%!important;max-width:340px!important;margin:16px auto 18px!important;padding:16px!important;text-align:center!important}
  #lessonUnit4 .unit4-focus img{display:block!important;width:min(68vw,240px)!important;height:auto!important;max-height:240px!important;margin:0 auto!important;object-fit:contain!important}
  #lessonUnit4 .answer-grid{width:100%;max-width:560px;margin:14px auto 0!important;gap:10px!important}
  #lessonUnit4 .answer-option{min-height:58px;padding:14px 16px;border-radius:18px;font-size:16px;line-height:1.25}
  #lessonUnit4 .listen-button,#lessonUnit4 .listen-mini{margin-left:auto;margin-right:auto}

  #lessonUnit4 .unit4-action-grid.quiz-pictures{width:100%;max-width:560px;margin:18px auto 0!important;display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
  #lessonUnit4 .unit4-action-grid.quiz-pictures .unit4-card{
    min-height:210px!important;height:auto!important;padding:12px!important;border-radius:22px!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important
  }
  #lessonUnit4 .unit4-action-grid.quiz-pictures .unit4-card img{width:100%!important;height:135px!important;object-fit:contain!important;margin:0 auto 8px!important;padding:0!important}
  #lessonUnit4 .unit4-action-grid.quiz-pictures .unit4-card b{font-size:16px!important;margin:0!important;text-align:center!important}
}
@media(max-width:390px){
  #lessonUnit4 .lesson-stage{padding-left:6px;padding-right:6px}
  #lessonUnit4 .lesson-screen{padding-left:12px;padding-right:12px}
  #lessonUnit4 .learn-cards .unit4-card{padding:20px 14px 18px!important;border-radius:24px!important}
  #lessonUnit4 .learn-cards .unit4-card b{font-size:22px!important;margin-bottom:14px!important}
  #lessonUnit4 .learn-cards .unit4-card img{width:min(70vw,220px)!important;max-width:220px!important;max-height:220px!important;margin-bottom:14px!important}
  #lessonUnit4 .learn-cards .unit4-card span{font-size:15px!important}
}