/* ═══════════════════════════════════════════════════════════════════════════════
   ZENITH — CLEAN LAYER  (director 2026-10-19: "ALL RE DESIGN CLEAN")
   Loaded AFTER store.css. It does not rebuild the site; it imposes one design
   system over it, which is the difference between a page that looks made and a
   page that looks assembled.

   What it fixes, in order of how "cheap" each one read:
     1. PASTEL GRADIENT BOXES — lavender, amber, dashed-orange and cream panels,
        each a different colour, stacked down the page. Flat surfaces + one
        hairline instead. Gradients survive ONLY on the brand bands that are meant
        to be loud (the red CTA, the dark results section).
     2. NO TYPE SCALE — headings ranged over a dozen ad-hoc sizes set inline.
        Five sizes now, one family, consistent weight and tracking.
     3. NO SPACING RHYTHM — section padding was set per section. One rhythm now.
     4. CARD SOUP — six card treatments. One: white, 1px hairline, soft shadow,
        14px radius.
     5. MOTION NOISE — pulsing/animated chrome competing with the real CTA.

   The beige stays (director, 2026-10-18: "WHY CHANGED COLOR THEME FROM BEIGE").
   ═══════════════════════════════════════════════════════════════════════════════ */

:root{
  --z-surface:#ffffff;
  --z-line:#e7dfcd;              /* one hairline everywhere */
  --z-line-soft:#f0ebdf;
  --z-ink:#1b1711;
  --z-muted:#6f6554;
  --z-shadow:0 1px 2px rgba(40,28,8,.05), 0 6px 18px rgba(40,28,8,.06);
  --z-shadow-hi:0 10px 30px rgba(40,28,8,.13);
  --z-r:14px;                    /* one radius */
  --z-r-sm:10px;
  --z-gap:14px;
  --z-section:34px;              /* vertical rhythm, mobile */
}
@media(min-width:900px){ :root{ --z-section:54px } }

/* ── 1. flatten the pastel panels ─────────────────────────────────────────────
   These are inline gradients written by store.js and index.html, so they are
   matched on the gradient itself — precise, and it cannot touch anything else. */
[style*="linear-gradient(135deg,#eef2ff"],
[style*="linear-gradient(135deg,#fef3c7"],
[style*="linear-gradient(135deg,#fff7ed"],
[style*="linear-gradient(135deg,#fff8e6"],
[style*="linear-gradient(135deg,#fffbeb"],
[style*="linear-gradient(135deg,#f0fdf4"],
[style*="linear-gradient(135deg,#eff6ff"]{
  background:var(--z-surface) !important;
  border:1px solid var(--z-line) !important;
  border-radius:var(--z-r) !important;
  box-shadow:var(--z-shadow) !important;
}
/* the gold "My Account" pill was a gradient + an infinite pulse next to the CTA */
.my-acc-pill{background:var(--z-surface) !important;border:1.5px solid var(--blue) !important;
  color:var(--blue) !important;animation:none !important;box-shadow:none !important;font-weight:800}

/* ── 2. type scale ───────────────────────────────────────────────────────────── */
h1{font-size:clamp(1.65rem,5.2vw,2.7rem);line-height:1.18;letter-spacing:-.4px;font-weight:800}
h2{font-size:clamp(1.25rem,3.4vw,1.8rem);line-height:1.25;letter-spacing:-.2px;font-weight:800}
h3{font-size:1.02rem;line-height:1.35;font-weight:800;letter-spacing:0}
.sec-head{margin-bottom:18px}
.sec-head .eyebrow{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--primary);margin-bottom:7px}
.sec-head p{color:var(--z-muted);font-size:.9rem;line-height:1.55;margin-top:6px;max-width:62ch}

/* ── 3. spacing rhythm ───────────────────────────────────────────────────────── */
section{padding:var(--z-section) 0}
section + section{padding-top:0}
.container{max-width:1180px;margin:0 auto;padding:0 16px}

/* ── 4. one card ─────────────────────────────────────────────────────────────── */
.exam-box,.note-card,.card,.prices,.getbox{
  background:var(--z-surface);border:1px solid var(--z-line);border-radius:var(--z-r);
  box-shadow:var(--z-shadow)}
