/* ==========================================================
   WAKATA — Wakiso Kampala Teachers' Association
   Front-end UI stylesheet
   Tokens come from the logo blue (#043AA0) + exam-script details
   ========================================================== */
:root{
  --blue:#043AA0; --blue-700:#032C7A; --blue-900:#061B4D; --blue-500:#2D63CF;
  --tint:#E9F0FC; --tint-2:#F4F7FD; --line:#D3DDF0; --paper:#FFFFFF;
  --text:#14224A; --muted:#55648A;
  --hl:#FFD43B;   /* highlighter yellow: prices, key marks */
  --pen:#D6304A;  /* examiner's red pen: badges, ticks */
  --ok:#157A4B;
  --serif:'Source Serif 4','Source Serif Pro',Georgia,'Times New Roman',serif;
  --sans:'Public Sans','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --r-s:4px; --r-m:10px; --r-l:18px; --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--text);background:var(--tint-2);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);color:var(--blue-900);line-height:1.15;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,4.6vw,3.7rem)} h2{font-size:clamp(1.65rem,3vw,2.35rem)} h3{font-size:1.2rem} h4{font-size:1rem}
p{margin:0 0 1em} ul{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue-500);outline-offset:2px;border-radius:3px}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--hl);color:var(--blue-900);padding:.5rem 1rem;z-index:200;border-radius:var(--r-s)}
.skip:focus{left:8px}
.muted{color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.4rem;border-radius:999px;border:2px solid transparent;font-weight:700;font-size:.97rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s;text-decoration:none;line-height:1.2}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-700)}
.btn-hl{background:var(--hl);color:var(--blue-900)}
.btn-hl:hover{background:#ffe071}
.btn-line{border-color:var(--blue);color:var(--blue);background:transparent}
.btn-line:hover{background:var(--blue);color:#fff}
.btn-white{background:#fff;color:var(--blue)}
.btn-white:hover{background:var(--tint)}
.btn-ghost-w{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost-w:hover{background:#fff;color:var(--blue)}
.btn-sm{padding:.55rem 1rem;font-size:.88rem}
.btn-block{width:100%}
.btn svg,.ico{width:1.1em;height:1.1em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Top strip + header ---------- */
.strip{background:var(--blue-900);color:#cfdaf5;font-size:.84rem}
.strip .wrap{display:flex;justify-content:space-between;gap:1rem;padding-block:.45rem;flex-wrap:wrap}
.strip a{color:#fff}
.strip .wrap>span:last-child span{margin-left:1.2rem}
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:1.4rem;min-height:74px}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--blue-900);flex:none}
.brand:hover{text-decoration:none}
.brand img{width:58px;height:auto}
.brand b{font-family:var(--serif);font-size:1.45rem;letter-spacing:.02em;line-height:1;display:block}
.brand small{display:block;font-size:.72rem;color:var(--muted);line-height:1.2;margin-top:3px}
.nav{display:flex;gap:.2rem;margin-left:auto}
.nav a{padding:.5rem .7rem;border-radius:999px;color:var(--text);font-weight:600;font-size:.94rem}
.nav a:hover{background:var(--tint);text-decoration:none}
.nav a[aria-current="page"]{background:var(--blue);color:#fff}
.hdr-tools{display:flex;align-items:center;gap:.6rem}
.hsearch{position:relative}
.hsearch input{width:170px;padding:.6rem 1rem .6rem 2.3rem;border:1.5px solid var(--line);border-radius:999px;background:var(--tint-2);transition:width .25s,border-color .2s}
.hsearch input:focus{width:260px;border-color:var(--blue);outline:none;background:#fff}
.hsearch .ico{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--muted)}
.cart-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;border:0;cursor:pointer}
.cart-btn:hover{background:var(--blue-700);text-decoration:none}
.cart-btn .ico{width:22px;height:22px}
.cart-count{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--pen);color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center;padding:0 5px}
.cart-count:empty,.cart-count[data-n="0"]{display:none}
.burger{display:none;width:44px;height:44px;border:1.5px solid var(--line);border-radius:50%;background:#fff;cursor:pointer;place-items:center}

/* ---------- Hero: deep logo-blue stage with open-book planes ---------- */
.hero{position:relative;overflow:hidden;color:#fff;padding-bottom:46px;
  background:radial-gradient(900px 560px at 76% 42%,rgba(45,99,207,.85) 0,rgba(45,99,207,0) 70%),linear-gradient(135deg,#061B4D 0%,#05287A 48%,#043AA0 100%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 46px),0 100%)}
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-bg svg{position:absolute;inset:0;width:100%;height:100%;transform:translate3d(calc(var(--mx,0)*-14px),calc(var(--my,0)*-10px),0);transition:transform .25s ease-out}
.hero-bg .plane2{transform:translate3d(calc(var(--mx,0)*-8px),calc(var(--my,0)*-6px),0)}
.hero-bg .dots{position:absolute;left:0;bottom:0;width:48%;height:62%;background-image:radial-gradient(rgba(255,255,255,.28) 1.3px,transparent 1.7px);background-size:26px 26px;-webkit-mask-image:linear-gradient(35deg,#000 0,transparent 72%);mask-image:linear-gradient(35deg,#000 0,transparent 72%)}
.hero-bg .glow{position:absolute;right:6%;top:12%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(120,164,255,.38),rgba(120,164,255,0) 68%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center;padding-block:4.4rem 5.2rem}
.hero h1{color:#fff;max-width:15ch;margin-bottom:.45em}
.hero p.lead{font-size:1.15rem;max-width:52ch;color:#cddbf8}
.hero .cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.hero .facts{display:flex;gap:1.8rem;flex-wrap:wrap;margin-top:2.2rem;font-size:.92rem;color:#e7eefc}
.hero .facts li{display:flex;align-items:center;gap:.5rem;font-weight:600}
.hero .facts .ico{color:var(--hl);width:1.3em;height:1.3em;stroke-width:3}
.fan{position:relative;aspect-ratio:1/1.02;max-width:560px;margin-left:auto;width:100%;transform:translate3d(calc(var(--mx,0)*12px),calc(var(--my,0)*8px),0);transition:transform .25s ease-out}
.fan figure{--rot:0deg;position:absolute;margin:0;border-radius:var(--r-s);box-shadow:0 28px 46px -16px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.3);overflow:hidden;background:#fff;transform:rotate(var(--rot));transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.fan img{width:100%;height:auto;display:block}
.fan .f1{width:46%;left:2%;top:8%;--rot:-8deg}
.fan .f2{width:44%;left:34%;top:0;--rot:3deg;z-index:2}
.fan .f3{width:42%;right:0;top:25%;--rot:9deg;z-index:1}
.fan .f4{width:38%;left:18%;bottom:0;--rot:-3deg;z-index:3}
.fan .tag{position:absolute;z-index:5;background:var(--hl);color:var(--blue-900);font-weight:800;padding:.45rem .9rem;border-radius:999px;font-size:.9rem;box-shadow:0 8px 18px -6px rgba(0,0,0,.5)}
.fan .tag.t1{right:6%;bottom:14%;transform:rotate(-4deg)}
.fan .tick{position:absolute;z-index:5;left:0;bottom:22%;width:78px;height:78px;border-radius:50%;border:3px solid var(--pen);display:grid;place-items:center;color:var(--pen);background:rgba(255,255,255,.94);transform:rotate(-10deg)}
.fan .tick svg{width:40px;height:40px;stroke:currentColor;stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .fan figure{animation:deal .9s cubic-bezier(.2,.8,.2,1) backwards}
  .fan .f1{animation-delay:.05s}.fan .f2{animation-delay:.18s}.fan .f3{animation-delay:.3s}.fan .f4{animation-delay:.42s}
  @keyframes deal{from{opacity:0;transform:translate(0,60px) rotate(0)}}
  .hero h1,.hero p.lead,.hero .cta,.hero .facts{animation:rise .8s cubic-bezier(.2,.8,.2,1) backwards}
  .hero p.lead{animation-delay:.1s}.hero .cta{animation-delay:.2s}.hero .facts{animation-delay:.3s}
  @keyframes rise{from{opacity:0;transform:translateY(24px)}}
}

/* Stats card that overlaps the hero edge */
.stats{position:relative;z-index:3;margin-top:-4.4rem}
.stats-card{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:0 30px 50px -28px rgba(6,27,77,.55)}
.stat{padding:1.5rem 1.4rem;text-align:center;position:relative;transition:background .25s}
.stat+.stat::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line)}
.stat b{display:block;font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;color:var(--blue);font-weight:700}
.stat span{display:block;margin-top:.4rem;font-size:.9rem;font-weight:600;color:var(--muted)}

/* ---------- Sections ---------- */
.sec{padding-block:4.2rem}
.sec-white{background:#fff}
.sec-blue{background:var(--blue);color:#e7eefc}
.sec-blue h2,.sec-blue h3{color:#fff}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:1.5rem;margin-bottom:2rem;flex-wrap:wrap}
.sec-head p{margin:0;color:var(--muted);max-width:56ch}
.sec-blue .sec-head p{color:#c9d8f7}
.link-more{font-weight:700;display:inline-flex;align-items:center;gap:.35rem}

/* Level tiles */
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.lvl{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-l);padding:1.6rem 1.6rem 1.4rem;display:flex;flex-direction:column;gap:.4rem;color:var(--text);overflow:hidden;transition:border-color .2s}
.lvl .code{font-family:var(--serif);font-weight:700;font-size:2.6rem;line-height:1;color:var(--blue)}
.lvl h3{margin:0}
.lvl p{margin:0;color:var(--muted);font-size:.94rem}
.lvl .links{display:flex;gap:1.2rem;margin-top:.9rem;font-weight:700;position:relative;z-index:1}
.lvl::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--tint)}

/* Subject chips */
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{padding:.5rem 1rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:600;font-size:.92rem;color:var(--text);cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--blue);text-decoration:none}
.chip.on,.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.chip i{font-style:normal;opacity:.65;margin-left:.3rem;font-weight:500}

/* ---------- Book cards ---------- */
.grid{display:grid;gap:1.6rem 1.3rem}
.grid-books{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.bk{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;position:relative}
.bk-media{display:block;background:linear-gradient(180deg,var(--tint) 0,#dbe6f9 100%);padding:1.4rem 1.4rem 1.1rem;position:relative}
.bk-media:hover{text-decoration:none}
.book{position:relative;aspect-ratio:3/4;width:100%;max-width:170px;margin:0 auto;border-radius:2px 5px 5px 2px;overflow:hidden;background:#fff;box-shadow:-3px 2px 0 rgba(0,0,0,.08),0 14px 22px -10px rgba(6,27,77,.55);transition:transform .25s}
.bk:hover .book{transform:translateY(-4px) rotate(-1deg)}
.book img{width:100%;height:100%;object-fit:cover}
.book::after{content:"";position:absolute;inset:0 auto 0 0;width:9%;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.18) 40%,rgba(0,0,0,0));pointer-events:none}
.bk-badge{position:absolute;top:.7rem;left:.7rem;z-index:2;background:var(--pen);color:#fff;font-size:.74rem;font-weight:700;padding:.15rem .6rem;border-radius:999px}
.bk-body{padding:.95rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.bk-meta{font-size:.8rem;color:var(--muted);font-weight:600}
.bk-title{font-family:var(--serif);font-size:1.04rem;line-height:1.25;color:var(--blue-900);font-weight:700;margin:0}
.bk-title a{color:inherit}
.bk-foot{margin-top:auto;padding-top:.7rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.price{font-weight:800;color:var(--blue-900);font-size:1.05rem;white-space:nowrap}
.price s{font-weight:500;color:var(--muted);font-size:.84rem;margin-right:.35rem}
.price small{font-weight:600;font-size:.72rem;color:var(--muted);margin-right:.15rem}
.add{display:inline-flex;align-items:center;gap:.35rem;background:var(--blue);color:#fff;border:0;border-radius:999px;padding:.5rem .95rem;font-weight:700;font-size:.85rem;cursor:pointer;transition:background .2s}
.add:hover{background:var(--blue-700)}
.add.done{background:var(--ok)}

/* Generated cover for titles without a photo */
.cv{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:12% 11% 9% 15%;color:#fff;background:linear-gradient(155deg,var(--c1,#043AA0),var(--c2,#061B4D));text-align:center}
.cv .lv{font-weight:800;font-size:clamp(.62rem,1.6vw,.78rem);letter-spacing:.04em}
.cv .sj{font-family:var(--serif);font-weight:800;font-size:clamp(1.2rem,3.4vw,1.75rem);line-height:1.05;color:var(--c3,#FFD43B)}
.cv .sb{font-size:clamp(.58rem,1.4vw,.72rem);font-weight:600;opacity:.95}
.cv .ln{height:3px;width:46%;background:var(--c3,#FFD43B);margin:.5rem auto 0;border-radius:2px}
.cv img{width:34%!important;height:auto!important;margin:0 auto;opacity:.95;object-fit:contain}

/* ---------- Past paper cards ---------- */
.grid-papers{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.pp{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);display:flex;flex-direction:column;overflow:hidden}
.pp-thumb{position:relative;background:var(--tint);padding:1rem 1.4rem 0;height:230px;overflow:hidden;display:block}
.pp-thumb:hover{text-decoration:none}
.sheet{position:relative;background:#fff;width:100%;height:100%;box-shadow:0 0 0 1px rgba(6,27,77,.1),0 10px 18px -8px rgba(6,27,77,.4);overflow:hidden}
.sheet img{width:100%;height:100%;object-fit:cover;object-position:top}
.sheet.gen{padding:12% 9% 0;font-family:var(--serif);color:#222;text-align:center;font-size:.58rem;line-height:1.35}
.sheet.gen img{width:26px;height:auto;margin:0 auto .3rem}
.sheet.gen b{display:block;font-size:.66rem}
.sheet.gen .big{font-size:.9rem;margin:.35rem 0 .15rem}
.sheet.gen .rule{height:1px;background:#bbb;margin:.35rem 0}
.sheet.gen i{display:block;height:3px;background:#d8d8d8;margin:4px 0;border-radius:2px}
.pp-year{position:absolute;top:.7rem;right:.7rem;z-index:2;background:var(--blue);color:#fff;font-weight:800;font-size:.8rem;border-radius:var(--r-s);padding:.1rem .5rem}
.pp-body{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.pp-title{font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--blue-900);margin:0;line-height:1.25}
.pp-meta{font-size:.82rem;color:var(--muted);font-weight:600}
.fmt{display:flex;gap:.3rem;margin-top:.4rem}
.fmt label{flex:1;position:relative}
.fmt input{position:absolute;opacity:0}
.fmt span{display:block;text-align:center;padding:.3rem .2rem;border:1.5px solid var(--line);border-radius:var(--r-s);font-size:.76rem;font-weight:700;cursor:pointer}
.fmt input:checked+span{background:var(--tint);border-color:var(--blue);color:var(--blue)}
.fmt input:focus-visible+span{outline:3px solid var(--blue-500);outline-offset:1px}

/* ---------- Toolbar / filters ---------- */
.page-head{background:linear-gradient(120deg,#061B4D 0%,#05287A 55%,#043AA0 100%);color:#fff;padding-block:2.8rem 2.6rem;position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;left:0;bottom:0;width:38%;height:100%;background-image:radial-gradient(rgba(255,255,255,.22) 1.2px,transparent 1.6px);background-size:24px 24px;-webkit-mask-image:linear-gradient(60deg,#000 0,transparent 70%);mask-image:linear-gradient(60deg,#000 0,transparent 70%)}
.page-head::after{content:"";position:absolute;right:5%;top:-14%;width:360px;height:130%;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02));clip-path:polygon(0 16%,64% 6%,64% 30%,100% 24%,100% 90%,0 100%)}
.page-head .wrap{position:relative;z-index:1}
.page-head h1{color:#fff;font-size:clamp(1.9rem,3.6vw,2.8rem);margin-bottom:.3em}
.page-head p{margin:0;max-width:60ch;color:#cddbf8}
.crumbs{font-size:.84rem;margin-bottom:.9rem;color:#a9c0f1}
.crumbs a{color:#fff}
.crumbs span{margin:0 .4rem}
.shop{display:grid;grid-template-columns:260px 1fr;gap:2rem;align-items:start;padding-block:2.4rem 4rem}
.side{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:1.2rem;position:sticky;top:92px}
.side h3{font-size:1rem;margin-bottom:.6rem;font-family:var(--sans);font-weight:800}
.side fieldset{border:0;padding:0;margin:0 0 1.3rem}
.side label.opt{display:flex;align-items:center;gap:.55rem;padding:.28rem 0;font-size:.94rem;cursor:pointer}
.side input[type=radio],.side input[type=checkbox]{accent-color:var(--blue);width:17px;height:17px}
.side .count{margin-left:auto;font-size:.8rem;color:var(--muted)}
.tools{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:1.3rem;flex-wrap:wrap}
.tools .found{font-weight:600}
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.field label{font-weight:700;font-size:.9rem}
.field input,.field select,.field textarea{padding:.75rem .9rem;border:1.5px solid var(--line);border-radius:var(--r-m);background:#fff;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(4,58,160,.15)}
.field textarea{min-height:120px;resize:vertical}
.field .err{color:var(--pen);font-size:.82rem;display:none}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--pen)}
.field.bad .err{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.empty{grid-column:1/-1;text-align:center;padding:3rem 1rem;background:#fff;border:1.5px dashed var(--line);border-radius:var(--r-l)}
.filter-toggle{display:none}
.more{text-align:center;margin-top:2rem}

/* Paper finder band */
.finder{background:#fff;border-radius:var(--r-l);padding:1.4rem;display:grid;grid-template-columns:repeat(3,1fr) auto;gap:1rem;align-items:end;color:var(--text);box-shadow:0 24px 40px -22px rgba(0,0,0,.5)}
.finder .field{margin:0}

/* ---------- Packages ---------- */
.grid-pk{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.pk{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-l);padding:1.6rem;display:flex;flex-direction:column;position:relative}
.pk.best{border-color:var(--blue);box-shadow:0 0 0 4px rgba(4,58,160,.1)}
.pk .ribbon{position:absolute;top:-13px;left:1.4rem;background:var(--hl);color:var(--blue-900);font-weight:800;font-size:.78rem;padding:.2rem .8rem;border-radius:999px}
.pk .for{font-weight:700;font-size:.85rem;color:var(--blue)}
.pk h3{font-size:1.4rem;margin:.2rem 0 .3rem}
.pk .amt{font-family:var(--serif);font-size:2.2rem;font-weight:700;color:var(--blue-900);line-height:1.1;margin:.6rem 0 .2rem}
.pk .amt small{font-family:var(--sans);font-size:.85rem;color:var(--muted);font-weight:600}
.pk ul{margin:1rem 0 1.4rem;display:grid;gap:.55rem}
.pk li{display:flex;gap:.6rem;font-size:.94rem;align-items:flex-start}
.pk li .ico{color:var(--ok);margin-top:.2rem;stroke-width:2.8}
.pk .btn{margin-top:auto}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.8rem}

/* Exam sets */
.grid-sets{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.set{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);display:grid;grid-template-columns:150px 1fr;gap:1.2rem;padding:1.2rem}
.stack{position:relative;height:190px}
.stack .sheet{position:absolute;width:112px;height:152px}
.stack .sheet:nth-child(1){left:0;top:26px;transform:rotate(-8deg)}
.stack .sheet:nth-child(2){left:20px;top:14px;transform:rotate(-2deg)}
.stack .sheet:nth-child(3){left:38px;top:4px;transform:rotate(5deg)}
.set h3{margin-bottom:.2rem}
.set .inc{font-size:.88rem;color:var(--muted);margin:.4rem 0 .6rem}
.set details{font-size:.88rem;margin-bottom:.8rem}
.set summary{cursor:pointer;font-weight:700;color:var(--blue)}
.set details ul{margin-top:.5rem;display:grid;grid-template-columns:1fr 1fr;gap:.2rem .8rem;color:var(--muted)}
.save{display:inline-block;background:var(--hl);color:var(--blue-900);font-weight:800;font-size:.75rem;padding:.12rem .6rem;border-radius:999px;margin-left:.4rem}

.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.ticks{display:grid;gap:.8rem;margin:1.2rem 0 1.6rem}
.ticks li{display:flex;gap:.7rem;align-items:flex-start}
.ticks .ico{color:var(--hl);stroke-width:3;margin-top:.25rem}

/* How it works — a true sequence */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:1.4rem;position:relative}
.step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;margin-bottom:.8rem}
.step h3{font-size:1.05rem;font-family:var(--sans);font-weight:800;margin-bottom:.3rem}
.step p{margin:0;color:var(--muted);font-size:.93rem}

.pay{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.pay span{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:.3rem .7rem;font-weight:700;font-size:.82rem;color:var(--text)}

/* ---------- Detail page ---------- */
.detail{display:grid;grid-template-columns:420px 1fr;gap:3rem;padding-block:2.5rem 3rem;align-items:start}
.stage{background:linear-gradient(180deg,var(--tint),#d6e3f8);border-radius:var(--r-l);padding:2.4rem;display:grid;place-items:center}
.stage .book{max-width:280px}
.thumbs{display:flex;gap:.6rem;margin-top:.8rem}
.thumbs button{border:2px solid var(--line);border-radius:var(--r-s);background:#fff;padding:2px;width:64px;height:64px;cursor:pointer}
.thumbs button[aria-pressed="true"]{border-color:var(--blue)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.detail h1{font-size:clamp(1.7rem,3vw,2.5rem)}
.detail .price{font-size:1.7rem;display:block;margin:.4rem 0 1rem}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;background:#fff}
.qty button{width:38px;height:40px;border:0;background:none;font-size:1.2rem;cursor:pointer;color:var(--blue);font-weight:700}
.qty input{width:44px;text-align:center;border:0;background:none;font-weight:700}
.buy{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin:1.2rem 0}
.specs{width:100%;border-collapse:collapse;margin-top:1rem;background:#fff;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line)}
.specs th,.specs td{text-align:left;padding:.65rem 1rem;border-bottom:1px solid var(--line);font-size:.94rem}
.specs th{width:36%;background:var(--tint-2);color:var(--muted);font-weight:700}
.specs tr:last-child th,.specs tr:last-child td{border:0}
.assure{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1.4rem}
.assure div{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:.8rem;font-size:.84rem;font-weight:600;text-align:center}
.assure .ico{display:block;margin:0 auto .3rem;width:1.6em;height:1.6em;color:var(--blue)}

/* ---------- Cart ---------- */
.cartgrid{display:grid;grid-template-columns:1fr 380px;gap:2rem;padding-block:2.4rem 4rem;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:1.4rem}
.panel h2{font-size:1.3rem;font-family:var(--sans);font-weight:800}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line)}
.line:last-child{border:0}
.line .mini{width:64px;height:84px;position:relative;border-radius:3px;overflow:hidden;box-shadow:0 4px 10px -4px rgba(0,0,0,.4);background:#fff}
.line .mini img{width:100%;height:100%;object-fit:cover}
.line .mini .cv{padding:8% 6% 6% 12%}.line .mini .cv .sj{font-size:.7rem}.line .mini .cv .lv,.line .mini .cv .sb,.line .mini .cv img,.line .mini .cv .ln{display:none}
.line h3{font-family:var(--sans);font-size:.98rem;margin:0;font-weight:700;line-height:1.3}
.line .sub{font-size:.82rem;color:var(--muted)}
.line .rm{background:none;border:0;color:var(--pen);font-size:.82rem;cursor:pointer;padding:0;font-weight:700}
.line .rm:hover{text-decoration:underline}
.line .right{text-align:right;display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
.sum{display:flex;justify-content:space-between;padding:.4rem 0}
.sum.total{border-top:2px solid var(--blue-900);margin-top:.6rem;padding-top:.8rem;font-weight:800;font-size:1.2rem;color:var(--blue-900)}
.radios{display:grid;gap:.5rem;margin-bottom:1rem}
.radio{display:flex;gap:.7rem;align-items:center;padding:.7rem .9rem;border:1.5px solid var(--line);border-radius:var(--r-m);cursor:pointer;background:#fff}
.radio:has(input:checked){border-color:var(--blue);background:var(--tint)}
.radio input{accent-color:var(--blue)}
.radio b{display:block;font-size:.94rem}.radio small{color:var(--muted)}
.radio em{margin-left:auto;font-style:normal;font-weight:700;font-size:.9rem}
.cart-empty{text-align:center;padding:3rem 1rem}
.cart-empty .ico{width:54px;height:54px;color:var(--line);margin:0 auto 1rem}

/* ---------- Contact / FAQ ---------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.info{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:1.3rem}
.info .ico{width:26px;height:26px;color:var(--blue);margin-bottom:.5rem}
.info h3{font-family:var(--sans);font-size:1rem;font-weight:800;margin-bottom:.2rem}
.info p{margin:0;color:var(--muted);font-size:.94rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:1rem 1.2rem;margin-bottom:.7rem}
.faq summary{cursor:pointer;font-weight:700;color:var(--blue-900)}
.faq p{margin:.7rem 0 0;color:var(--muted)}
.mapbox{background:repeating-linear-gradient(45deg,#e4ecfb 0 14px,#edf3fd 14px 28px);border-radius:var(--r-l);min-height:280px;display:grid;place-items:center;text-align:center;color:var(--muted);border:1px solid var(--line);padding:1rem}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.value{background:#fff;border-left:5px solid var(--blue);border-radius:var(--r-m);padding:1.3rem;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.value h3{margin-bottom:.3rem}.value p{margin:0;color:var(--muted)}

/* ---------- Footer ---------- */
.news{background:var(--hl);color:var(--blue-900)}
.news .wrap{display:flex;gap:1.5rem;align-items:center;justify-content:space-between;padding-block:1.6rem;flex-wrap:wrap}
.news h2{margin:0;font-size:1.5rem}.news p{margin:0}
.news form{display:flex;gap:.5rem;flex:1;max-width:460px;min-width:260px}
.news input{flex:1;padding:.8rem 1.1rem;border-radius:999px;border:2px solid var(--blue-900);background:#fff}
.ftr{background:var(--blue-900);color:#b8c7ec;padding-top:3.4rem;font-size:.94rem}
.ftr .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:2.4rem;padding-bottom:2.6rem}
.ftr h4{color:#fff;font-family:var(--sans);font-size:.95rem;font-weight:800;margin-bottom:.9rem}
.ftr li{margin-bottom:.45rem}
.ftr a{color:#b8c7ec}.ftr a:hover{color:#fff}
.ftr .brand{color:#fff;margin-bottom:1rem}.ftr .brand small{color:#a3b5e3}
.ftr .brand img{width:70px}
.ftr .bottom{border-top:1px solid rgba(255,255,255,.14);padding-block:1.2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem}
.ftr .pay span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}

/* Toast + modal */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--blue-900);color:#fff;padding:.8rem 1.2rem;border-radius:999px;display:flex;gap:.8rem;align-items:center;z-index:300;transition:transform .35s cubic-bezier(.2,.8,.2,1);box-shadow:0 14px 30px -10px rgba(0,0,0,.5);font-weight:600;font-size:.93rem;max-width:calc(100% - 2rem)}
.toast.show{transform:translate(-50%,0)}
.toast a{color:var(--hl);font-weight:800}
.modal{position:fixed;inset:0;background:rgba(6,27,77,.6);display:none;place-items:center;z-index:400;padding:1rem}
.modal.open{display:grid}
.modal .box{background:#fff;border-radius:var(--r-l);padding:2rem;max-width:480px;width:100%;text-align:center}
.modal .okc{width:64px;height:64px;border-radius:50%;background:var(--ok);display:grid;place-items:center;margin:0 auto 1rem;color:#fff}
.modal .okc svg{width:34px;height:34px;stroke:#fff;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.note{background:var(--tint);border-left:4px solid var(--blue);padding:.8rem 1rem;border-radius:var(--r-s);font-size:.9rem;color:var(--text)}

/* ---------- Responsive ---------- */
@media (max-width:1060px){
  .hsearch{display:none}
  .shop{grid-template-columns:1fr}
  .side{position:static;display:none}
  .side.open{display:block}
  .filter-toggle{display:inline-flex}
  .finder{grid-template-columns:1fr 1fr}
  .finder .btn{grid-column:1/-1}
  .detail{grid-template-columns:1fr;gap:1.6rem}
  .cartgrid{grid-template-columns:1fr}
  .ftr .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .burger{display:grid}
  .nav{position:fixed;inset:74px 0 auto 0;flex-direction:column;background:#fff;padding:1rem 1.25rem 1.4rem;border-bottom:1px solid var(--line);display:none;box-shadow:0 20px 30px -20px rgba(0,0,0,.4);margin:0}
  .nav.open{display:flex}
  .nav a{padding:.8rem 1rem;font-size:1.02rem}
  .hdr-tools{margin-left:auto}
  .hero .wrap{grid-template-columns:1fr;padding-block:2.6rem 3rem}
  .hero h1{max-width:none}
  .fan{margin:1rem auto 0;max-width:420px}
  .levels,.steps,.cards3,.values,.split{grid-template-columns:1fr}
  .split{gap:2rem}
  .set{grid-template-columns:1fr}
  .stack{height:180px;max-width:200px}
  .strip .wrap>span:last-child{display:none}
}
@media (max-width:560px){
  .sec{padding-block:3rem}
  .row2{grid-template-columns:1fr}
  .finder{grid-template-columns:1fr}
  .grid-books{grid-template-columns:repeat(2,1fr);gap:1rem .8rem}
  .grid-papers{grid-template-columns:repeat(2,1fr);gap:1rem .8rem}
  .bk-media{padding:1rem .8rem .8rem}
  .bk-foot{flex-direction:column;align-items:flex-start}
  .bk-foot .add{width:100%;justify-content:center}
  .pp-thumb{height:170px;padding:.8rem .8rem 0}
  .ftr .cols{grid-template-columns:1fr}
  .brand small{display:none}
  .assure{grid-template-columns:1fr}
  .line{grid-template-columns:56px 1fr}
  .line .right{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  .set details ul{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.strip,.hdr,.ftr,.news,.toast{display:none}}

/* ---------- fixes ---------- */
.nav a{white-space:nowrap}
.hero h1{max-width:15ch}
.pp,.pk,.bk,.set,.step,.info{color:var(--text)}
.sec-blue .pp-title,.sec-blue .bk-title,.sec-blue .pk h3{color:var(--blue-900)}
.bk-foot{flex-wrap:wrap}
.grid-4{grid-template-columns:repeat(4,1fr)}
.cv .sj.long{font-size:clamp(.78rem,2vw,.95rem)}
.cv .sj{font-size:clamp(1rem,2.6vw,1.25rem);overflow-wrap:anywhere}
@media (max-width:1180px){.hsearch{display:none}}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1280px){.hsearch{display:none}}
.bk .price s{display:block;line-height:1.1;margin:0}
.bk-foot .price{line-height:1.2}
.crumbs-l a{color:var(--blue)}
@media (max-width:1420px){.hsearch{display:none}}
.news form{min-width:0;width:100%}
.news input{min-width:0;width:100%}
.news .wrap>div{min-width:0}
.grid-sets{grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr))}
.set{grid-template-columns:150px minmax(0,1fr)}
.set>div{min-width:0}
@media (max-width:860px){.set{grid-template-columns:1fr}}

/* ==========================================================
   v2 — interactions and polish
   Hover effects sit inside (hover:hover) so touch screens stay clean.
   Reduced-motion users get none of the movement (see rule at the end).
   ========================================================== */
::selection{background:var(--hl);color:var(--blue-900)}
html{scrollbar-color:var(--blue-500) var(--tint)}
body{animation:pageIn .45s ease-out}
@keyframes pageIn{from{opacity:0}}

/* Scroll progress, back to top, WhatsApp */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--blue-500),var(--hl));z-index:500;pointer-events:none}
.fab{position:fixed;right:20px;z-index:150;display:grid;place-items:center;border:0;cursor:pointer;box-shadow:0 14px 26px -10px rgba(6,27,77,.6);transition:transform .25s,opacity .25s,background .2s,width .3s}
.totop{bottom:92px;width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;opacity:0;transform:translateY(16px);pointer-events:none}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop .ico{width:20px;height:20px;stroke-width:2.6}
.wa{bottom:24px;height:54px;min-width:54px;border-radius:999px;background:#1FA855;color:#fff;display:flex;align-items:center;justify-content:center;gap:.6rem;padding:0 15px;text-decoration:none;font-weight:700;font-size:.92rem;overflow:hidden}
.wa:hover{text-decoration:none;background:#178a45}
.wa svg{width:26px;height:26px;flex:none;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wa span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .35s ease}
@media (max-width:560px){.fab{right:14px}.wa{bottom:16px}.totop{bottom:80px}}

/* Header condenses once the page is scrolled */
.hdr{transition:box-shadow .3s}
.hdr .wrap{transition:min-height .25s}
.brand img{transition:width .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.hdr.scrolled{box-shadow:0 14px 28px -20px rgba(6,27,77,.55)}
.hdr.scrolled .wrap{min-height:62px}
.hdr.scrolled .brand img{width:48px}

/* Scroll reveal (class is added and removed by enhance.js) */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* Cards fade in when a grid is drawn or filtered */
.grid>*{animation:cardIn .55s cubic-bezier(.2,.8,.2,1) backwards}
.grid>:nth-child(2){animation-delay:.05s}.grid>:nth-child(3){animation-delay:.1s}.grid>:nth-child(4){animation-delay:.15s}
.grid>:nth-child(5){animation-delay:.2s}.grid>:nth-child(6){animation-delay:.25s}.grid>:nth-child(7){animation-delay:.3s}
.grid>:nth-child(n+8){animation-delay:.35s}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.98)}}

/* Testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.quote{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:1.7rem 1.5rem 1.4rem;display:flex;flex-direction:column;margin:0;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.quote::before{content:"\201C";position:absolute;right:1rem;top:-.4rem;font-family:var(--serif);font-size:6rem;line-height:1;color:var(--tint);font-weight:800;transition:transform .4s,color .3s}
.quote blockquote{margin:0 0 1.2rem;font-family:var(--serif);font-size:1.08rem;line-height:1.55;color:var(--blue-900);position:relative}
.quote figcaption{margin-top:auto;display:flex;gap:.8rem;align-items:center;font-size:.88rem;color:var(--muted);line-height:1.35}
.quote figcaption b{display:block;color:var(--text)}
.quote .av{width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800;flex:none;transition:background .3s,color .3s,transform .35s}
.quote .stars{color:var(--hl);letter-spacing:.15em;font-size:1rem;margin-bottom:.6rem;-webkit-text-stroke:.5px #c99a00;position:relative}

/* ---------- Hover effects, each area gets its own ---------- */
@media (hover:hover){
  /* Navigation: underline draws in from the centre */
  .nav a{position:relative;transition:color .2s}
  .nav a::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.2rem;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  .nav a:hover{background:transparent;color:var(--blue)}
  .nav a:hover::after{transform:scaleX(1)}
  .nav a[aria-current="page"]::after{display:none}
  .nav a[aria-current="page"]:hover{color:#fff;background:var(--blue-700)}
  .brand:hover img{transform:rotate(-7deg) scale(1.07)}
  .cart-btn{transition:background .2s,transform .25s}
  .cart-btn:hover{transform:scale(1.1)}
  .cart-btn:hover .ico{animation:wiggle .55s}
  .hsearch input:hover{border-color:#9db4e6}

  /* Buttons: lift plus a light sweep */
  .btn{transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .25s}
  .btn-primary,.btn-hl,.btn-white{position:relative;overflow:hidden}
  .btn-primary::before,.btn-hl::before,.btn-white::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s ease}
  .btn-primary:hover::before,.btn-hl:hover::before,.btn-white:hover::before{left:130%}
  .btn:hover{transform:translateY(-2px);box-shadow:0 14px 22px -12px rgba(6,27,77,.55)}
  .btn:active{transform:translateY(0)}
  .link-more .ico{transition:transform .25s}
  .link-more:hover{text-decoration:none}
  .link-more:hover .ico{transform:translateX(5px)}
  .add{transition:background .2s,transform .2s,box-shadow .2s}
  .add:hover{transform:translateY(-2px);box-shadow:0 10px 16px -8px rgba(4,58,160,.7)}
  .add:hover .ico{animation:wiggle .5s}

  /* Level tiles: the corner disc floods the whole card */
  .lvl>*{position:relative;z-index:1}
  .lvl::after{transition:transform .6s cubic-bezier(.2,.8,.2,1),background .3s;transform-origin:center}
  .lvl .code,.lvl h3,.lvl p,.lvl .links a{transition:color .3s}
  .lvl:hover{border-color:var(--blue)}
  .lvl:hover::after{transform:scale(8.5);background:var(--blue)}
  .lvl:hover .code{color:var(--hl)}
  .lvl:hover h3{color:#fff}
  .lvl:hover p{color:#d6e2fb}
  .lvl:hover .links a{color:#fff}

  /* Subject chips and tabs: colour fills from the left */
  .chip{background:linear-gradient(var(--blue),var(--blue)) no-repeat left center/0% 100% #fff;transition:background-size .3s ease,color .25s,border-color .2s,transform .2s}
  .chip:hover{background-size:100% 100%;color:#fff;transform:translateY(-2px)}
  .chip.on,.chip[aria-pressed="true"]{background:var(--blue)}

  /* Book cards: lift, cover swings open like a hardback */
  .bk{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .3s}
  .bk:hover{transform:translateY(-7px);box-shadow:0 26px 36px -20px rgba(6,27,77,.55);border-color:var(--blue-500)}
  .bk-media{perspective:760px;overflow:hidden}
  .book{transform-origin:left center;transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
  .bk:hover .book{transform:rotateY(-17deg) translateY(-3px) scale(1.03);box-shadow:-10px 6px 0 rgba(0,0,0,.07),0 26px 30px -14px rgba(6,27,77,.7)}
  .bk-media::after{content:"View details";position:absolute;left:50%;bottom:.75rem;transform:translate(-50%,16px);opacity:0;background:var(--blue-900);color:#fff;font-size:.78rem;font-weight:700;padding:.3rem .85rem;border-radius:999px;transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap}
  .bk:hover .bk-media::after{opacity:1;transform:translate(-50%,0)}
  .bk-title a{background:linear-gradient(var(--blue),var(--blue)) no-repeat 0 100%/0 2px;transition:background-size .3s}
  .bk:hover .bk-title a{background-size:100% 2px;text-decoration:none}
  .bk-badge{transition:transform .3s}
  .bk:hover .bk-badge{transform:rotate(-6deg) scale(1.08)}

  /* Past papers: sheet zooms and a sheen crosses the page */
  .pp{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .3s}
  .pp:hover{transform:translateY(-6px);box-shadow:0 24px 34px -20px rgba(6,27,77,.5);border-color:var(--blue-500)}
  .sheet img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
  .pp:hover .sheet img,.set:hover .sheet img{transform:scale(1.07);transform-origin:top center}
  .pp-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);transform:translateX(-120%);pointer-events:none;z-index:3}
  .pp:hover .pp-thumb::after{transform:translateX(120%);transition:transform .9s ease}
  .pp-year{transition:background .25s,transform .3s}
  .pp:hover .pp-year{background:var(--pen);transform:translateY(2px) rotate(3deg)}
  .fmt span{transition:background .2s,border-color .2s,color .2s}
  .fmt span:hover{border-color:var(--blue);color:var(--blue)}

  /* Holiday packages: top bar grows, ticks pop one after another */
  .pk{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .3s}
  .pk::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:18px 18px 0 0;background:linear-gradient(90deg,var(--blue),var(--hl));transform:scaleX(0);transform-origin:left;transition:transform .45s ease}
  .pk .ribbon{z-index:1}
  .pk:hover{transform:translateY(-8px);border-color:var(--blue);box-shadow:0 28px 40px -22px rgba(6,27,77,.55)}
  .pk:hover::before{transform:scaleX(1)}
  .pk li .ico{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
  .pk:hover li .ico{transform:scale(1.3)}
  .pk:hover li:nth-child(2) .ico{transition-delay:.05s}.pk:hover li:nth-child(3) .ico{transition-delay:.1s}
  .pk:hover li:nth-child(4) .ico{transition-delay:.15s}.pk:hover li:nth-child(5) .ico{transition-delay:.2s}.pk:hover li:nth-child(6) .ico{transition-delay:.25s}
  .pk:hover .amt{color:var(--blue)}
  .pk .amt{transition:color .3s}

  /* Exam sets: the stack of papers fans out */
  .set{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .3s}
  .set:hover{transform:translateY(-5px);box-shadow:0 24px 34px -22px rgba(6,27,77,.5);border-color:var(--blue-500)}
  .stack .sheet{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
  .set:hover .stack .sheet:nth-child(1){transform:translate(-12px,12px) rotate(-15deg)}
  .set:hover .stack .sheet:nth-child(2){transform:translate(2px,-6px) rotate(-1deg)}
  .set:hover .stack .sheet:nth-child(3){transform:translate(16px,2px) rotate(13deg)}

  /* How it works: number spins into a highlighter dot */
  .step{transition:transform .3s,box-shadow .3s,border-color .3s}
  .step::before{transition:transform .6s cubic-bezier(.2,.8,.2,1),background .3s,color .3s}
  .step:hover{transform:translateY(-5px);border-color:var(--blue);box-shadow:0 20px 28px -20px rgba(6,27,77,.5)}
  .step:hover::before{transform:rotate(360deg) scale(1.12);background:var(--hl);color:var(--blue-900)}

  /* Info, value and quote cards */
  .info{border-top:3px solid transparent;transition:transform .3s,box-shadow .3s,border-color .3s}
  .info .ico{transition:transform .4s cubic-bezier(.3,1.6,.5,1),color .3s}
  .info:hover{transform:translateY(-5px);border-top-color:var(--blue);box-shadow:0 20px 28px -22px rgba(6,27,77,.5)}
  .info:hover .ico{transform:scale(1.25) rotate(-8deg);color:var(--pen)}
  .value{transition:transform .3s,box-shadow .3s}
  .value:hover{transform:translateX(6px);box-shadow:inset 9px 0 0 var(--blue),0 18px 26px -22px rgba(6,27,77,.5)}
  .quote:hover{transform:translateY(-6px);box-shadow:0 26px 36px -24px rgba(6,27,77,.55);border-color:var(--blue-500)}
  .quote:hover::before{transform:rotate(-8deg) scale(1.15);color:var(--hl)}
  .quote:hover .av{background:var(--hl);color:var(--blue-900);transform:rotate(-8deg) scale(1.08)}

  /* Hero collage */
  .fan figure:hover{transform:translateY(-16px) rotate(calc(var(--rot)*.25)) scale(1.05);z-index:6;box-shadow:0 40px 56px -18px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.3)}
  .fan .tag{transition:transform .3s}
  .fan .tag:hover{transform:rotate(2deg) scale(1.1)}
  .fan .tick{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
  .fan .tick:hover{transform:rotate(8deg) scale(1.15)}
  .hero .facts li{transition:transform .25s}
  .hero .facts li:hover{transform:translateY(-2px)}
  .stat:hover{background:var(--tint-2)}
  .stat:hover b{animation:wiggle .5s}

  /* Forms, tables, lists */
  .field input:hover,.field select:hover,.field textarea:hover{border-color:#9db4e6}
  .radio{transition:border-color .2s,background .2s,transform .2s}
  .radio:hover{border-color:var(--blue-500);background:var(--tint-2);transform:translateX(3px)}
  .faq details{transition:border-color .25s,box-shadow .25s}
  .faq details:hover{border-color:var(--blue-500)}
  .faq details[open]{border-color:var(--blue);box-shadow:0 14px 22px -18px rgba(6,27,77,.5)}
  .faq summary{transition:color .2s,padding-left .2s}
  .faq summary:hover{color:var(--blue);padding-left:.3rem}
  .specs tr{transition:background .2s}
  .specs tr:hover th,.specs tr:hover td{background:var(--tint)}
  .side label.opt{transition:color .2s,padding-left .2s}
  .side label.opt:hover{color:var(--blue);padding-left:.35rem}
  .thumbs button{transition:transform .2s,border-color .2s}
  .thumbs button:hover{transform:translateY(-3px);border-color:var(--blue-500)}
  .assure div{transition:transform .25s,box-shadow .25s}
  .assure div:hover{transform:translateY(-4px);box-shadow:0 14px 20px -16px rgba(6,27,77,.5)}
  .assure .ico{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
  .assure div:hover .ico{transform:scale(1.2)}
  .line .mini{transition:transform .3s}
  .line:hover .mini{transform:scale(1.06) rotate(-2deg)}
  .qty button{transition:background .2s;border-radius:50%}
  .qty button:hover{background:var(--tint)}
  .crumbs a{transition:opacity .2s}
  .crumbs a:hover{opacity:.8}
  .stage .book{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  .stage:hover .book{transform:rotateY(-12deg) scale(1.03)}
  .stage{perspective:900px}

  /* Footer */
  .pay span{transition:transform .2s,border-color .2s,background .2s}
  .pay span:hover{transform:translateY(-3px);border-color:var(--blue)}
  .ftr .pay span:hover{background:rgba(255,255,255,.18);border-color:#fff}
  .ftr li a{display:inline-block;transition:transform .2s,color .2s}
  .ftr li a:hover{transform:translateX(6px);text-decoration:none}
  .news input{transition:box-shadow .25s}
  .news input:hover,.news input:focus{box-shadow:0 0 0 4px rgba(6,27,77,.18);outline:none}
  .totop:hover{background:var(--blue-500);transform:translateY(-3px)}
  .wa:hover{transform:translateY(-3px)}
  .wa:hover span{max-width:140px}
}

@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}60%{transform:rotate(10deg)}}
.cart-btn.pop{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{40%{transform:scale(1.25)}}
.fly{position:fixed;z-index:600;pointer-events:none;border-radius:6px;object-fit:cover;box-shadow:0 14px 28px -8px rgba(6,27,77,.6);background:var(--blue)}

@media (max-width:860px){
  .stats-card{grid-template-columns:1fr 1fr}
  .stat:nth-child(3)::before{display:none}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .quotes{grid-template-columns:1fr}
  .stats{margin-top:-3.2rem}
  .hero .wrap{padding-block:2.6rem 4.4rem}
}
@media (max-width:560px){
  .hero{clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),0 100%);padding-bottom:30px}
  .stat{padding:1.1rem .8rem}
}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.progress{display:none}}


/* ==========================================================
   v3 updates
   ========================================================== */

/* ---------- WhatsApp button: always a perfect circle ---------- */
.wa{width:56px;height:56px;min-width:0;padding:0;gap:0;border-radius:50%;overflow:visible;aspect-ratio:1/1}
.wa svg{width:28px;height:28px}
.fab:focus-visible{border-radius:50%}
/* the label now floats beside the circle instead of stretching it */
.wa span{position:absolute;right:calc(100% + 12px);top:50%;max-width:none;overflow:visible;transform:translate(8px,-50%);
  background:var(--blue-900);color:#fff;padding:.45rem .9rem;border-radius:999px;font-size:.85rem;line-height:1.2;
  box-shadow:0 10px 20px -8px rgba(6,27,77,.6);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.wa:focus-visible span{opacity:1;transform:translate(0,-50%)}
@media (hover:hover){.wa:hover span{max-width:none;opacity:1;transform:translate(0,-50%)}}

/* ---------- Home: subject chips stay on one line ---------- */
.chips-one{flex-wrap:wrap;overflow:hidden;max-height:3.4rem;padding:3px 0 0}
@media (max-width:760px){
  .chips-one{flex-wrap:nowrap;overflow-x:auto;max-height:none;padding-bottom:.4rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips-one::-webkit-scrollbar{display:none}
  .chips-one .chip{flex:none;white-space:nowrap}
}

/* ---------- Home: tighter, evenly distributed section spacing ---------- */
body[data-page="home"] .sec{padding-block:2.9rem}
body[data-page="home"] .stats + .sec{padding-top:2.3rem}
body[data-page="home"] .sec-head{margin-bottom:1.5rem}
body[data-page="home"] .sec:not(.sec-white):not(.sec-blue) + .sec:not(.sec-white):not(.sec-blue){padding-top:.4rem}
@media (max-width:560px){
  body[data-page="home"] .sec{padding-block:2.2rem}
  body[data-page="home"] .stats + .sec{padding-top:1.8rem}
  body[data-page="home"] .sec:not(.sec-white):not(.sec-blue) + .sec:not(.sec-white):not(.sec-blue){padding-top:.2rem}
}

/* ---------- Searchable dropdowns ---------- */
.ss{position:relative;width:100%}
.ss.ss-pill{width:auto;min-width:200px}
.ss-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden}
.ss-btn{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;text-align:left;cursor:pointer;
  padding:.75rem .9rem;border:1.5px solid var(--line);border-radius:var(--r-m);background:#fff;color:var(--text);line-height:1.4;
  transition:border-color .2s,box-shadow .2s}
.ss-pill .ss-btn{padding:.55rem 1rem;border-radius:999px}
.ss-btn:hover{border-color:#9db4e6}
.ss-btn:focus-visible,.ss.open .ss-btn{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(4,58,160,.15)}
.ss-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-btn .chev{width:1.05em;height:1.05em;flex:none;stroke:var(--muted);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.ss.open .ss-btn .chev{transform:rotate(180deg)}
.field.bad .ss-btn{border-color:var(--pen)}
.ss.open{z-index:80}
.field:has(.ss.open),.finder:has(.ss.open),.tools:has(.ss.open){position:relative;z-index:70}

.ss-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);min-width:220px;z-index:90;background:#fff;color:var(--text);
  border:1.5px solid var(--blue);border-radius:var(--r-m);box-shadow:0 24px 40px -18px rgba(6,27,77,.55);overflow:hidden;
  animation:ssIn .16s ease-out}
.ss-pill .ss-panel{left:auto;right:0;min-width:240px}
.ss.up .ss-panel{top:auto;bottom:calc(100% + 6px)}
@keyframes ssIn{from{opacity:0;transform:translateY(-4px)}}
.ss-search{position:relative;padding:.6rem;border-bottom:1px solid var(--line);background:var(--tint-2)}
.ss-search .ico{position:absolute;left:1.2rem;top:50%;transform:translateY(-50%);color:var(--muted);width:1em;height:1em}
.field .ss-search input,.ss-search input{width:100%;padding:.55rem .8rem .55rem 2.1rem;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:.92rem;box-shadow:none}
.field .ss-search input:focus,.ss-search input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(4,58,160,.12)}
.ss-list{max-height:240px;overflow-y:auto;padding:.3rem;margin:0;list-style:none}
.ss-list li{padding:.55rem .75rem;border-radius:var(--r-s);cursor:pointer;font-size:.94rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.ss-list li[hidden]{display:none}
.ss-list li.act{background:var(--tint)}
.ss-list li[aria-selected="true"]{font-weight:700;color:var(--blue)}
.ss-list li[aria-selected="true"]::after{content:"";width:.9em;height:.5em;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg) translateY(-2px);flex:none}
.ss-list mark{background:var(--hl);color:var(--blue-900);border-radius:2px;padding:0 1px}
.ss-empty{padding:1rem;text-align:center;color:var(--muted);font-size:.9rem}

/* ---------- Contact: Common questions ---------- */
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1.2rem;align-items:start}
.faq-item{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-l);overflow:hidden;position:relative;transition:border-color .25s,box-shadow .25s}
.faq-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue);transform:scaleY(0);transform-origin:top;transition:transform .3s ease}
.faq-item[open]{border-color:var(--blue);box-shadow:0 18px 28px -22px rgba(6,27,77,.55)}
.faq-item[open]::before{transform:scaleY(1)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1rem;padding:1.15rem 1.3rem;font-weight:700;color:var(--blue-900);font-size:1.02rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .q-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--tint);color:var(--blue);flex:none;transition:background .25s,color .25s}
.faq-item .q-ico .ico{width:22px;height:22px}
.faq-item[open] .q-ico{background:var(--blue);color:#fff}
.faq-item .q-txt{flex:1;line-height:1.35}
.faq-item .q-tog{position:relative;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);flex:none;transition:background .25s,border-color .25s,transform .3s}
.faq-item .q-tog::before,.faq-item .q-tog::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--blue);border-radius:2px;transform:translate(-50%,-50%);transition:transform .3s,background .25s}
.faq-item .q-tog::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item[open] .q-tog{background:var(--blue);border-color:var(--blue)}
.faq-item[open] .q-tog::before,.faq-item[open] .q-tog::after{background:#fff}
.faq-item[open] .q-tog::after{transform:translate(-50%,-50%) rotate(0)}
.faq-item p{margin:0;padding:0 1.3rem 1.3rem calc(1.3rem + 44px + 1rem);color:var(--muted);line-height:1.65}
.faq-item[open] p{animation:faqIn .3s ease-out}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}}
.faq-cta{margin-top:2rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding:1.8rem 2rem;border-radius:var(--r-l);color:#e7eefc;position:relative;overflow:hidden;
  background:radial-gradient(500px 240px at 90% 0,rgba(45,99,207,.8),rgba(45,99,207,0) 70%),linear-gradient(120deg,#061B4D 0%,#05287A 55%,#043AA0 100%)}
.faq-cta h3{color:#fff;margin:0 0 .25rem;font-size:1.4rem}
.faq-cta p{margin:0;color:#cddbf8}
.faq-cta .acts{display:flex;gap:.8rem;flex-wrap:wrap}
@media (hover:hover){
  .faq-item:hover{border-color:var(--blue-500)}
  .faq-item summary:hover .q-txt{color:var(--blue)}
  .faq-item:hover .q-tog{border-color:var(--blue)}
}
@media (max-width:860px){
  .faq-grid{grid-template-columns:1fr}
  .faq-cta{padding:1.5rem}
}
@media (max-width:560px){
  .faq-item summary{padding:1rem;gap:.8rem}
  .faq-item .q-ico{width:38px;height:38px}
  .faq-item p{padding:0 1rem 1.1rem}
}


/* ==========================================================
   v4 updates
   ========================================================== */

/* Hero headline: wide, two lines instead of a tall narrow stack */
.hero .wrap{grid-template-columns:1.2fr .8fr}
.hero h1{max-width:none;font-size:clamp(2.1rem,3.6vw,3.2rem);text-wrap:balance}
.hero p.lead{max-width:56ch}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero h1{font-size:clamp(2rem,8vw,2.6rem)}}

/* Back to top: visible against the dark footer too */
.totop{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 14px 26px -10px rgba(6,27,77,.6)}

/* Contact: map card matches the height of the form beside it */
.split-contact{align-items:stretch}
.split-contact .panel{display:flex;flex-direction:column}
.split-contact .panel .btn{align-self:flex-start;margin-top:auto}
.map-card{position:relative;display:flex;flex-direction:column;min-height:460px;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;box-shadow:0 24px 40px -30px rgba(6,27,77,.5)}
.map-info{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--line);background:#fff;flex-wrap:wrap}
.map-info .pin{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--blue);color:#fff;flex:none}
.map-info .pin .ico{width:22px;height:22px}
.map-info>div{flex:1;min-width:180px}
.map-info h3{margin:0;font-family:var(--sans);font-size:1.05rem;font-weight:800}
.map-info p{margin:0;color:var(--muted);font-size:.92rem}
.map-frame{flex:1;width:100%;min-height:340px;border:0;display:block;background:var(--tint)}
@media (max-width:860px){.map-card{min-height:420px}.split-contact .panel .btn{align-self:stretch}}


/* ==========================================================
   v5 — Mobile responsive pass
   Everything below only changes small screens (or is a safe
   global safeguard). Desktop layout is not affected.
   ========================================================== */

/* Safeguards (all screens) */
body{overflow-x:clip}
img,svg,video,iframe{max-width:100%}
.radio em{white-space:nowrap}
.radio>span,.radio>div{min-width:0}
.set .price{white-space:normal;display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .4rem}
.set .price s{margin:0}
.set .save{margin-left:0}

/* ---------- Tablet and below (<= 860px) ---------- */
@media (max-width:860px){
  /* the dropdown menu sits flush under the header, also once the header shrinks on scroll */
  .nav{inset:auto 0 auto 0;top:74px;max-height:calc(100vh - 120px);overflow-y:auto;gap:.1rem}
  .hdr.scrolled .nav{top:62px}
  .nav a{border-radius:var(--r-m);border-bottom:1px solid var(--tint)}
  .nav a:last-child{border-bottom:0}
  .nav a::after{display:none}
  .page-head{padding-block:2.1rem 1.9rem}
  .sec-head{margin-bottom:1.5rem}
  .faq-cta .acts{width:100%}
  .faq-cta .acts .btn{flex:1 1 auto}
  .map-frame{min-height:320px}
}

/* ---------- Phones (<= 640px) ---------- */
@media (max-width:640px){
  /* Newsletter strip: stack the text and the form, full-width field and button */
  .news .wrap{flex-direction:column;align-items:stretch;gap:1rem;padding-block:1.6rem}
  .news form{flex-direction:column;max-width:none;width:100%;gap:.7rem}
  .news input,.news .btn{width:100%}
  .news .btn{padding-block:.9rem}
  .news p{font-size:.95rem}
}

/* ---------- Small phones (<= 560px) ---------- */
@media (max-width:560px){
  .wrap{width:min(100% - 2rem,var(--wrap))}

  /* Top strip + header */
  .strip{font-size:.78rem}
  .strip .wrap{padding-block:.4rem;justify-content:center;text-align:center}
  .hdr .wrap{gap:.7rem;min-height:66px}
  .hdr.scrolled .wrap{min-height:58px}
  .brand img{width:46px}
  .hdr.scrolled .brand img{width:42px}
  .brand b{font-size:1.25rem}
  .cart-btn,.burger{width:42px;height:42px}
  .nav{top:66px}
  .hdr.scrolled .nav{top:58px}

  /* Hero */
  .hero .wrap{padding-block:2.2rem 3.6rem;gap:1.4rem}
  .hero h1{font-size:clamp(1.85rem,8.2vw,2.3rem);text-wrap:auto}
  .hero p.lead{font-size:1.02rem}
  .hero .cta{flex-direction:column;gap:.7rem}
  .hero .cta .btn{width:100%}
  .hero .facts{flex-direction:column;gap:.55rem;margin-top:1.6rem}
  .fan{width:90%;margin-inline:auto}
  .fan .f1{left:7%}
  .fan .tick{width:62px;height:62px;left:2%}
  .fan .tick svg{width:32px;height:32px}
  .fan .tag{font-size:.8rem;padding:.35rem .75rem}

  /* Sections and headings */
  .sec-head{flex-direction:column;align-items:flex-start;gap:.6rem}
  .sec-head p{max-width:none}
  h2{font-size:1.55rem}
  .stats-card{border-radius:14px}
  .stat b{font-size:1.8rem}
  .stat span{font-size:.82rem}

  /* Cards and grids */
  .lvl{padding:1.3rem}
  .lvl .code{font-size:2.2rem}
  .pk{padding:1.3rem}
  .pk .amt{font-size:1.9rem}
  .quote{padding:1.4rem 1.2rem 1.2rem}
  .quote blockquote{font-size:1rem}
  .bk-title{font-size:.98rem}
  .pp-title{font-size:.98rem}
  .add{min-height:40px}
  .set{padding:1rem}
  .stack{margin-inline:auto}
  .finder{padding:1.1rem}

  /* Books / past papers toolbar: search and sort take the full width */
  .tools{gap:.8rem}
  .tools>div{width:100%}
  .tools input[type="search"],.tools input#q{flex:1 1 100%;width:100%;min-width:0;font-size:16px}
  .tools .ss,.tools .ss.ss-pill{flex:1 1 100%;width:100%}
  .tools .filter-toggle{width:100%}
  .side.open{max-height:65vh;overflow-y:auto}

  /* Book detail: quantity next to Add to cart, Buy now on its own line */
  .buy{display:grid;grid-template-columns:auto 1fr;gap:.7rem}
  .buy #d-buy{grid-column:1/-1}
  .buy .btn{width:100%}
  .detail{padding-block:1.6rem 2rem}
  .stage{padding:1.4rem}
  .specs th{width:42%}
  .specs th,.specs td{padding:.6rem .8rem;font-size:.9rem}

  /* Cart and checkout */
  .panel{padding:1.1rem}
  .radio{padding:.65rem .8rem;gap:.6rem}
  .radio b{font-size:.92rem}
  .cartgrid{padding-block:1.6rem 2.6rem}
  .modal .box{padding:1.5rem}

  /* Forms: 16px text stops iPhones zooming in on focus */
  .field input,.field select,.field textarea,.ss-btn,.ss-search input,.hsearch input,.news input{font-size:16px}
  .ss-list{max-height:min(240px,38vh)}
  .ss-panel{min-width:0}

  /* Contact and FAQ */
  .cards3{gap:.8rem}
  .map-info{padding:.9rem 1rem}
  .map-info .btn{width:100%}
  .map-frame{min-height:300px}
  .faq-cta h3{font-size:1.25rem}
  .faq-cta .acts .btn{width:100%}

  /* Footer */
  .ftr{padding-top:2.4rem}
  .ftr .cols{gap:1.8rem}
  .ftr .bottom{flex-direction:column;gap:.3rem}

  /* Floating buttons: smaller, tucked into the corner, still perfect circles */
  .wa{width:50px;height:50px;bottom:14px;right:14px}
  .wa svg{width:25px;height:25px}
  .totop{width:42px;height:42px;right:18px;bottom:72px}
}

/* ---------- Very small phones (<= 380px) ---------- */
@media (max-width:380px){
  .brand b{font-size:1.1rem}
  .brand img{width:40px}
  .hdr .wrap{gap:.5rem}
  .hero h1{font-size:1.8rem}
  .stats-card{grid-template-columns:1fr 1fr}
  .stat{padding:1rem .5rem}
  .btn{padding:.75rem 1.1rem}
  .grid-books,.grid-papers{gap:.9rem .6rem}
  .bk-body,.pp-body{padding:.8rem .75rem 1rem}
  .fmt span{font-size:.72rem}
}


/* ==========================================================
   v6 — Testimonial marquee + mobile app bar
   ========================================================== */

/* ---------- Testimonials: ten cards flowing right to left ---------- */
.mq{position:relative;overflow:hidden;padding:.9rem 0 1.7rem;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.mq-track{display:flex;width:max-content;animation:mq var(--mq-dur,80s) linear infinite;will-change:transform}
.mq-group{display:flex;gap:1.2rem;padding-right:1.2rem}
.mq .quote{flex:0 0 340px;width:340px;scroll-snap-align:start}
@keyframes mq{to{transform:translateX(-50%)}}
.mq.paused .mq-track,.mq.touch-hold .mq-track{animation-play-state:paused}
@media (hover:hover){.mq:hover .mq-track,.mq:focus-within .mq-track{animation-play-state:paused}}
.mq-toggle{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--blue);font-weight:700;font-size:.88rem;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.mq-toggle:hover{border-color:var(--blue);background:var(--tint)}
.mq-toggle .ico{width:1em;height:1em;stroke-width:2.6}
@media (max-width:560px){
  .mq .quote{flex-basis:285px;width:285px}
  .mq-group{gap:1rem;padding-right:1rem}
  .mq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
}
/* Reduced motion: no auto-scroll, the row can be swiped or scrolled by hand */
@media (prefers-reduced-motion:reduce){
  .mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x proximity}
  .mq-track{animation:none!important}
  .mq-group[aria-hidden="true"],.mq-toggle{display:none}
}

/* ---------- Mobile app bar (bottom tabs) + "More" sheet ---------- */
.bn,.mo{display:none}
@media (max-width:760px){
  :root{--bn-h:68px}
  .bn{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:140;
    min-height:var(--bn-h);padding:7px 6px calc(7px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);border-radius:22px 22px 0 0;box-shadow:0 -12px 32px -14px rgba(6,27,77,.38);
    animation:bnIn .5s cubic-bezier(.2,.8,.2,1) backwards}
  @keyframes bnIn{from{transform:translateY(100%)}}
  .bn-i{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:3px 2px;
    border:0;background:none;color:var(--muted);font:700 .68rem/1.1 var(--sans);text-decoration:none;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:color .2s}
  .bn-i:hover{text-decoration:none}
  .bn-ic{position:relative;display:grid;place-items:center;width:50px;height:30px;border-radius:999px;transition:background .25s,transform .25s cubic-bezier(.3,1.6,.5,1)}
  .bn-ic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .bn-i:active .bn-ic{transform:scale(.88)}
  .bn-i[aria-current="page"],.bn-i.on{color:var(--blue)}
  .bn-i[aria-current="page"] .bn-ic,.bn-i.on .bn-ic{background:var(--tint)}
  .bn-i[aria-current="page"] .bn-t{font-weight:800}
  .bn .cart-count{top:-4px;right:2px}
  .bn-i:focus-visible{outline-offset:-2px;border-radius:14px}

  /* keep content, footer, toasts and floating buttons clear of the bar */
  .ftr{padding-bottom:calc(var(--bn-h) + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(var(--bn-h) + env(safe-area-inset-bottom,0px) + 14px)}
  .wa{bottom:calc(var(--bn-h) + env(safe-area-inset-bottom,0px) + 14px)}
  .totop{bottom:calc(var(--bn-h) + env(safe-area-inset-bottom,0px) + 74px)}

  /* "More" bottom sheet */
  .mo{display:block;position:fixed;inset:0;z-index:450;visibility:hidden;pointer-events:none}
  .mo.open{visibility:visible;pointer-events:auto}
  .mo-bg{position:absolute;inset:0;background:rgba(6,27,77,.55);opacity:0;transition:opacity .3s}
  .mo.open .mo-bg{opacity:1}
  .mo-panel{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:24px 24px 0 0;
    padding:.7rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom,0px));max-height:85vh;overflow-y:auto;
    transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);box-shadow:0 -20px 40px -20px rgba(0,0,0,.5)}
  .mo.open .mo-panel{transform:none}
  .mo-grab{display:block;width:42px;height:5px;border-radius:5px;background:var(--line);margin:0 auto .9rem}
  .mo-title{font-family:var(--serif);font-size:1.25rem;font-weight:700;color:var(--blue-900);margin:0 0 .9rem}
  .mo-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
  .mo-t{display:flex;align-items:center;gap:.7rem;padding:.85rem .9rem;border:1.5px solid var(--line);border-radius:16px;background:var(--tint-2);color:var(--blue-900);font-weight:700;font-size:.93rem;text-decoration:none;line-height:1.2;transition:background .2s,border-color .2s,transform .15s}
  .mo-t:hover{text-decoration:none}
  .mo-t:active{transform:scale(.97);background:var(--tint)}
  .mo-t[aria-current="page"]{border-color:var(--blue);background:var(--tint);color:var(--blue)}
  .mo-t i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--blue);color:#fff;flex:none;font-style:normal}
  .mo-t svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .mo-acts{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.9rem}
  .mo-acts .btn{width:100%}
  .mo-wa{background:#1FA855;color:#fff}
  .mo-wa:hover{background:#178a45;color:#fff}
  .mo-close{display:block;width:100%;margin-top:.8rem;padding:.8rem;border:0;background:none;color:var(--muted);font-weight:700;cursor:pointer}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.bn{animation:none}}
@media print{.bn,.mo{display:none!important}}

/* ---------- Navbar sign-in control (assets/js/auth-nav.js) ---------- */
.acct{position:relative}
.acct-btn{display:inline-flex;align-items:center;gap:.5rem;height:44px;padding:0 1rem 0 .85rem;border-radius:999px;border:1.5px solid var(--line,#DFE6F4);background:#fff;color:var(--blue-900,#061B4D);font:700 .9rem var(--sans,'Public Sans',system-ui,sans-serif);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.acct-btn:hover,.acct.open .acct-btn{border-color:var(--blue,#043AA0);background:var(--tint,#E9F0FC);color:var(--blue,#043AA0)}
.acct-btn .ico{width:20px;height:20px}
.acct-av{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blue,#043AA0);color:#fff;font-weight:800;font-size:.72rem;flex:none}
.acct-av.lg{width:42px;height:42px;font-size:.9rem}
.acct-btn:has(.acct-av){padding:0 1rem 0 .35rem}
.acct-menu{position:absolute;right:0;top:calc(100% + 10px);width:290px;background:#fff;border:1px solid var(--line,#DFE6F4);border-radius:16px;box-shadow:0 24px 50px -18px rgba(6,27,77,.45);padding:.5rem;display:none;z-index:120}
.acct.open .acct-menu{display:block;animation:acctPop .15s ease-out}
@keyframes acctPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.acct-h{display:flex;align-items:center;gap:.7rem;padding:.7rem .7rem .8rem}
.acct-h b{display:block;color:var(--blue-900,#061B4D);font-size:.95rem;line-height:1.25}
.acct-h span span{display:block;color:var(--muted,#5B6A8F);font-size:.82rem;line-height:1.4;overflow-wrap:anywhere}
.acct-menu a,.acct-menu button[role="menuitem"]{display:flex;align-items:center;gap:.7rem;width:100%;padding:.62rem .75rem;border:0;background:none;border-radius:10px;color:var(--text,#14224A);font:600 .92rem var(--sans,'Public Sans',system-ui,sans-serif);text-align:left;cursor:pointer;text-decoration:none}
.acct-menu a:hover,.acct-menu button[role="menuitem"]:hover{background:var(--tint,#E9F0FC);color:var(--blue,#043AA0);text-decoration:none}
.acct-menu .ico{width:19px;height:19px;color:var(--blue,#043AA0)}
.acct-menu .acct-primary{justify-content:center;background:var(--blue,#043AA0);color:#fff;border-radius:999px;margin:.1rem 0 .4rem;padding:.7rem 1rem}
.acct-menu .acct-primary:hover{background:var(--blue-700,#032C7A);color:#fff}
.acct-menu .acct-line{justify-content:center;border:1.5px solid var(--line,#DFE6F4);border-radius:999px;padding:.62rem 1rem}
.acct-menu hr{border:0;border-top:1px solid var(--line,#DFE6F4);margin:.5rem .2rem}
.acct-menu .acct-admin{background:var(--tint,#E9F0FC);align-items:center}
.acct-menu .acct-admin b{display:block;font-size:.88rem;color:var(--blue-900,#061B4D)}
.acct-menu .acct-admin small{display:block;color:var(--muted,#5B6A8F);font-weight:500;font-size:.76rem}
@media (max-width:980px){.acct-lbl{display:none}.acct-btn{padding:0;width:42px;height:42px;justify-content:center}.acct-btn:has(.acct-av){padding:0}}
@media (max-width:480px){.acct{position:static}.acct-menu{position:fixed;left:.75rem;right:.75rem;top:68px;width:auto}}
.acct-btn,.acct-lbl{white-space:nowrap}
@media (max-width:1500px){.hsearch{display:none}}
@media (max-width:1180px){.acct-lbl{display:none}.acct-btn{padding:0;width:44px;justify-content:center}.acct-btn:has(.acct-av){padding:0}}