/* ============================================================
   AIinBangla, Kalo & Bidyut design system
   Near-black, one electric blue accent, Swiss discipline.
   Alternates live in variant-a.css (Indigo & Marigold) and variant-b.css.
   ============================================================ */

:root {
  /* ground */
  --nil: #101114;        /* near-black band */
  --nil-deep: #050507;   /* footer */
  --nil-soft: #1B1D22;   /* raised card on black */

  /* accent, the single colour on the page */
  --gada: #1F4BFF;       /* electric blue */
  --gada-bright: #5A7BFF;
  --gada-soft: #E2E7FF;

  /* paper */
  --kagoj: #F7F7F8;
  --kagoj-card: #FFFFFF;

  /* semantic only: included / verified / done */
  --shobuj: #0E7A5F;
  --shobuj-soft: #DCF0E9;

  /* text */
  --dhoa: #9A9DA6;       /* muted on black */
  --dhoa-dark: #5A5D66;  /* muted on paper */
  --ink: #101114;

  /* rules */
  --line-dark: #2A2D34;
  --line-light: #E2E3E6;

  /* type: neutral Bangla + tight grotesque */
  --f-bn: "Noto Sans Bengali", "Hind Siliguri", sans-serif;
  /* Headlines get their own Bangla face. See the note in aib_variants(). */
  --f-display: "Noto Sans Bengali", "Anek Bangla", sans-serif;
  --f-latin: "Familjen Grotesk", "Anek Bangla", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* scale */
  --fs-hero: clamp(2rem, 5.9vw, 3.8rem);
  --fs-h2: clamp(1.6rem, 4vw, 2.4rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.09rem;
  --fs-small: .92rem;
  --fs-label: .68rem;

  --maxw: 1120px;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(16,17,20,.06), 0 8px 26px -14px rgba(16,17,20,.28);
}

/* Swiss discipline: flat surfaces, hard rules, tight display type.
   Variants A and B soften these again through their own stylesheets. */
/* Latin only. Negative tracking crushes Bangla conjuncts and pulls the matra
   apart, so headings, which are almost all Bangla, are left alone. .en carries
   the tightening where a heading is genuinely Latin. */
h1 .en, h2 .en, h3 .en, .brand, .bk-lockup { letter-spacing: -.025em; }
.btn-primary:hover { box-shadow: none; }
.work:hover, .seg:hover { transform: none; border-color: var(--gada); }


/* ---------------------------------------------- base */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--kagoj);
  color: var(--ink);
  font-family: var(--f-bn);
  font-size: var(--fs-body);
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  /* Noto's line box is taller than Anek's was, and in Bangla the matra sits
     above the letters while conjuncts hang below, so two headings set at the
     old 1.22 touched each other where they wrapped. */
  line-height: 1.3;
  text-wrap: balance;
  letter-spacing: 0;
}
p { margin: 0; }

a { color: var(--gada); text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gada);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: 22px; }

/* ---------------------------------------------- labels & tracking

   Bangla is a joined script: letter-spacing breaks conjuncts and detaches
   matras, so it must never be applied to Bangla text. Labels therefore default
   to Anek Bangla with normal tracking. Use `.label.en` (or `.tracked`) only on
   strings that are genuinely Latin or numeric.
   ------------------------------------------------------------------------- */

.label {
  font-family: var(--f-bn);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
.label.en, .tracked {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* A mono run that also carries Bangla keeps the Bangla face and no tracking;
   wrap the numeral itself in .mono to get tabular figures back. */
.bn-mixed {
  font-family: var(--f-bn);
  letter-spacing: normal;
  text-transform: none;
}

/* Latin display words inside Bangla headlines */
.en { font-family: var(--f-display); letter-spacing: -.02em; }

/* ---------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-bn);
  font-weight: 700;
  font-size: 1.02rem;
  padding: 15px 30px;
  border-radius: var(--radius);
  border: 0;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary { background: var(--gada); color: #fff; }
.btn-primary:hover { background: var(--gada-bright); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-ghost {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  opacity: .85;
}
.btn-ghost:hover { opacity: 1; }
.btn .mono { font-size: .85em; opacity: .85; }

/* ---------------------------------------------- header (paper, Awsmd-style) */

/* Logged-in admins get a 32px WordPress admin bar pinned to the top. A sticky
   header at top:0 slides underneath it and the CTA collides with "Howdy, ...".
   Offset the header by the admin bar height at each of its two sizes. */
.admin-bar .site-head { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-head { top: 46px; } }

.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  /* Opaque on purpose. A sticky header with `backdrop-filter: blur()` makes the
     compositor re-sample and blur everything behind it on EVERY scroll frame,
     across the full viewport width. On mid-range Android that is the single
     biggest source of scroll stutter on this page, and the visual difference
     against a near-white ground is almost nil. */
  background: var(--kagoj);
  border-bottom: 1px solid var(--line-light);
  color: var(--ink);
  /* keep the header on its own compositor layer so it never repaints with the page */
  will-change: transform;
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 66px;
}
.brand {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--ink);
}
.brand b { color: var(--gada); }
.site-nav { display: flex; gap: 20px; margin-left: auto; align-items: center; min-width: 0; }
.site-nav ul {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  flex-wrap: nowrap;
}
.site-nav li { flex: none; }
.site-nav a {
  color: var(--dhoa-dark);
  font-weight: 600;
  font-size: .93rem;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--ink); }
.site-nav .btn { padding: 10px 20px; font-size: .95rem; white-space: nowrap; flex: none; }

/* `.site-nav a` (0,1,1) outranks `.btn-primary` (0,1,0), so a button inside the
   nav silently inherited the muted link colour, blue text on a blue button.
   Restate the button colours at matching specificity. */
.site-nav a.btn-primary { color: #fff; }
.site-nav a.btn-primary:hover { color: #fff; }
.site-nav a.btn-ghost { color: var(--ink); }

/* A long menu collapses to the essentials rather than wrapping onto two rows.
   Everything past the fifth item is reachable from the footer and the mobile menu. */
@media (max-width: 1180px) {
  .site-nav ul > li:nth-child(n+6) { display: none; }
}
@media (max-width: 1020px) {
  .site-nav ul > li:nth-child(n+4) { display: none; }
}

.nav-toggle { display: none; }

@media (max-width: 880px) {
  .site-nav ul { display: none; }
  .nav-toggle {
    display: block;
    margin-left: auto;
    background: none;
    border: 1px solid var(--line-light);
    color: var(--ink);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-family: var(--f-bn);
  }
  .site-nav { margin-left: 0; }
  .site-nav.open ul {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 66px 0 auto 0;
    background: var(--kagoj);
    padding: 18px 22px 24px;
    border-bottom: 1px solid var(--line-light);
    gap: 16px;
  }
  /* the open drawer shows every item, including ones hidden on wide screens */
  .site-nav.open ul > li { display: block; }
}

/* ---------------------------------------------- sections & bands */

.band-dark { background: var(--nil); color: #fff; }
.band-dark .muted { color: var(--dhoa); }
.band-paper { background: var(--kagoj); color: var(--ink); }
.band-paper .muted { color: var(--dhoa-dark); }

section { padding: 84px 0; }

.shead { max-width: 62ch; margin-bottom: 44px; }
.shead .label { display: block; margin-bottom: 12px; color: var(--gada); }
.band-dark .shead .label { color: var(--gada-bright); }
/* h1 and h2 look identical here on purpose: which one it is depends on whether
   the block is the page's subject or a section inside it, and that is a document
   structure question, not a visual one. */
.shead h1, .shead h2 { font-size: var(--fs-h2); font-weight: 800; }
.shead p { margin-top: 14px; }

/* reveal on scroll (JS adds .in) */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------------------------------------------- 01 hero (paper, Awsmd fan) */

.hero {
  position: relative;
  padding: 88px 0 64px;
  overflow: hidden;
  background: var(--kagoj);
  color: var(--ink);
  text-align: center;
}
.hero .wrap { position: relative; }

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-light);
  background: var(--kagoj-card);
  border-radius: 99px;
  padding: 7px 16px;
  font-size: .88rem;
  color: var(--dhoa-dark);
  margin-bottom: 26px;
}
.hero-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--shobuj);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shobuj) 25%, transparent);
}
.hero-pill b { color: var(--ink); font-weight: 700; }

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.4;         /* room between highlighted lines */
  max-width: 18ch;          /* Noto is wider than Anek, so fewer per line */
  margin-inline: auto;
}
.hero h1 .hl { color: var(--gada); }

.hero .dek {
  margin-top: 20px;
  max-width: 50ch;
  margin-inline: auto;
  font-size: 1.12rem;
  color: var(--dhoa-dark);
}
.hero .dek b { color: var(--ink); font-weight: 600; }

.hero-cta { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; align-items: center; justify-content: center; }
.hero-cta .free-link { color: var(--dhoa-dark); font-weight: 600; font-size: .98rem; text-decoration: underline; text-underline-offset: 3px; }
.hero-cta .free-link:hover { color: var(--ink); }

/* the fan: real course artefacts tossed on the table */
.fan {
  position: relative;
  /* decorative only (aria-hidden): never capture the cursor */
  pointer-events: none;
  height: 300px;
  margin-top: 54px;
}
/* The card is only a slot: it holds the fan position and rotation, accepts the
   cursor, and NEVER moves. All visual treatment and every hover movement lives
   on .cardin inside it. That separation is what makes the hover loop-proof, the hit area cannot slide out from under the pointer, so hover can never
   toggle itself off. */
.fan .card {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 200px;
  aspect-ratio: 4/5;
  transform-origin: 50% 120%;
  pointer-events: auto;   /* the fan itself is pointer-events:none */
  transform:
    translateX(-50%)
    translateX(var(--x, 0px))
    rotate(var(--rot, 0deg))
    translateY(var(--lift, 0px));
}

/* the visible card */
.fan .cardin {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--nil-soft);
  box-shadow: 0 2px 6px rgba(13,18,41,.12), 0 24px 48px -18px rgba(13,18,41,.35);
  transform-origin: 50% 85%;
  transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease;
  will-change: transform;
}

/* Straighten, rise and grow, the slot underneath stays exactly where it was. */
.fan .card:hover .cardin,
.fan .card:focus-within .cardin {
  transform: rotate(calc(-1 * var(--rot, 0deg))) translateY(-26px) scale(1.06);
  box-shadow: 0 6px 14px rgba(13,18,41,.16), 0 40px 70px -22px rgba(13,18,41,.5);
}
.fan .card:hover { z-index: 6; }

@media (prefers-reduced-motion: reduce) {
  .fan .card:hover .cardin { transform: none; }
}
.fan .card img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2; }

/* fan geometry: five cards spread from a shared origin.
   Held in custom properties so the hover state can cancel each card's own
   rotation precisely rather than guessing at a single value. */
.fan .c1 { --x: -300px; --rot: -14deg; }
.fan .c2 { --x: -155px; --rot:  -7deg; --lift: -16px; }
.fan .c3 { --x:    0px; --rot:   0deg; --lift: -26px; z-index: 2; }
.fan .c4 { --x:  155px; --rot:   7deg; --lift: -16px; }
.fan .c5 { --x:  300px; --rot:  14deg; }


@keyframes fanin { from { opacity: 0; transform: translateY(60px); } }
.fan .cardin { animation: fanin .7s cubic-bezier(.2,.7,.2,1) both; }
.fan .c2 { animation-delay: .06s; }
.fan .c3 { animation-delay: .12s; }
.fan .c4 { animation-delay: .18s; }
.fan .c5 { animation-delay: .24s; }

@media (max-width: 880px) {
  .fan .c1 { --x: -190px; }
  .fan .c2 { --x:  -98px; --lift: -12px; }
  .fan .c4 { --x:   98px; --lift: -12px; }
  .fan .c5 { --x:  190px; }
}

/* Designed, animated artefact mocks. Each card animates what that lesson
   actually produces, so the fan reads as work rather than as placeholders.
   A real <img> dropped into assets/img/fan-N.jpg simply covers this. */
.fan .card .mock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 13px;
  gap: 7px;
  text-align: left;
}
.fan .card .mock .kind {
  font-family: var(--f-mono);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gada-bright);
}
.fan .card .mock .stage {
  flex: 1;
  border-radius: 6px;
  background: rgba(255,255,255,.07);
  position: relative;
  overflow: hidden;
}
.fan .card .mock .cap {
  font-family: var(--f-bn);
  font-size: .7rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
.fan .card .mock .bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); }
.fan .card .mock .bar.s { width: 42%; }
.fan .card .mock .bar.m { width: 68%; }

@media (prefers-reduced-motion: reduce) {
  .fan .card .mock .stage * { animation: none !important; }
}

/* Every card animation below moves only `transform` and `opacity`.
   Earlier versions animated `top` (layout every frame), a custom property
   driving a gradient (full repaint every frame) and the opacity of a large
   double repeating-gradient. On a mid-range Android that combination stuttered
   badly with five cards running at once. */

.fan .card .mock .stage { contain: paint; }
.fan .card .mock .stage > i,
.fan .card .mock .stage::before,
.fan .card .mock .stage::after { will-change: transform, opacity; }

/*, 1 VIDEO: play glyph pulsing over a scrub bar that fills, */
.fan .c1 .mock .stage {
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
}
.fan .c1 .mock .stage::before {
  content: "";
  position: absolute;
  left: 50%; top: 44%;
  width: 0; height: 0;
  border-left: 16px solid rgba(255,255,255,.9);
  border-block: 11px solid transparent;
  transform: translate(-50%, -50%);
  animation: playPulse 2.4s ease-in-out infinite;
}
/* the scrub track, and a fill that scales instead of repainting a gradient */
.fan .c1 .mock .stage::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: 16%;
  height: 3px;
  border-radius: 2px;
  background: var(--gada-bright);
  transform-origin: left center;
  animation: scrubFill 4s linear infinite;
}
@keyframes playPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: .55; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}
@keyframes scrubFill {
  from { transform: scaleX(.04); }
  to   { transform: scaleX(1); }
}

/*, 2 SHEET: rows landing one after another, */
.fan .c2 .mock .stage {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 15px),
    rgba(255,255,255,.05);
}
.fan .c2 .mock .stage i {
  position: absolute;
  left: 10%;
  height: 5px;
  border-radius: 2px;
  background: var(--shobuj);
  opacity: 0;
  animation: rowIn 3.6s ease-in-out infinite;
}
.fan .c2 .mock .stage i:nth-child(1) { top: 18%; width: 58%; animation-delay: 0s; }
.fan .c2 .mock .stage i:nth-child(2) { top: 36%; width: 72%; animation-delay: .4s; }
.fan .c2 .mock .stage i:nth-child(3) { top: 54%; width: 46%; animation-delay: .8s; }
.fan .c2 .mock .stage i:nth-child(4) { top: 72%; width: 64%; animation-delay: 1.2s; }
@keyframes rowIn {
  0%, 8%    { opacity: 0; transform: translateX(-10px); }
  20%, 72%  { opacity: .95; transform: none; }
  88%, 100% { opacity: 0; transform: none; }
}

/*, 3 IMAGE: a picture resolving out of noise, The noise layer is painted once and only its opacity animates. */
.fan .c3 .mock .stage {
  background:
    radial-gradient(circle at 50% 45%, rgba(31,75,255,.55), transparent 62%),
    rgba(255,255,255,.06);
}
.fan .c3 .mock .stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 2px, transparent 2px 5px);
  animation: denoise 3.8s ease-in-out infinite;
}
@keyframes denoise {
  0%, 10%  { opacity: 1; }
  55%, 80% { opacity: 0; }
  100%     { opacity: 1; }
}

