/* =====================================================================
   24 Codes — site stylesheet (v3, light redesign)
   Bootstrap 5.3 does the layout. This file only adds brand colours,
   fonts and a handful of components.

   MALAYALAM FONT RULES (the Chrome issue)
   1. Fonts are self-hosted in assets/fonts — no Google Fonts request that
      can be blocked, time out, or be skipped on office/college networks.
   2. Never put letter-spacing or text-transform on anything that can hold
      Malayalam. Chrome turns off conjunct/ligature shaping when
      letter-spacing is not zero, so കോഡ്സ് falls apart into loose letters.
   3. The English fonts deliberately do NOT claim U+200C/U+200D (ZWNJ/ZWJ),
      so those joiners always stay inside the Malayalam font run.
   ===================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family: "Noto Sans Malayalam"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/noto-sans-malayalam-malayalam-400-normal.woff2") format("woff2");
  unicode-range: U+0307,U+0323,U+0951-0952,U+0964-0965,U+0D00-0D7F,U+1CDA,U+1CF2,U+200C-200D,U+20B9,U+25CC,U+A830-A832; }
@font-face { font-family: "Noto Sans Malayalam"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/noto-sans-malayalam-malayalam-600-normal.woff2") format("woff2");
  unicode-range: U+0307,U+0323,U+0951-0952,U+0964-0965,U+0D00-0D7F,U+1CDA,U+1CF2,U+200C-200D,U+20B9,U+25CC,U+A830-A832; }
@font-face { font-family: "Noto Sans Malayalam"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/noto-sans-malayalam-malayalam-700-normal.woff2") format("woff2");
  unicode-range: U+0307,U+0323,U+0951-0952,U+0964-0965,U+0D00-0D7F,U+1CDA,U+1CF2,U+200C-200D,U+20B9,U+25CC,U+A830-A832; }
@font-face { font-family: "Manjari"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/manjari-malayalam-700-normal.woff2") format("woff2");
  unicode-range: U+0307,U+0323,U+0951-0952,U+0964-0965,U+0D00-0D7F,U+1CDA,U+1CF2,U+200C-200D,U+20B9,U+25CC,U+A830-A832; }

/* Latin range WITHOUT U+200C/U+200D */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-200B,U+200E-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-200B,U+200E-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-200B,U+200E-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-200B,U+200E-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/merriweather-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-200B,U+200E-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/merriweather-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-200B,U+200E-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  --c-ink:      #221c18;
  --c-body:     #3d342d;
  --c-muted:    #6f6358;
  --c-maroon:   #8b1a1a;
  --c-red:      #c4161c;
  --c-red-dark: #9e0f14;
  --c-gold:     #c79a3b;
  --c-gold-lt:  #f3dfa8;
  --c-cream:    #fbf7f0;
  --c-sand:     #f4ecdf;
  --c-line:     #e7dccb;
  --c-white:    #ffffff;
  --c-wa:       #1faa53;

  /* Malayalam system fallbacks: Windows = Nirmala UI / Kartika,
     macOS & iOS = Malayalam Sangam MN, Android = Noto (built in). */
  --f-body: "Inter", "Noto Sans Malayalam", "Nirmala UI", "Kartika", "Malayalam Sangam MN", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-head: "Merriweather", "Manjari", "Noto Sans Malayalam", "Nirmala UI", "Kartika", "Malayalam Sangam MN", Georgia, "Times New Roman", serif;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(60, 30, 10, .08);

  --bs-body-font-family: var(--f-body);
  --bs-body-color: var(--c-body);
  --bs-body-bg: var(--c-white);
  --bs-link-color: var(--c-maroon);
  --bs-link-color-rgb: 139, 26, 26;
  --bs-link-hover-color: var(--c-red);
  --bs-link-hover-color-rgb: 196, 22, 28;
  --bs-border-color: var(--c-line);
}

/* ---------- Base ---------- */
html { scroll-padding-top: 90px; }
body {
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--c-body);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Malayalam needs a taller line box for vowel signs above and below. */
body.lang-ml { line-height: 1.9; font-size: 1.05rem; }

h1, h2, h3, h4, h5, .font-head {
  font-family: var(--f-head);
  color: var(--c-ink);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}
body.lang-ml h1, body.lang-ml h2, body.lang-ml h3, body.lang-ml h4, body.lang-ml h5 { line-height: 1.2; }

h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.2rem); }
h3 { font-size: 1.25rem; }

/* Rule 2 — belt and braces. Anything marked Malayalam gets no tracking. */
:lang(ml), .ml, body.lang-ml * { letter-spacing: 0 !important; text-transform: none !important; }
.ml { font-family: "Noto Sans Malayalam", "Nirmala UI", "Kartika", "Malayalam Sangam MN", sans-serif; }
.ml-head { font-family: "Manjari", "Noto Sans Malayalam", "Nirmala UI", "Kartika", sans-serif; font-weight: 700; }

