/* store.css — Zenith storefront.
   GENERATED by build-store-assets.js on first extraction, but this is now the
   REAL SOURCE: edit this file directly, then run `node build-store-assets.js`
   (or deploy-store.cmd) so index.html picks up the new ?v= content hash.
   Blocks below appear in the exact order they had inside index.html. */

/* ── block 1 of 14 ── */
/* Phase 200-e (2026-07-22) — STAFF TOOLS ARE NOT BUYER UI.
   Every exam tile in #categories was rendering a "🔗 लिंक" (copy shareable link) and a
   "📣 प्रचार" (promote on FB/IG/X/YouTube) button. Measured on the live mobile home:
   36 of the 37 tappable controls in the category grid were these two staff buttons.
   A buyer scanning for "UGC NET notes" met a wall of marketing tools — and at 42 px
   they were under the 44 px tap minimum too, so they were also easy to hit by mistake.
   They are now staff-only. Turn them on with ?staff=1 (sticky), off with ?staff=0. */
  .staff-only{display:none !important}
  html.zstaff .staff-only{display:inline-flex !important}

/* ── block 2 of 14 ── */

:root{--font-head:'Outfit',sans-serif;--font-display:'Outfit',sans-serif}
/* Big hero headlines use Khand for impact */
.hero h1,.hero h2,.sec-head h2,h1.display,.hero-title{font-family:var(--font-display)!important;letter-spacing:.005em;font-weight:700}
/* Card titles, category headers, product names use Outfit for clean readability */
h3,h4,.exam-head b,.card h3,.brand-name,.brand b,.bp-title,.cv-title,.cv-exam{font-family:var(--font-head)!important;letter-spacing:-.01em;font-weight:700}
/* Boost category title weight + spacing */
.exam-head b{font-weight:800;font-size:1rem;letter-spacing:-.005em}
.exam-head .ecount{font-family:var(--font-head)!important;font-weight:800}