/*, 4 APP: window chrome, then UI blocks appearing, */
.fan .c4 .mock .stage { background: rgba(255,255,255,.05); }
.fan .c4 .mock .stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 14px;
  background: rgba(255,255,255,.13);
  animation: none;
}
.fan .c4 .mock .stage i {
  position: absolute;
  border-radius: 3px;
  background: rgba(255,255,255,.28);
  opacity: 0;
  animation: blockIn 3.4s ease-in-out infinite;
}
.fan .c4 .mock .stage i:nth-child(1) { left: 12%; top: 28%; width: 40%; height: 8px; animation-delay: .1s; }
.fan .c4 .mock .stage i:nth-child(2) { left: 12%; top: 46%; width: 68%; height: 8px; animation-delay: .5s; }
.fan .c4 .mock .stage i:nth-child(3) { left: 12%; bottom: 16%; width: 34%; height: 13px; background: var(--gada); animation-delay: .9s; }
@keyframes blockIn {
  0%, 6%    { opacity: 0; transform: translateY(6px); }
  22%, 74%  { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: none; }
}

/*, 5 REEL: feed scrolling past.
   translateY, never `top`: `top` forced a layout pass on every frame., */
.fan .c5 .mock .stage {
  background: linear-gradient(135deg, rgba(14,122,95,.5), rgba(255,255,255,.04));
}
.fan .c5 .mock .stage i {
  position: absolute;
  left: 18%; right: 18%;
  top: 0;
  height: 30%;
  border-radius: 4px;
  background: rgba(255,255,255,.2);
  animation: reelScroll 5s linear infinite;
}
.fan .c5 .mock .stage i:nth-child(1) { animation-delay: 0s; }
.fan .c5 .mock .stage i:nth-child(2) { animation-delay: -1.66s; }
.fan .c5 .mock .stage i:nth-child(3) { animation-delay: -3.33s; }
@keyframes reelScroll {
  from    { transform: translateY(340%); opacity: 0; }
  15%     { opacity: 1; }
  85%     { opacity: 1; }
  to      { transform: translateY(-120%); opacity: 0; }
}

/* Motion costs battery and CPU; run it only while the fan is on screen.
   main.js adds .paused when the hero scrolls out of view. */
.fan.paused .mock .stage *,
.fan.paused .mock .stage::before,
.fan.paused .mock .stage::after { animation-play-state: paused; }

/* @student speech-bubble pills */
.bubble {
  position: absolute;
  z-index: 6;
  font-family: var(--f-mono);
  font-size: .78rem;
  font-weight: 600;
  background: var(--nil);
  color: #fff;
  border-radius: 99px;
  padding: 8px 15px;
  box-shadow: var(--shadow);
}
.bubble::after {
  content: "";
  position: absolute;
  bottom: -6px; left: 22px;
  border: 7px solid transparent;
  border-top-color: var(--nil);
  border-bottom: 0;
}
.bubble.alt { background: var(--gada); }
.bubble.alt::after { border-top-color: var(--gada); }
.bubble.b1 { left: 12%; top: -6px; rotate: -4deg; }
.bubble.b2 { right: 13%; top: 22px; rotate: 3deg; }

@media (max-width: 880px) {
  .fan { height: 220px; }
  .fan .card { width: 140px; }
  .fan .c1 { --x: -190px; }
  .fan .c2 { --x:  -98px; --lift: -12px; }
  .fan .c4 { --x:   98px; --lift: -12px; }
  .fan .c5 { --x:  190px; }
  .bubble.b1 { left: 2%; } .bubble.b2 { right: 2%; }
}