a { text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }

.text-maroon { color: var(--c-maroon) !important; }
.text-muted-2 { color: var(--c-muted) !important; }
.bg-cream { background: var(--c-cream) !important; }
.bg-sand { background: var(--c-sand) !important; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--c-ink); color: #fff; padding: .6rem 1rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Section rhythm */
.section { padding: 4.5rem 0; }
.section-sm { padding: 3rem 0; }
@media (max-width: 767.98px) { .section { padding: 3.25rem 0; } }

.eyebrow {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--c-maroon);
  background: #f6e6e0;
  border-radius: 50px;
  padding: .25rem .8rem;
  margin-bottom: .9rem;
}
.lead { font-size: 1.15rem; color: var(--c-body); }
.divider {
  display: flex; align-items: center; gap: .6rem;
  width: 160px; margin: .9rem 0 1.4rem;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--c-gold); }
.divider span { width: 9px; height: 9px; background: var(--c-gold); transform: rotate(45deg); }
.text-center .divider, .divider.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: 50px; padding: .7rem 1.5rem; }
.btn-lg { padding: .85rem 1.9rem; font-size: 1.05rem; }
.btn-buy {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--c-red);
  --bs-btn-border-color: var(--c-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--c-red-dark);
  --bs-btn-hover-border-color: var(--c-red-dark);
  --bs-btn-active-bg: var(--c-red-dark);
  --bs-btn-active-color: #fff;
  box-shadow: 0 6px 18px rgba(196, 22, 28, .25);
}
a.btn.btn-light.btn-lg {
    background: #4b4b4b;
    color: #fff;
}
.btn-wa {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--c-wa);
  --bs-btn-border-color: var(--c-wa);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #178a43;
  --bs-btn-hover-border-color: #178a43;
  --bs-btn-active-bg: #178a43;
  --bs-btn-active-color: #fff;
}
.btn-em {
    --bs-btn-color: #fff;
    --bs-btn-bg: #e33d4a;
    --bs-btn-border-color: #e53d5d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #cc0022;
    --bs-btn-hover-border-color: #ef617c;
    --bs-btn-active-bg: #cc0022;
    --bs-btn-active-color: #fff;
}
.btn-line {
  --bs-btn-color: var(--c-maroon);
  --bs-btn-border-color: var(--c-maroon);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--c-maroon);
  --bs-btn-hover-border-color: var(--c-maroon);
  --bs-btn-active-bg: var(--c-maroon);
  --bs-btn-active-color: #fff;
  background: transparent;
}
.btn .bi { width: 1.1em; height: 1.1em; vertical-align: -.15em; margin-right: .35rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--c-line);
}
.site-header .navbar { padding: .55rem 0; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand img { width: 44px; height: 58px; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.brand-name { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name b { font-family: "Manjari", "Noto Sans Malayalam", "Nirmala UI", sans-serif; font-size: 1.35rem; color: var(--c-maroon); }
.brand-name small { font-size: .74rem; color: var(--c-muted); }

.site-header .nav-link {
  color: var(--c-ink);
  font-weight: 500;
  font-size: .98rem;
  padding: .5rem .8rem !important;
  border-radius: 8px;
}
.site-header .nav-link:hover { color: var(--c-maroon); background: var(--c-cream); }
.site-header .nav-link.active { color: var(--c-maroon); font-weight: 600; }
.lang-toggle { display: inline-flex; flex: none; white-space: nowrap; border: 1px solid var(--c-line); border-radius: 50px; overflow: hidden; }
.lang-toggle a { padding: .3rem .75rem; font-size: .88rem; text-decoration: none; color: var(--c-body); line-height: 1.6; }
.lang-toggle a.on { background: var(--c-maroon); color: #fff; }
.navbar-toggler { border: 1px solid var(--c-line); padding: .45rem .6rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(139, 26, 26, .2); }

@media (max-width: 1199.98px) {
  .site-header .navbar-collapse { padding: .75rem 0 1rem; }
  .site-header .nav-link { padding: .7rem .5rem !important; border-bottom: 1px solid var(--c-sand); border-radius: 0; }
}

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1200px 500px at 85% 20%, #f7e7c9 0%, rgba(247,231,201,0) 60%),
    linear-gradient(180deg, var(--c-cream) 0%, #fff 100%);
  padding: 3.5rem 0 4rem;
}
.hero-title-ml {
  font-family: "Manjari", "Noto Sans Malayalam", "Nirmala UI", "Kartika", sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.2rem);
  color: var(--c-maroon);
  line-height: 1.2;
  margin-bottom: .2rem;
}
.hero-sub {
  font-family: var(--f-head);
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
  color: var(--c-ink);
  font-weight: 400;
}
.hero-img { max-width: 440px; width: 100%; margin: 0 auto; display: block; border-radius: 10px; }
.hero-quote {
  border-left: 3px solid var(--c-gold);
  padding: .2rem 0 .2rem 1rem;
  color: var(--c-body);
  margin: 1.2rem 0 1.5rem;
}

/* Facts row (language, pages, author, publisher) */
.facts { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.facts li { display: flex; align-items: center; gap: .45rem; font-size: .95rem; }
.facts svg { width: 20px; height: 20px; color: var(--c-gold); flex: none; }

/* ---------- Price box ---------- */
.price-box {
  display: inline-flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--c-gold-lt);
  border-radius: var(--radius);
  padding: .8rem 1.2rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.4rem;
}
.price-box .tag {
  background: var(--c-maroon); color: #fff;
  font-size: .78rem; font-weight: 600;
  padding: .2rem .65rem; border-radius: 6px;
}
.price-box .now { font-size: 2rem; font-weight: 700; color: var(--c-maroon); line-height: 1; font-family: "Inter", sans-serif; }
.price-box .was { color: var(--c-muted); text-decoration: line-through; font-size: 1.1rem; }
.price-box .note { font-size: .88rem; color: var(--c-muted); width: 100%; margin-top: -.3rem; }

/* ---------- Cards ---------- */
.card-soft {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.6rem;
  height: 100%;
  box-shadow: 0 2px 10px rgba(60, 30, 10, .04);
}
.card-soft h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.icon-circle {
  width: 48px; height: 48px; border-radius: 50%;
  background: #f8eedb; color: var(--c-maroon);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: .9rem; flex: none;
}
.icon-circle svg { width: 24px; height: 24px; }

/* Check list — "this book is for you" */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  position: relative;
  padding: .85rem 0 .85rem 2.2rem;
  border-bottom: 1px dashed var(--c-line);
}
.check-list li:last-child { border-bottom: 0; }
.check-list li::before {
  content: "";
  position: absolute; left: 0; top: 1.1rem;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--c-maroon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.5 4.5 6.2 11.8 2.5 8.1l1-1 2.7 2.7 6.3-6.3z'/%3E%3C/svg%3E") center/70% no-repeat;
}
.not-for-you {
  background: #fff6f4;
  border: 1px solid #f1d2cc;
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  color: #6b2320;
}

/* Blurb block */
.blurb p { margin-bottom: 1.1rem; }
.blurb .highlight {
  background: var(--c-cream);
  border-left: 4px solid var(--c-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem;
}

/* Subjects grid */
.subject-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; }
.subject {
  display: flex; align-items: center; gap: .75rem;
  background: #fff; border: 1px solid var(--c-line); border-radius: 10px;
  padding: .7rem .9rem; font-size: .97rem; line-height: 1.45;
}
.subject .n {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--c-sand); color: var(--c-maroon);
  font-weight: 700; font-size: .82rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Inter", sans-serif;
}

/* Character cards */
.character { border-top: 4px solid var(--c-gold); }
.character .role { color: var(--c-maroon); font-weight: 600; font-size: .95rem; margin-bottom: .5rem; }

/* Details table */
.details-table { width: 100%; margin: 0; }
.details-table th, .details-table td { padding: .7rem 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.details-table th { font-weight: 500; color: var(--c-muted); width: 42%; }
.details-table td { color: var(--c-ink); font-weight: 600; }
.details-table tr:last-child th, .details-table tr:last-child td { border-bottom: 0; }

/* Steps */
.step-num {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--c-maroon); color: #fff; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: .8rem; font-family: "Inter", sans-serif;
}

/* Author */
.author-photo { border-radius: var(--radius); background: #f3f1ee; width: 100%; max-width: 360px; display: block; margin: 0 auto; }
.author-roles { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.author-roles li { background: var(--c-sand); color: var(--c-maroon); border-radius: 50px; padding: .2rem .8rem; font-size: .88rem; font-weight: 500; }
.pull-quote {
  font-family: var(--f-head);
  font-size: 1.2rem;
  color: var(--c-maroon);
  border-left: 3px solid var(--c-gold);
  padding-left: 1rem;
  margin: 1.5rem 0;
}

/* Sample reading */
.reading {
  max-width: 760px; margin: 0 auto;
  background: #fffdf8;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 2.2rem 2.4rem;
  box-shadow: var(--shadow);
}
.reading p { font-family: "Noto Sans Malayalam", "Nirmala UI", "Kartika", "Malayalam Sangam MN", sans-serif; font-size: 1.08rem; line-height: 2; text-align: left; margin-bottom: 1.2rem; }
.reading .page-mark {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  color: var(--c-muted); font-size: .85rem; margin: 1.8rem 0;
}
.reading .page-mark::before, .reading .page-mark::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
@media (max-width: 575.98px) { .reading { padding: 1.4rem 1.2rem; } .reading p { font-size: 1.02rem; } }

/* FAQ accordion */
.accordion { --bs-accordion-border-color: var(--c-line); --bs-accordion-active-bg: var(--c-cream); --bs-accordion-active-color: var(--c-maroon); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(139,26,26,.15); --bs-accordion-border-radius: var(--radius); --bs-accordion-inner-border-radius: var(--radius); }
.accordion-button { font-weight: 600; color: var(--c-ink); line-height: 1.5; font-size: 1.02rem; }

/* Forms */
.form-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}
@media (max-width: 575.98px) { .form-card { padding: 1.3rem; } }
.form-label { font-weight: 500; color: var(--c-ink); margin-bottom: .35rem; }
.form-label .req { color: var(--c-red); }
.form-control, .form-select { border-color: #d9ccb8; padding: .65rem .9rem; border-radius: 10px; font-size: 1rem; }
.form-control:focus, .form-select:focus { border-color: var(--c-gold); box-shadow: 0 0 0 .2rem rgba(199,154,59,.2); }
.form-check-input:checked { background-color: var(--c-maroon); border-color: var(--c-maroon); }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.order-total { font-size: 1.1rem; }
.order-total b { color: var(--c-maroon); font-size: 1.35rem; }

/* Contact list */
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: .9rem; align-items: flex-start; padding: .9rem 0; border-bottom: 1px solid var(--c-line); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list small { display: block; color: var(--c-muted); font-size: .85rem; }
.contact-list a { font-weight: 600; text-decoration: none; word-break: break-word; }

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, #8b1a1a 0%, #6d1212 100%);
  color: #fff;
  border-radius: 20px;
  padding: 2.6rem 2rem;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #f5e6d6; }
.cta-band .price-now { font-size: 2.4rem; font-weight: 700; color: var(--c-gold-lt); line-height: 1; font-family: "Inter", sans-serif; }
.cta-band .price-was { text-decoration: line-through; opacity: .75; }
.cta-band .btn-light { color: var(--c-maroon); }

/* Page header (inner pages) */
.page-head {
  background: linear-gradient(180deg, var(--c-cream) 0%, #fff 100%);
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--c-line);
}
.breadcrumb { font-size: .9rem; margin-bottom: .6rem; }
.breadcrumb a { text-decoration: none; }

/* Legal */
.legal h2 { font-size: 1.25rem; margin-top: 2rem; }
.legal p, .legal li { color: var(--c-body); }
.legal-updated { color: var(--c-muted); font-size: .92rem; }

/* Footer */
.site-footer { background: #2a211c; color: #d9cbbb; padding: 3.5rem 0 1.5rem; margin-top: 0; }
.site-footer h4 { color: #fff; font-size: 1rem; font-family: var(--f-body); font-weight: 600; margin-bottom: 1rem; }
.site-footer a { color: #e9dccd; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: .25rem 0; }
.site-footer .foot-brand b { font-family: "Manjari", "Noto Sans Malayalam", "Nirmala UI", sans-serif; color: var(--c-gold-lt); font-size: 1.5rem; }
.site-footer .foot-base { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.2rem; font-size: .88rem; }

/* Mobile sticky buy bar */
.buy-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
  background: #fff; border-top: 1px solid var(--c-line);
  box-shadow: 0 -6px 18px rgba(0,0,0,.08);
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.buy-bar .p { line-height: 1.2; }
.buy-bar .p b { color: var(--c-maroon); font-size: 1.25rem; font-family: "Inter", sans-serif; }
.buy-bar .p s { color: var(--c-muted); font-size: .9rem; margin-left: .3rem; }
.buy-bar .p small { display: block; color: var(--c-muted); font-size: .78rem; }
.buy-bar .btn { padding: .55rem 1.2rem; }
@media (min-width: 992px) { .buy-bar { display: none; } }
@media (max-width: 991.98px) { body { padding-bottom: 76px; } }

/* Floating WhatsApp (desktop) */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 1020;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-wa); color: #fff;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.wa-float svg { width: 30px; height: 30px; }
@media (min-width: 992px) { .wa-float { display: inline-flex; } }

/* Alerts */
.alert { border-radius: 12px; }

/* Focus visibility */
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }

/* Mobile refinements */
.buy-bar .btn { white-space: nowrap; }
@media (max-width: 575.98px) {
  .hero { padding: 1.5rem 0 3rem; }
  .hero-img { max-width: 250px; }
  .hero .btn-lg { width: 100%; }
  .price-box { width: 100%; }
}
.brand-name small { white-space: nowrap; }
.card-soft.h-auto { height: auto !important; }
@media (min-width: 1200px) {
  body.lang-ml .site-header .nav-link { font-size: .93rem; padding: .5rem .55rem !important; }
  .site-header .btn-buy { white-space: nowrap; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) { body.lang-ml .brand-name small { display: none; } }

/* ---------- v3.1: cover, details, network, readers ---------- */
.facts-table { width: 100%; border-collapse: collapse; }
.facts-table th, .facts-table td { padding: .95rem 0; border-top: 1px solid var(--c-line); vertical-align: top; }
.facts-table tr:last-child th, .facts-table tr:last-child td { border-bottom: 1px solid var(--c-line); }
.facts-table th { font-weight: 400; color: var(--c-ink); width: 45%; }
.facts-table td { text-align: right; color: var(--c-maroon); font-family: var(--f-head); font-weight: 400; }

/* Network (previous design) */
.net-title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); max-width: 14ch; font-weight: 400; }
body.lang-ml .net-title { max-width: 20ch; }
.net-stage { max-width: 900px; margin: 1.5rem auto 0; }
.net-stage svg { width: 100%; height: auto; overflow: visible; }
.net-links path { fill: none; stroke: var(--c-gold); stroke-width: 1.2; opacity: .75; }
.net-nodes circle { fill: #fff; stroke: var(--c-maroon); stroke-width: 2; }
.net-nodes text { text-anchor: middle; font-family: var(--f-body); font-size: 15px; fill: var(--c-ink); }
body.lang-ml .net-nodes text { font-size: 17px; }
.net-final { font-family: var(--f-head); font-size: 1.35rem; color: var(--c-maroon); margin-top: 1rem; }
@media (max-width: 575.98px) { .net-nodes text { font-size: 22px; } body.lang-ml .net-nodes text { font-size: 22px; } }

/* Who should read it (previous design) */
.readers-eyebrow { color: var(--c-red); font-size: .9rem; font-weight: 500; }
.readers h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 400; }
.readers-sub { color: var(--c-red); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); margin-bottom: 2.5rem; }
.readers-list { list-style: none; padding: 0; margin: 0 0 2.5rem; display: grid; grid-template-columns: 1fr 1fr; column-gap: 4.5rem; }
.readers-list li { display: flex; gap: 1.4rem; padding: 1.4rem 0; border-top: 1px solid var(--c-line); }
.readers-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--c-line); }
.readers-list .rn { color: var(--c-red); font-size: .9rem; padding-top: .2rem; font-family: "Inter", sans-serif; flex: none; }
.readers-list p { margin: 0; font-size: 1.1rem; color: var(--c-ink); }
.readers-close { font-style: italic; color: var(--c-muted); max-width: 46ch; margin-bottom: 1.8rem; font-size: 1.1rem; }
body.lang-ml .readers-close { font-style: normal; }
@media (max-width: 767.98px) {
  .readers-list { grid-template-columns: 1fr; }
  .readers-list li:nth-last-child(2) { border-bottom: 0; }
}
.details-table td, .facts-table td { overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .facts-table th { width: 40%; font-size: .95rem; } .facts-table td { font-size: .95rem; } }

