/* ------------------------------------------------------------------
   Pack pitch: offer bar, class chooser, pack cards.
   Scoped to .bz-offerbar / .bz-chooser / .bz-pack* so nothing here can
   reach existing components. Brand tokens come from bz-redesign.css.
   ------------------------------------------------------------------ */

/* ---------------------------------------------- spot 1: offer bar */

/* The site header is position:fixed, so DOM order alone cannot put these
   above the logo -- the header would cover them. Both bars are therefore
   fixed too and stacked above it; bz-packs.js measures them and pushes the
   header and page down to match, so nothing is hidden underneath. */
/* One bar, at the very top of every page. It was two -- an offer strip plus a
   row of class buttons -- which ate a third of a phone screen before the logo.
   The classes live in the chooser and the packs section; repeating them up here
   cost more than it earned. */
.bz-offerbar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1032;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 9px 46px 9px 18px;
  background: linear-gradient(90deg, #0f172a 0%, #13243f 55%, #0d9fd0 160%);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.4;
}

.bz-offerbar__inner {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  /* Stretch to the bar. Sized to its text the anchor was only 16px tall, so
     the strip looked tappable while the real target was a thin band through
     the middle of it. */
  align-self: stretch;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 1140px;
}

.bz-offerbar__text { font-weight: 600; letter-spacing: .01em; }

/* Prices read as the point of the bar, so they get the accent colour rather
   than being lost in a run of white text. */