/* load animation: lines rise in sequence */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero .rise { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
.hero .rise:nth-child(2) { animation-delay: .08s; }
.hero .rise:nth-child(3) { animation-delay: .16s; }
.hero .rise:nth-child(4) { animation-delay: .24s; }

/* ---------------------------------------------- 02 proof strip (paper) */

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-light);
  border-block: 1px solid var(--line-light);
  margin-top: 64px;
  text-align: left;
}
.bento .cell {
  background: var(--kagoj);
  padding: 22px 24px;
}
.bento .n {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  display: block;
  color: var(--ink);
}
.bento .t { color: var(--dhoa-dark); font-size: .92rem; display: block; margin-top: 4px; }
@media (max-width: 880px) { .bento { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------- 02b quiz funnel */

.quiz-sec { padding: 64px 0 76px; }
.quiz {
  max-width: 820px;
  margin: 0 auto;
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.quiz-head {
  padding: 24px 30px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.quiz-head h2 { font-size: 1.4rem; font-weight: 800; }
.quiz-kicker { margin-top: 6px; font-size: .92rem; color: var(--dhoa-dark); }
.quiz-step-ind {
  font-family: var(--f-bn);
  font-size: .82rem;
  font-weight: 600;
  color: var(--dhoa-dark);
  white-space: nowrap;
  background: var(--kagoj);
  border-radius: 99px;
  padding: 5px 13px;
}

/* progress */
.quiz-bar { height: 3px; background: var(--line-light); }
.quiz-bar > span {
  display: block;
  height: 100%;
  background: var(--gada);
  transition: width .35s cubic-bezier(.2,.7,.2,1);
}

.quiz-body { padding: 26px 30px 30px; }
.quiz [hidden] { display: none !important; }

@keyframes quizIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.quiz-screen { animation: quizIn .3s ease both; }

.quiz-q { font-size: 1.12rem; font-weight: 700; }
.quiz-sub { font-size: .9rem; color: var(--dhoa-dark); margin-top: 5px; }
.quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.quiz-opt {
  text-align: left;
  background: var(--kagoj);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 15px 18px;
  font-family: var(--f-bn);
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.quiz-opt:hover { border-color: var(--gada); transform: translateY(-1px); background: var(--kagoj-card); }
.quiz-opt .k {
  font-size: .68rem;
  color: var(--gada);
  border: 1px solid var(--line-light);
  border-radius: 4px;
  padding: 2px 7px;
  flex: none;
  margin-top: 3px;
}
.quiz-opt:last-child:nth-child(odd) { grid-column: 1 / -1; }

.quiz-back {
  margin-top: 18px;
  background: none;
  border: 0;
  font-family: var(--f-bn);
  color: var(--dhoa-dark);
  font-size: .88rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}

/* result */
.quiz-result { display: grid; grid-template-columns: 1fr 280px; gap: 28px; align-items: start; }
.quiz-plan .for {
  font-family: var(--f-bn);
  font-size: .8rem;
  font-weight: 600;
  color: var(--shobuj);
  display: block;
  margin-bottom: 8px;
}
.quiz-plan h3 { font-size: 1.5rem; font-weight: 800; }
.quiz-plan .why { margin-top: 12px; color: var(--dhoa-dark); font-size: .97rem; }

.roadmap {
  margin-top: 20px;
  background: var(--kagoj);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.roadmap-h {
  font-family: var(--f-bn);
  font-size: .78rem;
  font-weight: 700;
  color: var(--gada);
  display: block;
  margin-bottom: 10px;
}
.roadmap ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.roadmap li { font-size: .94rem; color: var(--ink); }
.roadmap li::marker { color: var(--gada); font-weight: 700; }

.quiz-plan .note {
  margin-top: 16px;
  font-size: .9rem;
  color: var(--dhoa-dark);
  border-left: 2px solid var(--shobuj);
  padding-left: 14px;
}

.quiz-result .buy {
  background: var(--nil);
  color: #fff;
  border-radius: 10px;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 88px;
}
.quiz-result .buy-label {
  font-family: var(--f-bn);
  font-size: .74rem;
  font-weight: 600;
  color: var(--gada-bright);
}
.quiz-result .buy-name { font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.quiz-result .buy-blurb { font-size: .85rem; color: var(--dhoa); }
.quiz-result .buy .p {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
  line-height: 1.1;
}
.quiz-result .buy .p .was {
  font-family: var(--f-mono);
  font-size: .82rem;
  font-weight: 400;
  text-decoration: line-through;
  opacity: .5;
  margin-left: 8px;
}
.quiz-result .buy .btn { justify-content: center; margin-top: 6px; }
.quiz-result .buy .alt { font-size: .8rem; color: var(--dhoa); text-align: center; margin-top: 2px; }
.quiz-result .buy .alt a { color: var(--gada-bright); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 760px) {
  .quiz-opts { grid-template-columns: 1fr; }
  .quiz-result { grid-template-columns: 1fr; }
  .quiz-result .buy { position: static; }
  .quiz-head { flex-direction: column; gap: 10px; }
}

/* ---------------------------------------------- 05 audience segments */

.segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.seg {
  background: var(--nil-soft);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #fff;
  transition: transform .15s ease, border-color .15s ease;
}
.seg:hover { transform: translateY(-2px); border-color: var(--gada); }
.seg .tag-you {
  font-family: var(--f-bn);
  font-size: .66rem;
  letter-spacing: normal;
  color: var(--gada-bright);
}
.seg h3 { font-size: 1.12rem; color: #fff; }
.seg .pain { color: var(--dhoa); font-size: .92rem; flex: 1; }
.seg .after { font-size: .92rem; color: #fff; border-top: 1px dashed var(--line-dark); padding-top: 12px; }
.seg .after b { color: var(--gada-bright); }
.seg .go {
  font-family: var(--f-bn);
  font-size: .76rem;
  color: var(--dhoa);
}
.seg .go b { color: #fff; font-weight: 600; }
@media (max-width: 900px) { .segs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .segs { grid-template-columns: 1fr; } }

/* ---------------------------------------------- 03 cost of waiting */

.cost-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cost-cols .col {
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 26px;
}
.cost-cols h3 { font-size: var(--fs-h3); margin-bottom: 10px; }
.cost-cols p { color: var(--dhoa-dark); font-size: var(--fs-small); }
@media (max-width: 820px) { .cost-cols { grid-template-columns: 1fr; } }

/* ---------------------------------------------- 03 outcome figures

   Replaces three paragraphs of prose. A number that counts up and a bar that
   fills says the same thing faster, and survives someone who is skimming.
   ------------------------------------------------------------------------- */

.outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.outcome {
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.outcome .pre { font-size: .88rem; color: var(--dhoa-dark); line-height: 1.45; }
.outcome .fig {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}
.outcome .fig b { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 800; }
.outcome .track {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--line-light);
  overflow: hidden;
}
.outcome .track i {
  display: block;
  height: 100%;
  width: var(--fill, 60%);
  background: var(--gada);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.in .outcome .track i { transform: scaleX(1); }
.outcome .sub { font-size: .86rem; color: var(--dhoa-dark); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .outcome .track i { transition: none; transform: scaleX(1); } }

/* ---------------------------------------------- 04 mechanism */

.mech { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.mech-steps { display: flex; flex-direction: column; gap: 2px; counter-reset: mech; }
.mech-step {
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  padding: 20px 22px 20px 64px;
  position: relative;
  counter-increment: mech;
}
.mech-step:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.mech-step:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.mech-step::before {
  content: counter(mech, decimal-leading-zero);
  position: absolute;
  left: 22px; top: 22px;
  font-family: var(--f-mono);
  font-size: .8rem;
  font-weight: 600;
  color: var(--gada);
}
.mech-step h3 { font-size: 1.08rem; margin-bottom: 4px; }
.mech-step p { font-size: var(--fs-small); color: var(--dhoa-dark); }

/* the drawn cycle */
.mech-aside { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cycle { width: min(320px, 88%); color: var(--ink); }
.cycle svg { width: 100%; height: auto; overflow: visible; }
.cyc-run { stroke: var(--gada); }
.cyc-node circle { fill: var(--kagoj); stroke: var(--gada); stroke-width: 2.5; }
.cyc-t {
  font-family: var(--f-bn);
  font-size: 15px;
  font-weight: 700;
  fill: var(--ink);
}
.cyc-c {
  font-family: var(--f-bn);
  font-size: 17px;
  font-weight: 700;
  fill: var(--ink);
}
.cyc-c2 {
  font-family: var(--f-bn);
  font-size: 13px;
  font-weight: 500;
  fill: var(--dhoa-dark);
}
.mech-note { font-size: 1.05rem; max-width: 40ch; color: var(--dhoa-dark); text-align: center; }
@media (prefers-reduced-motion: reduce) { .cycle animateTransform { display: none; } }
@media (max-width: 880px) { .mech { grid-template-columns: 1fr; gap: 30px; } }

/* ---------------------------------------------- 05 three paths (hover list) */

.paths { display: flex; flex-direction: column; border-block: 1px solid var(--line-dark); }
.path {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
  padding: 30px 8px;
  border-bottom: 1px solid var(--line-dark);
  color: #fff;
  position: relative;
  transition: padding-left .25s ease;
}
.path:last-child { border-bottom: 0; }
.path:hover { padding-left: 22px; }
.path .idx { font-family: var(--f-mono); font-size: .8rem; color: var(--gada-bright); }
.path h3 { font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 700; }
.path .sub { color: var(--dhoa); font-size: .95rem; margin-top: 4px; }
.path .arrow {
  font-family: var(--f-mono);
  color: var(--dhoa);
  transition: transform .25s ease, color .25s ease;
}
.path:hover .arrow { transform: translateX(6px); color: var(--gada-bright); }
.path .peek {
  position: absolute;
  right: 90px; top: 50%;
  translate: 0 -50%;
  width: 190px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  rotate: -3deg;
  transition: opacity .25s ease, rotate .25s ease;
  pointer-events: none;
}
.path:hover .peek { opacity: 1; rotate: 2deg; }
@media (max-width: 880px) { .path .peek { display: none; } }

/* ---------------------------------------------- 06 show the work */

.workgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.work {
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.work:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.work .thumb {
  aspect-ratio: 16/10;
  background: var(--nil-soft);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.work .thumb img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2; }
.work .thumb .kind {
  /* Bangla content: no tracking, Bangla face. */
  font-family: var(--f-bn);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: normal;
  color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 99px;
  padding: 5px 12px;
  background: rgba(19,26,56,.5);
}
/* distinct texture per card so six placeholders don't read as one grey wall */
.work:nth-child(1) .thumb { background:
  repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 8px, transparent 8px 16px), var(--nil-soft); }
.work:nth-child(2) .thumb { background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 16px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 60px), var(--nil-soft); }
.work:nth-child(3) .thumb { background:
  radial-gradient(circle at 30% 30%, rgba(201,122,24,.4), transparent 55%), var(--nil-soft); }
.work:nth-child(4) .thumb { background:
  linear-gradient(135deg, rgba(28,107,102,.45), transparent 65%), var(--nil-soft); }
.work:nth-child(5) .thumb { background:
  linear-gradient(180deg, rgba(255,255,255,.12), transparent 70%), var(--nil-soft); }
.work:nth-child(6) .thumb { background:
  repeating-linear-gradient(-45deg, rgba(201,122,24,.14) 0 10px, transparent 10px 20px), var(--nil-soft); }
.work .cap { padding: 16px 18px; }
.work .cap b { display: block; font-size: .98rem; }
.work .cap span { font-size: .85rem; color: var(--dhoa-dark); }
@media (max-width: 820px) { .workgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .workgrid { grid-template-columns: 1fr; } }

/* ---------------------------------------------- 07 instructor */

.instructor { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: center; }
.instructor .photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background:
    radial-gradient(circle at 50% 35%, rgba(201,122,24,.35), transparent 60%),
    var(--nil-soft);
  aspect-ratio: 4/5;
  position: relative;
  display: grid;
  place-items: center;
}
.instructor .photo img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2; }
.instructor .photo .monogram {
  font-family: var(--f-bn);
  font-weight: 700;
  font-size: 3rem;
  color: rgba(255,255,255,.28);
  letter-spacing: .04em;
}
.instructor .creds {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.cred {
  font-family: var(--f-bn);
  font-size: .72rem;
  letter-spacing: normal;
  border: 1px solid var(--line-dark);
  color: var(--dhoa);
  border-radius: 99px;
  padding: 6px 13px;
}
@media (max-width: 820px) { .instructor { grid-template-columns: 1fr; } .instructor .photo { max-width: 320px; } }

/* ---------------------------------------------- 08 results / reviews */

.quotes { columns: 3; column-gap: 18px; }
.quote {
  break-inside: avoid;
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.quote p { font-size: .98rem; }
.quote .who {
  /* Real student names come from Tutor and are often Bangla. */
  margin-top: 14px;
  font-family: var(--f-bn);
  font-size: .84rem;
  font-weight: 600;
  color: var(--dhoa-dark);
  letter-spacing: normal;
}
.quote.critical { border-left: 3px solid var(--gada); }
.quote .answer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-light);
  font-size: .9rem;
  color: var(--dhoa-dark);
}
.quote .answer b { color: var(--ink); }
@media (max-width: 900px) { .quotes { columns: 2; } }
@media (max-width: 600px) { .quotes { columns: 1; } }

/* ---------------------------------------------- 09 curriculum accordion */

.curric { display: flex; flex-direction: column; gap: 12px; }
.curric details {
  background: var(--nil-soft);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
}
.curric summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: baseline;
  padding: 20px 24px;
}
.curric summary::-webkit-details-marker { display: none; }
.curric summary h3 { font-size: 1.08rem; color: #fff; }
.curric summary .outcome { grid-column: 1; color: var(--dhoa); font-size: .92rem; margin-top: 3px; }
.curric summary .rt { font-family: var(--f-bn); font-size: .78rem; color: var(--dhoa); white-space: nowrap; }
.curric summary .chev { color: var(--gada-bright); transition: rotate .25s ease; font-family: var(--f-mono); }
.curric details[open] summary .chev { rotate: 90deg; }
.curric .lessons {
  border-top: 1px solid var(--line-dark);
  padding: 14px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.curric .lesson {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--dhoa);
  font-size: .95rem;
}
.curric .lesson .mono { font-size: .78rem; }

/* ---------------------------------------------- 10 pricing */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.tier {
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tier.featured {
  background: var(--nil);
  color: #fff;
  border-color: var(--nil);
  box-shadow: var(--shadow);
  position: relative;
}
.tier.featured::before {
  content: attr(data-flag);
  position: absolute;
  top: -13px; left: 28px;
  background: var(--gada);
  color: #fff;
  font-family: var(--f-bn);
  font-weight: 700;
  font-size: .8rem;
  padding: 4px 14px;
  border-radius: 99px;
}
.tier h3 { font-size: 1.15rem; }
.tier .price {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 2.1rem;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tier .price .was {
  font-size: 1rem;
  font-weight: 400;
  text-decoration: line-through;
  opacity: .5;
  margin-left: 10px;
}
/* The payback line. It sits tight under the price because the two are one
   thought: this costs X, and X comes back after N jobs. */
.tier .payback {
  margin: -10px 0 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--gada);
}
.tier.featured .payback { color: var(--gada-bright); }
.quiz-result .buy .payback { font-size: .9rem; font-weight: 600; color: var(--gada-bright); }
.buybox .payback { margin: -6px 0 14px; font-size: .92rem; font-weight: 600; color: var(--gada); }
/* The honest footnote: market rates, not an income promise. */
.price-note {
  margin: 28px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: .88rem;
  color: var(--dhoa-dark);
  opacity: .8;
}

.tier ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tier li { font-size: .95rem; padding-left: 26px; position: relative; color: var(--dhoa-dark); }
.tier.featured li { color: var(--dhoa); }
.tier li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--shobuj);
  font-weight: 700;
}
.tier.featured li::before { color: var(--gada-bright); }
.tier .btn { justify-content: center; }
@media (max-width: 880px) {
  .tiers { grid-template-columns: 1fr; }
  .tier.featured { order: -1; }
}

/* ---------------------------------------------- 11 value stack */

.vstack {
  max-width: 640px;
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
}
.vstack .row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 24px;
  border-bottom: 1px solid var(--line-light);
  font-size: .98rem;
}
.vstack .row .mono { color: var(--dhoa-dark); font-size: .85rem; }
.vstack .total {
  display: flex;
  justify-content: space-between;
  padding: 18px 24px;
  background: var(--gada-soft);
  font-weight: 700;
}
.vstack .total .mono { font-size: 1rem; }
.vstack .final {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 24px;
  background: var(--nil);
  color: #fff;
}
.vstack .final .mono { font-size: 1.5rem; font-weight: 600; color: var(--gada-bright); }

/* saving visual beside the value stack */
.vstack-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}
.vstack { max-width: none; }
.saving {
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.saving-h { font-family: var(--f-bn); font-size: .82rem; font-weight: 700; color: var(--gada); }
.saving-bars { display: flex; flex-direction: column; gap: 16px; }
.sb { position: relative; }
.sb-fill {
  display: block;
  height: 34px;
  border-radius: 4px;
  transform-origin: left center;
  animation: sbGrow .9s cubic-bezier(.2,.7,.2,1) both;
}
.sb-full .sb-fill { width: 100%; background: var(--line-light); }
.sb-bundle .sb-fill { width: 82%; background: var(--gada); animation-delay: .18s; }
@keyframes sbGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .sb-fill { animation: none; } }
.sb-label {
  position: absolute; left: 12px; top: 50%; translate: 0 -50%;
  font-size: .85rem; font-weight: 600; color: var(--ink);
}
.sb-bundle .sb-label { color: #fff; }
.sb-val {
  position: absolute; right: 0; top: -20px;
  font-size: .82rem; color: var(--dhoa-dark);
}
.saving-badge {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  background: var(--gada-soft);
  border-radius: var(--radius);
  padding: 13px 16px;
}
.saving-badge b { font-family: var(--f-display); font-weight: 800; font-size: 1.4rem; color: var(--ink); }
.saving-badge span { font-size: .88rem; color: var(--dhoa-dark); }
.saving-notes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.saving-notes li {
  font-size: .89rem; color: var(--dhoa-dark);
  padding-left: 24px; position: relative;
}
.saving-notes li::before { content: "✓"; position: absolute; left: 0; color: var(--shobuj); font-weight: 700; }
@media (max-width: 900px) { .vstack-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---------------------------------------------- 12 guarantee */

.guarantee {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 10px 0;
}
.guarantee .seal {
  width: 74px; height: 74px;
  margin: 0 auto 22px;
  border-radius: 50%;
  border: 2px solid var(--shobuj);
  color: var(--shobuj);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.3rem;
}
.guarantee h2 { font-size: var(--fs-h2); font-weight: 800; }
.guarantee p { margin-top: 16px; color: var(--dhoa-dark); max-width: 56ch; margin-inline: auto; }

/* ---------------------------------------------- 13 FAQ */

.faq { max-width: 760px; display: flex; flex-direction: column; gap: 10px; }
.faq details {
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-mono); color: var(--gada); }
.faq details[open] summary::after { content: ", "; }
.faq .a { padding: 0 22px 20px; color: var(--dhoa-dark); font-size: .98rem; }

/* ---------------------------------------------- 14 close */

.close-cta { text-align: center; padding: 40px 0 20px; }
.close-cta h2 { font-size: var(--fs-h2); font-weight: 800; max-width: 22ch; margin-inline: auto; }
.close-cta .two {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 34px;
  flex-wrap: wrap;
}

/* ---------------------------------------------- sales page */

.sales-hero {
  background: var(--nil);
  color: #fff;
  padding: 72px 0 76px;
  position: relative;
  overflow: hidden;
}
.sales-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .18;
  /* A radial mask over a full-bleed layer is costly to composite. The same
     vignette is achieved by painting the ground colour back over the edges,
     which is a plain paint with no mask layer. */
  box-shadow: inset 0 0 220px 90px var(--nil);
}
.sales-hero .wrap { position: relative; }
.sales-hero-grid {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 54px;
  align-items: start;
}
.sales-hero h1 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  font-weight: 800;
  margin-top: 22px;
  letter-spacing: -.01em;
}
.sales-hero .dek { margin-top: 18px; color: var(--dhoa); font-size: 1.08rem; max-width: 46ch; }
.sales-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.sales-meta .cred { border-color: var(--line-dark); }
.sales-meta .cred .mono { color: #fff; font-weight: 600; }

/* buy box */
.buybox {
  background: var(--kagoj-card);
  color: var(--ink);
  border-radius: 10px;
  padding: 26px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2), 0 30px 60px -24px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 88px;
}
.buybox .label { color: var(--dhoa-dark); }
.buybox .p {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.buybox .btn { justify-content: center; }
.buybox .incl { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.buybox .incl li { font-size: .93rem; padding-left: 24px; position: relative; color: var(--dhoa-dark); }
.buybox .incl li::before { content: "✓"; position: absolute; left: 0; color: var(--shobuj); font-weight: 700; }
.buybox .pay {
  border-top: 1px solid var(--line-light);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.buybox .pay .mono { font-size: .78rem; color: var(--dhoa-dark); letter-spacing: .04em; }
.buybox .pay p { font-size: .84rem; color: var(--dhoa-dark); line-height: 1.55; }
.buybox .upsell {
  background: var(--gada-soft);
  border-radius: var(--radius);
  padding: 13px 16px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: .88rem;
}
.buybox .upsell b { font-family: var(--f-display); font-size: 1.05rem; }
.buybox .upsell a { margin-left: auto; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }

@media (max-width: 940px) {
  .sales-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .buybox { position: static; }
}

/* free preview embed */
.preview {
  max-width: 860px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: var(--nil-soft);
  aspect-ratio: 16/9;
  box-shadow: var(--shadow);
}
.preview iframe, .preview video { width: 100%; height: 100%; border: 0; display: block; }

/* benefits */
.benefits {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.benefits li {
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 16px 18px 16px 44px;
  position: relative;
  font-size: .97rem;
}
.benefits li::before {
  content: "✓";
  position: absolute; left: 18px; top: 16px;
  color: var(--shobuj); font-weight: 700;
}
@media (max-width: 760px) { .benefits { grid-template-columns: 1fr; } }

/* is this for you */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fit-col {
  background: var(--nil-soft);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.fit-col.yes { border-color: color-mix(in srgb, var(--shobuj) 55%, var(--line-dark)); }
.fit-col.no { border-style: dashed; }
.fit-col h3 { color: #fff; font-size: 1.08rem; margin-bottom: 14px; }
.fit-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fit-col li { color: var(--dhoa); font-size: .95rem; padding-left: 26px; position: relative; }
.fit-col.yes li::before { content: "✓"; position: absolute; left: 0; color: var(--shobuj); font-weight: 700; }
.fit-col.no li::before { content: "✕"; position: absolute; left: 0; color: var(--dhoa); font-weight: 700; }
@media (max-width: 760px) { .fit { grid-template-columns: 1fr; } }

/* keep the rail clear of the page bottom */
.sales { padding-bottom: 64px; }

/* already-enrolled panel: replaces the buy box for people who own the course */
.buybox.owned { gap: 12px; }
.buybox.owned .label { color: var(--shobuj); }
.owned-note { font-size: .93rem; color: var(--dhoa-dark); }
.owned-alt {
  font-size: .88rem;
  font-weight: 600;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------- bundle page */

.buybox .save-line {
  font-family: var(--f-bn);
  font-size: .88rem;
  font-weight: 700;
  color: var(--shobuj);
  background: var(--shobuj-soft);
  border-radius: var(--radius);
  padding: 7px 12px;
  align-self: flex-start;
}
.buybox .p .was {
  font-family: var(--f-mono);
  font-size: .48em;
  font-weight: 400;
  text-decoration: line-through;
  opacity: .45;
  margin-left: 10px;
}

/* the two courses, side by side */
.bundle-courses { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bc {
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.bc-n {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gada);
}
.bc h3 { font-size: 1.22rem; font-weight: 700; }
.bc-blurb { font-size: .95rem; color: var(--dhoa-dark); }
.bc-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.bc-stats span {
  font-size: .82rem;
  color: var(--dhoa-dark);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 5px 10px;
}
.bc-stats b { color: var(--ink); font-weight: 700; }
.bc-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-light);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.bc-price { font-size: .88rem; color: var(--dhoa-dark); }
.bc-foot a { font-size: .88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 820px) { .bundle-courses { grid-template-columns: 1fr; } }

/* price comparison: singles next to the bundle */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: start; }
.tier {
  background: var(--nil-soft);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  /* A tier card is always dark, whichever band it sits in. Without this it
     inherits the band's text colour, and on a light band every `color: inherit`
     child (the ghost button) came out near-black on near-black. */
  color: #fff;
}
.tier .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.tier .btn-ghost:hover { border-color: #fff; }
.tier-name { font-family: var(--f-bn); font-size: .95rem; font-weight: 700; color: #fff; }
.tier-price {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.9rem;
  color: #fff;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tier-price .was {
  font-family: var(--f-mono);
  font-size: .46em;
  font-weight: 400;
  text-decoration: line-through;
  opacity: .45;
  margin-left: 8px;
}
.tier ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.tier li {
  font-size: .9rem;
  color: var(--dhoa);
  padding-left: 24px;
  position: relative;
}
.tier li::before { content: "\2713"; position: absolute; left: 0; color: var(--shobuj); font-weight: 700; }
.tier li.off { opacity: .5; }
.tier li.off::before { content: "\2715"; color: var(--dhoa); }
.tier .btn { justify-content: center; margin-top: auto; }

/* the bundle column is the one being recommended, so it is the only lit one */
.tier-best {
  background: var(--kagoj-card);
  border-color: var(--gada);
  box-shadow: 0 0 0 1px var(--gada);
}
.tier-best { color: var(--ink); }
.tier-best .tier-name, .tier-best .tier-price { color: var(--ink); }
.tier-best .btn-ghost { color: var(--ink); border-color: var(--line-light); }
.tier-best li { color: var(--dhoa-dark); }
.tier-flag {
  position: absolute;
  top: -11px; left: 24px;
  background: var(--gada);
  color: #fff;
  font-family: var(--f-bn);
  font-size: .74rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
}

/* ---------------------------------------------- sticky price rail (sales pages) */

.rail {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 70;
  background: var(--nil-deep);
  color: #fff;
  border-top: 1px solid var(--line-dark);
  transform: translateY(110%);
  transition: transform .3s ease;
}
.rail.show { transform: none; }
.rail .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 12px;
}
.rail .p { font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.rail .inc { color: var(--dhoa); font-size: .88rem; flex: 1; }
.rail .btn { padding: 11px 24px; font-size: .95rem; }
@media (max-width: 640px) { .rail .inc { display: none; } }

/* ---------------------------------------------- footer */

/* ---------------------------------------------- checkout & cart

   CartFlows renders these pages, so we style rather than rebuild. The goals are
   narrow and conversion-driven: make the order summary unmistakable, make the
   pay button the loudest thing on screen, and answer "is this safe" and "what
   happens next" without the buyer having to leave the page.
   ------------------------------------------------------------------------- */

body.woocommerce-checkout,
body.woocommerce-cart { background: var(--kagoj); }

/* the funnel header is deliberately bare: no nav to click away with.
   Give it a real reassurance line instead of an empty bar. */
.aib-checkout-bar {
  background: var(--nil);
  color: #fff;
  padding: 12px 0;
}
.aib-checkout-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  font-family: var(--f-bn);
  font-size: .88rem;
}
.aib-checkout-bar b { color: #fff; font-weight: 700; }
.aib-checkout-bar span { color: var(--dhoa); display: inline-flex; align-items: center; gap: 7px; }
.aib-checkout-bar span::before {
  content: "\2713";
  color: var(--shobuj);
  font-weight: 700;
}

/* form fields: bigger tap targets, clearer focus */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wcf-embed-checkout-form input.input-text,
.wcf-embed-checkout-form select {
  font-family: var(--f-bn) !important;
  font-size: 1rem !important;
  padding: 13px 15px !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--line-light) !important;
  min-height: 48px;
}
.woocommerce form .form-row input.input-text:focus,
.wcf-embed-checkout-form input.input-text:focus {
  border-color: var(--gada) !important;
  outline: 2px solid color-mix(in srgb, var(--gada) 30%, transparent);
  outline-offset: 0;
}
.woocommerce form .form-row label,
.wcf-embed-checkout-form label { font-family: var(--f-bn); font-weight: 600; }

/* order summary: the number a buyer checks twice */
.woocommerce-checkout-review-order table.shop_table,
.wcf-order-wrap table.shop_table {
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
}
.woocommerce-checkout-review-order .order-total th,
.woocommerce-checkout-review-order .order-total td,
.wcf-order-wrap .order-total th,
.wcf-order-wrap .order-total td {
  font-family: var(--f-bn);
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  border-top: 2px solid var(--ink) !important;
  padding-top: 16px !important;
}
.woocommerce-checkout-review-order .order-total .amount,
.wcf-order-wrap .order-total .amount {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

/* the pay button should be the loudest thing on the page */
#place_order,
.wcf-embed-checkout-form #place_order,
.woocommerce #payment #place_order {
  background: var(--gada) !important;
  color: #fff !important;
  font-family: var(--f-bn) !important;
  font-weight: 800 !important;
  font-size: 1.12rem !important;
  padding: 18px 30px !important;
  border-radius: var(--radius) !important;
  width: 100%;
  min-height: 56px;
  letter-spacing: normal;
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--gada) 70%, transparent);
}
#place_order:hover { background: var(--gada-bright) !important; }

/* reassurance directly under the button, where hesitation actually happens */
.aib-pay-note {
  margin-top: 14px;
  font-family: var(--f-bn);
  font-size: .88rem;
  color: var(--dhoa-dark);
  text-align: center;
  line-height: 1.6;
}
.aib-pay-note b { color: var(--ink); }
.aib-pay-note .marks {
  display: block;
  margin-top: 10px;
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--dhoa-dark);
}

/* coupon row: quiet, so it does not invite code-hunting mid-checkout */
.woocommerce-form-coupon-toggle .woocommerce-info,
.checkout_coupon { font-family: var(--f-bn); font-size: .9rem; }
.woocommerce-form-coupon-toggle .woocommerce-info { background: transparent; border-top-color: var(--line-light) !important; }

@media (max-width: 780px) {
  /* on a phone the total must never be below the fold of the summary */
  .woocommerce-checkout-review-order { margin-bottom: 18px; }
  #place_order { position: sticky; bottom: 12px; z-index: 5; }
}

/* ---------------------------------------------- upsell & thank-you steps

   CartFlows one-click offer pages, rebuilt from its Pro shortcodes so they no
   longer depend on Elementor. These run AFTER payment, so the job is to make
   one clear offer and an equally clear way to decline, a hidden "no thanks"
   is what makes post-purchase offers feel like a trap.
   ------------------------------------------------------------------------- */

.aib-offer, .aib-thanks {
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 22px 64px;
  font-family: var(--f-bn);
}
.aib-offer-kicker, .aib-thanks-kicker {
  font-size: .84rem;
  font-weight: 700;
  color: var(--gada);
  margin-bottom: 10px;
}
.aib-thanks-kicker { color: var(--shobuj); }
.aib-offer h1, .aib-thanks h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 26px;
}
.aib-offer-grid { display: grid; grid-template-columns: 320px 1fr; gap: 34px; align-items: start; }
.aib-offer-media img { border-radius: var(--radius); border: 1px solid var(--line-light); }
.aib-offer-desc { color: var(--dhoa-dark); font-size: 1rem; }
.aib-offer-price {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 2.2rem;
  margin: 16px 0 6px;
  font-variant-numeric: tabular-nums;
}
.aib-offer-price del { font-family: var(--f-mono); font-size: .44em; font-weight: 400; opacity: .45; margin-right: 8px; }
.aib-offer-note {
  font-size: .9rem;
  color: var(--dhoa-dark);
  border-left: 2px solid var(--line-light);
  padding-left: 14px;
  margin: 14px 0 22px;
}
.aib-offer-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.aib-offer-yes { justify-content: center; }
/* Declining must be as easy to find as accepting. */
.aib-offer-no {
  font-size: .95rem;
  color: var(--dhoa-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.aib-offer-no:hover { color: var(--ink); }

.aib-thanks-note { color: var(--dhoa-dark); max-width: 56ch; }
.aib-thanks-cta { margin-top: 24px; }

@media (max-width: 760px) {
  .aib-offer-grid { grid-template-columns: 1fr; gap: 22px; }
  .aib-offer-actions .btn { width: 100%; }
}

/* ---------------------------------------------- content & delivery pages */

.aib-page-head { padding: 62px 0 58px; }
.aib-page-head .label { display: block; margin-bottom: 12px; color: var(--gada-bright); }
.aib-page-head .label.ok { color: var(--shobuj); }
.aib-page-head h1 {
  font-size: clamp(1.8rem, 4.4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.02em;
  max-width: 20ch;
}
.aib-page-head .lede { margin-top: 16px; color: var(--dhoa); max-width: 58ch; font-size: 1.06rem; }
.aib-page-head .head-cta { margin-top: 26px; }

/* the downloads themselves */
.gifts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.gift {
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gift-n { font-size: .78rem; font-weight: 600; color: var(--gada); }
.gift h3 { font-size: 1.1rem; font-weight: 700; }
.gift p { font-size: .92rem; color: var(--dhoa-dark); }
.gift .btn { margin-top: auto; justify-content: center; }
.gift .btn .mono { font-size: .72em; opacity: .8; }

.next-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.next-card {
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.next-card h3 { font-size: 1.05rem; font-weight: 700; }
.next-card p { font-size: .92rem; color: var(--dhoa-dark); }
.next-card .btn { margin-top: 6px; }
@media (max-width: 720px) { .next-two { grid-template-columns: 1fr; } }

/* plain article layout */
.article { max-width: 68ch; display: flex; flex-direction: column; gap: 34px; }
.article-block h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: 12px; letter-spacing: -.01em; }
.article-block p { color: var(--dhoa-dark); }

/* ---------------------------------------------- blog single */

.wrap-narrow { max-width: 760px; }

.post-head { padding: 54px 0 30px; background: var(--kagoj); }
.post-meta-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .86rem;
  color: var(--dhoa-dark);
  margin-bottom: 18px;
}
.post-cat {
  font-weight: 700;
  font-size: .78rem;
  color: var(--gada);
  background: var(--gada-soft);
  border-radius: 99px;
  padding: 5px 12px;
}
.dot-sep { opacity: .5; }
.post-head h1 {
  font-size: clamp(1.8rem, 4.2vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.22;
}
.post-lede { margin-top: 16px; font-size: 1.1rem; color: var(--dhoa-dark); }

.byline { display: flex; align-items: center; gap: 13px; margin-top: 26px; }
.avatar { border-radius: 50%; object-fit: cover; flex: none; }
.avatar-mono {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  background: var(--nil);
  color: #fff;
  font-weight: 700;
}
.byline-text { display: flex; flex-direction: column; line-height: 1.35; }
.byline-text b { font-size: .97rem; font-weight: 700; }
.byline-text span { font-size: .85rem; color: var(--dhoa-dark); }

.post-hero { margin: 12px 0 40px; }
.post-hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line-light);
}

/* article body: readable measure, real hierarchy */
/* Reading text. Noto resolves conjuncts more openly, which is spent on a
   longer line unless the measure comes in with it: 720px ran to roughly 84
   Bangla characters, where 60 to 70 reads best. */
.post-body { font-size: 1.1rem; line-height: 1.88; }
.post-body > * + * { margin-top: 1.15em; }
.post-body h2 { font-size: 1.5rem; font-weight: 800; margin-top: 2em; letter-spacing: -.01em; }
.post-body h3 { font-size: 1.2rem; font-weight: 700; margin-top: 1.7em; }
.post-body a { text-decoration: underline; text-underline-offset: 2px; }
.post-body ul, .post-body ol { padding-left: 22px; }
.post-body li + li { margin-top: .5em; }
.post-body img { border-radius: var(--radius); height: auto; }
.post-body blockquote {
  border-left: 3px solid var(--gada);
  padding-left: 20px;
  color: var(--dhoa-dark);
  font-style: normal;
}
/* these posts carry long English prompt blocks; keep them legible and contained */
.post-body pre, .post-body code {
  font-family: var(--f-mono);
  font-size: .88em;
  background: var(--kagoj);
  border-radius: var(--radius);
}
.post-body pre { padding: 16px 18px; overflow-x: auto; border: 1px solid var(--line-light); }
.post-body code { padding: 2px 6px; }
.post-body pre code { padding: 0; background: none; }

.post-terms {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--line-light);
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
}
.post-terms .label { color: var(--dhoa-dark); }
.term-list { display: flex; gap: 8px; flex-wrap: wrap; }
.term-list a {
  font-size: .85rem;
  border: 1px solid var(--line-light);
  border-radius: 99px;
  padding: 5px 13px;
  color: var(--dhoa-dark);
}
.term-list a:hover { border-color: var(--gada); color: var(--gada); }

/* author card */
.post-author-band { padding-top: 56px; }
.author-card {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 24px;
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 28px;
  align-items: start;
}
.author-card .avatar { width: 112px; height: 112px; }
.author-body .label { display: block; color: var(--gada); margin-bottom: 6px; }
.author-body h2 { font-size: 1.35rem; font-weight: 800; }
.author-body p { margin-top: 10px; color: var(--dhoa-dark); font-size: .97rem; }
.author-links { display: flex; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.author-more { font-size: .9rem; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) {
  .author-card { grid-template-columns: 1fr; }
  .author-card .avatar { width: 84px; height: 84px; }
}

/* related */
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.rel-card {
  display: flex;
  flex-direction: column;
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--ink);
  transition: border-color .15s ease;
}
.rel-card:hover { border-color: var(--gada); }
.rel-thumb { display: block; aspect-ratio: 16/10; background: var(--kagoj); overflow: hidden; }
.rel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rel-body { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 18px; }
.rel-cat { font-size: .74rem; font-weight: 700; color: var(--gada); }
.rel-body b { font-size: .98rem; font-weight: 700; line-height: 1.35; }
.rel-date { font-size: .82rem; color: var(--dhoa-dark); }

/* ---------------------------------------------- payment trust strip */

.pay-strip {
  background: #fff;
  border-radius: 10px;
  padding: 18px 22px 20px;
  margin-bottom: 44px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pay-strip-h {
  font-family: var(--f-bn);
  font-size: .82rem;
  font-weight: 700;
  color: #4A5270;
}
.pay-strip img { width: 100%; height: auto; display: block; }
.pay-scroll { width: 100%; }
@media (max-width: 720px) {
  /* Very wide artwork: let it scroll rather than shrink to illegible.
     A phone shows a little under half of it, so the strip carries a fade on
     its right edge. Without that the banner just looks cut off and nobody
     swipes: an affordance nobody sees is the same as no scrolling at all. */
  .pay-strip { padding: 14px; position: relative; }
  .pay-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pay-scroll::-webkit-scrollbar { display: none; }
  .pay-strip img { min-width: 620px; }
  .pay-strip::after {
    content: ""; position: absolute; right: 1px; top: 1px; bottom: 1px;
    width: 44px; pointer-events: none; border-radius: 0 9px 9px 0;
    background: linear-gradient(to right, rgba(255,255,255,0), #fff 78%);
  }
  /* In the footer band the strip sits on the dark panel, so the fade has to
     match that panel and not the white card used elsewhere. */
  .pay-band .pay-strip::after {
    background: linear-gradient(to right, rgba(23,24,29,0), #1B1C22 78%);
  }
}

/* ---------------------------------------------- WooCommerce pages
   Cart, checkout and account run through Woo's own templates. These keep them
   inside the design system instead of inheriting plugin defaults. */

.woocommerce-page main, .woocommerce main { background: var(--kagoj); }
.woo-wrap { max-width: var(--maxw); margin: 0 auto; padding: 54px 22px 80px; }
.woocommerce-page h1, .woocommerce h1 {
  font-family: var(--f-bn);
  font-size: var(--fs-h2);
  font-weight: 800;
  margin-bottom: 26px;
}
.woocommerce table.shop_table {
  border-radius: var(--radius);
  border-color: var(--line-light);
  background: var(--kagoj-card);
}
.woocommerce table.shop_table th { font-family: var(--f-bn); font-weight: 700; }
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--gada) !important;
  color: #fff !important;
  font-family: var(--f-bn);
  font-weight: 700;
  border-radius: var(--radius) !important;
  padding: 13px 26px !important;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--gada-bright) !important; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--gada) !important;
  border-radius: var(--radius);
  font-family: var(--f-bn);
}
/* Woo stacks a "View cart" button per notice line; one is enough. */
.woocommerce-message .button + .button { display: none; }

.site-foot {
  background: var(--nil-deep);
  color: var(--dhoa);
  padding: 64px 0 40px;
  font-size: .93rem;
}
.site-foot .cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 40px;
  margin-bottom: 44px;
}
.site-foot h4 { color: #fff; font-size: .95rem; margin-bottom: 14px; }
.site-foot ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.site-foot a { color: var(--dhoa); }
.site-foot a:hover { color: #fff; }
.site-foot .legal {
  border-top: 1px solid var(--line-dark);
  padding-top: 24px;
  font-size: .82rem;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
@media (max-width: 820px) { .site-foot .cols { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   MOMENTUM, the panel an enrolled student sees
   Lives on the course page and at the top of the Tutor dashboard,
   so it carries its own ground rather than inheriting a band's.
   ============================================================ */

.momentum {
  background: var(--nil);
  color: #fff;
  border-radius: 14px;
  padding: 30px;
  margin: 0 0 26px;
}
.momentum-band { padding-block: 34px; }
/* The dashboard hook fires outside Tutor's container, so the wrapper has to
   provide the page gutter itself or the panel runs to the viewport edge. */
.momentum-wrap {
  max-width: 1180px;
  margin: 0 auto 30px;
  padding: 22px 22px 0;
  box-sizing: border-box;
}
.momentum-for {
  display: block;
  font-family: var(--f-bn);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--dhoa-dark);
  margin: 0 0 8px;
}
.momentum-wrap .momentum + .momentum-for { margin-top: 22px; }
@media (max-width: 782px) { .momentum-wrap { padding: 16px 16px 0; } }

.mo-kicker {
  display: block;
  font-family: var(--f-bn);
  font-size: .74rem;
  font-weight: 600;
  color: var(--gada-bright);
  margin-bottom: 10px;
}

/* three jobs, three columns: where you were, what you get, how you're doing */
.mo-main {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 30px;
  align-items: start;
}
.mo-main > div + div {
  border-left: 1px solid rgba(255,255,255,.1);
  padding-left: 30px;
}

.mo-resume h2 {
  font-size: 1.35rem;
  line-height: 1.35;
  margin: 0 0 16px;
}
.mo-resume .btn { align-self: flex-start; }
.mo-done-p { color: var(--dhoa); font-size: .93rem; margin: 0 0 16px; }

.mo-bar {
  margin-top: 22px;
  height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.mo-bar span {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  border-radius: 99px;
  background: var(--gada-bright);
  transform-origin: left;
  animation: mo-fill .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes mo-fill { from { transform: scaleX(0); } }
.mo-bar-t {
  display: block;
  margin-top: 9px;
  font-size: .85rem;
  color: var(--dhoa);
}
.mo-bar-t b { color: #fff; }

/* the payoff */
.mo-steps { margin: 0; font-size: .92rem; color: var(--dhoa); }
.mo-steps b { color: #fff; font-size: 1.5rem; }
.mo-what {
  margin: 8px 0 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
}
.mo-worth {
  display: inline-block;
  margin-top: 12px;
  font-size: .85rem;
  color: var(--dhoa);
}
.mo-worth b { color: var(--gada-bright); }

/* the streak */
.mo-streak-n { margin: 0; font-size: .92rem; color: var(--dhoa); }
.mo-streak-n b { color: #fff; font-size: 1.5rem; }
.mo-streak-s { margin: 8px 0 0; font-size: .88rem; color: var(--dhoa); line-height: 1.55; }

.mo-week { display: flex; gap: 6px; margin-top: 16px; }
.mo-day {
  width: 100%;
  height: 26px;
  border-radius: 4px;
  background: rgba(255,255,255,.09);
}
.mo-day.on { background: var(--gada); }
.mo-streak.is-live .mo-day.on:last-child { background: var(--gada-bright); }
.mo-day.now { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.mo-best {
  display: block;
  margin-top: 12px;
  font-size: .8rem;
  color: var(--dhoa-dark);
}
.mo-best b { color: var(--dhoa); }

/* day one: no numbers to show, so the panel says one thing */
.momentum.is-fresh { text-align: center; }
.mo-first { max-width: 54ch; margin-inline: auto; }
.mo-first h2 { font-size: 1.6rem; margin: 0 0 12px; }
.mo-first p { color: var(--dhoa); margin: 0 0 22px; line-height: 1.65; }
.mo-next-name {
  display: block;
  margin-top: 14px;
  font-size: .85rem;
  color: var(--dhoa-dark);
}

@media (max-width: 900px) {
  .momentum { padding: 24px; border-radius: 12px; }
  .mo-main { grid-template-columns: 1fr; gap: 24px; }
  .mo-main > div + div {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 24px;
  }
}

/* enrolled students get no buy box, so the hero is one column */
.sales-hero-grid.is-owned { grid-template-columns: 1fr; }

/* ============================================================
   WINS WALL, what students reported, after a human approved it
   ============================================================ */

.wins-total {
  text-align: center;
  margin: 0 0 34px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wins-total b {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  letter-spacing: -.02em;
  color: var(--gada);
  line-height: 1;
}
.wins-total span { font-size: .92rem; color: var(--dhoa-dark); }

.wins {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.win {
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.win-amt {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--gada);
  letter-spacing: -.02em;
}
.win-kind {
  font-family: var(--f-bn);
  font-size: .76rem;
  font-weight: 600;
  color: var(--gada);
  background: var(--gada-soft);
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 99px;
}
.win h3 { font-size: 1.05rem; line-height: 1.45; margin: 0; }
.win-detail { font-size: .92rem; color: var(--dhoa-dark); line-height: 1.7; margin: 0; }
.win-shot { border-radius: 8px; overflow: hidden; border: 1px solid var(--line-light); }
.win-shot img { display: block; width: 100%; height: auto; }
.win-who {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-light);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.win-who b { font-size: .92rem; }
.win-who span { font-size: .8rem; color: var(--dhoa-dark); }

@media (max-width: 900px) { .wins { grid-template-columns: 1fr; } }

/* -------- the submission form, inside the momentum panel -------- */

.mo-win { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.mo-win-msg {
  margin: 0 0 14px;
  font-size: .9rem;
  padding: 11px 14px;
  border-radius: 8px;
}
.mo-win-msg.ok  { background: rgba(14,122,95,.18); color: #7FD9BE; }
.mo-win-msg.bad { background: rgba(179,45,46,.18); color: #F0A6A6; }

.mo-win-d > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mo-win-d > summary::-webkit-details-marker { display: none; }
.mo-win-d > summary b { font-size: 1rem; }
.mo-win-d > summary span { font-size: .85rem; color: var(--dhoa); }
.mo-win-d[open] > summary { margin-bottom: 18px; }

.mo-win-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.mo-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mo-f { display: flex; flex-direction: column; gap: 6px; }
.mo-f > span { font-size: .84rem; color: var(--dhoa); }
.mo-f > span i { color: var(--gada-bright); font-style: normal; }
.mo-f input,
.mo-f select,
.mo-f textarea {
  font: inherit;
  font-size: .95rem;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  padding: 11px 13px;
  width: 100%;
}
.mo-f textarea { resize: vertical; line-height: 1.6; }
.mo-f input::placeholder,
.mo-f textarea::placeholder { color: rgba(255,255,255,.35); }
.mo-f input:focus,
.mo-f select:focus,
.mo-f textarea:focus { outline: 2px solid var(--gada-bright); outline-offset: 1px; }
.mo-f select option { color: var(--ink); }

.mo-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; line-height: 1.6; }
.mo-consent input { margin-top: 3px; flex: none; }
.mo-consent span { color: var(--dhoa); }
.mo-consent i { color: var(--gada-bright); font-style: normal; }

.mo-win-form .btn { align-self: flex-start; }
.mo-win-fine { margin: 0; font-size: .8rem; color: var(--dhoa-dark); }

@media (max-width: 620px) { .mo-f2 { grid-template-columns: 1fr; } }

/* the ask, when there is a reason to ask */
.mo-win.is-asking {
  background: rgba(31,75,255,.09);
  border: 1px solid rgba(90,123,255,.35);
  border-radius: 12px;
  padding: 20px;
  margin-top: 22px;
}
.mo-win.is-asking .mo-win-d > summary b { color: #fff; }
.mo-win.is-asking .mo-win-d > summary span { color: rgba(255,255,255,.72); }
.mo-dismiss { margin-top: 16px; }
.mo-dismiss button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .82rem;
  color: var(--dhoa-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mo-dismiss button:hover { color: var(--dhoa); }

/* ============================================================
   WOOCOMMERCE, product, shop and category pages
   Woo renders its own markup; this gives it the theme's ground
   rather than letting it run edge to edge.
   ============================================================ */

.wc-page { padding: 40px 0 70px; }
.wc-page .woocommerce-breadcrumb {
  font-size: .84rem;
  color: var(--dhoa-dark);
  margin: 0 0 26px;
}
.wc-page .woocommerce-breadcrumb a { color: var(--dhoa-dark); }
.wc-page .product .entry-title,
.wc-page .product h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.3; }
.wc-page .price {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--ink);
}
.wc-page .price del { opacity: .45; font-weight: 400; font-size: 1.1rem; }
.wc-page .single_add_to_cart_button,
.wc-page .button {
  background: var(--gada);
  color: #fff;
  border-radius: var(--radius);
  font-family: var(--f-bn);
  font-weight: 600;
  padding: 13px 26px;
  border: 0;
}
.wc-page .single_add_to_cart_button:hover,
.wc-page .button:hover { background: var(--gada-bright); color: #fff; }
.wc-page .product_meta { font-size: .84rem; color: var(--dhoa-dark); }
.wc-page .woocommerce-tabs { margin-top: 44px; }
.wc-page .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--line-light); }
.wc-page img { max-width: 100%; height: auto; }
.wc-page .woocommerce-message,
.wc-page .woocommerce-info { border-top-color: var(--gada); }

/* ============================================================
   HERO, second pass
   The first version was a centered stack on flat white: correct,
   and completely generic. What the good references share is not
   more decoration but DEPTH (a ground that recedes), RHYTHM (type
   that changes weight mid-sentence) and EVIDENCE above the claim.
   ============================================================ */

/* --- ground: a faint grid that fades out, plus one soft blue bloom
       behind the headline. Both are painted, not animated, so they
       cost nothing on scroll. --- */
.hero {
  background-color: var(--kagoj);
  background-image:
    radial-gradient(60% 50% at 50% 16%, rgba(31, 75, 255, .10), transparent 70%),
    linear-gradient(to right, rgba(16, 17, 20, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 17, 20, .045) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
  background-position: center top, center top, center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}
/* The mask would clip the fan, so only the painted ground is masked:
   put the grid on a pseudo-element and leave content unmasked. */
.hero { position: relative; -webkit-mask-image: none; mask-image: none; background-image: none; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 780px;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(58% 46% at 50% 14%, rgba(31, 75, 255, .11), transparent 72%),
    linear-gradient(to right, rgba(16, 17, 20, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 17, 20, .05) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%);
}
.hero > .wrap { position: relative; z-index: 1; }

/* --- evidence bar: faces + rating, replacing the grey count pill --- */
.proof-bar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px 7px 8px;
  border-radius: 99px;
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  box-shadow: 0 1px 2px rgba(13, 18, 41, .05), 0 10px 24px -16px rgba(13, 18, 41, .35);
  margin-bottom: 26px;
}
.proof-bar .faces { display: inline-flex; }
.proof-bar .faces img {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--kagoj-card);
  object-fit: cover;
  background: var(--kagoj);
}
.proof-bar .faces img + img,
.proof-bar .faces .face-i + .face-i,
.proof-bar .faces img + .face-i,
.proof-bar .faces .face-i + img { margin-left: -12px; }
/* A reviewer who never uploaded a photo. Still a real person, so give them a
   real mark rather than a grey silhouette. */
.proof-bar .faces .face-i {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--kagoj-card);
  background: var(--gada-soft);
  color: var(--gada);
  font-family: var(--f-bn);
  font-size: .9rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.proof-txt { font-size: .88rem; color: var(--dhoa-dark); display: inline-flex; align-items: center; gap: 6px; }
.proof-txt b { color: var(--ink); }
.proof-txt .stars { color: #F5A524; letter-spacing: 1px; font-size: .82rem; }
.proof-txt .sep { opacity: .4; }

/* --- the highlight, drawn rather than stated.
       An absolutely-positioned pseudo-element cannot do this: the money phrase
       wraps across two lines, and a single box stretched over an inline that
       spans lines lands under the last one as a stray bar. A background-image
       with box-decoration-break: clone paints once per line fragment, which is
       what a highlighter actually does. --- */
.hero h1 .hl {
  display: inline;
  /* A tint behind the words, not a rule under them. Solid --gada under blue
     text read as a heavy underline sitting on the matras; --gada-soft behind
     the full line height reads as a highlighter and keeps Bangla legible. */
  background-image: linear-gradient(var(--gada-soft), var(--gada-soft));
  background-repeat: no-repeat;
  /* Height is capped below the line box on purpose.
     At 100% the stroke fills the whole line box, and on a heading that wraps
     the boxes of two consecutive lines meet and read as one solid slab rather
     than two highlighter strokes. Bangla makes it worse: the matra and the
     descenders push the line box taller than the visible text. 0.86em sits
     around the word and leaves a gap between lines. */
  background-position: 0 59%;
  background-size: 0 0.84em;
  padding-inline: .1em;
  border-radius: .06em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  animation: hl-sweep .8s .4s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes hl-sweep { to { background-size: 100% 0.84em; } }

/* --- ticker: names eight sellable things, and gives the fold a pulse --- */
.ticker {
  position: relative;
  margin: 34px auto 0;
  max-width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.ticker-run {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
  will-change: transform;
  animation: ticker 34s linear infinite;
}
@keyframes ticker { to { transform: translateX(-50%); } }
/* Off-screen the loop is pure battery burn on the phones most of this
   audience uses, so main.js pauses it the same way it pauses the fan. */
.ticker.paused .ticker-run { animation-play-state: paused; }
.tick {
  font-family: var(--f-bn);
  font-size: .92rem;
  font-weight: 600;
  color: var(--dhoa-dark);
}
.tick-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gada); opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .ticker-run { animation: none; }
  .hero h1 .hl { animation: none; background-size: 100% 100%; }
}

/* An empty cart menu item renders as a bare "0" in the nav, which reads as a
   bug. Hide it until there is something in the cart, then let it look like a
   cart rather than a stray digit. */
.site-nav .wc-menu-item:has(.no-items) { display: none; }
.site-nav .wc-menu-item .number-of-items {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--gada);
  color: #fff;
  font-family: var(--f-mono);
  font-size: .74rem;
  font-weight: 600;
}
.site-nav .wc-menu-item .amount { display: none; }

/* --- the fold is 800px tall on a laptop; buy back enough room that the
       cards are visible without scrolling --- */
@media (min-width: 901px) {
  .hero { padding-top: 54px; }
  .hero .dek { margin-top: 18px; }
  .hero-cta { margin-top: 26px; }
  .fan { margin-top: 30px; }
}

/* ============================================================
   BENTO + QUIZ, second pass
   The hero now has depth, which made the two blocks under it look
   flat by comparison: four cells split by hairlines, and the quiz
   - the page's primary conversion element, reading as a plain box.
   ============================================================ */

/* --- stat strip: four cards, not four table cells --- */
.bento {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  background: transparent;
  border-block: 0;
  margin-top: 46px;
}
.bento .cell {
  position: relative;
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: 12px;
  padding: 22px 22px 24px;
  box-shadow: 0 1px 2px rgba(13, 18, 41, .04);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease;
}
.bento .cell:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(13, 18, 41, .06), 0 18px 34px -20px rgba(13, 18, 41, .4);
}
/* A hairline of accent along the top edge, so the row reads as a set. */
.bento .cell::before {
  content: "";
  position: absolute;
  left: 20px; right: 20px; top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--gada);
  opacity: .22;
}
.bento .n { font-size: 2.15rem; line-height: 1.05; }
.bento .t { font-size: .88rem; line-height: 1.5; margin-top: 8px; }
/* The market-rate cell is the money one, so let it carry the colour. */
.bento .cell:nth-child(3) { background: var(--gada-soft); border-color: transparent; }
.bento .cell:nth-child(3)::before { opacity: .55; }
.bento .cell:nth-child(3) .n { color: var(--gada); }
.bento .cell:nth-child(3) .t { color: #3B4A7A; }

@media (max-width: 880px) {
  .bento { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .bento .n { font-size: 1.8rem; }
}

/* --- quiz: the primary CTA on the page, framed like it --- */
.quiz-sec { padding: 44px 0 76px; }
.quiz {
  max-width: 860px;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(13, 18, 41, .05),
    0 30px 60px -28px rgba(13, 18, 41, .40);
  position: relative;
}
/* An accent rule across the top, so the card announces itself as the thing
   to do rather than sitting there as another white panel. */
.quiz::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--gada), var(--gada-bright));
  border-radius: 16px 16px 0 0;
}
.quiz-head { padding-top: 28px; }

/* ============================================================
   SECTIONS, second pass
   The hero and stat strip now have depth; this carries the same
   grammar (cards that lift, one accent per surface, an eyebrow
   that reads as a label) down the rest of the page. All motion
   is transform/opacity, nothing new runs per-frame.
   ============================================================ */

/* --- section eyebrows: a short rule beside the label ties every
       section opener together --- */
.shead .label { display: inline-flex; align-items: center; gap: 10px; }
.shead .label::before {
  content: "";
  width: 22px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .6;
}

/* --- segments: the payoff line is the point of the card, frame it --- */
.seg { transition: transform .22s cubic-bezier(.2,.7,.2,1), border-color .22s ease, box-shadow .22s ease; }
.seg:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .65);
}
.seg .after {
  border-left: 2px solid var(--gada);
  padding-left: 14px;
  margin-left: 2px;
}

/* --- work grid: cards, not tiles --- */
.work {
  border-radius: 12px;
  overflow: hidden;
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease;
}
.work:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(13,18,41,.05), 0 22px 40px -22px rgba(13,18,41,.4);
}
.work .cap { padding: 14px 16px 16px; }

/* --- outcomes: let the figure carry the accent --- */
.outcome { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease; }
.outcome:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -20px rgba(13,18,41,.35); }
.outcome .fig b { color: var(--gada); }

/* --- pricing: three identical dark cards gave the reader nothing to pick.
       The featured tier gets a blue edge and a touch of scale; the side
       tiers step back. --- */
.tiers { align-items: stretch; }
.tier { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease; }
.tier:hover { transform: translateY(-4px); border-color: rgba(90,123,255,.5); }
.tier.featured {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--nil), var(--nil)) padding-box,
    linear-gradient(160deg, var(--gada), rgba(90,123,255,.25) 60%, var(--gada-bright)) border-box;
  box-shadow: 0 30px 60px -24px rgba(31, 75, 255, .45);
}
@media (min-width: 901px) {
  .tier.featured { transform: scale(1.035); }
  .tier.featured:hover { transform: scale(1.035) translateY(-4px); }
}

/* --- FAQ: the open item should look open --- */
.faq details { transition: border-color .2s ease; border-radius: 10px; }
.faq details[open] { border-color: rgba(31,75,255,.4); }
.faq details[open] summary { color: var(--gada); }
.faq summary::after { transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(180deg); content: ", "; }

/* --- close: the last dark band gets the same bloom the hero got --- */
.close-cta { position: relative; }
.close-cta::before {
  content: "";
  position: absolute;
  inset: -40px -80px;
  background: radial-gradient(50% 60% at 50% 30%, rgba(31, 75, 255, .16), transparent 70%);
  pointer-events: none;
}
.close-cta > * { position: relative; }

/* ============================================================
   RHYTHM, the third pass
   Every section was eyebrow + h2 + a grid of identical cards on
   the same two backgrounds, which is exactly the cadence that
   reads as machine-made. Three changes:
     1. two new grounds, so the page alternates instead of repeats
     2. a section index, so the page reads as a sequence
     3. staggered card entrances, so grids arrive as a hand of
        cards rather than one slab
   ============================================================ */

/* --- grounds --- */
.band-tint {
  background-color: #EEF1FE;
  background-image: radial-gradient(rgba(31, 75, 255, .09) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
}
.band-tint .muted { color: #4A5273; }
.band-warm { background: #F6F4EF; color: var(--ink); }
.band-warm .muted { color: #6B675C; }

/* On the tinted ground the white cards do the floating; kill the dot grid
   showing through the quiz card's shadow edge. */
.band-tint .quiz { box-shadow: 0 1px 2px rgba(13,18,41,.06), 0 34px 70px -30px rgba(31, 75, 255, .45); }
.band-tint .outcome { background: var(--kagoj-card); }

/* --- the index: sections count themselves, in Bangla digits --- */
main { counter-reset: aib-sec; }
.shead .label::before {
  counter-increment: aib-sec;
  content: counter(aib-sec, bengali);
  width: auto; height: auto;
  background: none;
  opacity: 1;
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid currentColor;
  line-height: 1.3;
}

/* --- staggered entrances. The parent .reveal used to fade the whole grid
       as one slab; now the grid is transparent as a container and its cards
       carry the motion, each a beat behind the last. Transform/opacity only,
       and reduced-motion switches the whole thing off. --- */
.workgrid.reveal, .quotes.reveal, .segs.reveal, .outcomes.reveal, .tiers.reveal, .wins.reveal {
  opacity: 1;
  transform: none;
}
.workgrid.reveal > *, .quotes.reveal > *, .segs.reveal > *,
.outcomes.reveal > *, .tiers.reveal > *, .wins.reveal > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}
.workgrid.reveal.in > *, .quotes.reveal.in > *, .segs.reveal.in > *,
.outcomes.reveal.in > *, .tiers.reveal.in > *, .wins.reveal.in > * {
  opacity: 1;
  transform: none;
}
.reveal.in > *:nth-child(2) { transition-delay: .08s; }
.reveal.in > *:nth-child(3) { transition-delay: .16s; }
.reveal.in > *:nth-child(4) { transition-delay: .24s; }
.reveal.in > *:nth-child(5) { transition-delay: .32s; }
.reveal.in > *:nth-child(6) { transition-delay: .40s; }
.reveal.in > *:nth-child(n+7) { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  .workgrid.reveal > *, .quotes.reveal > *, .segs.reveal > *,
  .outcomes.reveal > *, .tiers.reveal > *, .wins.reveal > * {
    opacity: 1; transform: none; transition: none;
  }
}

/* --- reviews: a quote should look spoken, not listed --- */
.quote { position: relative; }
.quote::before {
  content: "\201C";
  position: absolute;
  top: 6px; right: 16px;
  font-family: var(--f-display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--gada);
  opacity: .14;
  pointer-events: none;
}

/* --- quiz options: the thing you are asked to click should answer the
       cursor. Number chip fills on hover, card edges toward the accent. --- */
.quiz-opt { transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.quiz-opt:hover {
  border-color: var(--gada);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -14px rgba(31, 75, 255, .5);
}
.quiz-opt:hover .k { background: var(--gada); color: #fff; border-color: var(--gada); }
.quiz-opt .k { transition: background .18s ease, color .18s ease; }

/* ============================================================
   GROUND RHYTHM, everywhere
   The value stack, guarantee and FAQ were one unbroken paper
   slab -- padding-top:0 chained them together and the eye read
   three sections as one. Every template now alternates
   paper / tint / warm / dark, and this is the safety net: if two
   sections ever share a ground again, a hairline keeps them from
   fusing back into a slab.
   ============================================================ */

section.band-paper + section.band-paper,
section.band-tint  + section.band-tint,
section.band-warm  + section.band-warm { border-top: 1px solid var(--line-light); }
section.band-dark  + section.band-dark { border-top: 1px solid var(--line-dark); }

/* Cards that assumed the paper ground, now floating on tint or warm:
   keep them white so the band shows around them, not through them. */
.band-tint .vstack, .band-warm .vstack,
.band-tint .saving, .band-warm .saving,
.band-tint .faq details, .band-warm .faq details,
.band-warm .fit-col { background: var(--kagoj-card); }

/* The guarantee sits as bare centered text; on its own warm/tint band it
   reads as the page speaking, which is right -- just give the seal the
   band's accent so the section owns its colour. */
.band-warm .guarantee .seal { border-color: #B9AE8F; color: #8A7B54; }
.band-tint .guarantee .seal { border-color: var(--gada); color: var(--gada); }

/* ============================================================
   LAUNCH GATE, the holding screen while v2.0 is built
   ============================================================ */

body.aib-gate { background: var(--nil); margin: 0; }
.gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background-color: var(--nil);
  background-image:
    radial-gradient(52% 40% at 50% 8%, rgba(31, 75, 255, .22), transparent 70%),
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
}
.gate-card { width: 100%; max-width: 520px; text-align: center; color: #fff; }
.gate-mark {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -.02em;
  margin-bottom: 30px;
}
.gate-mark b { color: var(--gada-bright); font-weight: 800; }
.gate-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 99px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  font-family: var(--f-bn); font-size: .82rem; color: var(--dhoa);
}
.gate-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gada-bright); }
.gate h1 { font-size: clamp(1.9rem, 6vw, 2.9rem); line-height: 1.25; margin: 18px 0 0; }
.gate h1 .hl { color: var(--gada-bright); }
.gate-sub { color: var(--dhoa); line-height: 1.7; margin: 14px 0 0; font-size: 1rem; }

.gate-login {
  margin-top: 34px;
  background: var(--nil-soft);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 26px 24px 22px;
  text-align: left;
}
.gate-login h2 { font-size: 1.05rem; margin: 0; }
.gate-note { color: var(--dhoa); font-size: .88rem; margin: 6px 0 16px; line-height: 1.6; }
.gate-err {
  background: rgba(179,45,46,.18); color: #F0A6A6;
  padding: 10px 13px; border-radius: 8px; font-size: .88rem; margin: 0 0 14px;
}
.gate-login label { display: block; font-size: .84rem; color: var(--dhoa); margin-bottom: 6px; }
.gate-login .login-username, .gate-login .login-password { margin-bottom: 14px; }
.gate-login input[type=text], .gate-login input[type=password] {
  width: 100%; font: inherit; font-size: .95rem; color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px; padding: 11px 13px;
}
.gate-login input:focus { outline: 2px solid var(--gada-bright); outline-offset: 1px; }
.gate-login .login-remember { font-size: .85rem; color: var(--dhoa); margin-bottom: 14px; }
.gate-login .login-remember label { display: inline; margin-left: 6px; }
.gate-login .button, .gate-login #wp-submit {
  width: 100%; cursor: pointer;
  background: var(--gada); color: #fff;
  border: 0; border-radius: var(--radius);
  font-family: var(--f-bn); font-weight: 600; font-size: 1rem;
  padding: 13px 20px;
}
.gate-login .button:hover, .gate-login #wp-submit:hover { background: var(--gada-bright); }
.gate-lost { display: inline-block; margin-top: 14px; font-size: .84rem; color: var(--dhoa); }
.gate-help { margin-top: 24px; font-size: .85rem; color: var(--dhoa-dark); line-height: 1.7; }
.gate-help a { color: var(--dhoa); }

/* ============================================================
   CURRICULUM on a light band
   The accordion was styled for the homepage, where it sits on the
   near-black band, and those colours were hardcoded. On the course
   page it sits on paper, so it rendered as a slab of black boxes
   on a light page, the theme's ground and the component disagreeing.
   The dark treatment is now scoped to the dark band, and the light
   band gets the same component in the theme's own paper palette.
   ============================================================ */

.band-paper .curric details,
.band-tint .curric details,
.band-warm .curric details {
  background: var(--kagoj-card);
  border-color: var(--line-light);
  box-shadow: 0 1px 2px rgba(13, 18, 41, .04);
}
.band-paper .curric summary h3,
.band-tint .curric summary h3,
.band-warm .curric summary h3 { color: var(--ink); }
.band-paper .curric summary .outcome,
.band-tint .curric summary .outcome,
.band-warm .curric summary .outcome,
.band-paper .curric summary .rt,
.band-tint .curric summary .rt,
.band-warm .curric summary .rt { color: var(--dhoa-dark); }
.band-paper .curric .lessons,
.band-tint .curric .lessons,
.band-warm .curric .lessons { border-top-color: var(--line-light); }
.band-paper .curric .lesson,
.band-tint .curric .lesson,
.band-warm .curric .lesson { color: var(--dhoa-dark); }

/* --- a lesson row a student can actually open --- */
.curric .lesson.is-link {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 12px;
  align-items: baseline;
  text-decoration: none;
  padding: 7px 10px;
  margin: -7px -10px;
  border-radius: 7px;
  transition: background .15s ease, color .15s ease;
}
.curric .lesson.is-link .tick {
  font-size: .8rem;
  color: var(--shobuj);
  text-align: center;
}
.band-dark .curric .lesson.is-link { color: var(--dhoa); }
.band-dark .curric .lesson.is-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.band-paper .curric .lesson.is-link:hover,
.band-tint .curric .lesson.is-link:hover,
.band-warm .curric .lesson.is-link:hover { background: var(--gada-soft); color: var(--gada); }
.curric .lesson.is-link.done .t { opacity: .62; }
.curric .lesson .t { min-width: 0; }
.curric .lesson.is-link:focus-visible { outline: 2px solid var(--gada); outline-offset: 2px; }

/* --- what a beginner needs before "what will I learn" --- */
.course-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 34px;
}
.course-facts .fact {
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: 12px;
  padding: 22px;
}
.band-dark .course-facts .fact { background: var(--nil-soft); border-color: var(--line-dark); }
.band-tint .course-facts .fact { border-color: transparent; }
.course-facts .fact .label { display: block; margin-bottom: 12px; }
.course-facts .fact ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.course-facts .fact li {
  font-size: .92rem;
  line-height: 1.6;
  padding-left: 18px;
  position: relative;
  color: var(--dhoa-dark);
}
.band-dark .course-facts .fact li { color: var(--dhoa); }
.course-facts .fact li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gada);
  opacity: .5;
}
@media (max-width: 900px) { .course-facts { grid-template-columns: 1fr; } }


/* ============================================================
   Guide page (/guide/)
   The manual. Six bands, each a different ground, because a reader
   scrolling a long reference page needs the sections to announce
   themselves, a uniform page reads as one undifferentiated wall.
   ============================================================ */

/* jump nav: a long page needs a way back into itself */
.gd-jump {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 26px;
}
.gd-jump a {
  font-family: var(--f-bn);
  font-size: .88rem;
  color: var(--dhoa);
  border: 1px solid var(--line-dark);
  border-radius: 100px;
  padding: 7px 15px;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.gd-jump a:hover { color: #fff; border-color: var(--gada); background: rgba(31,75,255,.14); }

/* scrolled-to sections must not hide under the sticky header */
.aib-guide section[id] { scroll-margin-top: 84px; }

/* ------------------------------------------------ the first week */
.gd-days {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}
.gd-day {
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 22px 22px 24px;
  position: relative;
}
/* the spine: makes seven days read as a sequence, not seven cards */
.gd-day::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--gada);
}
.gd-day-n {
  display: block; font-size: .72rem; text-transform: uppercase;
  color: var(--gada); margin-bottom: 10px;
}
.gd-day h3 { font-size: 1.06rem; margin-bottom: 8px; }
.gd-day p { font-size: .95rem; color: var(--dhoa-dark); margin: 0; }

/* ------------------------------------------------ site map */
.gd-map {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}
.gd-mapcard {
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 24px;
  display: flex; flex-direction: column;
  transition: border-color .18s ease;
}
.gd-mapcard:hover { border-color: var(--gada); }
.gd-mapcard h3 { font-size: 1.08rem; margin-bottom: 9px; }
.gd-mapcard p { font-size: .95rem; color: var(--dhoa-dark); margin: 0 0 16px; flex: 1; }
.gd-mapcard a {
  font-family: var(--f-bn); font-size: .9rem; font-weight: 600;
  color: var(--gada); text-decoration: none;
}
.gd-mapcard a:hover { text-decoration: underline; }

/* ------------------------------------------------ career tracks */
/* Six tracks of four roles is a lot of cards. The rhythm that keeps it
   readable: a wide track header sets the context and names the payer, then a
   tight 4-up grid of roles under it. The header does the explaining so each
   role card can stay short. */

.gd-chooser {
  background: var(--kagoj-card);
  border: 1px solid #E3DFD4;
  border-radius: var(--radius);
  padding: 24px 26px 20px;
  margin-bottom: 40px;
}
.gd-chooser h3 { font-size: 1.05rem; margin-bottom: 14px; }
.gd-chooser dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 34px;
}
.gd-chooser dl > div {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed #E3DFD4;
}
.gd-chooser dt { font-size: .93rem; color: #4A4638; }
.gd-chooser dd {
  margin: 0; white-space: nowrap;
  font-family: var(--f-mono); font-size: .8rem; color: var(--gada); font-weight: 600;
}

.gd-track + .gd-track { margin-top: 34px; }
.gd-track-h {
  display: flex; gap: 18px; align-items: flex-start;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid #E3DFD4;
}
.gd-track-n {
  font-size: 1.6rem; line-height: 1; color: var(--gada);
  flex: none; width: 42px;
}
.gd-track-h h3 { font-size: 1.4rem; margin-bottom: 7px; }
.gd-track-h > div > p { font-size: .95rem; color: #6B675C; margin: 0; max-width: 70ch; }
.gd-track-pay {
  font-size: .78rem !important; color: var(--gada) !important;
  margin-top: 8px !important;
}

.gd-roles {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, 1fr);
}
.gd-role {
  background: var(--kagoj-card);
  border: 1px solid #E3DFD4;
  border-radius: var(--radius);
  padding: 20px 18px;
  display: flex; flex-direction: column;
  transition: border-color .18s ease;
}
.gd-role:hover { border-color: var(--gada); }
.gd-role h4 {
  font-family: var(--f-bn); font-weight: 700;
  font-size: 1rem; line-height: 1.35; margin-bottom: 8px;
}
.gd-role > p { font-size: .89rem; color: #6B675C; margin: 0 0 14px; }
.gd-role-rate {
  font-size: .95rem; color: var(--ink); font-weight: 600;
  border-top: 1px solid #E3DFD4; padding-top: 11px;
  margin: auto 0 11px;
}
.gd-role-rate span { font-size: .76rem; color: #6B675C; font-weight: 400; }
/* where no market rate exists, the sentence replaces the number and must not
   be dressed up to look like one */
.gd-role-rate-soft {
  font-family: var(--f-bn); font-size: .82rem;
  font-weight: 400; color: #6B675C; font-style: italic;
}

.gd-fine { font-size: .84rem; color: #6B675C; margin-top: 22px; max-width: 82ch; }

/* session chips inside a role card: horizontal pills, no list bullets */
.gd-path-s { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.gd-path-s li {
  font-family: var(--f-bn); font-size: .74rem;
  background: var(--gada-soft); color: var(--gada);
  border-radius: 100px; padding: 4px 9px;
}
/* ------------------------------------------------ session accordions */
.gd-course + .gd-course { margin-top: 46px; }
.gd-course-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 14px; margin-bottom: 18px;
}
.gd-course-h h3 { font-size: 1.35rem; color: #fff; }
.gd-sn { color: var(--gada-bright); font-size: .8rem; margin-right: 8px; }
.gd-body { border-top: 1px solid var(--line-dark); padding: 18px 22px 22px; }
.gd-what { color: var(--dhoa); font-size: .97rem; margin: 0 0 14px; }
.gd-first {
  color: #fff; font-size: .95rem; margin: 0;
  background: rgba(31,75,255,.12);
  border-left: 2px solid var(--gada-bright);
  padding: 13px 16px; border-radius: 0 var(--radius) var(--radius) 0;
}
.gd-first strong { color: var(--gada-bright); }

/* ------------------------------------------------ rules */
/* one hairline grid rather than six floating cards: this is a checklist,
   and a checklist should look like a single object */
.gd-rules {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--line-light);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
}
.gd-rule {
  background: var(--kagoj-card);
  padding: 26px 24px;
  display: flex; gap: 16px; align-items: flex-start;
}
.gd-rule-n {
  font-size: 1.35rem; line-height: 1.15; color: var(--gada);
  flex: none; width: 30px;
}
.gd-rule h3 { font-size: 1.05rem; margin-bottom: 7px; }
.gd-rule p { font-size: .94rem; color: var(--dhoa-dark); margin: 0; }

/* ------------------------------------------------ help */
.gd-help-cta { margin-top: 30px; max-width: 760px; }
.gd-help-cta p { color: var(--dhoa-dark); font-size: .97rem; }
.gd-help-cta .head-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ------------------------------------------------ narrow screens */
@media (max-width: 900px) {
  .gd-days, .gd-map { grid-template-columns: repeat(2, 1fr); }
  .gd-roles { grid-template-columns: repeat(2, 1fr); }
  .gd-rules, .gd-chooser dl { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .gd-days, .gd-map, .gd-roles { grid-template-columns: 1fr; }
  .gd-track-h { gap: 12px; }
  .gd-track-n { font-size: 1.25rem; width: 30px; }
  .gd-chooser { padding: 20px 18px 16px; }
  .gd-chooser dl > div { flex-direction: column; gap: 3px; align-items: flex-start; }
  .gd-jump { gap: 6px; }
  .gd-jump a { font-size: .82rem; padding: 6px 12px; }
  .gd-body { padding: 16px 16px 18px; }
  .gd-course-h { align-items: flex-start; }
  /* give the title the full width and drop the counts to their own row,
     otherwise a long English session name wraps to three lines */
  .aib-guide .curric summary { grid-template-columns: 1fr auto; row-gap: 5px; gap: 12px; padding: 18px; }
  .aib-guide .curric summary .rt { grid-column: 1; grid-row: 2; }
}


/* ============================================================
   Article furniture, blog posts
   Figures are HTML and SVG rather than photographs: no bandwidth,
   nothing to 404, on-palette in both themes, and machine-readable,
   which matters when a growing share of readers arrive via an
   answer engine rather than a search result.
   ============================================================ */

/* inline internal links, distinguishable from plain emphasis */
.post-body .aib-ilink { color: var(--gada); text-decoration: underline; text-underline-offset: 3px; }
.post-body .aib-ilink:hover { background: var(--gada-soft); }

/* ---------------------------------------------------- table of contents */
.toc {
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-left: 3px solid var(--gada);
  border-radius: var(--radius);
  padding: 20px 24px 22px;
  margin: 0 0 34px;
}
.toc-h { font-size: .78rem !important; text-transform: uppercase; letter-spacing: .08em;
  color: var(--dhoa-dark); margin: 0 0 12px !important; font-weight: 700 !important; }
.toc ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.toc li { font-size: .95rem; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--gada); text-decoration: underline; }

/* ---------------------------------------------------- the direct answer */
/* First thing under the title: answers the query outright, so an answer
   engine has something to lift and a reader knows in five seconds. */
.post-body .tldr {
  background: var(--gada-soft);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 0 0 32px;
}
.post-body .tldr h2 {
  font-size: .78rem !important; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gada); margin: 0 0 12px !important; font-weight: 700 !important;
}
.post-body .tldr p:last-child, .post-body .tldr ul:last-child { margin-bottom: 0; }
.post-body .tldr ul { padding-left: 20px; }
.post-body .tldr li { margin-bottom: 7px; }

/* ---------------------------------------------------- figures */
.post-body figure.fig {
  margin: 34px 0;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--kagoj-card);
}
.post-body figure.fig > svg { display: block; width: 100%; height: auto; }
.post-body figure.fig figcaption {
  font-size: .86rem; color: var(--dhoa-dark);
  padding: 12px 18px; border-top: 1px solid var(--line-light);
  background: var(--kagoj);
}

/* numbered step strip */
.fig-steps { display: grid; gap: 1px; background: var(--line-light); }
.fig-steps > div { background: var(--kagoj-card); padding: 18px 20px; display: flex; gap: 14px; }
.fig-steps b { font-family: var(--f-mono); color: var(--gada); font-size: .82rem; flex: none; }
.fig-steps span { font-size: .93rem; }
.fig-steps strong { display: block; margin-bottom: 3px; font-size: .97rem; }

/* comparison / data table */
.post-body table, .fig-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.post-body table th, .fig-table th {
  text-align: left; font-family: var(--f-bn); font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--dhoa-dark);
  padding: 12px 16px; background: var(--kagoj); border-bottom: 1px solid var(--line-light);
}
.post-body table td, .fig-table td {
  padding: 12px 16px; border-bottom: 1px solid var(--line-light); vertical-align: top;
}
.post-body table tr:last-child td, .fig-table tr:last-child td { border-bottom: 0; }
.post-body .fig-scroll { overflow-x: auto; }

/* pull-quote / warning callout */
.post-body .callout {
  border-left: 3px solid var(--gada);
  background: var(--kagoj);
  padding: 16px 20px; margin: 28px 0; border-radius: 0 var(--radius) var(--radius) 0;
}
.post-body .callout p:last-child { margin-bottom: 0; }
.post-body .callout.warn { border-left-color: #B4541F; background: #FDF4EF; }

/* ---------------------------------------------------- FAQ */
.post-body .faq-block { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 34px; }
.post-body .faq-block details {
  border: 1px solid var(--line-light); border-radius: var(--radius);
  background: var(--kagoj-card);
}
.post-body .faq-block summary {
  cursor: pointer; list-style: none; padding: 16px 20px;
  font-weight: 600; font-size: 1rem;
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
}
.post-body .faq-block summary::-webkit-details-marker { display: none; }
.post-body .faq-block summary::after { content: "+"; font-family: var(--f-mono); color: var(--gada); }
.post-body .faq-block details[open] summary::after { content: ", "; }
.post-body .faq-block details > div { padding: 0 20px 18px; color: var(--dhoa-dark); font-size: .97rem; }

/* ---------------------------------------------------- next step */
.post-body .nextstep {
  background: var(--nil); color: #fff;
  border-radius: var(--radius); padding: 26px 28px; margin: 38px 0 8px;
}
.post-body .nextstep h2 { color: #fff; margin-top: 0 !important; font-size: 1.25rem !important; }
.post-body .nextstep p { color: var(--dhoa); }
.post-body .nextstep a { color: #fff; }
.post-body .nextstep .btn { margin-top: 8px; }

@media (max-width: 620px) {
  .post-body figure.fig { margin: 26px -4px; }
  .post-body .tldr, .toc { padding: 18px 18px 20px; }
  .fig-steps > div { padding: 14px 16px; }
}

/* key-points figure, built from a post's own numbered items */
.fig-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-light); }
.fig-points > div { background: var(--kagoj-card); padding: 13px 16px; display: flex; gap: 12px; align-items: baseline; }
.fig-points b { font-family: var(--f-mono); font-size: .78rem; color: var(--gada); flex: none; }
.fig-points span { font-size: .92rem; line-height: 1.45; }
@media (max-width: 620px) { .fig-points { grid-template-columns: 1fr; } }

/* blog moved out of the primary nav; it gets a proper block in the footer */
.foot-blog {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 44px;
}
.foot-blog h3 { color: #fff; font-size: 1.15rem; margin-bottom: 6px; }
.foot-blog p { color: var(--dhoa); font-size: .94rem; margin: 0; max-width: 62ch; }
@media (max-width: 620px) { .foot-blog { padding: 20px; } .foot-blog .btn { width: 100%; text-align: center; } }

/* Touch targets.
   A mobile audit found 14 links under 32px tall, mostly in the footer. The
   guidance is 44px; 44 would space the footer out absurdly, so the rule here
   pads the hit area without moving anything visually: the link keeps its size,
   the tappable box grows around it. */
@media (pointer: coarse) {
  .site-foot a,
  .toc a,
  .gd-jump a,
  .post-terms a,
  .rel-card,
  .term-list a { position: relative; }
  .site-foot ul a,
  .toc li a,
  .post-terms a,
  .term-list a {
    display: inline-block;
    padding-block: 7px;      /* 2 x 7 + ~18px line box = 32px+ */
    min-height: 24px;
  }
  .site-foot ul { gap: 2px; }
  /* the legal row and social icons sit closer together than anything else */
  .site-foot .foot-legal a, .site-foot .byline a { padding-block: 9px; }
  /* phone and mail links are written inline in copy and carry no class */
  a[href^="tel:"], a[href^="mailto:"] { display: inline-block; padding-block: 6px; }
}

/* ---------------------------------------------- brand mark */
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-mark { width: 1.05em; height: 1.05em; flex: none; color: var(--gada); }
.site-head .brand-mark { color: var(--gada); }
.gate-mark .brand-mark { width: .95em; height: .95em; color: var(--gada); margin-right: 7px; vertical-align: -2px; }
.foot-brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: #fff; text-decoration: none;
  font-family: var(--f-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: -.02em; margin-bottom: 12px;
}
.foot-brand b { color: var(--gada-bright); font-weight: 700; }
.foot-brand .brand-mark { color: var(--gada-bright); }

/* ---------------------------------------------- payment band, page bottom */
/* A shade lighter than the footer so the strip reads as a closing note rather
   than another column, without introducing a new colour. */
.pay-band {
  background: #17181D;
  border-top: 1px solid var(--line-dark);
  padding: 26px 0 30px;
}
.pay-band .pay-strip {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  margin-bottom: 0;
  padding: 16px 20px 18px;
}
.pay-band .pay-strip-h { color: var(--dhoa); }
@media (max-width: 720px) { .pay-band { padding: 20px 0 24px; } }

/* Rate labels.
   A bare "৳3,000 / কাজ" on a page that also sells courses reads as a price.
   The label above it says whose money it is, every time the number appears. */
.gd-role-rate { display: flex; flex-direction: column; gap: 2px; }
.gd-rate-label {
  font-family: var(--f-bn); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--shobuj);
}
.gd-role-rate .mono { font-size: .98rem; color: var(--ink); font-weight: 600; }
.gd-role-rate .mono em { font-style: normal; font-size: .76rem; color: #6B675C; font-weight: 400; }
.gd-rate-note {
  background: var(--shobuj-soft); color: #0B5C48;
  border-radius: var(--radius); padding: 13px 18px;
  font-size: .94rem; margin: 18px 0 34px; max-width: 78ch;
}
.gd-rate-note strong { color: #094A3A; }

/* ---------------------------------------------- article + contents rail */
/* The contents list used to sit between the headline and the first sentence.
   It now runs alongside as a sticky column, so the most valuable space on the
   page goes back to the article and the list stays reachable the whole way
   down. Below 1080px there is no room for a rail, so it collapses back inline
   as a compact summary the reader can open. */
.post-grid {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}
.post-grid .post-body { max-width: 40rem; }
.post-rail { position: sticky; top: 92px; }
.post-rail-inner { max-height: calc(100vh - 130px); overflow-y: auto; padding-right: 6px; }
.post-rail .toc {
  background: none; border: 0; border-left: 2px solid var(--line-light);
  border-radius: 0; padding: 0 0 0 16px; margin: 0;
}
.post-rail .toc-h { margin-bottom: 14px !important; }
.post-rail .toc ol { list-style: none; padding: 0; gap: 0; }
.post-rail .toc li { margin: 0; }
.post-rail .toc a {
  display: block; padding: 7px 0; font-size: .89rem; line-height: 1.4;
  color: var(--dhoa-dark); border-left: 2px solid transparent; margin-left: -18px; padding-left: 16px;
  transition: color .15s ease, border-color .15s ease;
}
.post-rail .toc a:hover { color: var(--ink); text-decoration: none; }
.post-rail .toc a.is-here { color: var(--gada); border-left-color: var(--gada); font-weight: 600; }
.post-body h2 { scroll-margin-top: 88px; }

@media (max-width: 1080px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 760px; margin-inline: auto; }
  .post-rail { position: static; margin-bottom: 30px; }
  .post-rail-inner { max-height: none; overflow: visible; }
  .post-rail .toc {
    border: 1px solid var(--line-light); border-left: 3px solid var(--gada);
    border-radius: var(--radius); padding: 18px 22px; background: var(--kagoj-card);
  }
  .post-rail .toc a { margin-left: 0; padding-left: 0; border-left: 0; }
  .post-rail .toc a.is-here { border-left: 0; }
}

/* ---------------------------------------------- blog index */
/* Every article has a drawn cover and none of them were shown here, which is
   where a reader actually decides what to open. The first card on page one is
   wider so the page has a starting point instead of a uniform wall. */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.bcard {
  display: flex; flex-direction: column;
  background: var(--kagoj-card);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.bcard:hover { border-color: var(--gada); transform: translateY(-2px); }
.bcard-thumb { display: block; aspect-ratio: 1200/630; background: var(--nil); overflow: hidden; }
.bcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcard-body { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 22px; }
.bcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .76rem; color: var(--dhoa-dark); }
.bcard-meta b { color: var(--gada); font-weight: 700; }
.bcard-meta span { font-family: var(--f-mono); }
.bcard strong { font-size: 1.02rem; font-weight: 700; line-height: 1.38; }
.bcard-dek { font-size: .9rem; color: var(--dhoa-dark); line-height: 1.55; }

/* the lead card spans the row and lays out side by side */
.bcard-lead { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.bcard-lead .bcard-thumb { flex: 0 0 54%; aspect-ratio: auto; }
.bcard-lead .bcard-body { justify-content: center; padding: 34px 38px; gap: 12px; }
.bcard-lead strong { font-size: 1.6rem; line-height: 1.3; }
.bcard-lead .bcard-dek { font-size: 1rem; }

.blog-pager { margin-top: 44px; }
.blog-pager .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-pager .page-numbers {
  display: inline-block; min-width: 42px; text-align: center;
  padding: 9px 14px; border: 1px solid var(--line-light); border-radius: var(--radius);
  background: var(--kagoj-card); color: var(--ink); text-decoration: none;
  font-family: var(--f-mono); font-size: .88rem;
}
.blog-pager .page-numbers:hover { border-color: var(--gada); color: var(--gada); }
.blog-pager .page-numbers.current { background: var(--nil); color: #fff; border-color: var(--nil); }
.blog-pager .page-numbers.dots { border-color: transparent; background: none; }

@media (max-width: 1000px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .bcard-lead { flex-direction: column; }
  .bcard-lead .bcard-thumb { flex: none; aspect-ratio: 1200/630; }
  .bcard-lead .bcard-body { padding: 22px 22px 26px; }
  .bcard-lead strong { font-size: 1.3rem; }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Hero facts.
   The secondary hero link says "no, show me the price first". That names the
   visitor's first question and then asks them to click for the answer. This
   settles the three things a beginner needs before deciding to keep reading:
   how much, is it recurring, and can I pay the way I actually pay. */
.hero-facts {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 18px; margin-top: 20px;
  font-size: .9rem; color: var(--dhoa);
}
.hero-facts span { display: inline-flex; align-items: center; gap: 8px; }
.hero-facts span + span::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--line-dark); margin-right: 10px;
}
.hero-facts b { color: #fff; font-family: var(--f-mono); font-size: 1rem; }
@media (max-width: 620px) {
  .hero-facts { gap: 6px 12px; font-size: .84rem; }
  .hero-facts span + span::before { margin-right: 6px; }
}

/* ============================================================
   Brand kit page
   Swatches and the mark render from the live tokens and the live SVG rather
   than pictures of them, so the page cannot drift from the site it documents.
   ============================================================ */
.bk-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
.bk-logo {
  border: 1px solid var(--line-light); border-radius: var(--radius);
  padding: 26px 24px 30px; display: flex; flex-direction: column; gap: 20px;
  min-height: 178px; justify-content: space-between;
}
.bk-on-light { background: var(--kagoj-card); }
.bk-on-dark { background: var(--nil); border-color: var(--line-dark); }
.bk-cap { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--dhoa-dark); }
.bk-on-dark .bk-cap { color: var(--dhoa); }
.bk-lockup { display: inline-flex; align-items: center; gap: 11px; font-family: var(--f-display); font-weight: 700; font-size: 1.7rem; letter-spacing: -.025em; }
.bk-lockup .brand-mark { width: 1.05em; height: 1.05em; color: var(--gada); }
.bk-lockup b { font-weight: 700; }
.bk-lockup i { font-style: normal; color: var(--gada); }
.bk-on-dark .bk-lockup { color: #fff; }
.bk-on-dark .bk-lockup .brand-mark, .bk-on-dark .bk-lockup i { color: var(--gada-bright); }
.bk-sizes { display: flex; align-items: flex-end; gap: 20px; }

.bk-rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.bk-do, .bk-dont { border: 1px solid var(--line-light); border-radius: var(--radius); background: var(--kagoj-card); padding: 24px 26px 26px; }
.bk-do { border-left: 3px solid var(--shobuj); }
.bk-dont { border-left: 3px solid #B4541F; }
.bk-do h3, .bk-dont h3 { font-size: 1.02rem; margin-bottom: 12px; }
.bk-do ul, .bk-dont ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.bk-do li, .bk-dont li { font-size: .94rem; color: var(--dhoa-dark); }

.bk-cgroup { margin-bottom: 34px; }
.bk-cgroup-h { margin-bottom: 14px; }
.bk-cgroup-h h3 { font-size: 1.05rem; margin-bottom: 4px; }
.bk-cgroup-h p { font-size: .9rem; color: #4A5273; margin: 0; }
.bk-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bk-swatch {
  background: var(--kagoj-card); border: 1px solid var(--line-light);
  border-radius: var(--radius); padding: 0 0 16px; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
}
.bk-chip { display: block; height: 74px; border-bottom: 1px solid transparent; }
.bk-chip.is-light { border-bottom-color: var(--line-light); }
.bk-swatch b { font-size: .92rem; padding: 13px 16px 0; }
.bk-swatch code { font-size: .78rem; color: var(--gada); padding: 0 16px; }
.bk-swatch span { font-size: .82rem; color: var(--dhoa-dark); padding: 2px 16px 0; }

.bk-type { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bk-face { background: var(--kagoj-card); border: 1px solid var(--line-light); border-radius: var(--radius); padding: 24px 26px 28px; }
.bk-face-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.bk-face-h b { font-size: 1.05rem; }
.bk-face-h span { font-size: .72rem; color: var(--dhoa-dark); }
.bk-face-role { font-size: .84rem; color: var(--gada); margin-bottom: 18px; }
.bk-sample { font-size: 1.5rem; line-height: 1.4; margin-bottom: 16px; border-top: 1px solid var(--line-light); padding-top: 18px; }
.bk-face-note { font-size: .88rem; color: var(--dhoa-dark); margin: 0; }

.bk-files { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bk-file {
  background: var(--nil-soft); border: 1px solid var(--line-dark); border-radius: var(--radius);
  padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 5px;
  text-decoration: none; transition: border-color .18s ease;
}
.bk-file:hover { border-color: var(--gada-bright); }
.bk-file b { color: #fff; font-size: .98rem; }
.bk-file span { color: var(--dhoa); font-size: .86rem; }
.bk-file code { color: var(--gada-bright); font-size: .78rem; margin-top: 5px; }

@media (max-width: 980px) {
  .bk-logos, .bk-type, .bk-files { grid-template-columns: 1fr 1fr; }
  .bk-swatches { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bk-logos, .bk-type, .bk-files, .bk-rules, .bk-swatches { grid-template-columns: 1fr; }
}

/* ---------------------------------------------- new version prompt */
/* Bottom-left so it never covers the sticky buy rail on the right, and never
   the messenger bubble. Quiet enough to ignore, clear enough to act on. */
.aib-update {
  position: fixed; left: 20px; bottom: 20px; z-index: 90;
  max-width: 370px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--nil-soft); color: #fff;
  border: 1px solid var(--line-dark);
  border-left: 3px solid var(--gada-bright);
  border-radius: var(--radius);
  padding: 18px 20px 18px 19px;
  box-shadow: 0 18px 50px -18px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(14px);
  transition: opacity .26s ease, transform .26s ease;
}
.aib-update.is-in { opacity: 1; transform: none; }
.aib-update-body { display: flex; flex-direction: column; gap: 5px; }
.aib-update-body b { font-size: 1rem; font-weight: 700; }
.aib-update-body span { font-size: .9rem; color: var(--dhoa); line-height: 1.5; }
.aib-update-act { display: flex; gap: 8px; align-items: center; }
.aib-update button {
  font-family: var(--f-bn); font-size: .9rem; font-weight: 600;
  border-radius: var(--radius); padding: 9px 16px; cursor: pointer;
  border: 1px solid transparent; transition: background .16s ease, border-color .16s ease;
}
.aib-update-go { background: var(--gada); color: #fff; }
.aib-update-go:hover { background: var(--gada-bright); }
.aib-update-go[disabled] { opacity: .7; cursor: default; }
.aib-update-no { background: none; color: var(--dhoa); border-color: var(--line-dark); }
.aib-update-no:hover { color: #fff; border-color: var(--dhoa-dark); }
@media (max-width: 620px) {
  .aib-update { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aib-update { transition: none; }
}

/* ============================================================
   Breaking the page rhythm
   Nine sections opened with the same chip, heading, muted subhead and grid.
   That metronome is what makes a page read as generated. These are the
   alternatives it can reach for instead.
   ============================================================ */

/* Asymmetric: heading holds the left column and stays put while the content
   scrolls past it. No chip, and the heading sits at editorial size rather than
   hero size, which gives the page a second voice. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: start;
}
.split-aside { position: sticky; top: 104px; }
.split-aside h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 800; margin-bottom: 16px; }
.split-aside .muted { font-size: 1.02rem; }
.split-note {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line-light);
  font-size: .88rem; color: var(--shobuj); font-weight: 600;
}

/* A ledger, not cards. Hairline rows, a figure in the right margin: it reads as
   an index of work rather than six identical boxes, and it needs no imagery. */
.ledger { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ledger li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--line-light);
}
.ledger li:last-child { border-bottom: 1px solid var(--line-light); }
.ledger-n { font-size: .82rem; color: var(--gada); padding-top: 3px; }
.ledger-b { display: flex; flex-direction: column; gap: 5px; }
.ledger-b b { font-family: var(--f-display); font-size: 1.22rem; font-weight: 700; }
.ledger-b span { font-size: .95rem; color: var(--dhoa-dark); line-height: 1.55; }
.ledger-r { font-size: 1.02rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ledger-r em { font-style: normal; font-size: .76rem; color: var(--dhoa-dark); font-weight: 400; margin-left: 4px; }

/* the hero facts line belongs on the hero's centre axis */
.hero-facts { justify-content: center; }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .split-aside { position: static; }
  .ledger li { grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 18px 0; }
  .ledger-r { grid-column: 2; margin-top: 4px; }
}

/* brand kit: the type scale, written out */
.bk-scale { margin-top: 28px; }
.bk-scale h3 { font-size: 1.05rem; margin-bottom: 12px; }
.bk-scale table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.bk-scale th {
  text-align: left; font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: .06em; color: var(--dhoa-dark); font-weight: 600;
  padding: 0 14px 8px 0; border-bottom: 1px solid var(--line-light);
}
.bk-scale td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line-light); vertical-align: top; }
.bk-scale tr:last-child td { border-bottom: 0; }
.bk-scale .mono { font-family: var(--f-mono); font-size: .86rem; }
@media (max-width: 620px) { .bk-scale { overflow-x: auto; } .bk-scale table { min-width: 460px; } }

/* brand kit: which word to reach for */
.bk-words { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line-light); }
.bk-words h3 { font-size: 1.05rem; }
.bk-words > .muted { margin: 6px 0 18px; font-size: .95rem; }
.bk-wgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; }
.bk-wcol h4 {
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em;
  color: var(--dhoa-dark); font-weight: 600; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-light);
}
.bk-wrow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: baseline; padding: 6px 0; font-size: .94rem; }
.bk-wno { color: var(--dhoa-dark); text-decoration: line-through; text-decoration-thickness: 1px; }
.bk-warr { color: var(--line); font-size: .8rem; }
.bk-wyes { color: var(--ink); font-weight: 600; }
.bk-keep { margin-top: 22px; padding: 14px 16px; background: var(--shobuj-soft, rgba(9,74,58,.06));
  border-radius: var(--radius); font-size: .93rem; line-height: 1.7; }
.bk-keep b { color: var(--ink); }
@media (max-width: 900px) { .bk-wgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .bk-wgrid { grid-template-columns: 1fr; gap: 20px; } }

/* ------------------------------------------------------------- problem block
   Set narrower and a size up: this is the one part of a sales page that has to
   be read as prose rather than scanned, so it gets the measure of an article,
   not the measure of a marketing section. */
.problem-band { padding-block: 64px; }
.prob { max-width: 38rem; }
.prob h2 { font-size: var(--fs-h2); font-weight: 800; margin-bottom: 20px; max-width: 20ch; }
.prob p { font-size: 1.14rem; line-height: 1.85; color: var(--ink); }
.prob p + p { margin-top: 1.05em; }
/* The cost of standing still, as a list, because three short lines land harder
   than the same three facts inside a paragraph. */
.prob-cost {
  list-style: none; padding: 0; margin: 26px 0 0;
  border-top: 1px solid var(--line-light);
}
.prob-cost li {
  position: relative; padding: 13px 0 13px 26px;
  border-bottom: 1px solid var(--line-light);
  font-size: 1.02rem; line-height: 1.6; color: var(--dhoa-dark);
}
.prob-cost li::before {
  content: ""; position: absolute; left: 4px; top: 21px;
  width: 8px; height: 2px; background: var(--gada);
}
.prob-bridge {
  margin-top: 28px; padding: 18px 20px;
  background: var(--gada-soft); border-radius: var(--radius);
  font-size: 1.06rem; line-height: 1.75;
}
@media (max-width: 720px) {
  .problem-band { padding-block: 46px; }
  .prob h2 { max-width: none; }
  .prob p { font-size: 1.08rem; }
}

/* Contents rail: h3 entries sit under their section, one step in. */
.post-rail .toc li.toc-sub a { padding-left: 26px; font-size: .88rem; color: var(--dhoa-dark); }
.post-rail .toc li.toc-sub a.is-here { color: var(--gada); }
.toc li.toc-sub { margin-left: 14px; list-style: none; }

/* ------------------------------------------------------------ admission closed
   The button keeps its size and place so the page does not reflow when
   admission reopens; only its colour and affordance change. It is a span, not a
   disabled button, because there is nothing to press. */
.btn-closed {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 14px 26px; border-radius: var(--radius);
  background: var(--line-light); color: var(--dhoa-dark);
  font-family: var(--f-display); font-weight: 700; font-size: 1rem;
  border: 1px solid var(--line); cursor: not-allowed; text-align: center;
}
.btn-closed::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--dhoa-dark); opacity: .5;
}
.band-dark .btn-closed, .aib-checkout-bar .btn-closed {
  background: rgba(255,255,255,.09); color: var(--dhoa); border-color: rgba(255,255,255,.16);
}
.aib-admission-bar {
  background: var(--gada-soft); border-bottom: 1px solid var(--line-light);
  padding: 11px 0; font-size: .96rem; line-height: 1.55; text-align: center;
}
.aib-admission-bar b { color: var(--gada); margin-right: 6px; }
@media (max-width: 620px) { .aib-admission-bar { font-size: .9rem; text-align: left; } }