.exam-box{transition:box-shadow .18s,transform .18s,border-color .18s}
.exam-box:hover{box-shadow:var(--z-shadow-hi);border-color:#d9cdb0;transform:translateY(-2px)}
/* the section heads inside the exam grid — were lavender and amber gradient bars */
.exam-grid > div[style*="grid-column"]{background:transparent !important;border:0 !important;
  box-shadow:none !important;border-bottom:1px solid var(--z-line) !important;
  border-radius:0 !important;padding:2px 0 9px !important;margin:22px 0 4px !important}
.exam-grid > div[style*="grid-column"] span{color:var(--z-ink) !important}

/* ── 5. buttons: one primary, one secondary, one size ────────────────────────── */
.btn{min-height:46px;border-radius:12px;font-weight:800;letter-spacing:.1px;
  box-shadow:none;transition:filter .15s,transform .12s}
.btn:active{transform:scale(.985)}
.btn-accent,.btn-primary{background:var(--primary);color:#fff;border:0}
.btn-accent:hover,.btn-primary:hover{filter:brightness(1.06)}
.btn-outline{background:var(--z-surface);color:var(--blue);border:1.5px solid #cfd6e8}
.btn-outline:hover{border-color:var(--blue)}
.chip,.trust-chip,.eb-chip{border-radius:999px;border:1px solid var(--z-line);
  background:var(--z-surface);box-shadow:none;font-weight:700;color:#4a4132}

/* ── 6. the hero ──────────────────────────────────────────────────────────────
   Measured at 2,627px over 13 blocks before this pass. The job of a hero is one
   promise and one action, so the proof line is a single row and the banner now
   SUPPORTS the headline instead of replacing it. */
.hero{padding:22px 0 var(--z-section)}
.hero .kicker{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--primary);background:transparent;padding:0;margin-bottom:10px}
.hero-punch{font-size:clamp(1rem,2.4vw,1.3rem) !important;margin-bottom:10px !important}
.hero h1{margin-bottom:12px}
.hero .hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px}
.hero .hero-ctas .btn{flex:1 1 190px;justify-content:center}
.hero .stats{display:flex;gap:8px;margin-top:18px}
.hero .stat{background:var(--z-surface);border:1px solid var(--z-line);border-radius:var(--z-r-sm);
  padding:10px 14px;box-shadow:none;color:var(--z-ink);min-width:max-content}
.hero .stat b{color:var(--blue);font-size:1.02rem;display:block;line-height:1.2}
.hero .stat span{color:var(--z-muted);font-size:.7rem;font-weight:700}
.hero .trust-row{margin-top:12px;gap:7px}
/* the banner is artwork, not the message — slim band under the promise */
.hero-banner-link{margin:20px auto 0 !important;border-radius:var(--z-r) !important;
  box-shadow:var(--z-shadow) !important;max-width:1180px}
.hero-banner-link img{width:100%;height:auto;display:block}

/* ── 7. kill the motion that competes with the CTA ───────────────────────────── */
.hero .kicker,.hero .stat,.trust-chip{animation:none !important}

/* ── 8. footer: it was 1,887px — two screens of links ────────────────────────── */
footer#contact{padding-top:30px}
footer#contact .foot-exams a,footer#contact .foot-connect a.sm{font-weight:600}

/* ── 9. phone ─────────────────────────────────────────────────────────────────── */
@media(max-width:640px){
  .hero{padding-top:16px}
  .hero .hero-ctas .btn{flex:1 1 100%}
  .hero .stats{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hero .stats::-webkit-scrollbar{display:none}
  /* the mobile banner was a 616px portrait collage — 40% of the first screen and
     the loudest "cheap" signal on the page. The headline carries the message now,
     so the banner rides as a slim landscape band. */
  .hero-banner-link img{max-height:200px;object-fit:cover;object-position:center}
  .sec-head p{font-size:.85rem}
}

/* ── 10. the top chrome ───────────────────────────────────────────────────────
   Measured on a 393×852 phone: ticker 46 + header 261 = 307px — 36% of the first
   screen spent before a word of content, and three of those controls are repeated
   by the fixed Cart / Call / WhatsApp bar at the bottom. */
@media(max-width:640px){
  /* Cart is already the first button of the fixed bottom bar, and Login lives
     inside My Account — two taps for the same thing, twice on one screen. */
  header .nav-actions .cart-btn,
  header .nav-actions .btn-outline{display:none}
  header .nav-actions{gap:8px}
  .my-acc-pill{padding:8px 14px}
  /* the marquee is a notice, not a headline — half the height, calmer band */
  .ticker-wrap{font-size:.72rem}
  .ticker-wrap,.ticker-wrap *{line-height:1.25}
}
/* one quiet band instead of a bright yellow strip above the brand */
.ticker-wrap{background:#1b1711;color:#f3ead6;border-bottom:1px solid rgba(255,255,255,.08)}
.ticker-wrap a{color:#ffd54f}

/* ── 11. Hindi runs ~25% longer than English — the <h1> was five lines on a
   phone, and the red <em> inside it made the block read as two shouts rather
   than one sentence. Slightly tighter, and the emphasis carries weight, not
   another colour. ─────────────────────────────────────────────────────────── */
.hero h1{font-size:clamp(1.5rem,4.6vw,2.6rem)}
.hero h1 em{font-style:normal;color:var(--primary)}
html[lang="hi"] .hero h1,body.lang-hi .hero h1{font-size:clamp(1.35rem,4.2vw,2.3rem);line-height:1.3}

/* ── 12. one accent, not three ────────────────────────────────────────────────
   Above the fold there were THREE red shouts stacked: the caps kicker, the brand
   punchline, and the <em> inside the headline. Three emphases cancel each other
   out — the eye has nowhere to land. The headline keeps the red; the kicker and
   the punchline step back to carry the same words with less volume. */
.hero .kicker{color:var(--z-muted);letter-spacing:1.6px}
.hero .kicker::first-letter{color:var(--primary)}
.hero-punch{color:var(--blue) !important;font-weight:800 !important}
.hero-punch span{color:var(--z-muted) !important;font-weight:700 !important}
.hero h1 em{color:var(--primary);font-style:normal}
/* the headline is the director's SEO wording and stays word-for-word — only its
   size changes, so it reads as one sentence instead of five stacked lines. */
@media(max-width:640px){
  .hero h1{font-size:1.34rem;line-height:1.32;letter-spacing:-.1px}
  .hero-punch{font-size:.98rem !important}
  .hero .hero-tagline{font-size:.93rem !important;line-height:1.5 !important}
  .hero .kicker{font-size:.64rem}
}

/* ── 13. beat the "v2" !important block ──────────────────────────────────────
   store.css carries a later visual-v2 block that sets the hero padding and paints
   the kicker with a gradient clipped to the text. Measured consequence on a phone:
   60px of empty cream between the nav and the first word, and the primary CTA
   pushed to y=799 — UNDER the fixed Cart/Call/WhatsApp bar at y=783, so the one
   button the hero exists for could not be tapped without scrolling. */
.hero{padding:30px 0 34px !important}
@media(max-width:640px){
  .hero{padding:14px 0 26px !important}
  .hero .kicker{margin-bottom:7px}
  .hero-punch{margin-bottom:7px !important}
  .hero h1{margin-bottom:9px}
  .hero .hero-tagline{margin-bottom:10px !important}
  .hero .hero-ctas{margin:12px 0 4px}
  .hero .stats{margin-top:13px}
  .hero .trust-row{margin-top:9px}
}
/* a gradient clipped to 11px caps text is noise, not craft */
.hero .kicker{background:none !important;-webkit-background-clip:border-box !important;
  background-clip:border-box !important;-webkit-text-fill-color:currentColor !important;
  color:var(--z-muted) !important}
.hero .kicker::first-letter{color:var(--primary)}

/* ── 14. header: one row for brand + account, one for search ─────────────────
   The phone header stacked FOUR full-width rows — logo, actions, search, menu —
   261px before the hero even starts. Brand left, account right, search beneath:
   the layout every professional storefront uses, and ~47px back. */
@media(max-width:640px){
  header .container{display:flex;flex-wrap:wrap;align-items:center;gap:9px 10px;padding-top:9px;padding-bottom:9px}
  header .logo{flex:1 1 auto;order:0;min-width:0}
  header .nav-actions{order:1;flex:0 0 auto;margin:0 !important;justify-content:flex-end}
  header .search-col{order:2;flex:1 1 100%;margin:0 !important}
  header .logo-mark{width:38px;height:38px;font-size:1.05rem}
  header .lang-toggle button{padding:6px 10px;font-size:.74rem}
  nav.menubar{border-top:1px solid var(--z-line)}
}

/* The primary CTA sat 5px under the fixed bottom bar — a hero whose one button
   cannot be tapped without scrolling is a hero that failed. */
@media(max-width:640px){ .hero .hero-ctas{margin:8px 0 2px} }

/* Both hero buttons share one row on a phone: the block drops from 114px to 48px,
   and "Browse Notes" clears the fixed bottom bar instead of hiding 5px beneath it. */
@media(max-width:640px){
  .hero .hero-ctas{flex-wrap:nowrap;gap:8px}
  .hero .hero-ctas .btn{flex:1 1 50%;min-width:0;padding:10px 8px;font-size:.86rem;white-space:nowrap}
  .hero-punch{margin-bottom:4px !important}
  .hero h1{margin-bottom:6px}
  .hero .hero-tagline{margin-bottom:8px !important}
}
/* store.css forces flex-direction:column on the phone hero CTAs, which is what made
   the block 112px and pushed the primary button under the bottom bar. */
@media(max-width:640px){
  .hero .hero-ctas{flex-direction:row !important}
  .hero h1{margin-bottom:4px}
  .hero .hero-tagline{margin-bottom:6px !important}
}

/* ── 15. desktop line length ─────────────────────────────────────────────────
   On a 1280px screen the headline and the buttons stretched the full 1180px
   container. Long measures read as a wall of text and full-width buttons read as
   a form, not a choice. Roughly 20 characters per line for a display heading,
   66 for body, and buttons at their natural width. */
@media(min-width:900px){
  .hero h1{max-width:20ch}
  .hero-punch,.hero .hero-tagline{max-width:62ch}
  .hero .hero-ctas{margin-top:22px}
  .hero .hero-ctas .btn{flex:0 0 auto;min-width:210px;justify-content:center}
  .sec-head h2{max-width:24ch}
}

/* ── 16. the page was 11.3 phone screens ─────────────────────────────────────
   Two blocks were most of it: the exam grid (3,217px — 36 cards, one per row) and
   the footer (1,845px, of which 1,224px was four stacked link columns). Neither
   needed a full row per item on a 393px screen. */
@media(max-width:640px){
  /* 36 exams, two per row. The cards are name + "Open exam page", so they read
     perfectly well at half width and the section loses roughly 1,500px. */
  .exam-grid{grid-template-columns:1fr 1fr !important;gap:10px !important}
  .exam-grid > div[style*="grid-column"]{grid-column:1/-1 !important}
  .exam-box{font-size:.92rem}
  .exam-box .staff-only{display:none}            /* staff tools, not buyer furniture */
  /* four stacked footer columns become two */
  footer#contact > .container:first-of-type{grid-template-columns:1fr 1fr !important;gap:18px 14px !important}
  footer#contact > .container:first-of-type > div:first-child{grid-column:1/-1}
  footer#contact .foot-exams .lk{gap:6px 14px}
  footer#contact{padding-bottom:84px}            /* clear the fixed Cart/Call/WhatsApp bar */
}
/* At half width the card header (icon + name + count + share button) was laid out on
   one nowrap row: 301px of content in a 176px card, so 30 of 36 cards clipped.
   Let the name own its line and drop the share chrome, which is for staff anyway. */
@media(max-width:640px){
  .exam-box .exam-head{flex-wrap:wrap;gap:4px 6px;padding:9px 10px}
  .exam-box .exam-head b{flex:1 1 100%;white-space:normal;overflow-wrap:anywhere;
                         font-size:.83rem;line-height:1.25}
  .exam-box .exam-head .eico{font-size:.95rem}
  .exam-box .exam-head .ecount{font-size:.66rem}
  .exam-box .exam-head button{display:none}
  .exam-box a[href^="/cat/"]{display:block;text-align:center;font-size:.72rem;padding:6px 8px}
}

/* ── 17. twenty-one gradient headers in one grid ─────────────────────────────
   Measured: 21 DISTINCT linear-gradients across 36 exam cards — maroon, purple,
   navy, teal, orange, pink — each a sticker in its own colour. Nothing says
   "assembled from parts" louder. One treatment for all of them: white card, navy
   name, a single red rule at the top, and the header fills the card so there is no
   dead white space left over when the grid stretches a row to equal height.
   The per-category colour is still written by store.js; this simply stops it
   painting the whole page. */
.exam-grid .exam-head{
  background:var(--z-surface) !important;
  color:var(--z-ink) !important;
  border-top:3px solid var(--primary);
  flex:1 1 auto;align-items:flex-start}
.exam-grid .exam-head b{color:var(--blue) !important}
.exam-grid .exam-head .eico{filter:grayscale(.15)}
.exam-grid .exam-head .ecount{background:var(--z-line-soft) !important;color:var(--z-muted) !important;
  border:1px solid var(--z-line)}
.exam-grid .exam-head svg,.exam-grid .exam-head .chev{color:var(--z-muted)}
.exam-box{overflow:hidden}
/* The "open this exam's own page" link lives in the card HEADER, not the collapsed
   body — measured: all 30 body links had a 0x0 box on a phone, so after the duplicate
   pill strip was removed there was no visible route to a /cat page at all. */
.exam-grid .eb-open{display:inline-block;margin-top:6px;font-size:.72rem;font-weight:800;
  color:var(--primary) !important;border:1px solid var(--z-line);background:var(--z-line-soft);
  padding:5px 10px;border-radius:999px;white-space:nowrap}
.exam-grid .eb-open:hover{background:var(--primary);color:#fff !important;border-color:var(--primary)}
@media(max-width:640px){ .exam-grid .eb-open{flex:1 1 100%;text-align:center;margin-top:7px} }
/* On a phone the whole card is the link (examToggleOrJump), so the separate pill would
   be a second tap target for the same destination — and 36 of them cost ~1,080px. */
@media(max-width:640px){ .exam-grid .eb-open{display:none} }
.exam-grid .eb-open{min-height:38px;display:inline-flex;align-items:center}
/* ⚠️ ordering: the base .eb-open rule above sets display:inline-flex and, being LATER in
   the file at equal specificity, it beat the earlier phone rule that hides it. Last word,
   explicitly — on a phone the card itself is the link. */
@media(max-width:640px){ .exam-grid .eb-open{display:none !important} }
/* Exam cards were 189px each for a name and a count. Tighter padding and a capped
   name block take the grid down without touching legibility. */
@media(max-width:640px){
  .exam-grid .exam-head{padding:10px 11px 11px;gap:3px 6px}
  .exam-grid .exam-box{border-radius:12px}
  .exam-grid{gap:9px !important}
}

/* ═══ 18. THE TOP HALF (director 2026-10-19: "improve top half design") ════════
   What was wrong, in order: THREE small text blocks stacked before the headline —
   a red "★ TRUSTED BY 25,000+ ASPIRANTS" kicker, the bilingual brand punchline, and
   then an <h1> set at almost the same weight. Three things asking to be read first
   means none of them is. And the kicker's claim is repeated verbatim two blocks
   later by the stats row ("25,000+ Students Trained"), which is exactly the kind of
   duplication that made the exam strip look cheap.
   Now: ONE eyebrow (the brand promise), ONE headline, one supporting line. */
.hero .kicker{display:none}                    /* said twice — the stats row keeps it */
.hero-punch{
  font-size:.74rem !important;font-weight:800 !important;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--z-muted) !important;margin:0 0 10px !important;line-height:1.5}
.hero-punch span{                              /* the Hindi half — not uppercased */
  display:inline !important;margin:0 0 0 4px !important;font-size:1em !important;
  text-transform:none;letter-spacing:.2px;color:var(--z-muted) !important;font-weight:700 !important}
.hero-punch span::before{content:"· "}
/* with nothing competing, the headline can carry its proper weight again */
.hero h1{font-weight:800}
@media(max-width:640px){
  .hero h1{font-size:1.46rem;line-height:1.26;margin-bottom:9px}
  .hero-punch{font-size:.68rem !important;margin-bottom:8px !important}
}
/* five trust chips were wrapping into three rows (106px). One quiet scrollable line. */
.hero .trust-row{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:7px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.hero .trust-row::-webkit-scrollbar{display:none}
.hero .trust-chip{flex:0 0 auto;font-size:.71rem;padding:6px 11px}
/* the update marquee is a notice above the brand name — keep it, make it quiet */
.ticker-wrap{font-size:.7rem}
@media(max-width:640px){ .ticker-wrap{font-size:.66rem} }
/* the "can't find your notes" line is a real lead path, but it was shouting in red
   between the brand and the search box */
header .search-col > a{font-size:.72rem !important;font-weight:700;color:var(--z-muted) !important}