.bz-offerbar__text b { color: var(--bz-primary, #10beed); font-weight: 700; }

/* Plain accent text, not a button: the whole strip is already clickable, and
   a solid pill inside a clickable bar reads as the ONLY clickable part. */
.bz-offerbar__link {
  flex-shrink: 0;
  /* Brand orange, the same one the pack buttons use. Underlined at rest
     rather than only on hover: a touch screen has no hover, so an
     underline-on-hover affordance is invisible to most of this traffic.
     Contrast against the navy bar is 4.9:1, clearing the 4.5:1 minimum. */
  color: #e8590c;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.bz-offerbar__inner:hover .bz-offerbar__link,
.bz-offerbar__inner:focus .bz-offerbar__link { color: #ff7a29; }

.bz-offerbar__close {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  /* 44px hit area; the glyph stays small, only the target grows. */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  opacity: .7;
  cursor: pointer;
}

.bz-offerbar__close:hover,
.bz-offerbar__close:focus { opacity: 1; }

@media (max-width: 575.98px) {
  /* One row, not three. The copy wrapped to two lines and pushed the pill
     onto a third, costing ~110px above the logo on a 375px screen. The text
     now clamps beside the pill instead of shoving it down. */
  .bz-offerbar {
    gap: 8px;
    padding: 6px 32px 6px 12px;
    font-size: 11.5px;
    line-height: 1.3;
  }

  .bz-offerbar__inner {
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: space-between;
    text-align: left;
  }

  .bz-offerbar__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
  }

  /* Never shrink or wrap the bar's one action. 32px rather than 44px here:
     the whole bar is only ~40px tall, and a 44px pill would set the height
     of everything it sits in. */
  .bz-offerbar__link { flex-shrink: 0; font-size: 11.5px; }

  .bz-offerbar__close { width: 32px; height: 32px; font-size: 19px; }
}

/* ------------------------------------------- spot 2: class chooser */

/* The chooser sits on the dark hero, so these are glass cards on dark, not
   white cards. The selected state previously used a translucent light wash
   that left near-black text on a dark backdrop -- unreadable, and on the one
   card the student had just chosen. */
.bz-chooser { margin-top: 26px; max-width: 680px; }

.bz-chooser__q {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}

/* The flower is decoration, not content: aria-hidden in the markup so a
   screen reader does not announce "cherry blossom" before the offer. */
.bz-chooser__q-emoji { font-size: 17px; line-height: 1; }

/* Gold on the navy hero, matching the banner. 10.4:1 against #0B1629, so it
   stays legible rather than being decorative-only. */
.bz-chooser__q-accent { color: #fbbf24; }

.bz-chooser__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* Solid cards, not glass. At rgba(255,255,255,.07) on the navy hero these
   barely separated from the background and the prices -- the reason the
   cards exist -- were the dimmest thing in the block. White lifts them off
   the hero and lets the price carry real weight. */
.bz-chooser__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;
  padding: 12px 15px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #fff;
  color: var(--bz-dark, #0f172a);
  text-decoration: none;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .55);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}

.bz-chooser__card:hover,
.bz-chooser__card:focus {
  transform: translateY(-2px);
  border-color: #e8590c;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .6);
  color: var(--bz-dark, #0f172a);
  text-decoration: none;
}

/* The chosen card keeps the orange ring at rest, so "your class" is obvious
   without hovering -- which a phone cannot do at all. */
.bz-chooser__card.is-chosen {
  border-color: #e8590c;
  box-shadow: 0 0 0 3px rgba(232, 89, 12, .25), 0 10px 24px -10px rgba(0, 0, 0, .6);
}

.bz-chooser__class {
  font-size: 14px;
  font-weight: 800;
  color: var(--bz-dark, #0f172a);
}

.bz-chooser__detail {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12px;
  color: #6b655c;
}

/* The price is the point of the card, so it is the largest thing in it.
   A DARKER orange than the buttons use: #e8590c works as a background with
   white on it, but as text on white it measures 3.58:1 -- under the 4.5
   minimum. #c2410c is the same hue at 5.2:1. */
.bz-chooser__detail b {
  font-size: 18px;
  font-weight: 800;
  color: #c2410c;
}

.bz-chooser__change { margin: 10px 0 0; font-size: 12px; color: rgba(255, 255, 255, .55); }
.bz-chooser__reset { color: var(--bz-primary, #10beed); text-decoration: underline; }

/* --------------------------------------------- spot 3: pack cards */

/* Section surface: a warm cream band lifts the cards off the white page and
   marks the packs as their own area, as in the mock. */
.bz-packs { background: #fbf8f3; padding: 38px 0 42px; }

/* Header hierarchy from the mock: festive line, then the plain-language
   promise, then the detail. Three sizes so the eye lands in that order. */
.bz-packs__hdr { max-width: 900px; margin: 0 0 26px; }

.bz-packs__title {
  margin: 0 0 6px;
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: #17203a;
}

.bz-packs__title-accent { color: #e8590c; }

.bz-packs__lead {
  margin: 0 0 4px;
  font-size: clamp(16px, 1.7vw, 21px);
  font-weight: 700;
  color: #17203a;
}

.bz-packs__sub { margin: 0; font-size: 14.5px; color: #6b655c; }

/* Cards are capped, not stretched. With 1fr a single card -- the Class 10
   and Arts pages have exactly one -- spanned the full 1100px container, so
   six subjects sat marooned in white space above a button the width of the
   page. A max track keeps one card card-sized and still lets four share a
   row. */
.bz-packs__grid {
  display: grid;
  /* 1fr tracks so four cards share one row rather than three fitting and the
     fourth wrapping. The 340px cap moves onto the card itself, so a page with
     a single pack still gets a card-sized card instead of a full-width one. */
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  justify-content: start;
  gap: 16px;
  align-items: stretch;
  margin-top: 22px;
}

.bz-packcard {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 340px;
  padding: 24px 22px 22px;
  border: 1px solid #e7e2da;
  border-radius: 20px;
  background: #fff;
  transition: transform .18s, box-shadow .18s;
}

.bz-packcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(23, 32, 58, .4);
}

/* The most-popular pack inverts to navy so one card leads the row, exactly
   as the mock does -- a single focal point rather than four equals. */
.bz-packcard--featured {
  background: #17203a;
  border-color: #17203a;
}

.bz-packcard--featured .bz-packcard__name { color: #fff; }

/* Qualified with __price: the generic ".bz-packcard__price .bz-price-final"
   below has equal specificity and comes later, so an unqualified rule here
   lost and the featured card rendered navy text on a navy background -- the
   price simply vanished. */
.bz-packcard--featured .bz-packcard__price .bz-price-final { color: #fff; }

.bz-packcard--featured .bz-packcard__subjects { color: rgba(255, 255, 255, .72); }

.bz-packcard--featured .bz-packcard__buylabel,
.bz-packcard--featured .bz-packcard__count { color: rgba(255, 255, 255, .6); }

.bz-packcard--featured .bz-packcard__count {
  background: rgba(255, 255, 255, .1);
}

.bz-packcard.is-yours { border-color: #e8590c; box-shadow: 0 0 0 2px rgba(232, 89, 12, .18); }

.bz-packcard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.bz-packcard__name {
  min-width: 0;
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: #17203a;
  line-height: 1.2;
}

.bz-packcard__count {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f4f1ea;
  color: #6b655c;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* In flow, beside the title. Absolute positioning let it overlap the name
   on any card whose title reached that corner. */
.bz-packcard__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #e8590c;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Subjects as a readable line, not a wall of chips: six chips wrapped to
   three rows and pushed the price below the fold on mobile. */
/* Two columns. Six subjects down a single column made the Class 10 card
   twice the height of PCM, and because the cards stretch to match, every
   short card grew a large empty band above its price. Two columns halves
   the row count and most of that gap with it. */
.bz-packcard__subjects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 16px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  color: #3f3b35;
  font-size: 14px;
}

.bz-packcard__subjects li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.5;
  min-width: 0;
}

.bz-packcard__subjects li span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bz-packcard__tick { color: #1f7a4d; font-weight: 700; flex-shrink: 0; }

.bz-packcard--featured .bz-packcard__tick { color: #4ade80; }

.bz-packcard__price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: auto 0 12px;
  padding-top: 14px;
  /* Hairline separating the subject list from the money, as in the mock. */
  border-top: 1px solid #ece6dc;
}

.bz-packcard--featured .bz-packcard__price { border-top-color: rgba(255, 255, 255, .14); }

.bz-packcard__price .bz-price-final {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #17203a;
}

.bz-packcard__price .bz-price-orig {
  font-size: 13.5px;
  color: #a8a29a;
  text-decoration: line-through;
}

/* A filled red pill, not quiet green text. The saving is the reason to buy
   the pack at all, so it should read as loudly as the price itself -- and a
   percentage lands harder than rupees alone: "21% off" is graspable before
   the reader has compared two numbers. */
.bz-packcard .bz-price-badge {
  /* White stated on the base rule, not only on the featured variant: a later
     colour declaration elsewhere used to win on source order and printed the
     text green on the red pill. */
  color: #fff;
  padding: 6px 13px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* On the navy featured card red-on-navy is muddy; a lighter red keeps the
   same urgency with contrast that holds up. */
/* Same red as the other cards. The lighter #ef4444 was chosen to sit better
   on navy, but with white text it measured 3.76:1 -- under the 4.5 minimum.
   The pill carries its own background, so it reads fine on navy anyway. */
.bz-packcard--featured .bz-price-badge { background: #dc2626; color: #fff; }

/* Crown sits with the label rather than above it. */

/* The old price needs to read as struck-through at a glance, so it keeps the
   line and loses nothing else. */
.bz-packcard__price .bz-price-orig {
  font-size: 14px;
  font-weight: 600;
  color: #9a948b;
  text-decoration: line-through;
}


/* "English" alone never read as a medium, so the question is asked in words
   and each button answers it. Two buttons, not one plus a hidden step: the
   student picks the language and buys in the same click. */
.bz-packcard__buylabel {
  display: block;
  margin-bottom: 6px;
  color: #6b655c;
  font-size: 11.5px;
  font-weight: 600;
}

.bz-packcard__buys { display: grid; grid-template-columns: 1fr; gap: 7px; }

.bz-packcard__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: #e8590c;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: filter .15s, transform .1s;
}

.bz-packcard__cta:hover,
.bz-packcard__cta:focus { filter: brightness(1.07); color: #fff; text-decoration: none; }
.bz-packcard__cta:active { transform: translateY(1px); }

/* Equal weight, different colour: neither language is the default. */
.bz-packcard__cta--hi {
  background: #17203a;
  font-family: "Noto Sans Devanagari", "Nirmala UI", "Mangal", inherit;
  line-height: 1.55;
}

.bz-packcard--featured .bz-packcard__cta--hi {
  background: #fff;
  color: #17203a;
}

.bz-packs__foot { margin: 20px 0 0; font-size: 13px; color: #6b655c; }

@media (max-width: 575.98px) {
  .bz-packs { padding: 28px 0 32px; }
  /* Two columns on a phone as well. The card is ~341px at 375px wide and
     ~290px at 320px, so each column still clears 130px -- enough for
     "Social Science", the longest label. One column cost six rows and
     pushed the price and buttons below the fold. */
  .bz-packcard__subjects { gap: 2px 8px; font-size: 12px; }
  .bz-packs__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bz-packcard { padding: 20px 18px 18px; }
  .bz-packcard__price .bz-price-final { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .bz-packcard { transition: none; }
  .bz-packcard:hover { transform: none; }
}

/* ------------------------------ pack box on a single PDF page */

.bz-packbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
}

.bz-packbox__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* 44px minimum: this is a tap target on a phone. */
  min-height: 44px;
  padding: 10px 13px;
  border: 1px dashed var(--bz-primary, #10beed);
  border-radius: var(--bz-radius-sm, 8px);
  background: var(--bz-primary-bg, rgba(16, 190, 237, .1));
  color: var(--bz-text, #374151);
  font-size: 13px;
  text-decoration: none;
}

.bz-packbox__row { flex-wrap: wrap; }

.bz-packbox__text { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }

.bz-packbox__buys { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }

.bz-packbox__buylabel {
  width: 100%;
  margin: 2px 0 6px;
  color: var(--bz-muted, #6b7280);
  font-size: 11.5px;
  font-weight: 600;
}

.bz-packbox__buys a {
  display: inline-flex;
  align-items: center;
  /* 44px, like every other buy control. 36px passed on a desktop and was a
     miss on the phone where most of this traffic is. */
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--bz-primary, #10beed);
  border-radius: 8px;
  background: #fff;
  color: var(--bz-primary-dk, #0d9fd0);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.bz-packbox__buys a:hover,
.bz-packbox__buys a:focus {
  background: var(--bz-primary, #10beed);
  color: #04222e;
  text-decoration: none;
}

.bz-packbox__text b { color: var(--bz-dark, #0f172a); }

.bz-packbox__save {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 4px;
  background: #dcfce7;
  color: #16a34a;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ------------------------------ "complete your pack" cart prompt */

.bz-prompt {
  margin: 0 0 14px;
  padding: 13px 15px;
  border: 1px solid var(--bz-primary, #10beed);
  border-radius: var(--bz-radius, 12px);
  background: var(--bz-primary-bg, rgba(16, 190, 237, .1));
}

.bz-prompt__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.bz-prompt__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--bz-dark, #0f172a);
}

.bz-prompt__progress {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--bz-muted, #6b7280);
}

.bz-prompt__bar {
  height: 5px;
  margin-bottom: 9px;
  border-radius: 3px;
  background: rgba(15, 23, 42, .12);
  overflow: hidden;
}

.bz-prompt__bar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--bz-primary, #10beed);
}

.bz-prompt__line {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--bz-text, #374151);
}

.bz-prompt__line b { color: var(--bz-dark, #0f172a); }

.bz-prompt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bz-prompt__add,
.bz-prompt__all {
  display: inline-flex;
  align-items: center;
  /* 44px: these sit close together on a phone and are easy to fat-finger. */
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--bz-radius-sm, 8px);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.bz-prompt__add {
  border: 1.5px solid var(--bz-primary, #10beed);
  background: #fff;
  color: var(--bz-primary-dk, #0d9fd0);
}

.bz-prompt__add:hover,
.bz-prompt__add:focus {
  background: var(--bz-primary, #10beed);
  color: #0b1629;
  text-decoration: none;
}

.bz-prompt__all {
  border: 1.5px solid var(--bz-primary, #10beed);
  background: var(--bz-primary, #10beed);
  color: #0b1629;
}

.bz-prompt__all:hover,
.bz-prompt__all:focus {
  background: var(--bz-primary-dk, #0d9fd0);
  color: #0b1629;
  text-decoration: none;
}

/* ------------------------- 5A: Class 12 Science plan select page */

.bz-plan { padding: 24px 0 40px; }

/* Devanagari needs a font that actually has the glyphs, or Hindi renders as
   boxes on devices without one. System stack first, Noto as the named fallback
   if it is installed; no webfont, to avoid a render-blocking download. */
.bz-plan--hi {
  font-family: "Noto Sans Devanagari", "Nirmala UI", "Mangal", system-ui, -apple-system, sans-serif;
  /* Devanagari sits taller than Latin; give it room so matras are not clipped. */
  line-height: 1.7;
}

.bz-plan__lang { display: flex; gap: 6px; margin-bottom: 16px; }

.bz-plan__lang a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1.5px solid var(--bz-border, #e5e7eb);
  border-radius: var(--bz-radius-sm, 8px);
  color: var(--bz-text, #374151);
  font-size: 13px;
  text-decoration: none;
}

.bz-plan__lang a.is-on {
  border-color: var(--bz-primary, #10beed);
  background: var(--bz-primary-bg, rgba(16, 190, 237, .1));
  font-weight: 700;
}

.bz-plan__eyebrow {
  margin: 0 0 4px;
  color: var(--bz-primary-dk, #0d9fd0);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* No text-transform on Hindi: uppercasing Devanagari does nothing useful and
   the letter-spacing breaks conjuncts. */
.bz-plan--hi .bz-plan__eyebrow { text-transform: none; letter-spacing: 0; }

.bz-plan__title { margin: 0 0 6px; font-size: 26px; font-weight: 800; color: var(--bz-dark, #0f172a); }
.bz-plan__sub { margin: 0 0 24px; color: var(--bz-muted, #6b7280); font-size: 14.5px; }

.bz-plan__step { margin: 26px 0 10px; font-size: 16px; font-weight: 700; color: var(--bz-dark, #0f172a); }
.bz-plan__stepsub { margin: -6px 0 12px; color: var(--bz-muted, #6b7280); font-size: 13.5px; }

.bz-plan__groups,
.bz-plan__packs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.bz-plan__group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 44px;
  padding: 14px 15px;
  border: 1.5px solid var(--bz-border, #e5e7eb);
  border-radius: var(--bz-radius, 12px);
  background: #fff;
  color: var(--bz-text, #374151);
  text-decoration: none;
}

.bz-plan__group.is-on {
  border-color: var(--bz-primary, #10beed);
  background: var(--bz-primary-bg, rgba(16, 190, 237, .1));
}

.bz-plan__group b { font-size: 17px; color: var(--bz-dark, #0f172a); }
.bz-plan__group span { font-size: 13px; }

.bz-plan__tag {
  position: absolute;
  top: -9px;
  right: 12px;
  padding: 2px 9px;
  border-radius: 4px;
  background: #fef9c3;
  color: #a16207;
  font-size: 10.5px;
  font-weight: 700;
  font-style: normal;
}

.bz-plancard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 16px 16px;
  border: 1px solid #e8e8e8;
  border-radius: var(--bz-radius, 12px);
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.bz-plancard--best { border-color: var(--bz-primary, #10beed); }

.bz-plancard h3 { margin: 2px 0 10px; font-size: 16px; font-weight: 700; color: #1a1a2e; }

.bz-plancard__note {
  margin: 0 0 12px;
  padding: 7px 10px;
  border-radius: var(--bz-radius-sm, 8px);
  background: #e8fdf0;
  color: #15803d;
  font-size: 12.5px;
  font-weight: 600;
}

.bz-plan__why { margin: 30px 0 0; }
.bz-plan__why h2 { font-size: 16px; font-weight: 700; color: var(--bz-dark, #0f172a); }
.bz-plan__why ul { margin: 8px 0 0; padding-left: 20px; color: var(--bz-text, #374151); font-size: 13.5px; }
.bz-plan__why li { margin-bottom: 5px; }

.bz-plan__singles { margin: 28px 0 0; }
.bz-plan__singles h2 { font-size: 15px; font-weight: 700; color: var(--bz-dark, #0f172a); margin-bottom: 10px; }
.bz-plan__singlerow { display: flex; flex-wrap: wrap; gap: 8px; }

.bz-plan__single {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 0 13px;
  border: 1.5px solid var(--bz-border, #e5e7eb);
  border-radius: var(--bz-radius-sm, 8px);
  color: var(--bz-text, #374151);
  font-size: 12.5px;
  text-decoration: none;
}

.bz-plan__single span {
  /* Post titles are long; keep the chip one line rather than letting it grow
     to the width of the row. */
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bz-plan__single b { flex-shrink: 0; color: var(--bz-primary-dk, #0d9fd0); }

.bz-plan__trust { margin: 26px 0 0; color: var(--bz-muted, #6b7280); font-size: 12.5px; }

/* ------------------------------------------------------- mobile */

@media (max-width: 575.98px) {
  .bz-offerbar { font-size: 12.5px; padding-right: 40px; }

  /* One column, not three: three price cards side by side at 360px leaves
     each about 100px wide and the prices wrap mid-number. */
  .bz-chooser__cards { grid-template-columns: 1fr; }

  .bz-chooser__card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .bz-packs__grid { grid-template-columns: 1fr; }
}

/* Respect reduced-motion: these are decorative transitions only. */
@media (prefers-reduced-motion: reduce) {
  .bz-chooser__card { transition: none; }
}

/* Medium toggle above the pack grid. Small, but it decides which PDF the
   student receives, so it reads as a control rather than a label. */
.bz-packs__medium {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}

.bz-packs__medium-label {
  margin-right: 2px;
  color: var(--bz-muted, #6b7280);
  font-size: 12.5px;
  font-weight: 600;
}

.bz-packs__medium-opt {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1.5px solid var(--bz-border, #e5e7eb);
  border-radius: var(--bz-radius-sm, 8px);
  background: #fff;
  color: var(--bz-text, #374151);
  font-size: 12.5px;
  text-decoration: none;
}

.bz-packs__medium-opt.is-on {
  border-color: var(--bz-primary, #10beed);
  background: var(--bz-primary-bg, rgba(16, 190, 237, .1));
  font-weight: 700;
}

.bz-packs__medium-opt:hover,
.bz-packs__medium-opt:focus { border-color: var(--bz-primary, #10beed); text-decoration: none; }

/* "Remove all" on the cart. Muted until hovered: it sits beside the per-item
   Remove buttons and must not compete with Checkout. */
/* The heading owns the layout. float:right escaped the h5 and the first
   cart card wrapped around it, rendering noticeably narrower than the rest. */
.bz-cart-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bz-clear-cart {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.bz-clear-cart:hover,
.bz-clear-cart:focus { color: #dc2626; text-decoration: underline; }

/* Desktop only: the chooser was built mobile-first, with each card stacking
   its class name over its price. On a wide screen that vertical rhythm pushed
   the hero well past the fold, so from 576px up each card becomes a single
   row and the surrounding spacing tightens. Mobile is untouched -- it needs
   the stacked layout to fit three cards in one column. */
@media (min-width: 576px) {
  .bz-chooser { margin-top: 16px; }

  .bz-chooser__q { margin-bottom: 8px; font-size: 13.5px; }

  .bz-chooser__cards { gap: 8px; }

  .bz-chooser__card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 13px;
    min-height: 0;
  }

  /* The three cards are only ~181px wide at 1280, so "Class 12 Science" and
     "All 6 subjects ₹240" both wrapped to two lines and the row ended up
     77px tall -- taller than the stacked mobile version it replaced. Give the
     chooser the width it needs and stop the labels breaking. */
  .bz-chooser { max-width: 760px; }
  .bz-chooser__class { white-space: nowrap; }
  .bz-chooser__detail { gap: 6px; white-space: nowrap; }
  .bz-chooser__detail b { font-size: 18px; }

  .bz-chooser__change { margin-top: 7px; font-size: 11.5px; }
}

/* ---- Hero chooser as the primary CTA (desktop) ----
   The browse buttons above it are gone, so the chooser inherits both the
   space and the job. Earlier I squeezed these cards into one nowrap line to
   save height; with the extra row freed up they go back to two lines, which
   is why "Class 12 Science  PCM or PC..." was being cut off. */
@media (min-width: 576px) {
  .hz-hero .bz-chooser { max-width: 100%; margin-top: 22px; }

  .hz-hero .bz-chooser__card {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 11px 14px;
  }

  .hz-hero .bz-chooser__class,
  .hz-hero .bz-chooser__detail { white-space: normal; }

  .hz-hero .bz-chooser__class { font-size: 14px; }
  .hz-hero .bz-chooser__detail b { font-size: 16px; }
}

/* The book image sat top-aligned beside a tall copy column, leaving it
   visually stranded high on desktop. align-self works whether the hero row
   is flex or grid. */
@media (min-width: 992px) {
  /* Centre the box only. A manual nudge was tried and measured worse: the
     container is already 16px ABOVE centre, so pushing it up took it to 52px
     off. What reads as "too low" is the rotated artwork overflowing below its
     box, which has to be fixed on the image itself, not the container. */
  .hz-hero__shelf {
    align-self: center;
    /* The artwork renders in the LOWER half of this box -- measured at
       394-688 inside a 200-680 container, i.e. 186px below the hero's
       centre line, with the top ~194px of the box empty. Centring the box
       alone therefore still looks low. position/top (not transform) shifts
       it without clobbering the rotated children's own transforms. */
    position: relative;
    top: -93px;
  }
}

/* ---- Post page: buy by medium ----
   Replaces "Buy Now" + a separate medium radio row. One button per medium,
   so the required choice cannot be skipped and no default is ever applied. */
.bz-cta-row--buy { display: block; }

.bz-buy-label {
  display: block;
  margin: 0 0 7px;
  color: var(--bz-muted, #6b7280);
  font-size: 12.5px;
  font-weight: 600;
}

.bz-buy-mediums {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* A post published in one medium asks no question: that button takes the
   full width rather than sitting beside an empty cell. */
.bz-buy-mediums.is-single { grid-template-columns: minmax(0, 1fr); }

.bz-btn-buy-medium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  text-align: center;
}

/* Secondary by design. It previously matched the buy button in size and
   weight, so the two competed for the same glance. */
/* An outlined button, not a text link. As a link it read as fine print
   under two solid buttons and was easy to miss -- but it must still lose to
   the buy buttons, so it stays outlined rather than filled: visible as an
   action, clearly the secondary one. */
.bz-btn-sample-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1.5px solid var(--bz-primary, #10beed);
  border-radius: 10px;
  background: #fff;
  color: var(--bz-primary-dk, #0d9fd0);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.bz-btn-sample-link:hover,
.bz-btn-sample-link:focus {
  background: var(--bz-primary-bg, rgba(16, 190, 237, .1));
  color: var(--bz-primary-dk, #0d9fd0);
  text-decoration: none;
}

@media (max-width: 575.98px) {
  .bz-buy-mediums { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* Two identical cyan buttons side by side made the student read both labels
   to tell them apart. Colour-coding the medium means the choice registers
   before the words do -- and it is the SAME pairing the pack cards use
   (English orange, Hindi navy), so one medium looks the same site-wide. */
.bz-btn-buy-medium.is-en,
.bz-sticky-btn--medium.is-en {
  background: #e8590c;
  border-color: #e8590c;
  color: #fff;
}

.bz-btn-buy-medium.is-en:hover,
.bz-btn-buy-medium.is-en:focus,
.bz-sticky-btn--medium.is-en:hover { background: #d44f0a; border-color: #d44f0a; color: #fff; }

.bz-btn-buy-medium.is-hi,
.bz-sticky-btn--medium.is-hi {
  background: #17203a;
  border-color: #17203a;
  color: #fff;
}

.bz-btn-buy-medium.is-hi:hover,
.bz-btn-buy-medium.is-hi:focus,
.bz-sticky-btn--medium.is-hi:hover { background: #22304f; border-color: #22304f; color: #fff; }

/* Mobile sticky bar: the two buttons share the row the single Buy filled. */
.bz-sticky-buys {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.bz-sticky-btn--medium {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 6px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

/* The was-price beside the pack price in the chooser. Smaller and muted: it
   exists to make the saving legible at a glance, not to compete with the
   number the student actually pays. */
.bz-chooser__was {
  font-size: 12.5px;
  font-weight: 600;
  color: #9a948b;
  text-decoration: line-through;
}

/* ---- Festive decoration (Navratri assets) ----
   All presentational: aria-hidden in the markup, pointer-events off here, so
   they can never intercept a tap meant for a card. */
.bz-packs { position: relative; overflow: hidden; }

.bz-packs__bunting,
.bz-packs__mandala,
.bz-packs__kalash,
.bz-packs__decor,
.bz-packs__bookicon { pointer-events: none; }

.bz-packs__bunting {
  position: absolute;
  top: 0;
  right: 0;
  width: 190px;
  height: auto;
  z-index: 1;
}

/* Sits behind the bunting at the corner. The artwork is teal/pink/purple --
   louder than the orange-and-navy palette -- so it runs at low opacity as a
   watermark rather than competing with the prices. */
.bz-packs__mandala {
  position: absolute;
  top: -46px;
  right: -40px;
  width: 190px;
  height: auto;
  opacity: .22;
  z-index: 0;
}

.bz-packs__hdr { position: relative; padding-left: 112px; min-height: 96px; }

/* Near-square artwork (191x184), so it can sit larger than the portrait
   version did without pushing the heading down. */
.bz-packs__kalash {
  position: absolute;
  left: 0;
  top: 0;
  width: 94px;
  height: auto;
}

.bz-packs__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 0;
  font-size: 14px;
  color: #6b655c;
}

.bz-packs__decor { width: 34px; height: auto; }
.bz-packs__decor--end { order: 9; transform: scaleX(-1); }
.bz-packs__bookicon { width: 30px; height: auto; }

.bz-packs__rule {
  flex: 1 1 auto;
  height: 1px;
  min-width: 20px;
  background: linear-gradient(90deg, #e8c48a, rgba(232, 196, 138, 0));
}

@media (max-width: 767.98px) {
  /* The kalash moves above the heading: at 112px of indent the title had
     barely 200px left on a phone. */
  .bz-packs__hdr { padding-left: 0; min-height: 0; }
  .bz-packs__kalash { position: static; display: block; width: 62px; margin-bottom: 8px; }
  .bz-packs__bunting { width: 110px; opacity: .7; }
  /* Hidden on phones: 190px of watermark behind a 320px-wide card
     is noise, not decoration. */
  .bz-packs__mandala { display: none; }
  .bz-packs__rule, .bz-packs__decor--end { display: none; }
  .bz-packs__foot { flex-wrap: wrap; }
}

/* ---- Mobile pack card (last in the file on purpose) ----
   These override base rules declared further up; CSS order decides, and the
   earlier media block was losing to the single-column default below it. */
@media (max-width: 575.98px) {
  /* Two buttons per row. Stacked, each card ran ~110px taller and the list
     felt twice as long as it is. */
  .bz-packcard__buys { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bz-packcard__cta { font-size: 12px; padding: 11px 4px; letter-spacing: -.01em; }
  /* The arrow is decoration; drop it rather than let it push the label to
     two lines in a 150px button. */
  .bz-packcard__cta span[aria-hidden] { display: none; }

  /* Keep price, was-price and discount on one line, as the mock shows. */
  .bz-packcard__price { gap: 7px; flex-wrap: nowrap; }
  .bz-packcard__price .bz-price-final { font-size: 27px; }
  .bz-packcard__price .bz-price-orig { font-size: 12.5px; }
  .bz-packcard .bz-price-badge { font-size: 10.5px; padding: 4px 8px; white-space: nowrap; }
}