/* ---------- v3.2: real 3D book ---------- */
.book3d-scene {
  --w: 300px; --h: 450px; --d: 38px;
  perspective: 1600px;
  width: var(--w); height: var(--h);
  margin: 1.5rem auto 2.5rem; position: relative;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.book3d-scene.b3-lg { --w: 320px; --h: 480px; --d: 40px; cursor: grab; }
.book3d-scene.b3-md { --w: 280px; --h: 420px; --d: 36px; }
.book3d-scene.dragging { cursor: grabbing; }
.book3d-scene:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 12px; border-radius: 6px; }
.book3d { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(4deg) rotateY(24deg); will-change: transform; }
.b3 { position: absolute; top: 0; left: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.b3-front, .b3-back { width: var(--w); height: var(--h); }
.b3-front { transform: translateZ(calc(var(--d) / 2)); border-radius: 2px 6px 6px 2px; overflow: hidden; background: #5a2410; }
.b3-front img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.b3-front::after { /* hinge crease + light sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.45) 0, rgba(0,0,0,.08) 3%, rgba(255,255,255,.12) 4.5%, rgba(0,0,0,0) 8%),
    linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 40%);
}
.b3-back {
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
  border-radius: 6px 2px 2px 6px;
  background: radial-gradient(120% 90% at 50% 40%, #7a3414 0%, #4a1a0a 70%, #2e0f06 100%);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.b3-back-in { width: 76%; color: #f3dfa8; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.b3-back-in b { font-family: "Manjari", "Noto Sans Malayalam", sans-serif; font-size: 1.9rem; color: #e9b75c; }
.b3-back-in span { font-family: "Noto Sans Malayalam", sans-serif; font-size: .95rem; line-height: 1.8; }
.b3-back-in small { font-size: .7rem; opacity: .75; font-family: "Inter", sans-serif; }
.b3-spine {
  width: var(--d); height: var(--h);
  left: calc((var(--w) - var(--d)) / 2);
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  background: linear-gradient(90deg, #2e0f06 0%, #6b2a10 30%, #7d3515 50%, #6b2a10 70%, #2e0f06 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 1.4rem 0;
}
.b3-spine span, .b3-spine small { writing-mode: vertical-rl; color: #e9b75c; white-space: nowrap; }
.b3-spine span { font-family: "Manjari", "Noto Sans Malayalam", sans-serif; font-weight: 700; font-size: 1.05rem; }
.b3-spine small { font-family: "Noto Sans Malayalam", sans-serif; font-size: .72rem; opacity: .85; }
.b3-edge { /* page block, right side */
  width: calc(var(--d) - 4px); height: calc(var(--h) - 8px); top: 4px;
  left: calc((var(--w) - var(--d)) / 2 + 2px);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 3px));
  background: repeating-linear-gradient(90deg, #fbf5e6 0 2px, #e8dcc2 2px 3px);
}
.b3-top, .b3-bottom {
  width: calc(var(--w) - 6px); height: calc(var(--d) - 4px);
  top: calc((var(--h) - var(--d)) / 2 + 2px);
  background: repeating-linear-gradient(0deg, #fbf5e6 0 2px, #e8dcc2 2px 3px);
}
.b3-top    { transform: rotateX(90deg)  translateZ(calc(var(--h) / 2 - 2px)); }
.b3-bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2 - 2px)); }
.book3d-shadow {
  position: absolute; left: 8%; right: 8%; bottom: -34px; height: 36px;
  background: radial-gradient(ellipse at center, rgba(60,25,5,.35) 0%, rgba(60,25,5,0) 70%);
  filter: blur(4px); transform: translateZ(0);
}
.book3d-hint { font-size: .85rem; color: var(--c-muted); margin: -1rem 0 0; }
@media (max-width: 575.98px) {
  .book3d-scene.b3-lg { --w: 220px; --h: 330px; --d: 30px; }
  .book3d-scene.b3-md { --w: 210px; --h: 315px; --d: 28px; }
  .b3-back-in b { font-size: 1.4rem; } .b3-back-in span { font-size: .8rem; }
}