/* ── block 3 of 14 ── */

  :root{
    /* Zenith poster palette — cream × red × black × gold */
    --navy:#171310;            /* rich black (headings) */
    --ink:#100d0a;             /* near black (footer/ticker) */
    --primary:#c4161c;         /* zenith red */
    --primary-2:#e23b3b;       /* bright red */
    --blue:#1a2a6b;            /* deep blue (numbers/links) */
    --accent:#d9b85c;          /* poster gold band */
    --accent-dark:#8a6a1a;
    --cream:#fdf6e0;           /* poster cream */
    --green:#15803d; --red:#dc2626;
    --bg:#fdf6e0;              /* cream page background */
    --card:#fffdf4; --text:#221c14; --muted:#7a6f5c;
    --border:#ead9b5; --radius:16px;
    --shadow:0 3px 14px rgba(40,28,8,.10); --shadow-lg:0 16px 42px rgba(40,28,8,.20);
    --font-head:'Outfit','Poppins',sans-serif; --font-body:'Mukta','Outfit',sans-serif;
    /* Phase 198 v2 — premium palette overlay tokens used by the storefront visual v2 block
       further down. Kept side-by-side with the poster tokens so nothing existing breaks. */
    --v2-ink:#0e1230; --v2-ink2:#1a1f4a;
    --v2-blue:#3653e2; --v2-blue2:#1a2a6b;
    --v2-accent:#f59e0b; --v2-accent2:#fbd87a;
    --v2-shadow-sm:0 2px 6px rgba(20,25,80,.06);
    --v2-shadow:0 10px 30px rgba(20,25,80,.10);
    --v2-shadow-hi:0 20px 50px rgba(20,25,80,.18);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6}
  h1,h2,h3,h4{font-family:var(--font-head)}
  a{text-decoration:none;color:inherit}
  button{font-family:var(--font-body)}
  .container{max-width:1220px;margin:0 auto;padding:0 18px}

  /* ===== Update ticker ===== */
  .ticker-wrap{background:var(--ink);color:#fff;font-size:.85rem;overflow:hidden;display:flex;align-items:center;border-bottom:2px solid var(--accent)}
  .ticker-label{background:var(--accent);color:#2a1f00;font-weight:800;padding:7px 14px;white-space:nowrap;font-size:.78rem;letter-spacing:.05em}
  .ticker{flex:1;overflow:hidden;position:relative}
  .ticker-track{display:inline-block;white-space:nowrap;padding-left:100%;animation:tick 38s linear infinite}
  .ticker-track:hover{animation-play-state:paused}
  .ticker-track a{color:#dbe4ff;margin-right:56px}
  .ticker-track a b{color:#ffd58a}
  /* Phase 200-n — headlines with no destination render as .tk-flat instead of a
     dead href="#". Same look, no pointer, nothing to tap that does nothing. */
  .ticker-track .tk-flat{color:#dbe4ff;margin-right:56px;cursor:default}
  .ticker-track .tk-flat b{color:#ffd58a}
  @keyframes tick{to{transform:translateX(-100%)}}

  /* ===== Header ===== */
  header{background:#fff;box-shadow:var(--shadow);position:sticky;top:0;z-index:60}
  .nav{display:flex;align-items:center;gap:16px;padding:12px 0;flex-wrap:wrap}
  .logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
  .logo-mark{width:48px;height:48px;border-radius:13px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.3rem;font-family:var(--font-head)}
  .logo-text b{font-size:1.12rem;color:var(--primary);display:block;line-height:1.2}
  .logo-text span{font-size:.68rem;color:var(--muted);letter-spacing:.07em;text-transform:uppercase}
  .search{flex:1;min-width:200px;max-width:480px;display:flex;border:1.7px solid var(--border);border-radius:12px;overflow:hidden;background:#fafbff}
  .search input{flex:1;border:none;outline:none;padding:10px 15px;font-size:.92rem;background:transparent;font-family:var(--font-body)}
  .search button{border:none;background:var(--primary);color:#fff;padding:0 18px;cursor:pointer;font-size:1rem}
  .nav-actions{display:flex;align-items:center;gap:9px;margin-left:auto;flex-wrap:wrap}
  /* Phase 52 — Returning-buyer "My Account" pill: blinks gold to draw the eye, only shown if profile exists */
  .my-acc-pill{background:linear-gradient(135deg,#fbd87a,#d9b85c);color:#3a2800;border:1.6px solid #8a6a1a;padding:7px 13px;border-radius:999px;text-decoration:none;font-size:.84rem;font-weight:800;display:inline-flex;align-items:center;gap:5px;box-shadow:0 0 0 0 rgba(217,184,92,.6);animation:accPulse 2s infinite}
  @keyframes accPulse{0%{box-shadow:0 0 0 0 rgba(217,184,92,.6)}70%{box-shadow:0 0 0 14px rgba(217,184,92,0)}100%{box-shadow:0 0 0 0 rgba(217,184,92,0)}}
  .my-acc-pill:hover{transform:scale(1.04);transition:.15s}
  .lang-toggle{display:flex;border:1.6px solid var(--primary);border-radius:999px;overflow:hidden}
  .lang-toggle button{border:none;background:#fff;color:var(--primary);font-weight:700;font-size:.8rem;padding:6px 13px;cursor:pointer}
  .lang-toggle button.active{background:var(--primary);color:#fff}
  .btn{display:inline-flex;align-items:center;gap:7px;border:none;cursor:pointer;border-radius:11px;font-weight:700;font-size:.9rem;padding:10px 17px;transition:.18s}
  .btn-outline{background:#fff;color:var(--primary);border:1.6px solid var(--primary)}
  .btn-outline:hover{background:var(--primary);color:#fff}
  .btn-primary{background:var(--primary);color:#fff}
  .btn-primary:hover{background:var(--navy)}
  .btn-accent{background:var(--accent);color:#3a2800}
  .btn-accent:hover{background:var(--accent-dark);color:#fff}
  .btn-green{background:#16a34a;color:#fff}
  .btn-green:hover{background:#15803d}
  .cart-btn{position:relative}
  .cart-count{position:absolute;top:-7px;right:-7px;background:var(--red);color:#fff;font-size:.67rem;font-weight:800;min-width:19px;height:19px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px}
  /* Phase 54 — blinking offer ticker (only renders if currentOffer.text_en/hi is non-empty + not expired) */
  .offer-strip{display:none;background:linear-gradient(90deg,#c4161c,#e23b3b,#c4161c);background-size:200% 100%;color:#fff;text-align:center;padding:7px 14px;font-weight:800;font-size:.84rem;letter-spacing:.3px;animation:offerSlide 5s linear infinite,offerBlink 1.4s ease-in-out infinite;cursor:pointer;text-decoration:none;display:none;align-items:center;justify-content:center;gap:10px}
  .offer-strip.on{display:flex}
  .offer-strip .offer-code{background:#fde047;color:#7a1a1d;padding:2px 9px;border-radius:5px;font-family:'Outfit',sans-serif;font-weight:900;font-size:.8rem;letter-spacing:1px}
  .offer-strip .offer-arrow{font-size:.9rem;animation:offerArrow 1s ease-in-out infinite}
  @keyframes offerSlide{0%{background-position:0% 50%}100%{background-position:200% 50%}}
  @keyframes offerBlink{0%,100%{box-shadow:inset 0 0 0 0 rgba(253,224,71,0)}50%{box-shadow:inset 0 -3px 0 0 rgba(253,224,71,.9)}}
  @keyframes offerArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
  .menubar{border-top:1px solid var(--border)}
  .menubar ul{display:flex;gap:4px;list-style:none;overflow-x:auto;padding:0}
  .menubar a{display:block;padding:10px 15px;font-weight:600;font-size:.88rem;color:#39435e;white-space:nowrap;border-bottom:2.5px solid transparent}
  .menubar a:hover{color:var(--primary);border-color:var(--accent)}

  /* ===== Hero ===== */
  /* Poster-style hero: cream canvas, black+red headline, gold band */
  .hero{background:var(--cream);color:var(--navy);padding:50px 0 58px;position:relative;overflow:hidden;border-bottom:3px solid var(--accent)}
  .hero::after{content:'';position:absolute;right:-120px;top:-120px;width:430px;height:430px;border-radius:50%;background:rgba(217,184,92,.18)}
  .hero::before{content:'';position:absolute;left:-90px;bottom:-160px;width:340px;height:340px;border-radius:50%;background:rgba(196,22,28,.07)}
  .hero .container{position:relative;z-index:2}
  .hero .kicker{display:inline-block;background:var(--accent);color:#231a02;font-weight:800;font-size:.78rem;letter-spacing:.08em;padding:6px 18px;border-radius:6px;margin-bottom:16px;box-shadow:var(--shadow)}
  .hero h1{font-size:clamp(1.7rem,4.2vw,2.8rem);line-height:1.18;max-width:780px;margin-bottom:14px;color:#161310;text-transform:none;font-weight:800}
  .hero h1 em{font-style:normal;color:var(--primary)}
  .hero p{max-width:660px;color:#473e2e;margin-bottom:24px;font-size:1.02rem}
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}
  .stats{display:flex;gap:14px;flex-wrap:wrap}
  .trust-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
  .trust-chip{background:rgba(255,255,255,.85);border:1px solid var(--border);color:#3a2f20;font-size:.74rem;font-weight:700;padding:6px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;box-shadow:0 2px 6px rgba(40,28,8,.06)}
  @media (max-width:600px), (min-device-width:1px) and (max-device-width:600px){.trust-chip{font-size:.7rem;padding:5px 9px}}
  .stat{background:var(--navy);border:1.5px solid #2c2620;border-radius:14px;padding:13px 22px;color:#f4ead0;box-shadow:var(--shadow)}
  .stat b{display:block;font-size:1.3rem;font-family:var(--font-head);color:var(--accent)}
  .stat span{font-size:.78rem;opacity:.92}

  /* ===== Web banner carousel ===== */
  .banner-belt{margin:22px auto 0}
  .bcarousel{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--ink)}
  .bslides{display:flex;transition:transform .55s ease}
  .bslide{min-width:100%;position:relative;cursor:pointer}
  .bslide img{width:100%;display:block;aspect-ratio:16/6;object-fit:cover;object-position:center;background:var(--ink)}
  /* Phase 184 — mobile: honour the banner's native 1920×720 (~2.67:1) aspect so the artwork isn't
     cropped at the sides (previously cover+16/9 sliced ~33% off each side, hiding the shield + title).
     Contain letterboxes cleanly against the dark background so the banner reads as one professional piece. */
  @media (max-width:640px), (min-device-width:1px) and (max-device-width:640px){.bslide img{aspect-ratio:1920/720;object-fit:contain;background:#100d0a}}
  .bslide .bfall{display:none;min-height:190px;align-items:center;justify-content:center;text-align:center;padding:34px 26px;background:linear-gradient(118deg,#171310,#7a1115 60%,#c4161c);color:#fff;font-family:var(--font-head);font-weight:700;font-size:clamp(1rem,2.6vw,1.5rem)}
  .bslide.noimg img{display:none}
  .bslide.noimg .bfall{display:flex}
  .bcap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(14,9,32,.88));color:#fff;padding:26px 22px 13px;font-weight:700;font-size:.92rem}
  .bnav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(247,241,227,.9);border:none;width:38px;height:38px;border-radius:50%;font-size:1.15rem;cursor:pointer;color:var(--primary);font-weight:800;box-shadow:var(--shadow);z-index:3}
  .bnav:hover{background:#fff}
  .bprev{left:13px}.bnext{right:13px}
  .bdots{position:absolute;bottom:9px;right:16px;display:flex;gap:6px;z-index:3}
  .bdot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;border:none}
  .bdot.active{background:var(--accent);width:22px;border-radius:999px}

  /* ===== Sections ===== */
  section{padding:46px 0}
  .sec-head{text-align:center;margin-bottom:30px}
  .sec-head .eyebrow{color:var(--accent-dark);font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
  .sec-head h2{font-size:1.75rem;color:var(--navy);margin-top:4px}
  .sec-head p{color:var(--muted);margin-top:6px;max-width:640px;margin-left:auto;margin-right:auto}

  /* ===== Exam Explorer boxes ===== */
  .exam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(295px,1fr));gap:18px}
  .exam-box{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;border:1.6px solid var(--border);transition:.2s;display:flex;flex-direction:column}
  .exam-box:hover{box-shadow:var(--shadow-lg);border-color:var(--accent);transform:translateY(-3px)}
  .exam-head{display:flex;align-items:center;gap:11px;padding:14px 16px;color:#fff;cursor:pointer;position:relative}
  .exam-head .eico{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}
  .exam-head b{font-size:.92rem;line-height:1.3;font-family:var(--font-head)}
  .exam-head .ecount{margin-left:auto;background:rgba(255,255,255,.2);border-radius:999px;font-size:.68rem;font-weight:800;padding:3px 10px;white-space:nowrap}
  .exam-head .exp-arrow{display:none;margin-left:6px;font-size:1.1rem;transition:transform .25s}
  .exam-box.collapsed .exp-arrow{transform:rotate(-90deg)}
  .exam-items{padding:13px 14px;display:flex;flex-wrap:wrap;gap:7px;flex:1;align-content:flex-start}
  .exam-item{background:var(--cream);border:1.4px solid var(--border);border-radius:999px;padding:5px 13px;font-size:.78rem;font-weight:700;color:#4a3c1f;cursor:pointer;transition:.15s}
  .exam-item:hover{background:var(--primary);border-color:var(--primary);color:#fff}
  .exam-type{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 16px 11px}
  /* Phase 43 — Mobile: 1-col stack, collapsible cards, bigger tap targets */
  @media (max-width:640px), (min-device-width:1px) and (max-device-width:640px){
    .exam-grid{grid-template-columns:1fr;gap:11px}
    .exam-box{border-radius:14px}
    .exam-head{padding:14px 15px;min-height:60px}
    .exam-head .eico{width:36px;height:36px;font-size:1.1rem}
    .exam-head b{font-size:.95rem}
    .exam-head .exp-arrow{display:inline-block;color:#fff;opacity:.85;font-weight:800}
    .exam-box.collapsed .exam-items, .exam-box.collapsed .exam-type{display:none}
    .exam-items{padding:11px 13px 14px;gap:8px}
    .exam-item{padding:8px 14px;font-size:.84rem}
    .exam-type{padding:0 15px 8px}
  }

  /* Phase 43 — Smart Search with autocomplete dropdown */
  .search{position:relative}
  .search-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1.4px solid var(--border);border-radius:12px;box-shadow:0 12px 36px rgba(40,28,8,.18);max-height:380px;overflow-y:auto;z-index:60;display:none}
  .search-suggest.on{display:block}
  .search-suggest .ss-section{padding:8px 14px 4px;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:#fdf6e0}
  .search-suggest .ss-item{padding:9px 14px;cursor:pointer;font-size:.88rem;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f4eddc}
  .search-suggest .ss-item:hover, .search-suggest .ss-item.hl{background:#fff4e8}
  .search-suggest .ss-item .ico{width:26px;text-align:center;font-size:1rem;flex-shrink:0}
  .search-suggest .ss-item .label{flex:1;font-weight:600;color:var(--ink);line-height:1.3}
  .search-suggest .ss-item .label small{display:block;color:var(--muted);font-weight:400;font-size:.74rem;margin-top:2px}
  .search-suggest .ss-item mark{background:#ffe599;color:inherit;padding:0;font-weight:800}
  .search-suggest .ss-empty{padding:22px 14px;text-align:center;color:var(--muted);font-size:.86rem}
  .search-clear{position:absolute;right:62px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:6px 10px;display:none;z-index:5}
  .search-clear.on{display:block}
  .search-clear:hover{color:var(--primary)}

  /* ===== Filter bar ===== */
  .filterbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:26px;align-items:center}
  .chip{background:#fff;border:1.6px solid var(--border);border-radius:999px;padding:8px 17px;font-weight:600;font-size:.85rem;cursor:pointer;transition:.18s;font-family:var(--font-body)}
  .chip:hover,.chip.active{border-color:var(--primary);background:var(--primary);color:#fff}
  .sort{border:1.6px solid var(--border);border-radius:999px;padding:8px 14px;font-size:.85rem;background:#fff;font-weight:600;color:#39435e;cursor:pointer;font-family:var(--font-body)}
  /* Phase 199 (2026-07-19) — informational "A → Z" chip replacing the pulled sort dropdown. */
  .sort-lock{display:inline-flex;align-items:center;gap:5px;border:1.5px dashed #c9a35c;border-radius:999px;padding:6px 14px;font-size:.78rem;font-weight:700;color:#7a5a20;background:linear-gradient(135deg,#fff9ee,#fef3d0);font-family:var(--font-body);letter-spacing:.2px;cursor:default;user-select:none}

  /* ===== Product cards ===== */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:20px}
  .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:.2s;position:relative}
  .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
  .badge{position:absolute;top:12px;left:12px;z-index:2;font-size:.68rem;font-weight:800;letter-spacing:.05em;padding:4px 12px;border-radius:999px;color:#fff;text-transform:uppercase}
  .badge.new{background:var(--green)}.badge.best{background:var(--red)}.badge.hot{background:var(--accent-dark)}
  .badge.soon{background:#6b7280;color:#fff;letter-spacing:.03em}
  .tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:18px}
  .tool-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow);transition:.2s}
  .tool-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(40,28,8,.13)}
  .tool-card .tool-emoji{font-size:2.2rem;line-height:1}
  .tool-card h4{font-family:'Poppins';font-size:.96rem;color:var(--navy);font-weight:700}
  .tool-card p{font-size:.82rem;color:#4a4030;flex:1;line-height:1.55}
  .tool-card .btn{margin-top:auto;font-size:.82rem;padding:9px 12px;justify-content:center}
  .card-coming{opacity:.92}
  .card-coming .cover{filter:saturate(.6) brightness(.95)}
  .coming-banner{background:linear-gradient(135deg,#fdf6e0,#fffdf4);border:1.5px dashed var(--accent);padding:14px;border-radius:11px;text-align:center;display:flex;flex-direction:column;gap:9px}
  .coming-banner b{font-family:'Poppins';color:var(--ink);font-size:.95rem}
  .coming-banner span{font-size:.8rem;color:#5a4d34;line-height:1.5}
  .coming-banner .btn{align-self:stretch;justify-content:center;background:var(--green);color:#fff;font-size:.85rem;padding:9px;font-weight:700}
  .medium-tag{position:absolute;top:12px;right:12px;z-index:2;font-size:.66rem;font-weight:800;background:rgba(255,255,255,.92);color:var(--navy);padding:4px 10px;border-radius:999px}
  .cover{position:relative;height:178px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:20px 16px;gap:5px}
  .cover .cv-exam{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;opacity:.85}
  .cover .cv-title{font-weight:800;font-size:1.02rem;line-height:1.32;font-family:var(--font-head)}
  .cover .cv-type{font-size:.72rem;opacity:.88;background:rgba(255,255,255,.16);padding:2px 11px;border-radius:999px;margin-top:4px}
  .card-body{padding:16px;display:flex;flex-direction:column;gap:9px;flex:1}
  .card-body h3{font-size:.96rem;line-height:1.42;min-height:2.8em;font-weight:700}
  .meta{font-size:.78rem;color:var(--muted)}
  .meta .pages{color:var(--primary);font-weight:700}
  .off{color:var(--green);font-weight:700;font-size:.8rem}
  .opt-rows{display:flex;flex-direction:column;gap:8px;margin-top:auto}
  /* Phase 24 — tier rows: progressively richer colour as price escalates */
  .opt-tier{position:relative;border-left:3px solid var(--border)}
  .opt-tier-readonly{border-left-color:#94a3b8}
  .opt-tier-tests{border-left-color:#0891b2}
  .opt-tier-bundle{border-left-color:#7c3aed;background:linear-gradient(90deg,rgba(124,58,237,.06),transparent)}
  .opt-tier-printable{border-left-color:#d97706;background:linear-gradient(90deg,rgba(217,119,6,.07),transparent)}
  .opt-tier-hardcopy{border-left-color:var(--primary);background:linear-gradient(90deg,rgba(196,22,28,.08),transparent)}
  .opt-tier-bundle::before,.opt-tier-printable::before,.opt-tier-hardcopy::before{content:'';position:absolute;top:6px;right:8px;font-size:.65rem;font-weight:800;padding:2px 6px;border-radius:99px;color:#fff;letter-spacing:.04em}
  .opt-tier-bundle::before{content:'POPULAR';background:#7c3aed}
  .opt-tier-printable::before{content:'+ PRINT';background:#d97706}
  .opt-tier-hardcopy::before{content:'TOP';background:var(--primary)}
  .opt{display:flex;align-items:center;gap:9px;border:1.6px solid var(--border);border-radius:11px;padding:8px 11px;background:#fafbff}
  .opt:hover{border-color:var(--primary)}
  .opt-info{flex:1;min-width:0}
  .opt-info b{font-size:.82rem;display:block;color:var(--navy)}
  .opt-info span{font-size:.7rem;color:var(--muted)}
  .opt-price{text-align:right;line-height:1.25}
  .opt-price b{font-size:.98rem;font-weight:800;color:var(--navy);font-family:var(--font-head);display:block}
  .opt-price s{font-size:.7rem;color:var(--muted)}
  .opt .btn{padding:7px 11px;font-size:.8rem;border-radius:9px}
  .sample-btn{width:100%;justify-content:center;padding:8px;font-size:.82rem;margin-top:8px}
  .fp-strip{background:linear-gradient(135deg,#100d0a,#1a2a6b);color:#fdf6e0;font-size:.72rem;padding:8px 11px;border-radius:9px;margin-top:8px;line-height:1.45;letter-spacing:.01em;border:1px solid #d9b85c;cursor:help}
  .fp-strip b{color:#fbd87a;font-weight:800}
  @media (max-width:600px), (min-device-width:1px) and (max-device-width:600px){.fp-strip{font-size:.68rem;padding:7px 10px}}

  /* ===== Sample strip ===== */
  .sample-strip{background:linear-gradient(115deg,#171310,#41320f);color:#fff;border-radius:var(--radius);padding:34px;display:flex;gap:26px;align-items:center;flex-wrap:wrap;box-shadow:var(--shadow-lg);border:1.5px solid var(--accent)}
  .sample-strip .big{font-size:2.6rem}
  .sample-strip h3{font-size:1.35rem;margin-bottom:6px}
  .sample-strip p{opacity:.93;max-width:640px}
  .sample-strip .btn{margin-left:auto}

  /* ===== Trust / safety ===== */
  .trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px}
  .trust-item{background:#fff;text-align:center;padding:26px 16px;border:1.6px solid var(--border);border-radius:var(--radius);transition:.2s}
  .trust-item:hover{border-color:var(--primary);box-shadow:var(--shadow)}
  .trust-item .ico{font-size:2rem;margin-bottom:9px}
  .trust-item h4{margin-bottom:5px;color:var(--navy);font-size:.98rem}
  .trust-item p{font-size:.83rem;color:var(--muted)}

  /* ===== Blog ===== */
  .blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
  .blog-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:.2s;display:flex;flex-direction:column}
  .blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
  .blog-top{height:7px;background:linear-gradient(90deg,var(--primary),var(--accent))}
  .blog-body{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1}
  .blog-meta{display:flex;gap:9px;align-items:center;font-size:.75rem;color:var(--muted)}
  .blog-tag{background:#fdeaea;color:var(--primary);font-weight:800;padding:3px 11px;border-radius:999px;font-size:.7rem}
  .blog-body h3{font-size:1.02rem;line-height:1.42;color:var(--navy)}
  .blog-body p{font-size:.86rem;color:#4a5269;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .read-more{color:var(--primary);font-weight:700;font-size:.84rem;margin-top:auto}

  /* ===== Updates board ===== */
  .updates-list{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
  .update-row{display:flex;gap:14px;align-items:flex-start;padding:16px 22px;border-bottom:1px solid var(--border)}
  .update-row:last-child{border-bottom:none}
  .update-date{background:#fdeaea;color:var(--primary);font-weight:800;font-size:.72rem;padding:5px 11px;border-radius:8px;white-space:nowrap;margin-top:2px}

  /* ===== Exam notifications & syllabus ===== */
  .notif-table{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
  .notif-row{display:grid;grid-template-columns:1.4fr 2fr auto;gap:14px;align-items:center;padding:16px 22px;border-bottom:1px solid var(--border)}
  .notif-row:last-child{border-bottom:none}
  .notif-row:hover{background:var(--cream)}
  .notif-exam b{display:block;color:var(--navy);font-size:.95rem}
  .notif-exam span{font-size:.74rem;color:var(--muted)}
  .notif-exam .last{color:var(--primary);font-weight:800}
  .notif-desc{font-size:.88rem;color:#4a4030}
  .notif-btns{display:flex;gap:8px;flex-wrap:wrap}
  .notif-btns a{font-size:.76rem;font-weight:800;border-radius:8px;padding:7px 13px;white-space:nowrap}
  .nb-notif{background:var(--primary);color:#fff}
  .nb-notif:hover{background:#9b1014}
  .nb-syll{background:var(--cream);color:var(--navy);border:1.5px solid var(--accent)}
  .nb-syll:hover{background:var(--accent)}
  @media (max-width:720px), (min-device-width:1px) and (max-device-width:720px){.notif-row{grid-template-columns:1fr}}

  /* ===== Checkout ===== */
  .co-field label{font-size:.74rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;display:block;margin:10px 0 4px}
  .co-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .co-note{background:var(--cream);border:1.5px dashed var(--accent);border-radius:10px;padding:10px 13px;font-size:.8rem;color:#5d4d27;margin-top:10px}
  .order-done{text-align:center}
  .order-done .big{font-size:3rem}
  .order-id{display:inline-block;background:var(--cream);border:1.5px dashed var(--accent-dark);border-radius:9px;padding:5px 15px;font-weight:800;color:var(--navy);margin:9px 0}
  .update-row a{font-weight:600;color:#2a3350;font-size:.92rem}
  .update-row a:hover{color:var(--primary)}

  /* ===== Testimonials ===== */
  .testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
  .testi{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
  .testi-head{display:flex;align-items:center;gap:13px;margin-bottom:11px}
  .avatar{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.15rem;flex-shrink:0}
  .testi-head b{display:block}.testi-head span{font-size:.77rem;color:var(--muted)}
  .stars{color:var(--accent);letter-spacing:2px;margin-bottom:8px;font-size:.92rem}
  .testi p{font-size:.89rem;color:#3a4154}
  .sample-note{text-align:center;font-size:.75rem;color:var(--muted);margin-top:14px}

  /* ===== Newsletter ===== */
  .newsletter{background:linear-gradient(115deg,#100d0a,#7a1115);border-radius:var(--radius);color:#fff;padding:38px;text-align:center;box-shadow:var(--shadow-lg);border:1.5px solid var(--accent)}

  /* ===== Results gallery ===== */
  .res-scroll{display:flex;gap:16px;overflow-x:auto;padding:6px 4px 18px;scroll-snap-type:x mandatory}
  .res-card{flex:0 0 230px;scroll-snap-align:start;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:.2s;border:2px solid transparent}
  .res-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-lg)}
  .res-thumb{width:100%;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;background:#1a1410;overflow:hidden}
  .res-thumb img{width:100%;height:100%;object-fit:contain;display:block}
  .res-card .res-cap{padding:11px 13px;font-size:.8rem;font-weight:700;color:var(--navy)}
  .res-strip-head{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
  .verified-pill{background:#e8f7ee;border:1.5px solid #9fd9b4;color:#14532d;font-size:.72rem;font-weight:800;border-radius:999px;padding:4px 13px}

  /* ===== About ===== */
  .about-wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:start}
  .about-text{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:30px;border-top:5px solid var(--primary)}
  .about-text p{font-size:.95rem;color:#3a3354;line-height:1.75}
  .about-text .addr{margin-top:16px;font-size:.83rem;color:var(--muted);border-top:1px dashed var(--border);padding-top:13px}
  .about-stats{display:grid;grid-template-columns:1fr 1fr;gap:13px}
  .astat{background:linear-gradient(150deg,#171310,#43320e);border-radius:14px;color:#fff;padding:20px 16px;text-align:center;border:1px solid #5a4517}
  .astat b{display:block;font-size:1.45rem;font-family:var(--font-head);color:var(--accent)}
  .astat span{font-size:.74rem;opacity:.9}
  @media (max-width:820px), (min-device-width:1px) and (max-device-width:820px){.about-wrap{grid-template-columns:1fr}}

  /* ===== Coupon ===== */
  .coupon-row{display:flex;gap:8px;margin-bottom:12px}
  .coupon-row input{flex:1;padding:10px 13px;border:1.7px dashed var(--primary);border-radius:10px;font-size:.88rem;text-transform:uppercase;font-weight:700;letter-spacing:.06em;outline:none;font-family:var(--font-body)}
  .coupon-row .btn{padding:9px 14px}
  .coupon-ok{background:#e8f7ee;border:1.5px solid #9fd9b4;color:#14532d;border-radius:10px;padding:8px 12px;font-size:.8rem;font-weight:700;margin-bottom:11px;display:flex;justify-content:space-between;align-items:center}
  .coupon-ok button{border:none;background:none;color:var(--red);font-weight:800;cursor:pointer}
  .sub-row{display:flex;justify-content:space-between;font-size:.86rem;color:var(--muted);margin-bottom:5px}
  .disc-row{display:flex;justify-content:space-between;font-size:.86rem;color:var(--green);font-weight:700;margin-bottom:5px}
  .offers-strip{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
  .offer-chip{background:#fff;border:1.7px dashed var(--accent-dark);color:#7a5800;border-radius:12px;padding:8px 16px;font-size:.8rem;font-weight:700;cursor:pointer}
  .offer-chip:hover{background:var(--accent);color:#2a1f00}

  /* ===== Pay modal ===== */
  .pay-qr{display:flex;justify-content:center;margin:14px 0}
  .pay-qr > div{padding:14px;background:#fff;border:2px solid var(--primary);border-radius:14px}
  .pay-merchant{text-align:center;font-weight:800;color:var(--navy);font-size:.95rem}
  .pay-amt{text-align:center;font-family:var(--font-head);font-size:1.7rem;font-weight:800;color:var(--primary);margin:4px 0 10px}
  .pay-steps{background:var(--cream);border-radius:12px;padding:13px 16px;font-size:.84rem;color:#4a4060;margin-bottom:13px}
  .pay-steps li{margin-left:18px;margin-bottom:5px}
  .pay-apps{text-align:center;font-size:.72rem;color:var(--muted);margin-top:9px}

  /* ===== Trial ===== */
  .trial-link{display:block;text-align:center;font-size:.76rem;font-weight:700;color:var(--primary);margin-top:7px;cursor:pointer;text-decoration:underline dotted}
  .trial-link:hover{color:var(--primary-2)}
  .newsletter h3{font-size:1.4rem;margin-bottom:7px}
  .newsletter p{opacity:.9;margin-bottom:20px}
  .news-form{display:flex;gap:10px;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
  .news-form input{flex:1;min-width:220px;padding:12px 16px;border-radius:11px;border:none;outline:none;font-size:.92rem;font-family:var(--font-body)}

  /* ===== Footer ===== */
  footer{background:var(--ink);color:#cfc6e8;margin-top:24px;border-top:3px solid var(--accent)}
  .foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:28px;padding:44px 0 28px}
  .foot-grid h4{color:#fff;margin-bottom:13px;font-size:.95rem}
  .foot-grid li{list-style:none;margin-bottom:9px;font-size:.86rem}
  .foot-grid a:hover{color:#fff;text-decoration:underline}
  .foot-bottom{border-top:1px solid rgba(255,255,255,.14);padding:16px 0;text-align:center;font-size:.82rem}

  /* ===== Upcoming notes ===== */
  .up-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:20px}
  .up-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;position:relative;display:flex;flex-direction:column;transition:.2s;border:1.8px dashed #b9c4e8}
  .up-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
  .up-cover{height:120px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:#fff;text-align:center;padding:14px;position:relative;overflow:hidden}
  .up-cover .soon{position:absolute;top:11px;right:-34px;background:var(--accent);color:#3a2800;font-size:.64rem;font-weight:800;letter-spacing:.08em;padding:4px 40px;transform:rotate(35deg)}
  .up-cover .cv-exam{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
  .up-cover b{font-family:var(--font-head);font-size:.98rem;line-height:1.3}
  .up-body{padding:15px;display:flex;flex-direction:column;gap:8px;flex:1}
  .up-body .when{font-size:.76rem;font-weight:800;color:var(--accent-dark)}
  .up-body p{font-size:.82rem;color:var(--muted)}
  .up-body .btn{width:100%;justify-content:center;font-size:.82rem;padding:8px;margin-top:auto}

  /* ===== Request form ===== */
  .req-wrap{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;display:grid;grid-template-columns:1fr 1.4fr}
  .req-side{background:linear-gradient(160deg,#16204d,#23368f);color:#fff;padding:36px 30px}
  .req-side h3{font-size:1.3rem;margin-bottom:10px}
  .req-side p{opacity:.92;font-size:.9rem;margin-bottom:18px}
  .req-side ul{list-style:none;font-size:.85rem;opacity:.92}
  .req-side li{margin-bottom:10px;display:flex;gap:8px}
  .req-form{padding:32px 30px}
  .req-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
  .req-form label{font-size:.74rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;display:block;margin:11px 0 4px}
  .req-form input,.req-form select,.req-form textarea{width:100%;padding:10px 13px;border:1.6px solid var(--border);border-radius:10px;font-size:.9rem;font-family:var(--font-body);outline:none}
  .req-form input:focus,.req-form select:focus,.req-form textarea:focus{border-color:var(--primary)}
  .req-form textarea{min-height:110px;resize:vertical}
  @media (max-width:780px), (min-device-width:1px) and (max-device-width:780px){.req-wrap{grid-template-columns:1fr}}

  /* ===== Chatbot CSS — REMOVED 2026-07-22 (Phase 200). Both the .bot-fab and
     Phase 64 .ng* chatbots no longer render. `.pulse` keyframes kept below (used
     by the live-viewer chip); other selectors gone. ===== */
  @keyframes pulse{70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}

  /* Phase 45 — Mobile nav cleanup: cleaner top bar, full-width search row, less clutter */
  @media (max-width:640px), (min-device-width:1px) and (max-device-width:640px){
    .search{order:99;flex:0 0 100%;margin-top:8px;min-width:0;max-width:100%}
    .logo-text b{font-size:.95rem}
    .logo-text span{display:none}
    .nav-actions{gap:5px}
    .lang-toggle button{font-size:.72rem;padding:5px 9px}
    .btn{font-size:.78rem;padding:8px 11px}
    .btn span[data-en]{display:none}
    .ticker-label{font-size:.66rem}
    .float-channels{bottom:14px!important;right:10px!important;gap:6px}
    .fch{padding:7px 11px;font-size:.74rem}
    .fch.tg{display:none} /* keep WhatsApp only on small mobile — Telegram is in footer */
  }

  /* ===== Floating WhatsApp ===== */
  .wa-float{position:fixed;bottom:22px;right:22px;z-index:80;background:#25d366;color:#fff;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:0 8px 22px rgba(0,0,0,.25);transition:.2s}
  .wa-float:hover{transform:scale(1.1)}

  /* ===== Drawer / modal / toast ===== */
  .overlay{position:fixed;inset:0;background:rgba(12,17,40,.55);opacity:0;pointer-events:none;transition:.25s;z-index:90}
  .overlay.open{opacity:1;pointer-events:auto}
  .drawer{position:fixed;top:0;right:-430px;width:min(405px,93vw);height:100%;background:#fff;z-index:100;box-shadow:-8px 0 28px rgba(0,0,0,.18);transition:right .3s;display:flex;flex-direction:column}
  .drawer.open{right:0}
  .drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--border)}
  .drawer-head h3{color:var(--navy)}
  .drawer-close{border:none;background:none;font-size:1.5rem;cursor:pointer;color:var(--muted)}
  .drawer-body{flex:1;overflow-y:auto;padding:16px 20px}
  .cart-item{display:flex;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px dashed var(--border);font-size:.88rem}
  .cart-item b{display:block;margin-bottom:3px}
  .qty{display:inline-flex;align-items:center;gap:9px;margin-top:6px}
  .qty button{width:25px;height:25px;border-radius:7px;border:1.6px solid var(--border);background:#fff;cursor:pointer;font-weight:700}
  .empty{color:var(--muted);text-align:center;margin-top:40px}
  .drawer-foot{border-top:1px solid var(--border);padding:16px 20px}
  .total-row{display:flex;justify-content:space-between;font-weight:800;font-size:1.05rem;margin-bottom:12px}
  .drawer-foot .btn{width:100%;justify-content:center;margin-bottom:8px}
  .secure-line{text-align:center;font-size:.74rem;color:var(--muted)}
  .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:110;padding:20px}
  .modal.open{display:flex}
  .modal-card{background:#fff;border-radius:var(--radius);max-width:620px;width:100%;max-height:84vh;overflow-y:auto;padding:30px;position:relative;box-shadow:var(--shadow-lg)}
  .modal-card h3{color:var(--navy);margin-bottom:12px;padding-right:26px}
  .modal-card p{font-size:.92rem;color:#39435e;margin-bottom:11px}
  .modal-x{position:absolute;top:12px;right:16px;border:none;background:none;font-size:1.45rem;cursor:pointer;color:var(--muted)}
  .modal-card input,.modal-card select{width:100%;padding:11px 14px;border:1.6px solid var(--border);border-radius:11px;margin-bottom:12px;font-size:.92rem;font-family:var(--font-body)}
  /* Phase 200-fff — selects had no rule of their own (only `input` was covered above), so
     lp_state/lp_exam and the older mn_exam/mn_topic rendered at their unstyled ~21px native
     height — below the 44px minimum tap target. Explicit min-height fixes all of them. */
  .modal-card select{min-height:44px;background:#fff}
  .modal-card .btn{width:100%;justify-content:center}
  .toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(80px);background:#1c2540;color:#fff;padding:11px 22px;border-radius:999px;font-size:.88rem;font-weight:600;opacity:0;transition:opacity .3s,transform .3s;z-index:120;box-shadow:var(--shadow-lg);max-width:90vw;text-align:center}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  @media (max-width:640px), (min-device-width:1px) and (max-device-width:640px){
    .hero{padding:38px 0 46px}
    .sample-strip{padding:24px}
    .sample-strip .btn{margin-left:0}
    /* MOBILE (2026-07-05): inputs 16px so iOS doesn't auto-zoom the whole page on focus
       (a big cause of the "everything went tiny" feeling); comfortable base + tap targets. */
    input,select,textarea{font-size:16px !important}
    body{font-size:15.5px}
    button,.btn,.chip{min-height:42px}
    /* Phase 200-hhh (2026-07-31) — director's real bug, found via an on-device diagnostic
       readout: the free-sample PDF preview's canvas was rendering at an EXCELLENT 5.5x
       supersample (sharper than the phone's own 2.75x screen density) — resolution was never
       the problem. The actual cause: .modal's 20px + .modal-card's 30px desktop padding ate
       ~100px of a ~380-400px-wide phone screen (over a quarter of it) before the sample box
       ever got its share, so the PDF was fit-to-width into a genuinely tiny ~250px box — small
       text at any resolution reads as "blurry". Shrinking both paddings gives the sample (and
       every other modal) real width to render into on phones. */
    .modal{padding:8px}
    .modal-card{padding:16px}
  }
  @media (max-width:400px), (min-device-width:1px) and (max-device-width:400px){
    .container{padding-left:12px;padding-right:12px}
    h1,.hero h1{font-size:1.6rem;line-height:1.25}
  }

/* ── block 4 of 14 ── */

/* ═══ Phase 198 (2026-07-15) — STOREFRONT VISUAL OVERHAUL v2 ═══
   Overlays the poster palette with a modern edtech look (indigo blush + amber accent
   + soft shadow-layering + hover micro-interactions). Base tokens preserved so any
   surface not touched here still renders normally. */

/* Page background — subtle radial gradients on cream (was flat cream). Zero perf cost. */
body{
  background:
    radial-gradient(1100px 480px at 6% -8%, #eaf0ff 0%, transparent 60%),
    radial-gradient(900px 420px at 100% 0%, #ffe5e6 0%, transparent 55%),
    linear-gradient(180deg, #faf6ea 0%, #fdf6e0 100%) !important;
}

/* Hero — richer background with amber decorative arc + tighter spacing. */
.hero{
  background:
    radial-gradient(600px 220px at 12% 0%, rgba(54,83,226,.08), transparent 65%),
    radial-gradient(500px 200px at 88% 100%, rgba(245,158,11,.10), transparent 60%),
    var(--cream) !important;
  border-bottom: 3px solid var(--v2-accent) !important;
  padding: 56px 0 62px !important;
}
.hero h1{ letter-spacing: -.015em !important; }
.hero .kicker{ background: linear-gradient(120deg, var(--primary), var(--v2-blue)); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-weight: 800; }

/* Hero stats — same size, richer colours + card lift on hover */
.stats .stat{
  background: #fff !important;
  border: 1.5px solid #ead9b5 !important;
  border-radius: 13px !important;
  box-shadow: var(--v2-shadow-sm) !important;
  transition: transform .15s, box-shadow .15s;
  position: relative; overflow: hidden;
}
.stats .stat::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(180deg, var(--primary), var(--v2-blue));
}
.stats .stat:hover{ transform: translateY(-2px); box-shadow: var(--v2-shadow) !important; }
.stats .stat b{
  background: linear-gradient(120deg, var(--primary), var(--v2-blue)) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
}

/* Trust chips — softer premium look */
.trust-chip{
  background: rgba(255,255,255,.85) !important;
  border: 1.4px solid var(--border) !important;
  box-shadow: var(--v2-shadow-sm) !important;
  transition: transform .12s;
}
.trust-chip:hover{ transform: translateY(-1px); }

/* Section head — refined typography + gradient underline accent under h2 */
.sec-head h2{ letter-spacing: -.01em !important; }
.sec-head .eyebrow{
  background: linear-gradient(120deg, var(--v2-blue), var(--primary));
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}

/* Exam boxes (category cards) — glossier + gradient side stripe + smoother hover */
.exam-box{
  border: 1.5px solid var(--border) !important;
  border-radius: 15px !important;
  box-shadow: var(--v2-shadow) !important;
  transition: transform .18s, box-shadow .18s, border-color .18s !important;
  overflow: hidden;
}
.exam-box:hover{
  transform: translateY(-4px);
  box-shadow: var(--v2-shadow-hi) !important;
  border-color: #c9d0ff !important;
}

/* Product cards — same premium treatment when the product grid renders */
.card{
  border: 1.5px solid var(--border) !important;
  border-radius: 15px !important;
  box-shadow: var(--v2-shadow) !important;
  transition: transform .18s, box-shadow .18s !important;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: var(--v2-shadow-hi) !important;
}

/* Primary CTA buttons — deeper shadow + hover lift for that premium feel */
.btn-primary, .btn-accent{
  box-shadow: 0 8px 20px rgba(196,22,28,.25) !important;
  transition: transform .12s, box-shadow .15s !important;
}
.btn-primary:hover, .btn-accent:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(196,22,28,.35) !important;
}

/* Section head + section spacing — a bit more air, feels less cramped */
.sec-head{ margin-bottom: 26px !important; }

/* Ticker — thin accent line under, tighter typography */
.ticker-wrap{ border-bottom-width: 2px !important; }

/* Phase 198 (2026-07-15) — COMPACT PRODUCT CARDS. Director's ask: cards were too tall,
   misfit. Cutting cover height, tier row padding, hiding tier sub-descriptions on the
   grid (still visible in the sample modal), tightening button spacing + footer strip.
   Result: ~40% shorter cards, more visible per screen, sharper visual density. */
.card{ padding-bottom: 2px; }
.card .cover{ min-height: 118px !important; padding: 14px 16px !important; }
.card .cover .cv-exam{ font-size: .68rem !important; letter-spacing: .04em; }
.card .cover .cv-title{ font-size: 1rem !important; line-height: 1.22 !important; margin: 4px 0 !important; }
.card .cover .cv-type{ font-size: .7rem !important; opacity: .85; }
.card .card-body{ padding: 12px 14px 14px !important; }
.card h3{ font-size: .95rem !important; line-height: 1.28 !important; margin: 6px 0 2px !important; }
.card .meta{ font-size: .76rem !important; margin-bottom: 4px !important; }
/* Phase 198 v2 (2026-07-15) — ULTRA-COMPACT TIER ROWS. Director's second ask: rows still
   too long. Each row now = 32px single-line strip (was ~65px), no sub-description, minimal
   padding, tight typography. 3 tiers = ~110px vertical instead of ~200px. Cart button
   shrinks to a small icon-only chip so name + price get maximum width. */
.card .opt-rows{ display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.card .opt{
  display: flex !important;
  align-items: center !important;
  padding: 4px 9px !important;
  gap: 7px !important;
  min-height: 34px !important;
  border-radius: 8px !important;
  border-width: 1px !important;
  background: #fafbff !important;
  position: relative;
}
.card .opt .opt-info{ flex: 1; min-width: 0; }
.card .opt .opt-info b{
  font-size: .78rem !important;
  font-weight: 700 !important;
  display: block !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  color: var(--navy);
}
.card .opt .opt-info span{ display: none !important; }
.card .opt .opt-price{
  text-align: right !important;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.15 !important;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.card .opt .opt-price b{ font-size: .84rem !important; font-weight: 800; }
.card .opt .opt-price s{ font-size: .62rem !important; opacity: .55; }
.card .opt .btn{
  /* Phase 199 (2026-07-19) URGENT CONVERSION FIX — the tier-row buy button used to be a
     naked 🛒 emoji, invisible to a first-time buyer scanning the card. Now it says
     "🛒 BUY" (English) or "🛒 खरीदें" (Hindi), sized so the text is legible without
     breaking the row layout. Free-Sample / Share / Copy-link stay as thinner outlines
     so BUY remains the clear primary CTA. */
  padding: 6px 12px !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  min-height: 32px !important;
  min-width: 78px !important;
  flex-shrink: 0;
  border-radius: 7px !important;
  letter-spacing: .3px;
  box-shadow: 0 2px 6px rgba(196, 22, 28, .18);
}
/* Starter row (special) — thinner dashed frame */
.card .opt[style*="dashed"]{ padding-top: 8px !important; }
/* Action row (Free Sample · Share · Copy link) — tighter, buttons proportional */
.card .card-body > div[style*="display:flex"]{ gap: 5px !important; margin-top: 7px !important; }
.card .card-body > div[style*="display:flex"] > .btn-outline{ padding: 6px 8px !important; font-size: .74rem !important; }
.card .card-body > div[style*="display:flex"] > .wa-share{ padding: 6px 9px !important; font-size: .74rem !important; }
/* "Already bought? Upgrade tier" — shrink to a subtle single-line text button */
.card .sample-btn{
  padding: 5px 8px !important;
  font-size: .72rem !important;
  background: transparent !important;
  border: none !important;
  color: var(--muted) !important;
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,.12);
  text-underline-offset: 3px;
  width: 100%;
  cursor: pointer;
}
.card .sample-btn:hover{ color: var(--v2-blue) !important; }
/* Watermark strip — compressed to a subtle single-line footer */
.card .fp-strip{
  font-size: .66rem !important;
  padding: 5px 10px !important;
  margin-top: 6px !important;
  line-height: 1.35 !important;
  border-radius: 8px !important;
}
.card .fp-strip b{ font-size: .68rem !important; }
/* Card gap in the grid — a hair tighter for premium density */
.grid, .exam-grid{ gap: 14px !important; }

/* Filter bar (category chips) — glossier chips + active state uses the v2 red gradient */
.filterbar .chip{
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: var(--v2-shadow-sm) !important;
  transition: transform .12s, background .12s !important;
}
.filterbar .chip:hover{ transform: translateY(-1px); background: #fef8e6 !important; }
.filterbar .chip.active{
  background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(196,22,28,.32) !important;
}

/* ── block 5 of 14 ── */

/* ===== Premium polish layer — additive, safe overrides ===== */
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
img,svg,video{max-width:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
*{-webkit-tap-highlight-color:transparent}
/* chrome-less horizontal scroll strips (nav / chips / tickers) */
[style*="overflow-x"]{scrollbar-width:none;-ms-overflow-style:none}
[style*="overflow-x"]::-webkit-scrollbar{height:0;display:none}
/* smooth premium micro-interactions */
a,button,.btn{transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,background-color .18s ease,color .18s ease,border-color .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.card{transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,13,10,.12)}
/* accessible, on-brand focus rings (keyboard only) */
:focus-visible{outline:2.5px solid var(--primary);outline-offset:2px}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),input:focus:not(:focus-visible),select:focus:not(:focus-visible){outline:none}
/* comfortable mobile tap targets */
@media (max-width:640px), (min-device-width:1px) and (max-device-width:640px){.btn{min-height:44px}}

/* ═══ MOBILE LANDING-PAGE PASS (2026-07-05) — make the storefront feel purpose-built for
   phones (70% of traffic), not a shrunk desktop site. ═══ */
@media (max-width:640px), (min-device-width:1px) and (max-device-width:640px){
  html{font-size:16px}                                   /* readable base — no "alice in wonderland" */
  input,select,textarea{font-size:16px}                  /* stops iOS zoom-on-focus */
  /* punchier hero, full-width stacked CTAs */
  .hero{padding:26px 0 34px}
  .hero .kicker{font-size:.72rem;padding:5px 13px;margin-bottom:12px}
  .hero h1{font-size:1.72rem;line-height:1.2;margin-bottom:11px}
  .hero p{font-size:1rem;line-height:1.5;margin-bottom:18px}
  .hero-ctas{flex-direction:column;gap:10px;margin-bottom:24px}
  .hero-ctas .btn{width:100%;justify-content:center;min-height:52px;font-size:1.05rem;font-weight:800}
  .stats{gap:9px}
  .stat{flex:1 1 44%;min-width:0}
  .stat b{font-size:1.15rem}
  .trust-row{margin-top:16px;gap:6px}
  /* tighter section rhythm so it's less endless scroll; bigger headings */
  section{padding-top:26px;padding-bottom:26px}
  .sec-head{margin-bottom:16px}
  .sec-head h2{font-size:1.42rem;line-height:1.2}
  .sec-head p{font-size:.9rem}
  /* room for the sticky action bar */
  body{padding-bottom:66px}
}
/* Sticky mobile action bar — the "landing page / app" feel: primary actions always in thumb reach */
.m-actionbar{display:none}
@media (max-width:640px), (min-device-width:1px) and (max-device-width:640px){
  .m-actionbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid var(--border);box-shadow:0 -4px 18px rgba(16,13,10,.12);padding:8px 10px;gap:7px}
  .m-actionbar a{flex:1;text-align:center;padding:13px 6px;border-radius:12px;font-weight:800;font-size:.92rem;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px}
  .m-actionbar .mab-primary{background:linear-gradient(135deg,#c4161c,#e23b3b);color:#fff;box-shadow:0 4px 12px rgba(196,22,28,.3)}
  .m-actionbar .mab-outline{background:#fff;color:var(--primary);border:1.7px solid var(--primary)}
}
/* Phase 200-pp (2026-07-27) — with the 3rd (Call) button added, keep text readable at the
   narrowest real phones (360px, e.g. budget Android) instead of letting labels wrap/clip. */
@media (max-width:380px){
  .m-actionbar{padding:7px 8px;gap:5px}
  .m-actionbar a{font-size:.8rem;padding:12px 3px;gap:3px}
}

/* ── block 6 of 14 ── */

  :root{
    --font-editorial:'Fraunces',Georgia,'Times New Roman',serif;
    --shadow-editorial: 0 1px 2px rgba(16,13,10,.05), 0 8px 24px -8px rgba(16,13,10,.10), 0 24px 60px -24px rgba(16,13,10,.14);
    --shadow-editorial-hover: 0 2px 4px rgba(16,13,10,.06), 0 16px 32px -12px rgba(16,13,10,.14), 0 40px 80px -32px rgba(16,13,10,.20);
    --gold-hairline: 1px solid rgba(196,146,64,.35);
  }

  /* ═══ Hero refinement — atmospheric depth + editorial serif h1 ═══ */
  .hero{
    background:
      radial-gradient(1200px 480px at 12% -8%, rgba(217,184,92,.14), transparent 62%),
      radial-gradient(900px 520px at 92% 108%, rgba(196,22,28,.05), transparent 60%),
      linear-gradient(180deg, #fbf6ec 0%, #f6eede 100%) !important;
    padding: 62px 0 74px !important;
  }
  /* Phase 199 rev-6 (2026-07-21) MOBILE FIX: removed filter:blur() on the hero's
     decorative circles. On low-DPI Android screens the 1.5-2 px blur was making
     the entire hero look "distressfully blurry" — director reported this 10+ times.
     Circles stay atmospheric via low opacity only; no GPU blur pass. */
  .hero::after{ width: 380px !important; height: 380px !important; opacity: .55 }
  .hero::before{ opacity: .35 }
  /* Crisp text on every device — antialiased on WebKit + kern for tighter kerning. */
  html, body{ -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility !important; }
  /* Never let images render blurry on small screens. */
  img{ image-rendering: -webkit-optimize-contrast; }
  .hero h1{
    font-family: var(--font-editorial) !important;
    font-weight: 700 !important;
    font-size: clamp(1.85rem, 4.6vw, 3.15rem) !important;
    letter-spacing: -.015em !important;
    line-height: 1.1 !important;
    color: #100d0a !important;
    max-width: 820px !important;
    text-wrap: balance;
  }
  /* Phase 200-nnn (2026-08-01) — director: "write in better looking fonts w/o italic at all".
     This rule was overriding the earlier font-style:normal (line ~128) back to italic. */
  .hero h1 em{ font-style: normal !important; color: var(--primary) !important; font-weight: 700 !important; }
  .hero p{ font-size: 1.06rem !important; line-height: 1.65 !important; color: #4e4432 !important; max-width: 640px !important; }
  .hero .kicker{
    background: linear-gradient(135deg, #d9b85c, #f2d183) !important;
    color: #2b1f04 !important;
    box-shadow: 0 4px 14px rgba(217,184,92,.35), inset 0 1px 0 rgba(255,255,255,.35) !important;
    letter-spacing: .14em !important;
    padding: 7px 20px !important;
    font-size: .74rem !important;
  }

  /* ═══ Section headings — display serif with a fine gold accent ═══ */
  .sec-head h2{
    font-family: var(--font-editorial) !important;
    font-weight: 700 !important;
    letter-spacing: -.015em !important;
    text-wrap: balance;
    position: relative;
  }
  .sec-head h2::after{
    content: '';
    display: block;
    width: 68px;
    height: 3px;
    background: linear-gradient(90deg, #d9b85c 0%, transparent 100%);
    margin: 14px auto 0;
    border-radius: 3px;
  }

  /* ═══ Card refinement — multi-layer editorial shadow, subtle top glow ═══ */
  .card{
    box-shadow: var(--shadow-editorial) !important;
    border: 1px solid rgba(16,13,10,.045);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1) !important;
  }
  .card:hover{
    box-shadow: var(--shadow-editorial-hover) !important;
    transform: translateY(-6px) !important;
  }
  /* Cover top-band gets a subtle inner gold hairline — feels like premium print */
  .card > a > img, .card > img, .card .cover, .card .cover-img{
    box-shadow: inset 0 -1px 0 rgba(196,146,64,.14);
  }

  /* ═══ Filter chip refinement (COLORS unchanged so active/hover behaviour survives) ═══ */
  .chip{
    box-shadow: 0 1px 2px rgba(16,13,10,.04), 0 4px 10px -6px rgba(16,13,10,.08);
    transition: transform .18s, box-shadow .18s, background-color .18s, color .18s, border-color .18s !important;
  }
  .chip:hover{ transform: translateY(-1px); box-shadow: 0 2px 4px rgba(196,22,28,.10), 0 10px 22px -10px rgba(196,22,28,.35); }
  .chip.active{
    box-shadow: 0 2px 4px rgba(196,22,28,.15), 0 12px 26px -12px rgba(196,22,28,.42), inset 0 1px 0 rgba(255,255,255,.15);
  }

  /* ═══════════════════════════════════════════════════════════════════════
     Phase 199 (2026-07-19) — HERO SEARCH BAR (director: bigger, coloured,
     unmissable). Buyers complained it disappeared into the background. Now
     it's substantially larger, sits inside a warm gold gradient frame that
     pops against the cream hero, has a big placeholder, and pulses gently
     on the first visit to draw the eye. Mobile gets the same treatment.
     ═══════════════════════════════════════════════════════════════════════ */
  .search{
    background: linear-gradient(135deg, #fff9ea 0%, #fff 55%) !important;
    border: 2.2px solid #d9b85c !important;
    border-radius: 14px !important;
    max-width: 620px !important;
    box-shadow: 0 4px 12px rgba(217,184,92,.22), 0 14px 40px -16px rgba(196,146,64,.35), inset 0 1px 0 rgba(255,255,255,.7) !important;
    transition: box-shadow .3s, transform .2s, border-color .2s;
  }
  .search:focus-within{
    border-color: #c4161c !important;
    box-shadow: 0 6px 16px rgba(196,22,28,.20), 0 18px 44px -14px rgba(196,22,28,.32), 0 0 0 4px rgba(196,22,28,.14) !important;
  }
  .search input{
    padding: 15px 20px !important;
    font-size: 1.02rem !important;
    font-weight: 500 !important;
    color: #100d0a !important;
    background: transparent !important;
  }
  .search input::placeholder{
    color: #7a5a20 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
  }
  .search button{
    padding: 0 22px !important;
    font-size: 1.15rem !important;
    background: linear-gradient(135deg, #c4161c, #e23b3b) !important;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.15) !important;
  }
  /* First-visit pulse — draws the eye without being aggressive. */
  .search.zPulseHint{
    animation: zSearchPulse 1.6s ease-out 2;
  }
  @keyframes zSearchPulse{
    0%   { box-shadow: 0 4px 12px rgba(217,184,92,.22), 0 14px 40px -16px rgba(196,146,64,.35), 0 0 0 0 rgba(196,22,28,.35); transform: translateY(0); }
    35%  { box-shadow: 0 4px 12px rgba(217,184,92,.22), 0 18px 44px -14px rgba(196,146,64,.42), 0 0 0 12px rgba(196,22,28,.14); transform: translateY(-2px); }
    100% { box-shadow: 0 4px 12px rgba(217,184,92,.22), 0 14px 40px -16px rgba(196,146,64,.35), 0 0 0 0 rgba(196,22,28,0);  transform: translateY(0); }
  }
  @media (max-width: 640px), (min-device-width:1px) and (max-device-width:640px){
    .search{ border-radius: 12px !important; margin-top: 10px !important; }
    /* Phase 199 rev-5 (2026-07-20) — mobile UX fix. 16px input prevents iOS from
       auto-zooming the whole page on focus (any font < 16px triggers that on
       Safari), which was cropping the entire storefront when the buyer tapped
       the search bar. Font-weight kept at 500 for clean placeholder rendering. */
    .search input{ padding: 13px 14px !important; font-size: 16px !important; -webkit-text-size-adjust: 100%; }
    .search input::placeholder{ font-size: 15px !important; font-weight: 600 !important; }
    .search button{ padding: 0 16px !important; min-width: 48px }
    /* Search-suggest dropdown — bigger tap targets, less crowded, easy touch scroll. */
    .search-suggest{ max-height: 62vh !important; -webkit-overflow-scrolling: touch }
    .search-suggest .ss-item{ padding: 12px 14px !important; font-size: .92rem !important }
    .search-suggest .ss-section{ padding: 9px 14px 5px !important; font-size: .72rem !important }
  }
  /* 2026-08-25 — .search is now wrapped in .search-col (the "Request your notes" link lives BELOW
     the box, not as a flex sibling of the input that stretched it tall). The column carries the
     flex sizing the bare .search used to have; the inner .search fills the column width. */
  .search-col{ flex:1; min-width:200px; max-width:620px; display:flex; flex-direction:column; position:relative; }
  .search-col > .search{ width:100%; max-width:100% !important; flex:none; }
  @media (max-width:640px), (min-device-width:1px) and (max-device-width:640px){
    .search-col{ order:99; flex:0 0 100%; min-width:0; max-width:100%; margin-top:8px; }
    .search-col > .search{ margin-top:0 !important; }
  }

  /* ═══ Sub-category bar — align the padding rhythm ═══ */
  #subBar{ padding-top: 8px !important; }

  /* ═══ MOBILE — leave existing layout ALONE, only lighten the hero ═══ */
  @media (max-width: 640px), (min-device-width:1px) and (max-device-width:640px){
    .hero{ padding: 44px 0 52px !important; }
    .hero h1{ font-size: 1.85rem !important; line-height: 1.15 !important; }
    /* Ensure the editorial shadow isn't too heavy on small screens */
    .card{ box-shadow: 0 1px 2px rgba(16,13,10,.05), 0 6px 18px -8px rgba(16,13,10,.10) !important; }
    .card:hover{ transform: none !important; } /* prevent hover-lift jank on touch */
  }

  /* ═══════════════════════════════════════════════════════════════════════
     Phase 199 URGENT (2026-07-19) — MOBILE CART DRAWER SHOWSTOPPER FIX
     Root cause: buyers on mobile tapped 🛒 BUY → cart drawer stayed OFF-SCREEN
     at `right: -430px` even after `.drawer.open` class was added. Some
     late-cascade rule was outranking `.drawer.open { right: 0 }` and there
     was no way for a new buyer to reach "Proceed to Checkout".
     Fix: force `!important` on both open/closed positions of the drawer +
     its overlay. Also ensure the drawer sits ABOVE the mobile action bar
     (z-index) so the sticky "View Notes / My Account" bar can't cover the
     Proceed button. Purely positional — click handlers untouched.
     ═══════════════════════════════════════════════════════════════════════ */
  .drawer{ right: -100vw !important; transition: right .28s cubic-bezier(.4,.2,.2,1) !important; z-index: 130 !important; }
  .drawer.open{ right: 0 !important; }
  #overlay, .overlay{ z-index: 120 !important; }
  #overlay.open, .overlay.open{ display: block !important; opacity: 1 !important; pointer-events: auto !important; }
  /* Modals sit above both */
  .modal{ z-index: 140 !important; }
  @media (max-width: 640px), (min-device-width:1px) and (max-device-width:640px){
    /* On phones the drawer takes the full screen — nothing behind it can
       intercept a tap. width is unchanged (min(405,93vw)) so short phones
       still see the full drawer. Body scroll lock when drawer is open. */
    .drawer{ box-shadow: -12px 0 40px rgba(0,0,0,.28) !important; }
    body.modal-open{ overflow: hidden !important; }
    /* Proceed to Checkout button lives in .drawer-foot — guarantee it's
       above the m-actionbar sticky footer. */
    .drawer-foot{ padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important; }
  }

/* ── block 7 of 14 ── */

  /* Buying-tutor animation styles */
  #zTutor{background:linear-gradient(135deg,#fff7e8 0%,#fdf6e0 50%,#fef3c7 100%);border:2px solid #f0c874;border-radius:16px;padding:16px 14px;margin:0 auto 20px;max-width:820px;box-shadow:0 8px 24px rgba(196,22,28,.08);position:relative;overflow:hidden}
  #zTutor::before{content:'';position:absolute;top:0;right:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(245,158,11,.14),transparent 65%);pointer-events:none}
  #zTutor .zt-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-family:'Poppins',sans-serif;font-weight:800;color:#7a3f0e;font-size:1.02rem;position:relative;z-index:2}
  #zTutor .zt-head .zt-live{background:#c4161c;color:#fff;font-size:.66rem;letter-spacing:.06em;padding:2px 8px;border-radius:999px;font-weight:800;animation:zt-pulse 1.6s ease-in-out infinite}
  @keyframes zt-pulse{0%,100%{box-shadow:0 0 0 0 rgba(196,22,28,.55)}50%{box-shadow:0 0 0 8px rgba(196,22,28,0)}}
  #zTutor .zt-frames{position:relative;height:170px;background:linear-gradient(135deg,#fff,#fefaf0);border-radius:12px;border:1.5px solid #ead9b5;box-shadow:inset 0 1px 3px rgba(0,0,0,.05)}
  .zt-frame{position:absolute;inset:0;padding:12px 16px;display:flex;align-items:center;gap:14px;opacity:0;animation:zt-cycle 24s linear infinite}
  .zt-frame:nth-child(1){animation-delay:0s}
  .zt-frame:nth-child(2){animation-delay:6s}
  .zt-frame:nth-child(3){animation-delay:12s}
  .zt-frame:nth-child(4){animation-delay:18s}
  @keyframes zt-cycle{0%,2%{opacity:0;transform:translateX(20px)}5%,23%{opacity:1;transform:translateX(0)}25%,100%{opacity:0;transform:translateX(-20px)}}
  .zt-num{flex-shrink:0;width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#c4161c,#e23b3b);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Poppins';font-weight:900;font-size:1.7rem;box-shadow:0 8px 20px rgba(196,22,28,.35)}
  .zt-frame:nth-child(2) .zt-num{background:linear-gradient(135deg,#3653e2,#1a2a6b);box-shadow:0 8px 20px rgba(54,83,226,.35)}
  .zt-frame:nth-child(3) .zt-num{background:linear-gradient(135deg,#f59e0b,#c2410c);box-shadow:0 8px 20px rgba(245,158,11,.35)}
  .zt-frame:nth-child(4) .zt-num{background:linear-gradient(135deg,#15803d,#22c55e);box-shadow:0 8px 20px rgba(21,128,61,.35)}
  .zt-body{flex:1;min-width:0}
  .zt-title{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.08rem;color:#100d0a;line-height:1.25;margin-bottom:3px}
  .zt-desc{font-size:.86rem;color:#5b4a2f;line-height:1.45}
  .zt-illustration{flex-shrink:0;width:82px;height:120px;display:flex;align-items:center;justify-content:center;font-size:2.6rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));animation:zt-bob 2s ease-in-out infinite}
  @keyframes zt-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  .zt-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
  .zt-dot{width:24px;height:5px;border-radius:3px;background:rgba(196,22,28,.22);animation:zt-dot 24s linear infinite}
  .zt-dot:nth-child(1){animation-delay:0s}
  .zt-dot:nth-child(2){animation-delay:6s}
  .zt-dot:nth-child(3){animation-delay:12s}
  .zt-dot:nth-child(4){animation-delay:18s}
  @keyframes zt-dot{0%,2%{background:rgba(196,22,28,.22);transform:scaleX(1)}5%,23%{background:linear-gradient(90deg,#c4161c,#f59e0b);transform:scaleX(1.15)}25%,100%{background:rgba(196,22,28,.22);transform:scaleX(1)}}
  #zTutor .zt-cta{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
  #zTutor .zt-cta a{background:linear-gradient(135deg,#c4161c,#e23b3b);color:#fff;padding:11px 18px;border-radius:999px;font-weight:800;text-decoration:none;font-size:.9rem;box-shadow:0 6px 16px rgba(196,22,28,.28);transition:transform .12s}
  #zTutor .zt-cta a:hover{transform:translateY(-2px)}
  #zTutor .zt-cta .zt-wa{background:linear-gradient(135deg,#25d366,#128c7e);box-shadow:0 6px 16px rgba(37,211,102,.32)}
  @media (max-width:500px), (min-device-width:1px) and (max-device-width:500px){
    #zTutor .zt-frames{height:180px}
    .zt-illustration{width:64px;font-size:2.2rem}
    .zt-title{font-size:.98rem}
    .zt-desc{font-size:.8rem}
    .zt-num{width:46px;height:46px;font-size:1.4rem;border-radius:12px}
  }
  /* Trust marquee */
  #zTrust{background:linear-gradient(90deg,#0e1230,#1a2a6b 50%,#3653e2);color:#fff;padding:9px 0;overflow:hidden;position:relative;border-radius:11px;margin:0 auto 18px;max-width:820px;box-shadow:0 6px 18px rgba(20,25,80,.22)}
  #zTrust .zt-track{display:inline-flex;gap:34px;padding-left:100%;animation:zt-marquee 28s linear infinite;font-size:.86rem;font-weight:600;white-space:nowrap}
  @keyframes zt-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
  #zTrust span{display:inline-flex;align-items:center;gap:6px}
  /* Phase 200 (2026-07-22) — MOBILE NOISE KILL. Sections that add nothing to a
     first-time mobile buyer (long FAQ block, empty testimonials, newsletter form,
     recently-viewed bar, hero-tickers) are hidden on ≤640px. All still reachable
     from More ▾ nav or the About/Contact links. Body max-width keeps at 100%. */
  @media (max-width:640px), (min-device-width:1px) and (max-device-width:640px){
    .mob-hide{display:none !important}
  }
  /* Phase 200 (2026-07-22) — Coming-Soon collapse. Cards get `._cs` class; hidden
     by default. Tapping the summary chip toggles `.cs-open` on #examGrid → cards show. */
  #examGrid .exam-box._cs{display:none}
  #examGrid.cs-open .exam-box._cs{display:block}
  /* Phase 200 (2026-07-22) — Latest Courses hero-strip. Shown ONLY on landing (before
     buyer picks an exam) so they see actual notes to buy within the first scroll. */
  #latestStrip{padding:18px 0 6px}
  #latestStrip .ls-head{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;flex-wrap:wrap}
  /* Phase 200-bv (2026-07-25) — director: make "New & Featured Notes" BIGGER + more visible. */
  #latestStrip .ls-head h2{margin:0;font-family:'Poppins';font-weight:900;color:var(--primary);font-size:1.75rem;letter-spacing:-.02em;line-height:1.15;text-shadow:0 1px 0 rgba(255,255,255,.6)}
  #latestStrip .ls-head .ls-sub{color:var(--muted);font-size:.82rem;font-weight:600}
  #latestStrip .ls-head a{margin-left:auto;color:#3653e2;font-weight:700;text-decoration:none;font-size:.86rem}
  #latestStrip .ls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
  @media (max-width:640px), (min-device-width:1px) and (max-device-width:640px){ #latestStrip{padding:14px 0} #latestStrip .ls-head h2{font-size:1.4rem} }

/* ── block 8 of 14 ── */

      /* Phase 199 rev-2 (2026-07-20) — TWIN TICKERS placed in the hero's right column.
         The two boxes STACK vertically (Zenith Notes on top, Vacancy below). On mobile
         they render in normal flow BELOW the hero content (position:static override). */
      .hero-tickers{display:flex;flex-direction:column;gap:12px;width:340px;position:absolute;top:32px;right:22px;z-index:3}
      @media (max-width:960px), (min-device-width:1px) and (max-device-width:960px){ .hero-tickers{position:static !important;width:100% !important;margin:22px 0 0 !important;max-width:100% !important;right:auto !important;top:auto !important} }
      /* Phase 200 (2026-07-22) — HARD KILL on ≤640px. Screenshots showed the tickers
         still overlapping the hero on real phones despite the static override — some
         nested style was winning. On the smallest screens the tickers add clutter
         without value; buyer wants the "Browse Notes" button, not news headlines. */
      @media (max-width:640px), (min-device-width:1px) and (max-device-width:640px){ .hero-tickers{display:none !important} }
      /* Give the hero .container relative positioning so absolute tickers anchor to it. */
      .hero .container{position:relative}
      .nt-box{background:#fff;border-radius:14px;box-shadow:0 3px 8px rgba(16,13,10,.08),0 14px 40px -18px rgba(16,13,10,.22);overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(16,13,10,.06)}
      .nt-notes{border-top:4px solid #c4161c}
      .nt-exams{border-top:4px solid #1a2a6b}
      .nt-head{display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(135deg,#fef8ea,#fff);border-bottom:1px solid #f0e6cc}
      .nt-head h3{flex:1;font-family:Poppins,Outfit,sans-serif;font-size:.98rem;font-weight:800;color:#1a2a6b;margin:0;letter-spacing:-.01em}
      .nt-icon{font-size:1.25rem;line-height:1}
      .nt-live{background:#dc2626;color:#fff;font-size:.62rem;font-weight:900;padding:3px 9px;border-radius:99px;letter-spacing:.6px;animation:ntpulse 1.8s infinite;box-shadow:0 2px 6px rgba(220,38,38,.35)}
      @keyframes ntpulse{50%{opacity:.55;transform:scale(.96)}}
      .nt-more{font-size:.76rem;color:#3653e2;text-decoration:none;font-weight:700;white-space:nowrap}
      .nt-more:hover{text-decoration:underline}
      .nt-body{position:relative;height:172px;overflow:hidden;padding:6px 14px;background:#fff}
      @media (max-width:960px), (min-device-width:1px) and (max-device-width:960px){ .nt-body{height:200px} }
      .nt-body::before{content:'';position:absolute;top:0;left:0;right:0;height:22px;background:linear-gradient(180deg,#fff,transparent);z-index:2;pointer-events:none}
      .nt-body::after{content:'';position:absolute;bottom:0;left:0;right:0;height:22px;background:linear-gradient(0deg,#fff,transparent);z-index:2;pointer-events:none}
      .nt-scroll{list-style:none;margin:0;padding:0;animation:ntscroll 32s linear infinite}
      .nt-scroll:hover,.nt-body:hover .nt-scroll{animation-play-state:paused}
      .nt-scroll li{padding:9px 0;border-bottom:1px dashed #ebe4d3;font-size:.85rem;line-height:1.42;color:#1a2a6b}
      .nt-scroll li:last-child{border-bottom:none}
      .nt-scroll li a{color:#1a2a6b;text-decoration:none;font-weight:600}
      .nt-scroll li a:hover{color:#c4161c;text-decoration:underline}
      .nt-scroll li .nt-date{color:#7a6f5c;font-size:.7rem;font-weight:600;margin-right:6px;display:inline-block;min-width:52px}
      .nt-scroll li .nt-badge{background:#16a34a;color:#fff;font-size:.58rem;font-weight:900;padding:2px 7px;border-radius:4px;margin-right:6px;text-transform:uppercase;letter-spacing:.4px;vertical-align:middle}
      .nt-scroll li .nt-badge.hot{background:#dc2626}
      .nt-scroll li .nt-badge.exam{background:#1a2a6b}
      .nt-scroll li.nt-loading{padding:20px 0;text-align:center;color:#7a6f5c;font-style:italic}
      @keyframes ntscroll{
        from{transform:translateY(100%)}
        to{transform:translateY(-100%)}
      }
      .nt-subscribe{display:flex;gap:6px;padding:10px 12px;background:linear-gradient(135deg,#fef3c7,#fff);border-top:1px solid #f0e6cc}
      .nt-subscribe input{flex:1;padding:9px 12px;border:1.5px solid #d9b85c;border-radius:8px;font-size:.85rem;font-family:inherit;font-weight:500;color:#100d0a;background:#fff}
      .nt-subscribe input:focus{outline:none;border-color:#c4161c;box-shadow:0 0 0 3px rgba(196,22,28,.12)}
      .nt-subscribe button{padding:9px 14px;background:linear-gradient(135deg,#c4161c,#e23b3b);color:#fff;border:none;border-radius:8px;font-size:.82rem;font-weight:800;cursor:pointer;box-shadow:0 3px 10px rgba(196,22,28,.28);white-space:nowrap;font-family:inherit;letter-spacing:.2px}
      .nt-subscribe button:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(196,22,28,.36)}
      .nt-subscribe button:disabled{opacity:.55;cursor:wait;transform:none}
    
/* ── block 9 of 14 ── */

/* PHASE 32 — Live visitor counter (top-right floating chip) */
.lv-chip{position:fixed;top:78px;right:14px;background:#fff;border:1.5px solid var(--accent);border-radius:99px;padding:6px 13px;font-size:.74rem;font-weight:700;color:#3a2f20;box-shadow:0 4px 14px rgba(40,28,8,.12);z-index:25;display:flex;align-items:center;gap:6px}
.lv-chip .dot{width:8px;height:8px;border-radius:50%;background:#15803d;animation:lvpulse 1.4s infinite}
@keyframes lvpulse{50%{opacity:.4}}
@media (max-width:600px), (min-device-width:1px) and (max-device-width:600px){.lv-chip{top:auto;bottom:142px;right:8px;font-size:.7rem}}

/* PHASE 32 — Exit-intent welcome popup */
.exit-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.65);z-index:60;display:none;align-items:center;justify-content:center;padding:14px}
.exit-overlay.on{display:flex}
.exit-card{background:#fff;border-radius:20px;max-width:440px;width:100%;padding:28px;text-align:center;position:relative;box-shadow:0 24px 80px rgba(0,0,0,.4);border:3px solid var(--accent)}
.exit-card .x{position:absolute;top:11px;right:14px;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--muted)}
.exit-card .big{font-size:2.2rem;margin-bottom:6px}
.exit-card h2{font-family:'Poppins';font-size:1.3rem;color:var(--ink);margin-bottom:8px}
.exit-card p{font-size:.92rem;color:#4a4030;margin-bottom:16px;line-height:1.5}
.exit-card .code{background:linear-gradient(135deg,var(--accent),#fbd87a);padding:13px 18px;border-radius:12px;font-family:monospace;font-size:1.2rem;font-weight:800;color:#3a2800;margin-bottom:14px;letter-spacing:.04em}
.exit-card .btn{background:var(--primary);color:#fff;padding:13px 22px;border-radius:11px;border:none;font-family:inherit;font-weight:800;font-size:.95rem;cursor:pointer;width:100%}
.exit-card small{display:block;margin-top:9px;color:var(--muted);font-size:.74rem}

/* PHASE 33 — Recently viewed strip */
.rv-strip{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:2px solid var(--accent);box-shadow:0 -6px 22px rgba(40,28,8,.18);padding:9px 12px;z-index:24;display:none;align-items:center;gap:10px;overflow-x:auto}
.rv-strip.on{display:flex}
.rv-strip .lbl{font-weight:800;font-size:.78rem;color:var(--ink);flex-shrink:0}
.rv-strip .rv-item{background:#fdf6e0;border:1.5px solid var(--border);border-radius:9px;padding:5px 10px;font-size:.78rem;cursor:pointer;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:6px;color:#3a2f20;font-weight:600;text-decoration:none}
.rv-strip .rv-item:hover{border-color:var(--primary)}
.rv-strip .rv-x{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;flex-shrink:0}
@media (max-width:600px), (min-device-width:1px) and (max-device-width:600px){.rv-strip{padding-bottom:60px}}

/* PHASE 32 — Mobile sticky cart CTA */
.sticky-cart{display:none;position:fixed;bottom:14px;right:14px;background:var(--primary);color:#fff;border:none;border-radius:99px;padding:13px 19px;font-weight:800;font-size:.92rem;box-shadow:0 8px 22px rgba(196,22,28,.45);z-index:26;cursor:pointer;align-items:center;gap:8px}
.sticky-cart.show{display:flex}
.sticky-cart .badge{background:#fff;color:var(--primary);border-radius:99px;padding:2px 9px;font-size:.78rem;font-weight:800}

/* PHASE 34 — Trust badges section */
.trust-section{background:#fff;padding:34px 0;border-top:1px dashed var(--border);border-bottom:1px dashed var(--border)}
.trust-badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;max-width:1100px;margin:0 auto;padding:0 16px}
.trust-card{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:18px;text-align:center;box-shadow:0 3px 12px rgba(40,28,8,.06)}
.trust-card .ico{font-size:2rem;margin-bottom:7px}
.trust-card h4{font-family:'Poppins';font-size:.94rem;color:var(--ink);margin-bottom:4px}
.trust-card p{font-size:.78rem;color:var(--muted);line-height:1.5}

/* WhatsApp share button on each card */
.wa-share{background:#25d366;color:#fff;border:none;border-radius:7px;padding:5px 9px;font-size:.74rem;font-weight:700;cursor:pointer;margin-top:6px}
.wa-share:hover{background:#1ea64f}

/* ── block 10 of 14 ── */

  /* Kept from the removed ng block: shared mobile polish (page bottom padding for
     sticky action bar, live-chip positioning, toast offset, modal scroll lock). */
  @media (max-width:640px), (min-device-width:1px) and (max-device-width:640px){
    body{padding-bottom:64px}
    .lv-chip{top:auto !important;bottom:172px !important;right:8px !important;z-index:24;font-size:.66rem !important;padding:4px 10px !important}
    .toast{bottom:150px !important}
  }
  /* Lock the page behind any open modal so touch-scroll doesn't bleed through. */
  body.modal-open{overflow:hidden !important}

/* ── block 11 of 14 ── */

  /* Phase 200-fff — #leadPopup REVIVED (director asked for a passive visitor-data capture
     mechanism the site otherwise lacks). The Phase 191 force-hide is removed; the modal now
     shows/hides normally via the shared .modal/.modal.open rules like every other modal. */
  /* zGuide modal + reopen button */
  #zGuide { display: none; position: fixed; inset: 0; background: rgba(16,13,10,.6); z-index: 210; align-items: center; justify-content: center; padding: 12px; }
  #zGuide.open { display: flex; animation: zgFadeIn .22s ease-out; }
  @keyframes zgFadeIn { from { opacity: 0; } to { opacity: 1; } }
  #zGuide .zg-card { background: #fff; border-radius: 16px; max-width: 460px; width: 100%; max-height: 92vh; overflow: hidden; box-shadow: 0 28px 68px rgba(0,0,0,.4); position: relative; animation: zgSlideUp .28s ease-out; display: flex; flex-direction: column; }
  @keyframes zgSlideUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  #zGuide .zg-x { position: absolute; top: 8px; right: 12px; z-index: 5; background: rgba(0,0,0,.15); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 700; }
  #zGuide .zg-x:hover { background: rgba(0,0,0,.28); }
  #zgBody { max-height: 92vh; overflow-y: auto; }
  .zg-chip { padding: 8px 12px; border-radius: 99px; font-size: .84rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: .15s; white-space: nowrap; }
  .zg-chip:hover { transform: translateY(-1px); background: #fdf6e0 !important; }
  #zgOpen { position: fixed; bottom: 78px; right: 16px; z-index: 68; background: linear-gradient(135deg, #c4161c, #e23b3b); color: #fff; border: none; padding: 11px 16px; border-radius: 99px; font-weight: 800; font-size: .84rem; box-shadow: 0 8px 22px rgba(196,22,28,.4); cursor: pointer; font-family: inherit; display: none; align-items: center; gap: 7px; transition: transform .18s; }
  #zgOpen:hover { transform: translateY(-1px); }
  #zgOpen .zg-avatar { background: #fff; color: #c4161c; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: .9rem; }
  @media (max-width: 640px), (min-device-width:1px) and (max-device-width:640px) { #zgOpen { bottom: 90px; right: 12px; padding: 9px 13px; font-size: .78rem; } }

/* ── block 12 of 14 ── */

  #zBaatKaren{position:fixed;bottom:18px;right:18px;z-index:78;background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;padding:11px 16px 11px 12px;border-radius:999px;display:flex;align-items:center;gap:9px;font-family:'Poppins','Mukta',sans-serif;font-weight:800;font-size:.92rem;text-decoration:none;box-shadow:0 10px 26px rgba(37,211,102,.4),0 0 0 3px rgba(255,255,255,.15);animation:zbk-attention 3s ease-in-out infinite;transition:transform .15s}
  #zBaatKaren:hover{transform:translateY(-3px)}
  #zBaatKaren .zbk-icon{width:34px;height:34px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex-shrink:0}
  #zBaatKaren .zbk-lines{display:flex;flex-direction:column;line-height:1.15}
  #zBaatKaren .zbk-lines small{font-size:.66rem;opacity:.9;font-weight:600;letter-spacing:.02em}
  #zBaatKaren .zbk-x{position:absolute;top:-6px;right:-6px;background:#0e1230;color:#fff;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;cursor:pointer;border:2px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.25)}
  @keyframes zbk-attention{0%,88%,100%{transform:scale(1)}92%{transform:scale(1.06)}96%{transform:scale(1)}}
  @media (max-width:640px), (min-device-width:1px) and (max-device-width:640px){
    #zBaatKaren{bottom:76px;padding:10px 14px 10px 10px;font-size:.85rem} /* clear the m-actionbar */
    #zBaatKaren .zbk-icon{width:30px;height:30px;font-size:1.15rem}
  }
  body.z-modal-open #zBaatKaren{opacity:0;pointer-events:none;transition:opacity .2s}

/* ── block 13 of 14 ── */

  #buyerGuideBackdrop{position:fixed;inset:0;background:rgba(15,17,42,.62);backdrop-filter:blur(3px);z-index:9998;display:none;align-items:flex-end;justify-content:center;padding:12px}
  #buyerGuideBackdrop.on{display:flex}
  @media (min-width:640px){ #buyerGuideBackdrop{align-items:center;padding:20px} }
  #buyerGuideCard{background:#fff;border-radius:20px;max-width:420px;width:100%;padding:0;box-shadow:0 24px 60px rgba(0,0,0,.35);border:2px solid #c9a35c;overflow:hidden;font-family:Mukta,sans-serif;position:relative;animation:zbgSlideUp .35s cubic-bezier(.2,.9,.3,1)}
  @keyframes zbgSlideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
  #buyerGuideCard .zbg-hdr{background:linear-gradient(135deg,#0e1230 0%,#1a2a6b 60%,#3653e2 100%);color:#fff;padding:16px 20px 14px;position:relative}
  #buyerGuideCard .zbg-hdr h3{margin:0;font-family:Poppins,sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:.3px;display:flex;align-items:center;gap:6px}
  #buyerGuideCard .zbg-hdr .zbg-x{position:absolute;top:8px;right:12px;background:none;border:none;color:#fff;opacity:.7;font-size:1.6rem;line-height:1;cursor:pointer;padding:2px 8px}
  #buyerGuideCard .zbg-hdr .zbg-x:hover{opacity:1}
  #buyerGuideCard .zbg-dots{display:flex;gap:5px;margin-top:9px}
  #buyerGuideCard .zbg-dots span{flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.22);transition:background .25s}
  #buyerGuideCard .zbg-dots span.done{background:#fbd87a}
  #buyerGuideCard .zbg-dots span.cur{background:#fff}
  #buyerGuideCard .zbg-body{padding:22px 22px 8px;text-align:center}
  #buyerGuideCard .zbg-emoji{font-size:2.6rem;margin-bottom:8px;line-height:1}
  #buyerGuideCard .zbg-title{font-family:Poppins,sans-serif;font-weight:800;color:#0e1230;font-size:1.15rem;margin:0 0 8px;letter-spacing:-.01em;line-height:1.25}
  #buyerGuideCard .zbg-desc{color:#4b5478;font-size:.9rem;line-height:1.55;margin:0 0 14px}
  #buyerGuideCard .zbg-tip{background:linear-gradient(135deg,#fef8ea,#fff);border:1.5px dashed #d9b85c;border-radius:11px;padding:9px 12px;margin:0 0 14px;font-size:.8rem;color:#5a4318;font-weight:600;line-height:1.5}
  #buyerGuideCard .zbg-tip b{color:#7a1a1d}
  #buyerGuideCard .zbg-foot{display:flex;gap:8px;padding:8px 20px 20px}
  #buyerGuideCard .zbg-foot button{flex:1;padding:12px;border-radius:11px;border:none;font-weight:800;font-size:.92rem;cursor:pointer;font-family:Mukta,sans-serif;letter-spacing:.2px}
  #buyerGuideCard .zbg-skip{background:transparent;color:#7a6f5c;flex:0 0 auto;padding:12px 8px !important;font-size:.85rem !important}
  #buyerGuideCard .zbg-prev{background:#eef2ff;color:#1a2a6b;flex:0 0 auto;padding:12px 14px !important}
  #buyerGuideCard .zbg-next{background:linear-gradient(135deg,#c4161c,#e23b3b);color:#fff;box-shadow:0 6px 16px rgba(196,22,28,.32)}
  #buyerGuideCard .zbg-lang{position:absolute;top:12px;left:14px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);color:#fff;font-size:.7rem;padding:3px 9px;border-radius:99px;cursor:pointer;font-family:Mukta,sans-serif;font-weight:700}
  #buyerGuideFab{position:fixed;bottom:150px;left:12px;z-index:24;background:linear-gradient(135deg,#c4161c,#e23b3b);color:#fff;border:none;border-radius:99px;padding:10px 15px;font-weight:800;font-size:.82rem;cursor:pointer;box-shadow:0 6px 18px rgba(196,22,28,.35);font-family:Mukta,sans-serif;display:flex;align-items:center;gap:6px;letter-spacing:.2px}
  #buyerGuideFab:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(196,22,28,.45)}
  @media (min-width:640px){ #buyerGuideFab{bottom:22px;left:22px;padding:12px 18px;font-size:.9rem} }

/* ── block 14 of 14 ── */

#mobMoreWrap{display:none}   /* desktop: never shown (declared FIRST so the
                                mobile rule below can override it) */
@media (max-width:640px), (min-device-width:1px) and (max-device-width:640px){
  body{display:flex;flex-direction:column}
  /* Fixed/absolute overlays (drawer, sticky bars, toasts) are out of flow — unaffected. */
  /* Phase 201 (2026-08-08) — reordered after the home page was shortened.
     #blog / #notifications / #updates / #upcoming no longer exist (moved to their own
     pages), so their rules are gone. Two deliberate changes:
       · #results (topper photos + reviews) is now ALWAYS VISIBLE on mobile. It used to
         sit inside the collapsed tail, so ~70% of buyers — the phone majority — reached
         the Buy button having seen no selection proof at all. That was defensible when
         the page was 18 screens; it is not now that it is ~9.
       · #moreFromZenith MUST carry an explicit order. Without one it defaults to order:0
         and flex put the link tiles ABOVE the exam grid and the product list. */
  body > header{order:0}
  body > #categories{order:1}
  body > #notes{order:2}
  body > #results{order:3}
  body > #mobMoreWrap{order:4}
  body > #latestStrip{order:5}
  body > #moreFromZenith{order:6}
  body > footer{order:20}
  body > #drawer{order:21}
  /* Collapsed tail — one tap opens it. */
  body:not(.mob-more-open) > #latestStrip,
  body:not(.mob-more-open) > #moreFromZenith{display:none !important}
  #mobMoreWrap{display:block;padding:14px 16px 22px;text-align:center}
  #mobMoreBtn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    width:100%;min-height:48px;                 /* ≥44 px tap target */
    font-size:1rem;font-weight:700;border-radius:12px;cursor:pointer;
    border:1.5px solid #d8c9a6;background:#fffaf0;color:#5a3d0b;
  }
  body.mob-more-open #mobMoreBtn{background:#f3ece0}

  /* ── Deep-linked exam pages (/cat/**, /course/**) ──────────────────────────
     The buyer already told us which exam they want by tapping the ad. Show them
     the note-sets, not the hero and not the other 33 exams. Was ~3,400 px of
     scroll to the first product card; now the product grid is the first thing
     under the header. The exam grid still follows, for browsing. */
  html.z-cat-page body > .hero,
  html.z-cat-page body > .bcarousel{display:none !important}
  html.z-cat-page body > #notes{order:1}
  html.z-cat-page body > #categories{order:2}

  /* Hero compaction — the 5 credibility stats were wrapping into a 2-row block
     267 px tall, pushing the exam grid a full extra screen down. Same 5 facts,
     one swipeable row, ~75 px. Nothing is removed. */
  .hero .stats{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
               gap:8px;padding-bottom:4px;scrollbar-width:none}
  .hero .stats::-webkit-scrollbar{display:none}
  .hero .stats .stat{flex:0 0 auto;white-space:nowrap}

  /* ── Tap targets ───────────────────────────────────────────────────────────
     Measured on the live mobile page. Anything under ~44 px is a mis-tap on a
     phone, and two of these gate money: the cart quantity steppers were 25 px,
     and the modal / drawer close buttons were bare glyphs with no hit area —
     a buyer who opened the checkout modal by accident struggled to close it. */
  .qty button{min-width:44px !important;min-height:44px !important;font-size:1.05rem !important}
  .modal-x, .drawer-close{min-width:44px !important;min-height:44px !important;
                          display:inline-flex !important;align-items:center;justify-content:center;
                          padding:8px !important}
  .exam-item{padding:11px 14px !important}
  .bnav{width:44px !important;height:44px !important}

  /* "2 viewing now" was floating in mid-screen; park it just above the action bar. */
  .lv-chip{bottom:78px !important}

  /* The exam filter chips wrapped into a 718 px wall directly above the product
     grid — on a /cat/ page the buyer has already chosen, and even on the home page
     it pushed the cards most of a screen down. One swipeable row instead; every
     chip is still reachable, nothing removed. */
  #filterbar{flex-wrap:nowrap !important;overflow-x:auto;-webkit-overflow-scrolling:touch;
             scrollbar-width:none;padding-bottom:4px}
  #filterbar::-webkit-scrollbar{display:none}
  #filterbar > *{flex:0 0 auto;white-space:nowrap}
  #subBar{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none}
  #subBar::-webkit-scrollbar{display:none}
  #subBar > *{flex:0 0 auto;white-space:nowrap}

  /* Header account link and the language toggle were 38-42 px.
     Phase 200-fixhere (2026-08-02) — ".lang button" never matched anything (real class is
     .lang-toggle); measured 42px live. Corrected selector so the toggle really hits 44. */
  header a[href*="dashboard"], .lang-toggle button, .langbtn{min-height:44px !important;
    display:inline-flex !important;align-items:center;justify-content:center}

  /* Phase 200-fixhere — remaining sub-44px taps measured at 375px: news-ticker links were
     22px tall (near-impossible to tap on a moving strip) and the "More ▾" dropdown items 36px. */
  .ticker a, .ticker-track a{padding:11px 0 !important;display:inline-block}
  .menubar-more-drop a{min-height:44px !important;display:flex !important;align-items:center}

  /* Footer links were 23 px tall — under even the WCAG AA 24 px minimum, and that
     list includes the phone numbers and the refund/shipping policies a hesitant
     buyer actually wants to tap before paying. (fixhere: 7px→11px = a true 44px row) */
  footer a{display:inline-block;padding:11px 0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 200-k (2026-07-22) — THE EXAM LIST WAS THE "SUPER MESSY" SCREEN.

   Measured on a real phone once the viewport fix let the mobile layout finally
   reach the app: 29 exam tiles x 126 px = 3,088 px — about four full phone
   screens of nothing but category tiles. And every single tile said the same
   thing twice:

       [ 🏛️  UGC NET JRF / SET                        79 📚 ]   <- coloured bar
       [ 79 note sets available                       View → ]   <- second row

   The count is in the badge already, and the WHOLE tile has been clickable all
   along (onclick=examPickHead) — so that second row was a duplicate count plus a
   button that did what tapping anywhere already did. Hiding the staff-only
   Link/Promote chips earlier left it mostly empty space, which made it worse.

   On phones the tile is now the coloured bar alone, with a › to show it is
   tappable: ~64 px instead of 126 px, and the section drops by roughly 1,800 px.
   Nothing is lost — the count, the name and the tap target all remain.

   The "Coming soon" tiles KEEP their second row (.eb-soon), because "tap to get
   notified" is the only affordance those tiles have.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px), (min-device-width:1px) and (max-device-width:640px){
  .exam-box > .eb-body:not(.eb-soon){display:none !important}
  .exam-box{margin-bottom:8px}
  .exam-head{padding:12px 14px !important;min-height:56px;gap:9px}
  .exam-head b{font-size:.92rem;line-height:1.25}
  .ecount{flex:0 0 auto;margin-left:auto;white-space:nowrap}
  .eb-chev{flex:0 0 auto;font-size:1.5rem;line-height:1;opacity:.75;margin-left:4px}
  .eb-soon{padding:9px 14px !important}
  /* "2 viewing now" sat on top of the tiles. It is decoration; on a phone the
     screen belongs to the exam list. */
  .lv-chip{display:none !important}
}
.eb-chev{display:none}
@media (max-width:640px), (min-device-width:1px) and (max-device-width:640px){ .eb-chev{display:inline-block} }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 200-v (2026-07-22) — PRESENTATION POLISH LAYER
   Director: "not full redesign, make this more professional, beautiful & eye catching"

   Deliberately ADDITIVE and last in the file: no markup changes, no layout
   restructuring, nothing to regress. It re-tunes depth, type and rhythm using the
   palette that already exists (crimson #c4161c, gold #d9b85c, ink #100d0a on warm
   paper) — a warm, premium, bookshop feel rather than generic ed-tech blue.

   What it changes and why:
   · DEPTH  — one big soft blur reads cheap. Real products use layered shadows: a
              tight contact shadow plus a wider ambient one, and a hairline ring so
              the card has an edge even on white.
   · TYPE   — headings get optical letter-spacing (tighter as they get bigger),
              numerals get tabular alignment, prices get proper weight contrast.
   · MOTION — a restrained lift on press/hover. Nothing bounces.
   · RHYTHM — consistent vertical spacing so sections feel composed, not stacked.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --z-ring: 0 0 0 1px rgba(40,28,8,.07);
  --z-lift-1: 0 1px 2px rgba(40,28,8,.06), 0 4px 12px rgba(40,28,8,.07);
  --z-lift-2: 0 2px 4px rgba(40,28,8,.07), 0 12px 28px rgba(40,28,8,.13);
  --z-lift-3: 0 4px 8px rgba(40,28,8,.08), 0 22px 48px rgba(40,28,8,.18);
  --z-ease: cubic-bezier(.4,.14,.3,1);
}

/* ── Cards ─────────────────────────────────────────────────────────────────
   A hairline ring + layered shadow instead of a single soft blur. The edge is
   what makes a card look "printed" rather than floating. */
.card{
  box-shadow: var(--z-ring), var(--z-lift-1) !important;
  transition: transform .22s var(--z-ease), box-shadow .22s var(--z-ease) !important;
  will-change: transform;
}
.card:hover{ transform: translateY(-3px); box-shadow: var(--z-ring), var(--z-lift-2) !important; }
.card:active{ transform: translateY(-1px); }

/* Cover: a soft top sheen gives the flat gradient some light direction. */
.card .cover{ position: relative; isolation: isolate; }
.card .cover::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 90% at 15% -20%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,.16));
}
.card .cover > *{ position:relative; z-index:1; }

/* ── Typography: optical letter-spacing ───────────────────────────────────
   Large type needs to be tighter, small type looser. This one detail is most of
   the difference between "made in a builder" and "designed". */
.cv-title{ letter-spacing:-.015em; }
.cv-exam{ letter-spacing:.06em !important; text-transform:uppercase; font-size:.66rem !important; opacity:.94; }
.card-body h3{ letter-spacing:-.012em; line-height:1.34; }
.sec-head h2{ letter-spacing:-.02em; }
.hero h1{ letter-spacing:-.025em; }

/* Numerals line up in columns — prices, counts, page numbers. */
.card-price, .price-amount, .ecount, .stat b, .bd-price{ font-variant-numeric: tabular-nums; }

/* ── Price block: the number should carry the weight, not the box ────────── */
.card-body .card-price,
.card-body > div[style*="fff7e8"]{
  border-radius:12px !important;
  box-shadow: inset 0 0 0 1px rgba(217,184,92,.35) !important;
  border-color: transparent !important;
}

/* ── Buttons: subtle top highlight reads as a raised surface ─────────────── */
.btn, .card-body button, .bd-buy{
  transition: transform .16s var(--z-ease), box-shadow .16s var(--z-ease), filter .16s var(--z-ease) !important;
  letter-spacing:.005em;
}
.btn:active, .card-body button:active{ transform: translateY(1px) scale(.995); }
.btn-primary, .card-body button[style*="c4161c"]{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px rgba(196,22,28,.28) !important;
}
.btn-primary:hover, .card-body button[style*="c4161c"]:hover{ filter: brightness(1.06); }

/* ── Section headings: a short gold rule instead of shouting ────────────── */
.sec-head{ position:relative; }
.sec-head h2{ margin-bottom:10px; }
.sec-head h2::after{
  content:''; display:block; width:52px; height:3px; margin:12px auto 0;
  border-radius:3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

/* ── Exam tiles: crisper edge, gentle press feedback ─────────────────────── */
.exam-box{
  box-shadow: var(--z-ring), var(--z-lift-1) !important;
  transition: transform .18s var(--z-ease), box-shadow .18s var(--z-ease) !important;
  overflow:hidden;
}
.exam-box:hover{ transform: translateY(-2px); box-shadow: var(--z-ring), var(--z-lift-2) !important; }
.exam-box:active{ transform: translateY(0); }
.exam-head{ position:relative; }
.exam-head::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 45%);
}
.ecount{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }

/* ── Rhythm ───────────────────────────────────────────────────────────────
   Even spacing between sections so the page reads as composed. */
section{ scroll-margin-top: 72px; }

/* ── Mobile: the same polish, sized for a phone ─────────────────────────── */
@media (max-width:640px), (min-device-width:1px) and (max-device-width:640px){
  .card{ border-radius:14px !important; }
  .card:hover{ transform:none; }                  /* no hover state on touch */
  .sec-head h2{ font-size:1.32rem; letter-spacing:-.02em; }
  .sec-head h2::after{ width:44px; margin-top:10px; }
  .sec-head{ margin-bottom:18px !important; }
  .card-body{ padding:14px !important; gap:8px !important; }
  .cv-title{ font-size:.98rem; }
  /* Bigger, calmer price — the single number a buyer is looking for. */
  .card-body > div[style*="fff7e8"] span[style*="1.25rem"]{ font-size:1.34rem !important; }
  .exam-head b{ letter-spacing:-.01em; }
}

/* Respect a buyer who has asked for less motion. */
@media (prefers-reduced-motion: reduce){
  .card, .exam-box, .btn, .card-body button{ transition:none !important; }
  .card:hover, .exam-box:hover{ transform:none !important; }
}


/* Phase 200-ai (2026-07-23) — director: make the free-sample badge on cards more
   visible / blinking, since the sample is the strongest conversion hook. Gentle pulse,
   not a harsh flash; respects reduced-motion. */
/* Phase 200-br (2026-07-24) — Free Sample badge: BIGGER + RED + blinking (director). */
@keyframes zSampleBlink { 0%,100%{ transform:scale(1); box-shadow:0 3px 10px rgba(196,22,28,.45); opacity:1; } 50%{ transform:scale(1.1); box-shadow:0 6px 20px rgba(196,22,28,.75); opacity:.82; } }
.cover .z-sample-badge{ animation: zSampleBlink 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .cover .z-sample-badge{ animation:none; } }

/* ═══════════════════════════════════════════════════════════════════════
   Phase 200-cc (2026-07-26) — PREMIUM CLEAN REDESIGN v1 (preview only)
   Goal: Drishti/Samyak-grade clean, professional, simpler feel.
   Method: highest-priority visual overrides ONLY — near-white page, flat
   white cards with a hairline border, one restrained red accent, lighter
   type, more whitespace. NO structural / JS / checkout / reader changes.
   Fully reversible: delete this whole block to restore the poster look.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#f5f6f8; --card:#ffffff; --text:#1f2430; --muted:#6b7280;
  --border:#e7e9ee; --radius:14px;
  --shadow:0 1px 3px rgba(17,24,39,.06); --shadow-lg:0 10px 28px rgba(17,24,39,.10);
}
body{ background:#f5f6f8 !important; color:#1f2430; }
.container{ max-width:1180px; }

/* ── Hero: clean white, drop the gold band + poster circles, lighter head ── */
.hero{ background:#ffffff !important; border-bottom:1px solid #e7e9ee !important; padding:60px 0 54px !important; }
.hero::before, .hero::after{ display:none !important; }
.hero h1{ font-weight:700 !important; color:#141824 !important; letter-spacing:-.022em !important; line-height:1.18 !important; }
.hero h1 em{ color:#c4161c !important; }
.hero p{ color:#4b5160 !important; font-size:1.02rem !important; }
.hero .kicker{ background:#fdeaea !important; color:#c4161c !important; -webkit-text-fill-color:#c4161c !important;
  box-shadow:none !important; font-weight:600 !important; letter-spacing:.03em !important; border-radius:999px !important; padding:6px 15px !important; }

/* ── Section headings: lighter weight, tighter tracking ── */
.sec-head h2, #latestStrip .ls-head h2, .cat-head h2{ font-weight:700 !important; letter-spacing:-.012em !important; color:#141824 !important; }
.sec-head p, .muted{ color:#6b7280 !important; }

/* ── Product + category cards: flat white, hairline border, gentle hover ── */
.card{ background:#ffffff !important; border:1px solid #e7e9ee !important; box-shadow:none !important; border-radius:14px !important; }
.card:hover{ transform:translateY(-3px) !important; box-shadow:0 10px 28px rgba(17,24,39,.10) !important; border-color:#dcdfe6 !important; }
.card h3, .card-body h3{ font-weight:600 !important; color:#1f2430 !important; }

/* ── Offers strip: clean solid chips (kill the dashed-gold busy look) ── */
.offers-strip{ margin-top:16px; }
.offer-chip{ background:#ffffff !important; border:1px solid #e7e9ee !important; color:#c4161c !important;
  border-radius:999px !important; font-weight:600 !important; padding:8px 16px !important; }
.offer-chip:hover{ background:#fdeaea !important; color:#a5121a !important; border-color:#f3c9c9 !important; }

/* ── A touch more breathing room between sections ── */
section, .section{ }
.container > .sec-head{ margin-bottom:18px !important; }

/* ── Phase 200-cc — ALL-CAPS category / exam / subject / product names (director's request).
   Caps get slightly smaller size + letter-spacing so they stay clean and readable. ── */
.exam-head b, .cat-name, .card h3, .card-body h3, .cv-title, .cv-exam, .cv-type{
  text-transform:uppercase !important; letter-spacing:.025em !important;
}
.card h3, .card-body h3, .cv-title{ font-size:.85rem !important; line-height:1.32 !important; }
.cv-exam{ font-size:.66rem !important; }
.exam-head b{ font-size:.92rem !important; }

/* ── Phase 200-cc — "EXAMS WE COVER" breadth strip in the hero (full major-exam list) ── */
.exam-breadth{ margin-top:24px; }
.eb-title{ font-size:.72rem; font-weight:600; letter-spacing:.14em; color:#8a1a1a; margin-bottom:11px; text-transform:uppercase; }
.eb-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.eb-chip{ background:#ffffff; border:1px solid #e7e9ee; color:#374151; border-radius:999px;
  padding:6px 13px; font-size:.72rem; font-weight:600; letter-spacing:.03em; white-space:nowrap; }
.eb-chip.eb-soon{ background:#f4f5f7; color:#9aa0aa; border-style:dashed; }
@media(max-width:600px){ .eb-chip{ font-size:.68rem; padding:5px 11px; } }

/* ── Phase 200-cc — hero sub-badge ("Now 40+ Exams · 70+ Subjects") ── */
.hero-sub-badge{ display:inline-block; margin:0 0 18px; font-weight:700; font-size:.9rem;
  color:#c4161c; background:#fdeaea; border-radius:999px; padding:6px 15px; letter-spacing:.01em; }

/* ── Phase 200-cc — FIX broken stats row (was dark boxes + gradient ::before hiding the numbers).
   Make them clean white cards with a visible red number + grey label. ── */
.stats .stat{ background:#ffffff !important; border:1px solid #e7e9ee !important; box-shadow:none !important; color:#1f2430 !important; }
.stats .stat::before{ display:none !important; }
.stats .stat b{ color:#c4161c !important; -webkit-text-fill-color:#c4161c !important; background:none !important; }
.stats .stat span{ color:#6b7280 !important; opacity:1 !important; }

/* ── Phase 200-cc — shortened hero headline: tune size so it wraps to a clean 2 lines
   on mobile (375px) instead of 5. Full exam names live in the .exam-breadth chips below. ── */
.hero h1{ max-width:640px !important; }
@media(max-width:480px){
  .hero h1{ font-size:1.72rem !important; line-height:1.22 !important; max-width:320px !important; }
}

/* ===== Phase 201 (2026-08-08) — "More from Zenith" link band.
   Replaces six full-length home sections. Mobile-first: single column at 375px,
   two across from 560px, three on desktop. Tap target is the whole tile (>=44px). */
.more-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:560px){.more-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.more-grid{grid-template-columns:repeat(3,1fr)}}
.more-tile{display:flex;flex-direction:column;gap:3px;padding:14px 16px;min-height:44px;
  background:var(--cream,#fdf6e0);border:1px solid var(--border,#ead9b5);border-radius:12px;
  text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.more-tile:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(16,13,10,.12)}
.more-tile span{font-size:1.35rem;line-height:1}
.more-tile b{font-size:.94rem;font-weight:800;color:var(--ink,#100d0a)}
.more-tile small{font-size:.78rem;color:var(--muted,#7a6f5c);line-height:1.4}

/* ===== Phase 203 (2026-08-09) — server-rendered course summary on /course/ pages.
   This is REAL page content, not an SEO shim: before this, every course page had a
   byte-identical body and Google refused to index 889 of them. Mobile-first; the unit
   list is the part that makes each page genuinely unique. */
.ssr-course{max-width:1120px;margin:0 auto;padding:18px 16px 6px;font-family:Mukta,sans-serif;color:var(--ink,#100d0a)}
.ssr-course h1{font-family:Poppins,sans-serif;font-size:1.32rem;line-height:1.3;font-weight:800;margin:0 0 8px}
.ssr-course h2{font-family:Poppins,sans-serif;font-size:1.02rem;font-weight:800;margin:20px 0 8px;color:var(--blue,#1a2a6b)}
.ssr-course h3{font-size:.9rem;font-weight:800;margin:13px 0 5px;color:var(--primary,#c4161c)}
.ssr-lede{font-size:.95rem;line-height:1.6;color:#3f3a33;margin:0 0 12px}
.ssr-facts{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:7px}
.ssr-facts li{background:var(--cream,#fdf6e0);border:1px solid var(--border,#ead9b5);border-radius:99px;padding:5px 12px;font-size:.8rem}
.ssr-cta{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 6px}
.ssr-cta a{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:10px;
  background:linear-gradient(135deg,#c4161c,#e23b3b);color:#fff;text-decoration:none;font-weight:800;font-size:.9rem}
.ssr-cta a+a{background:#fff;color:var(--blue,#1a2a6b);border:1.5px solid var(--border,#ead9b5)}
.ssr-course ul:not(.ssr-facts){margin:0 0 10px;padding-left:20px}
.ssr-course ul:not(.ssr-facts) li{font-size:.88rem;line-height:1.65;margin-bottom:2px}
.ssr-course ul:not(.ssr-facts) li span{color:var(--muted,#7a6f5c);font-size:.78rem}
.ssr-faq{margin:0}
.ssr-faq dt{font-weight:800;font-size:.9rem;margin-top:11px}
.ssr-faq dd{margin:3px 0 0;font-size:.87rem;line-height:1.6;color:#3f3a33}
@media (min-width:900px){ .ssr-course h1{font-size:1.6rem} }

/* Phase 203b (2026-08-10) — long unit lists fold behind a tap. The <details> body stays in
   the HTML so crawlers still read every unit name; this is purely a reading convenience. */
.ssr-units summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:9px 16px;border-radius:10px;background:var(--cream,#fdf6e0);
  border:1.5px solid var(--border,#ead9b5);font-weight:800;font-size:.87rem;color:var(--blue,#1a2a6b)}
.ssr-units summary::-webkit-details-marker{display:none}
.ssr-units summary::after{content:'▾';transition:transform .2s}
.ssr-units[open] summary::after{transform:rotate(180deg)}
.ssr-units[open] summary{margin-bottom:8px}

/* Phase 205c (2026-08-11) — grouped test blocks for courses with many test sets. */
.test-block{border-bottom:1px solid var(--border,#ead9b5)}
.test-block summary::-webkit-details-marker{display:none}
.test-block[open] summary span:last-child{transform:rotate(180deg);display:inline-block}