/* ---------- v3.2: music button ---------- */
.music-btn {
  position: fixed;right: 20px;
    bottom: 100px; z-index: 1025;
  display: inline-flex; align-items: center; gap: .55rem;
  background: #fff; color: var(--c-maroon);
  border: 1px solid var(--c-line); border-radius: 50px;
  padding: .5rem .95rem .5rem .75rem; font-size: .88rem; font-weight: 600;
  box-shadow: 0 8px 20px rgba(0,0,0,.12); cursor: pointer;
}
.music-btn:hover { border-color: var(--c-gold); }
.music-btn.on { background: var(--c-maroon); color: #fff; border-color: var(--c-maroon); }
.music-btn.waiting { outline: 2px dashed var(--c-gold); outline-offset: 2px; }
.mb-icon { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.mb-icon i { width: 3px; height: 4px; background: currentColor; border-radius: 1px; }
.music-btn.on .mb-icon i { animation: eq 1s ease-in-out infinite; }
.music-btn.on .mb-icon i:nth-child(2) { animation-delay: .2s; }
.music-btn.on .mb-icon i:nth-child(3) { animation-delay: .4s; }
.music-btn.on .mb-icon i:nth-child(4) { animation-delay: .1s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
.music-btn:not(.on) .mb-icon i:nth-child(1) { height: 8px; } .music-btn:not(.on) .mb-icon i:nth-child(2) { height: 12px; }
.music-btn:not(.on) .mb-icon i:nth-child(3) { height: 6px; }  .music-btn:not(.on) .mb-icon i:nth-child(4) { height: 10px; }
@media (max-width: 991.98px) {
  .music-btn { right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); padding: .45rem .8rem .45rem .65rem; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .music-btn.on .mb-icon i { animation: none; height: 12px; } }

/* ---------- v3.2: network (GSAP) ---------- */
.net-title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.net-title .wi { display: inline-block; }
.net-nodes g { cursor: pointer; outline: none; }
.net-nodes circle { transition: none; }
.net-sparks circle { fill: var(--c-red); filter: drop-shadow(0 0 4px rgba(196,22,28,.8)); }
@media (max-width: 991.98px) {
  .music-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .music-btn .mb-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 575.98px) {
  .net-nodes text, body.lang-ml .net-nodes text { font-size: 30px; }
  .net-nodes circle { stroke-width: 3; }
  .net-links path { stroke-width: 2; }
  .net-stage svg { overflow: visible; padding: 0 6px; }
}

/* ---------- v3.3: code-wheel pattern (book details section) ---------- */
.code-wheel { max-width: 400px; margin: 0 auto; }
.code-wheel svg { width: 100%; height: auto; display: block; overflow: visible; }
.cw-line { fill: none; stroke: var(--c-gold); stroke-width: 1.2; }
.cw-faint { opacity: .45; }
.cw-dash { stroke-dasharray: 3 6; }
.cw-num { font-family: "Inter", sans-serif; font-size: 11px; fill: var(--c-maroon); text-anchor: middle; dominant-baseline: middle; }
.cw-core { fill: var(--c-maroon); stroke: var(--c-gold); stroke-width: 3; }
.cw-star { fill: var(--c-gold); }
.cw-24 { font-family: "Merriweather", Georgia, serif; font-weight: 700; font-size: 58px; fill: #f3dfa8; text-anchor: middle; }
.cw-ml { font-family: "Manjari", "Noto Sans Malayalam", "Nirmala UI", sans-serif; font-weight: 700; font-size: 22px; fill: #f3dfa8; text-anchor: middle; }
.cw-outer, .cw-inner { transform-origin: 200px 200px; transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .cw-outer { animation: cwspin 90s linear infinite; }
  .cw-inner { animation: cwspin 60s linear infinite reverse; }
  @keyframes cwspin { to { transform: rotate(360deg); } }
}
@media (max-width: 575.98px) { .code-wheel { max-width: 280px; } }

/* ---------- v3.4: bordered book-details card ---------- */
.book-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-gold);
  border-radius: 6px;
  padding: 2.75rem 3rem;
  box-shadow: 0 18px 40px rgba(90, 45, 10, .08);
}
.book-card::before { /* inner frame line */
  content: ""; position: absolute; inset: 10px;
  border: 1px solid var(--c-gold-lt); border-radius: 3px; pointer-events: none;
}
.bc-corner { position: absolute; width: 14px; height: 14px; background: var(--c-gold); transform: rotate(45deg); z-index: 1; }
.bc-corner.tl { top: -7px; left: -7px; } .bc-corner.tr { top: -7px; right: -7px; }
.bc-corner.bl { bottom: -7px; left: -7px; } .bc-corner.br { bottom: -7px; right: -7px; }
.bc-left { padding: 0 2.5rem 0 0; }
.bc-right { padding-left: 3rem; border-left: 1px solid var(--c-line); position: relative; }
.bc-eyebrow { color: var(--c-red); font-size: .88rem; font-weight: 500; margin-bottom: .2rem; }
.bc-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 1.2rem; }
.book-card .code-wheel { max-width: 340px; }
.book-card .facts-table th, .book-card .facts-table td { padding: .8rem 0; }
.book-card .facts-table tr:first-child th, .book-card .facts-table tr:first-child td { border-top-color: var(--c-gold); }
.book-card .facts-table tr:last-child th, .book-card .facts-table tr:last-child td { border-bottom: 0; }
@media (max-width: 991.98px) {
  .book-card { padding: 2rem 1.5rem; }
  .bc-left { padding: 0 0 1.5rem; }
  .bc-right { padding-left: 0; border-left: 0; border-top: 1px solid var(--c-line); padding-top: 1.5rem; }
  .book-card .code-wheel { max-width: 260px; }
}
@media (max-width: 575.98px) { .book-card { padding: 1.75rem 1.1rem; } .book-card::before { inset: 6px; } }

/* ---------- v3.5: 24 topic tiles (replaces the code wheel) ---------- */
.code-tiles { max-width: 420px; margin: 0 auto; text-align: center; }
.ct-head {
    font-size: 18px;
    color: #000000;
    margin-bottom: .9rem;
    font-weight: 600;
}
.ct-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ct-grid li {
  position: relative; aspect-ratio: 1 / .78;
  border: 1px solid var(--c-gold-lt); border-radius: 6px; background: var(--c-cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 4px; line-height: 1.2;
}
.ct-n { font-family: "Inter", sans-serif; font-weight: 700; font-size: .95rem; color: var(--c-maroon); }
.ct-t { font-size: .68rem; color: var(--c-body); overflow-wrap: anywhere; }
body.lang-ml .ct-t { font-size: .64rem; }
.ct-k { position: absolute; top: 2px; right: 4px; font-size: .6rem; opacity: 0; }
.ct-foot { margin: 1rem 0 0; font-family: var(--f-head); color: var(--c-maroon); font-size: 1.15rem; }
.ct-foot b { font-size: 1.5rem; }
/* One chapter "unlocks" at a time, in order 01 → 24, then repeats. */
@media (prefers-reduced-motion: no-preference) {
  .ct-grid li { animation: ctUnlock 24s linear infinite; animation-delay: calc(var(--i) * 1s); }
  .ct-grid li .ct-k { animation: ctKey 24s linear infinite; animation-delay: calc(var(--i) * 1s); }
  @keyframes ctUnlock {
    0%   { background: var(--c-cream); border-color: var(--c-gold-lt); }
    1%   { background: var(--c-maroon); border-color: var(--c-maroon); }
    5%   { background: var(--c-maroon); border-color: var(--c-maroon); }
    7%, 100% { background: #fff; border-color: var(--c-gold); }
  }
  @keyframes ctKey { 0% { opacity: 0; } 1%, 100% { opacity: 1; } }
  .ct-grid li { --on: 0; }
}
.ct-grid li:hover { background: var(--c-maroon); border-color: var(--c-maroon); }
.ct-grid li:hover .ct-n, .ct-grid li:hover .ct-t { color: #f3dfa8; }
@media (max-width: 575.98px) { .ct-t { font-size: .6rem; } .ct-n { font-size: .85rem; } }
.ct-k { color: var(--c-gold); font-weight: 700; font-size: .7rem; }
@media (prefers-reduced-motion: no-preference) {
  .ct-grid li .ct-n, .ct-grid li .ct-t { animation: ctText 24s linear infinite; animation-delay: calc(var(--i) * 1s); }
  @keyframes ctText { 0% { color: inherit; } 1%, 5% { color: #f3dfa8; } 7%, 100% { color: inherit; } }
}
@media (prefers-reduced-motion: reduce) { .ct-k { opacity: 1; } .ct-grid li { background: #fff; border-color: var(--c-gold); } }
body.lang-ml .ct-t { overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 575.98px) {
  .ct-grid { grid-template-columns: repeat(3, 1fr); }
  .ct-grid li { aspect-ratio: 1 / .62; }
  .ct-t, body.lang-ml .ct-t { font-size: .68rem; }
}
.ct-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ct-grid li { min-width: 0; overflow: hidden; }
@media (max-width: 575.98px) {
  .ct-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.lang-ml .ct-t { font-size: .6rem; overflow-wrap: anywhere; word-break: normal; }
}

/* Social icons (footer / contact / home float) */
.social-icons { display: inline-flex; gap: .6rem; flex-wrap: wrap; }
.social-icons .si, .social-float .si {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.social-icons .si svg, .social-float .si svg { width: 18px; height: 18px; }
.social-icons .si:hover, .social-float .si:hover { transform: translateY(-2px); text-decoration: none; }
.site-footer .si-dark .si { background: rgba(255,255,255,.08); color: #e9dccd; border: 1px solid rgba(255,255,255,.15); }
.site-footer .si-dark .si:hover { color: #fff; }
.si-light .si { background: #fff; color: var(--c-maroon); border: 1px solid rgba(0,0,0,.1); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.si-dark .si-fb:hover, .si-light .si-fb:hover, .social-float .si-fb:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.si-dark .si-ig:hover, .si-light .si-ig:hover, .social-float .si-ig:hover { background: #e1306c; color: #fff; border-color: #e1306c; }
.si-dark .si-yt:hover, .si-light .si-yt:hover, .social-float .si-yt:hover { background: #ff0000; color: #fff; border-color: #ff0000; }
.social-float {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 1019;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(42,33,28,.92); padding: 6px; border-radius: 0 14px 14px 0;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.social-float .si { color: #e9dccd; border-radius: 10px; }
@media (max-width: 575.98px) {
  .social-float { padding: 4px; }
  .social-float .si { width: 34px; height: 34px; }
  .social-float .si svg { width: 16px; height: 16px; }
}

/* Characters (book page) */
.character-card { display: flex; flex-direction: column; height: 100%; }
.character-card .char-img {
    width: 300px;
    height: auto;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 1rem;
    /* border: 3px solid var(--c-gold); */
    /* background: var(--c-maroon); */
    flex-shrink: 0;
    /* display: flex; */
    align-items: center;
    /* justify-content: center; */
}
.character-card .char-img img { width: auto; height: auto;  }
.character-card .char-img span { color: #fff; font-size: 2rem; font-weight: 700; font-family: "Manjari", "Noto Sans Malayalam", sans-serif; }
.character-card .char-words p { font-family: "Manjari", "Noto Sans Malayalam", "Nirmala UI", sans-serif; line-height: 1.75; margin-bottom: .7rem; }
.character-card .char-words p:last-child { margin-bottom: 0; }