/* ═══════════════════════════════════════════════════════════════════════════
   KEELAMBI PROGRAMME PAGES — /programs/<slug>/ (SELCO = instance #1).

   Layers on kb.css (loads FIRST; carries tokens, buttons, the bilingual
   contract and the type system). Page-family-scoped: every selector is .pg-*
   or gated on body[data-kb-page="program"]. kb.css is NEVER edited from here.

   ── GOVERNED BY "The Restraint Standard" (CLAUDE.md §59) ──────────────────
   R1  hero carries exactly 5 elements: lockup-eyebrow, headline, one
       supporting line, primary action, secondary action. Nothing else.
   R3  photography is CONTAINED — the premium signal is the margin, not the
       bleed. This page has NO full-bleed image; its media sits on the canvas.
   R4  one accent per viewport: hero+check+close = saffron · money = navy.
       Section grounds alternate so no two accents ever share a screen.
   R5  section rhythm is clamp(72px,12vh,160px); the machine keeps its clear.
   R6  display type is capped at 64px. The ARRIVAL step (96px) belongs to the
       site's homepage, not to a campaign page — deliberately NOT used here.
   R7  no decorative layer exists in this file. No glow, no vignette, no
       atmospheric gradient, no gradient text. Scrims are legibility, not mood.
   R8  Kannada is never overridden; every budget is measured on the KN string.

   ── BEHAVIOURAL CONTRACT (program.js) — do not rename ─────────────────────
   .pg-ans · .pg-play.off · .pg-res + .pg-res.on · html.kb-js .pg-pending(.on)
   .pg-bar + .pg-bar.show · div.pg-bar (tag is load-bearing for analytics)
   [data-pg-wa] [data-pg-msg] [data-pg-amt] [data-pg-cta]
   RULE (bilingual specificity trap): never a `display` rule on a bare span.
   ═══════════════════════════════════════════════════════════════════════════ */

body[data-kb-page="program"]{
  /* page-private tokens. --pg-stone is the house warm off-white named in
     CLAUDE.md "Design Identity"; kb.css simply never exposed it as a token. */
  --pg-stone:#F8F6F1;
  --pg-dark:#0E1116;
  --pg-dark-2:#171B22;
  --pg-hair:rgba(0,0,0,.10);
  --pg-hair-dark:rgba(255,255,255,.14);
  --pg-gut:clamp(20px,4vw,56px);
  --pg-rhythm:clamp(72px,12vh,160px);
}

/* 44px touch targets for the shared chrome on this page family
   (kb.css ships 38px segments; same page-scoped upgrade as doti/field/srm) */
body[data-kb-page="program"] .kb-langseg{height:44px;padding-inline:14px}
/* The header WhatsApp button ships as a saturated green FILLED pill. On a phone
   it out-shouted the saffron hero CTA — the loudest thing above the fold was a
   link OUT of the funnel — and it put green + saffron + maroon in one viewport,
   which R4 forbids (green is reserved for money and success, never for a comms
   channel). Ghosted: same target, same prefill, same 44px, quieter voice. */
body[data-kb-page="program"] .pg-bar-wa{min-height:44px;padding:9px 16px;font-size:13.5px;
  background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
body[data-kb-page="program"] .pg-bar-wa:hover{border-color:var(--ink);background:rgba(0,0,0,.03)}

/* ── LAYOUT: release the 840px article column ──────────────────────────────
   kb.css caps .kb-wrap at 840px, which is correct for a PDP but is exactly
   what made this page read as documentation. Page-scoped only: sections
   become full-width colour bands, each with its own inner measure. The
   footer keeps a wrap but widens to match. Nothing outside this page moves. */
body[data-kb-page="program"] #main.kb-wrap{max-width:none;padding-inline:0}
body[data-kb-page="program"] .kb-foot .kb-wrap{max-width:1200px}
/* the dark close is full-bleed; kb.css's .kb-foot{margin-top:56px} showed as a
   white sliver between the close and the maroon footer. Butt them together. */
body[data-kb-page="program"] .kb-foot{margin-top:0}
/* Reset kb.css's hairline + margin ONLY. Do NOT zero padding here: this
   selector is (0,2,1) and would out-specify .pg-sec (0,1,0), silently
   flattening every section's rhythm to nothing. kb.css's own
   `.kb-sec{padding:34px 0}` is (0,1,0) and loses to .pg-sec by source order. */
body[data-kb-page="program"] .kb-sec{border-top:0;margin-top:0}

.pg-in{max-width:1200px;margin-inline:auto;padding-inline:var(--pg-gut)}
.pg-sec{padding-block:var(--pg-rhythm)}
.pg-sec--stone{background:var(--pg-stone)}
.pg-sec--dark{background:var(--pg-dark);color:rgba(255,255,255,.92)}
.pg-sec--dark .kb-statement,.pg-sec--dark .pg-display{color:#fff}
.pg-sec--dark .kb-eyebrow{color:var(--saffron)}
.pg-sec--dark .kb-sub{color:rgba(255,255,255,.74)}

/* section opener: eyebrow + statement + one line, with a real measure */
.pg-head{max-width:62ch}
/* §4 spans the full band, so a 62ch head left a large empty quadrant beside the
   biggest type in the section. Pair the head with its reassurance line instead. */
@media(min-width:900px){
  .pg-head--split{max-width:none;display:grid;
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:clamp(30px,4vw,64px);align-items:end}
  .pg-head--split .kb-sub{margin-top:0;align-self:end;padding-bottom:4px}
}
.pg-head .kb-statement{margin-top:12px}
.pg-head .kb-sub{margin-top:14px;font-size:clamp(15.5px,1.5vw,18px);line-height:1.6}

/* ── HERO ── R1: exactly five elements. R3: contained media, generous margin.
     Desktop is a split panel (the tesla.com flagship pattern R3 cites);
     mobile leads with the photograph, because R3 forbids opening a section
     with a text block when a real photograph of its subject exists. ── */
.pg-hero{padding-block:clamp(26px,4vw,64px) var(--pg-rhythm)}
.pg-hero-grid{display:grid;gap:clamp(26px,3.4vw,48px)}
@media(min-width:1024px){
  .pg-hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:clamp(40px,5vw,84px);align-items:center}
  .pg-hero{padding-block:clamp(40px,5vw,80px) var(--pg-rhythm)}
}
.pg-hero-copy{min-width:0;order:2}
.pg-photo{order:1;margin:0;min-width:0}
@media(min-width:1024px){.pg-hero-copy{order:1}.pg-photo{order:2}}

/* element 1 — the partnership lockup, doing the eyebrow's job.
   R1 counts this as ONE element; R16 keeps the partner mark undistorted. */
.pg-lockup{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.pg-lockup img{width:auto;height:44px;flex:0 0 auto}
/* nowrap + min-width:0 keeps the mark and the words on ONE line at 360px. With
   flex-wrap:wrap the text dropped below the logo and the divider rule was left
   hanging at the start of a line with nothing to divide. */
.pg-lockup-txt{display:block;min-width:0;padding-left:12px;border-left:1px solid var(--pg-hair)}
html[lang="kn"] .pg-lockup-txt{line-height:1.45}

/* element 2 — headline. Capped at the R6 display step (64px), NOT the
   96px arrival step, which belongs to the homepage. */
.pg-display{font-family:var(--f-display);font-weight:400;line-height:.96;
  letter-spacing:.02em;color:var(--ink);font-size:clamp(38px,5vw,64px);
  margin-top:clamp(14px,1.8vw,22px);text-wrap:balance}
html[lang="kn"] .pg-display{font-family:var(--f-kn);font-weight:700;
  line-height:1.28;letter-spacing:0;font-size:clamp(28px,3.6vw,46px)}

/* element 3 — one supporting line */
.pg-hero-sub{margin-top:16px;max-width:46ch;color:var(--ink-2);
  font-size:clamp(16px,1.6vw,19px);line-height:1.58}

/* elements 4 + 5 — one filled action, one text link (the low-commitment path) */
.pg-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;
  margin-top:clamp(24px,3vw,34px)}
.pg-hero-cta .kb-btn-pri{min-height:56px;padding:14px 36px;font-size:16.5px}
.pg-hero-alt{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-weight:700;font-size:15px;color:var(--brand-maroon);
  border-bottom:1.5px solid rgba(120,18,22,.32)}
.pg-hero-alt:hover{border-bottom-color:var(--brand-maroon)}
/* the CTA qualifier. Deliberately the quietest type on the screen: it governs
   the offer, it does not sell it. */
.pg-hero-fine{margin-top:14px;max-width:44ch;font-size:13px;line-height:1.5;color:var(--ink-3,#9B958C)}

/* the photograph — contained, on the canvas, never bled to the edge (R3).
   height:100% ON THE <picture> IS LOAD-BEARING: <picture> is a plain inline
   wrapper with auto height, so the img's height:100% resolved against `auto`
   and collapsed to the intrinsic 16:9 — the 5:6 frame then rendered as an
   empty grey plate with the photograph sitting in its top third. */
.pg-photo picture{display:block;width:100%;height:100%}
/* hero video sits in the SAME contained frame as the photograph it replaced —
   16:9 source, cover-cropped into the 4:3 / 5:4 plate, machine stays centred. */
.pg-media{position:relative}
.pg-hero-vid{display:block;width:100%;height:100%;object-fit:cover;
  border-radius:clamp(14px,1.6vw,22px);background:#1E2A1C}

/* tap-to-play control — shown for Data Saver, reduced-motion and no-IO paths.
   .off is added the moment playback starts (behavioural class, do not rename). */
.pg-vidplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--saffron);color:#1A1208;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.55);transition:transform .2s var(--ease)}
.pg-vidplay:hover{transform:translate(-50%,-50%) scale(1.06)}
.pg-vidplay.off{display:none}
.pg-photo img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:6% center;border-radius:clamp(14px,1.6vw,22px)}
/* Aspect is chosen by the SOURCE, not by taste. In exp-spray the two farmers
   occupy x=0..526 of a 1600px frame and the red machine x=526..1095; a 5:4 crop
   opens a 1117px window, which is the shallowest crop that holds BOTH the people
   and the whole machine. Anything taller drops one or the other. */
.pg-photo{aspect-ratio:4/3;overflow:hidden;border-radius:clamp(14px,1.6vw,22px);
  /* first paint on a slow connection is this colour, not the media — a
     plantation green reads as "arriving", a light grey reads as broken */
  background:#1E2A1C}
/* MOBILE 4:3, DESKTOP NATIVE 16:9. On a phone the uncropped 16:9 became a
   242px letterbox and the machine stopped being dominant, so mobile takes a
   CENTRED 4:3 crop — it keeps the central 75% of the frame, and the machine's
   horizontal centroid stays between 0.42 and 0.65 for the whole trimmed clip,
   so it can never drift out the way it did in the old 5:4 crop. Desktop has
   the room to show the frame exactly as shot. */
@media(min-width:1024px){.pg-photo{aspect-ratio:16/9}}
/* NATIVE 16:9 AT EVERY WIDTH — deliberately no 5:4 crop. The earlier crop is
   exactly what pushed the machine out of frame mid-loop and got the video
   rejected. Uncropped, every frame is framed by the videographer. */
.pg-photo figcaption{display:none}

/* ── §2 FINANCIAL BREAKDOWN — one system, four parts. ────────────────────
     NOT four cards. The cells share a single hairline grid so they read as
     components of ONE shared investment rather than four unrelated boxes:
     the rules belong to the matrix, not to the cells. Counters are drawn by
     CSS from DOM order, so a claim-gated cell that is `hidden` neither renders
     nor consumes a number — the sequence stays 01,02,03 today and becomes
     01..04 the moment contributors.govt is confirmed. Navy is the only accent
     in this viewport (R4: navy carries data and credibility). ── */
.pg-mtx{list-style:none;counter-reset:mtx;margin:0;padding:0;display:grid;
  border-top:2px solid var(--navy);border-bottom:1px solid var(--pg-hair)}
@media(min-width:640px){.pg-mtx{grid-template-columns:1fr 1fr}}
.pg-mtx-cell{counter-increment:mtx;position:relative;display:grid;
  align-content:start;gap:6px;
  padding:clamp(22px,2.6vw,32px) clamp(18px,2vw,28px) clamp(24px,2.8vw,34px);
  border-bottom:1px solid var(--pg-hair)}
/* the shared vertical rule between columns — drawn once, on the second cell of
   each row, so it never doubles up and never hangs off an odd last row */
@media(min-width:640px){
  .pg-mtx-cell:nth-child(2n){border-left:1px solid var(--pg-hair)}
  .pg-mtx-cell{padding-inline:clamp(20px,2.2vw,30px)}
  .pg-mtx-cell:nth-child(2n+1){padding-left:0}
}
/* [hidden] IS LOAD-BEARING HERE. The UA sets [hidden]{display:none}, but the
   author rule above declares display:grid and wins — which silently rendered
   the claim-gated Government-schemes pillar on a live page. Never remove. */
.pg-mtx-cell[hidden]{display:none}
.pg-mtx-cell::before{content:counter(mtx,decimal-leading-zero);
  font-family:var(--f-display);font-weight:400;letter-spacing:.03em;line-height:1;
  font-size:clamp(19px,1.9vw,24px);color:var(--navy);opacity:.55;margin-bottom:2px}
.pg-mtx-cell > b{font-size:clamp(17px,1.7vw,20px);font-weight:700;
  letter-spacing:-.014em;line-height:1.25;color:var(--ink)}
.pg-mtx-note{font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:38ch}
/* the qualitative stand-in for a figure. This is what stops a null amount from
   reading as a broken or empty slot — the farmer sees a state, not a gap. */
.pg-mtx-state{margin-top:4px;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:var(--navy)}
.pg-amt{display:none}
.pg-amt[hidden]{display:none}

/* the trust marker. A rule and a label — deliberately not a card (R7). */
.pg-promise{margin-top:clamp(26px,3vw,36px);padding-left:16px;
  border-left:2px solid var(--navy);font-size:15px;line-height:1.6;
  color:var(--ink-2);max-width:56ch}
.pg-promise-lab{display:block;margin-bottom:5px;font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
html[lang="kn"] .pg-promise-lab{letter-spacing:0;text-transform:none}

@media(min-width:1024px){
  /* three children, two columns. The head is short and the matrix is tall, so
     the trust marker takes the space the head leaves in column 1 instead of
     stranding ~460px of empty stone there. DOM order stays head -> matrix ->
     marker, which is also the correct reading order when this stacks. */
  .pg-money-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:clamp(40px,5vw,80px);row-gap:clamp(28px,3vw,40px);align-items:start}
  .pg-money-grid > .pg-head{grid-column:1;grid-row:1}
  .pg-money-grid > .kb-rev:not(.pg-promise){grid-column:2;grid-row:1 / span 2}
  .pg-money-grid > .pg-promise{grid-column:1;grid-row:2;margin-top:0;align-self:start}
}

/* ── §3b WHO WE ARE LOOKING FOR — five farmer profiles. ──────────────────
   Was a hairline index (2px top rule + a border under every row): correct,
   but it read as a specification sheet. Now five QUIET SURFACES — white cells
   on the stone ground, the exact move .pg-decide already makes on this page,
   so this is the system's own vocabulary, not an import. No border, no
   shadow, no icon, no hover: remove the surfaces mentally and the hierarchy
   (numeral → name → line) still works, which is the test that keeps this on
   the right side of "card soup" (R7).
   Desktop: 01–04 as a 2×2 rhythm; 05 spans as a closing band whose internal
   5fr/7fr split echoes the page grid — a deliberate close, not a hero card.
   The numerals are structural anchors: display face, low weight, muted ink —
   they guide the 01→05 scan without competing with the names.
   MARKUP CONTRACT: same <ol>/<li><b><span> as before — this block is
   restyle-only. (And the §0E note stands: this block sits between the §2 and
   §3 markers; never slice marker-to-marker across it.) ── */
.pg-crit{list-style:none;counter-reset:pc;margin:clamp(30px,3.8vw,48px) 0 0;padding:0;
  display:grid;gap:10px}
@media(min-width:900px){
  .pg-crit{grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px)}
  .pg-crit-row:last-child{grid-column:1 / -1;display:grid;
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:clamp(24px,3vw,48px);align-items:baseline}
  .pg-crit-row:last-child::before{grid-column:1 / -1}
  .pg-crit-row:last-child > b{margin-bottom:0}
}
.pg-crit-row{counter-increment:pc;background:var(--canvas);
  border-radius:var(--r-card);padding:clamp(18px,2.2vw,28px) clamp(18px,2.2vw,30px)}
.pg-crit-row::before{content:counter(pc,decimal-leading-zero);display:block;
  font-family:var(--f-display);font-weight:400;letter-spacing:.03em;line-height:1;
  font-size:clamp(24px,2.2vw,30px);color:rgba(29,29,31,.30);margin-bottom:10px}
.pg-crit-row > b{display:block;font-size:clamp(17px,1.8vw,20px);font-weight:700;
  letter-spacing:-.014em;margin-bottom:6px}
.pg-crit-row > span{display:block;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:52ch}

/* ── §3 PILOT OVERVIEW — the founder film. ───────────────────────────────
     Dark ground so the portrait frame reads as a film still, not an embed.
     DOM order (head → player → info) IS the mobile story: hook, video,
     context, credibility. Desktop re-places the same three blocks:
     film left spanning two equal rows, head bottom-aligned in the top row,
     info top-aligned in the bottom row — so the text stack is centred on the
     video's midpoint instead of floating detached beside it. ── */
.pg-film-grid{display:grid;gap:clamp(24px,3.4vw,40px);grid-template-columns:minmax(0,1fr)}
/* mobile: the wrapper dissolves and `order` interleaves the video into the
   story — hook, video, context, credibility */
.pg-film-copy{display:contents}
.pg-film-head{order:1}
.pg-player{order:2}
.pg-film-info{order:3}
@media(min-width:900px){
  .pg-film-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:clamp(40px,5vw,80px);align-items:center}
  /* desktop: the wrapper becomes a real block again, so the WHOLE text stack
     centres on the video midpoint — not just the seam between its halves */
  .pg-film-copy{display:block;grid-column:2;grid-row:1;align-self:center}
  .pg-film-head{margin-bottom:20px}
  .pg-player{grid-column:1;grid-row:1}
}
.pg-player{position:relative;width:100%;max-width:380px;margin-inline:auto;
  border-radius:20px;overflow:hidden;background:#000;
  /* a black drop-shadow on a near-black ground reads as a grey halo, not depth.
     A hairline ring frames the film without inventing an atmospheric layer (R7). */
  box-shadow:0 0 0 1px rgba(255,255,255,.12)}
@media(min-width:900px){.pg-player{margin-inline:0;max-width:none}}
.pg-player video{display:block;width:100%;height:auto;aspect-ratio:464/830;
  object-fit:cover;background:#111}
/* the play affordance. The scrim exists so the control stays legible over an
   unknown frame — legibility, not atmosphere (R7). Focus ring is white: the
   global saffron :focus-visible from kb.css is invisible ON a saffron disc. */
.pg-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(to top,rgba(0,0,0,.42),rgba(0,0,0,.02) 46%);
  border:0;cursor:pointer;color:#fff}
.pg-play svg{width:76px;height:76px;padding:25px;box-sizing:border-box;border-radius:50%;
  background:var(--saffron);color:#1A1208;box-shadow:0 12px 34px -8px rgba(0,0,0,.6);
  transition:transform .2s var(--ease)}
.pg-play:hover svg{transform:scale(1.06)}
.pg-play:active svg{transform:scale(.97)}
.pg-play:focus-visible{outline:none}
.pg-play:focus-visible svg{outline:2px solid #fff;outline-offset:4px}
.pg-play.off{display:none}
.pg-film-meta{margin-top:16px;display:inline-flex;align-items:center;gap:12px;
  font-size:13px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.66);
  font-variant-numeric:tabular-nums}
.pg-film-meta i{font-style:normal;width:5px;height:5px;border-radius:50%;
  background:var(--saffron);flex:0 0 auto}
.pg-partner{display:flex;align-items:center;gap:14px;margin-top:clamp(20px,2.4vw,28px);
  padding-top:20px;border-top:1px solid var(--pg-hair-dark)}
.pg-partner-lab{font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}
html[lang="kn"] .pg-partner-lab{letter-spacing:0;text-transform:none}
.pg-partner img{width:auto;height:52px;background:#fff;border-radius:10px;padding:6px 10px}

/* ── §4 THE SELF-CHECK — the page's most important decision surface. ──────
   The 14 circumstances are INFORMATIONAL labels, not controls: a wrapping
   cluster of quiet tonal chips (stone on the white ground — the page's own
   tonal pairing, inverted from §4's white-on-stone). Not the house 980px CTA
   pill: that radius means "action" on this platform, and these do nothing.
   No hover, no selected state, no icons — they are read, never tapped. ── */
.pg-chips{list-style:none;margin:clamp(26px,3.2vw,40px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px}
.pg-chip{display:inline-flex;align-items:center;min-height:40px;
  padding:9px 16px;background:var(--pg-stone);border-radius:10px;
  font-size:14px;font-weight:600;line-height:1.35;letter-spacing:-.005em;
  color:var(--ink)}
.pg-chip--alt{background:transparent;border:1px dashed var(--line-strong);
  color:var(--ink-2);font-weight:500}
.pg-chips-note{margin-top:16px;font-size:13px;color:var(--ink-2)}

/* the question + the three consequences. Saffron marks the one committing
   answer; the other two are quiet, so "not sure" never reads as failure. */
.pg-decide{margin-top:clamp(38px,4.6vw,64px);background:var(--pg-stone);
  border-radius:clamp(16px,2vw,24px);padding:clamp(24px,3.4vw,48px)}
.pg-sec--stone .pg-decide{background:var(--canvas)}
.pg-q{font-family:var(--f-display);font-weight:400;letter-spacing:.02em;
  line-height:1;font-size:clamp(26px,2.8vw,32px);color:var(--ink)}
html[lang="kn"] .pg-q{font-family:var(--f-kn);font-weight:700;letter-spacing:0;
  line-height:1.3;font-size:clamp(20px,2.2vw,26px)}
.pg-q-sub{margin-top:10px;font-size:15px;color:var(--ink-2)}
.pg-answers{display:grid;gap:12px;margin-top:clamp(22px,2.6vw,30px)}
@media(min-width:760px){.pg-answers{grid-template-columns:repeat(3,1fr)}}
.pg-ans{position:relative;display:grid;gap:5px;text-align:left;
  min-height:76px;padding:18px 50px 18px 20px;cursor:pointer;
  font-family:inherit;background:var(--canvas);
  border:1.5px solid var(--line-strong);border-radius:16px;
  transition:border-color .16s var(--ease),background .16s var(--ease),
             transform .16s var(--ease),box-shadow .2s var(--ease)}
.pg-ans-t{font-size:17px;font-weight:700;letter-spacing:-.012em;color:var(--ink)}
.pg-ans-c{font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.pg-ans::after{content:"";position:absolute;right:20px;top:50%;
  width:9px;height:9px;border-right:2px solid var(--ink-2);
  border-bottom:2px solid var(--ink-2);transform:translateY(-50%) rotate(-45deg);
  transition:transform .18s var(--ease)}
.pg-ans:hover{transform:translateY(-2px);border-color:var(--ink)}
.pg-ans:active{transform:scale(.99)}
/* ═══ SELECTED STATE — derived from aria-pressed ONLY. ═══════════════════════
   THE BUG THIS REPLACES: .pg-ans--go used to paint the YES button saffron as a
   STATIC class — a "recommended" styling that read as a selected state. So the
   page opened with YES already lit, and after choosing another branch YES
   STAYED lit while the panel below correctly changed. The JS was never wrong:
   program.js writes aria-pressed in one place and toggles the panels from the
   same value in the same handler. Only the paint lied. Rule: nothing here may
   colour a button from a static class — the fill follows the state attribute,
   so the UI can never disagree with itself again. .pg-ans--go stays in the
   markup as an inert legacy hook; it must never regain a background.
   Selection is not colour alone: the fill changes AND the chevron rotates to
   point down at the panel the choice revealed (state, not decoration — R7),
   AND aria-pressed carries it for assistive tech. ═════════════════════════ */
.pg-ans[aria-pressed="true"]{background:var(--saffron);border-color:var(--saffron)}
.pg-ans[aria-pressed="true"] .pg-ans-t{color:#1A1208}
.pg-ans[aria-pressed="true"] .pg-ans-c{color:rgba(26,18,8,.78)}
.pg-ans[aria-pressed="true"]::after{border-color:#1A1208;
  transform:translateY(-70%) rotate(45deg)}
.pg-ans[aria-pressed="true"]:hover{box-shadow:0 16px 34px -16px rgba(255,153,51,.7)}
.pg-ans:focus-visible{outline:2px solid var(--saffron-ink);outline-offset:3px}
.pg-ans[aria-pressed="true"]:focus-visible{outline-color:#1A1208}

/* the three-option decision rows (NOT SURE) and the two-option NO row.
   Icons here identify the CHANNEL — remove them and the farmer can no longer
   tell a WhatsApp action from a phone action. That is information, not
   decoration. (Restored after being consumed by a marker-slice edit — the
   second time that class of mistake has bitten this file. NEVER slice
   "from selector X to comment Y" in program.css: unrelated blocks live
   between markers.) */
.pg-opts{display:grid;gap:10px;margin-top:18px}
@media(min-width:620px){.pg-opts{grid-template-columns:repeat(3,1fr)}
  .pg-opts--two{grid-template-columns:repeat(2,1fr)}}
.pg-opt{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:12px 18px;border-radius:var(--r-pill);
  font-weight:700;font-size:15px;text-align:center;
  background:var(--canvas);color:var(--ink);border:1.5px solid var(--line-strong);
  transition:border-color .16s var(--ease),transform .16s var(--ease)}
.pg-opt:hover{border-color:var(--ink);transform:translateY(-1px)}
.pg-opt .pg-ic{flex:0 0 auto}
/* WhatsApp identity comes from the GLYPH, not a green border — the row also
   holds the saffron primary, and green never sits beside saffron (R4; the
   same call made for the header WhatsApp in this file's own history). */
.pg-opt--wa{color:var(--ink)}
.pg-opt--go{background:var(--saffron);border-color:var(--saffron);color:#1A1208}
.pg-opt--go:hover{box-shadow:0 14px 30px -14px rgba(255,153,51,.7)}

/* result panels — hidden until program.js adds .on. Static markup so the
   load-time KN fallback pass covers them (never JS-injected bilingual DOM) */
.pg-res{display:none;margin-top:12px;padding:clamp(22px,2.6vw,30px);
  border-radius:16px;border:1.5px solid var(--line-strong);background:var(--canvas)}
.pg-res.on{display:block;animation:pgIn .4s var(--ease)}
@keyframes pgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pg-res > b{display:block;font-size:18px;letter-spacing:-.012em;line-height:1.3}
.pg-res > p{margin-top:8px;font-size:15px;color:var(--ink-2);max-width:56ch}
.pg-res .kb-btn,.pg-res .kb-triad{margin-top:18px}
/* ── PANEL SURFACES — one family, deliberately. ────────────────────────────
   The old per-state tints broke two rules at once. The green YES panel put
   green beside the saffron selected card (R4: those two accents never share a
   viewport — same reasoning that ghosted the header WhatsApp), and green
   "success" semantics nudged the panel toward reading as an approval, which
   §-policy forbids: applying is not being accepted. All three panels now share
   the choice cards' own white surface, so a selected card and its response
   read as ONE interaction unit; the state is carried by the selected button,
   and the only accent inside a panel is its saffron CTA.
   .pg-res--yes/--mid/--no remain in the markup as inert hooks. */
.pg-authority{margin-top:clamp(22px,2.6vw,30px);padding-left:14px;
  border-left:3px solid var(--navy);font-size:13.5px;color:var(--ink-2);max-width:52ch}

/* ── §5 APPLY — a journey, so the farmer knows what happens after the tap ── */
.pg-apply-grid{display:grid;gap:clamp(30px,4.5vw,64px)}
@media(min-width:960px){
  .pg-apply-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:clamp(40px,5vw,84px);align-items:start}
}
.pg-steps{list-style:none;counter-reset:pg;display:grid;gap:0;
  margin:clamp(26px,3vw,36px) 0 0;padding:0;position:relative}
/* §5's third real photograph — contained, same treatment as the hero (R3).
   4:3 needs no crop: slope-haul is a 1100x825 source, so the whole loaded bed
   stays in frame at every width. */
.pg-shot{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:clamp(14px,1.6vw,22px);
  background:var(--canvas);display:grid;place-items:center;padding:12%}
.pg-shot img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
@media(min-width:960px){.pg-shot{position:sticky;top:clamp(80px,10vh,120px)}}
.pg-steps li{counter-increment:pg;position:relative;display:grid;gap:4px;
  padding:0 0 clamp(26px,3vw,34px) clamp(64px,7vw,82px);min-height:64px}
.pg-steps li:last-child{padding-bottom:0}
.pg-steps li::before{content:counter(pg,decimal-leading-zero);position:absolute;
  left:0;top:-6px;font-family:var(--f-display);font-weight:400;letter-spacing:.02em;
  font-size:clamp(30px,3.4vw,42px);line-height:1;color:var(--navy)}
/* the connector: shows the steps are a sequence, not three options */
.pg-steps li:not(:last-child)::after{content:"";position:absolute;
  left:clamp(15px,1.7vw,20px);top:clamp(34px,3.8vw,46px);bottom:8px;
  width:1px;background:var(--pg-hair)}
.pg-steps b{font-size:clamp(17px,1.8vw,20px);font-weight:700;letter-spacing:-.014em}
.pg-step-sub{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.pg-apply-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;
  margin-top:clamp(24px,3vw,32px)}
.pg-apply-cta .kb-btn-pri{min-height:56px;padding:14px 36px;font-size:16.5px}
.pg-apply-alt{display:inline-flex;align-items:center;min-height:44px;
  font-weight:700;font-size:15px;color:var(--brand-maroon);
  border-bottom:1.5px solid rgba(120,18,22,.32)}
.pg-apply-alt:hover{border-bottom-color:var(--brand-maroon)}
/* pre-launch state: JS hides it until needed; with NO JS it stays visible so
   the farmer always has an honest path (kb.js stamps html.kb-js when it boots) */
.pg-pending{margin-top:20px;padding:clamp(20px,2.4vw,26px);border-radius:16px;
  background:var(--canvas);border:1px solid var(--line)}
.pg-sec--stone .pg-pending{background:var(--canvas)}
html.kb-js .pg-pending{display:none}
html.kb-js .pg-pending.on{display:block;animation:pgIn .4s var(--ease)}
.pg-pending > p{font-size:15px;max-width:54ch}
.pg-pending .kb-btn{margin-top:16px}
html:not(.kb-js) #pgApply{display:none}

/* ── §6 THE HUMAN DOOR — the close. Full-bleed dark band, not a card. ── */
@media(min-width:900px){
  .pg-talk-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:clamp(40px,5vw,84px);align-items:center}
  .pg-talk-grid .kb-triad{margin-top:0;flex-direction:column;align-items:stretch}
  .pg-talk-grid .kb-triad .kb-btn{width:100%}
}
.pg-dark-note{margin-top:clamp(24px,3vw,32px);padding-left:14px;
  border-left:3px solid var(--saffron);font-size:15px;font-weight:600;
  color:rgba(255,255,255,.9)}
.pg-sec--dark .kb-triad{margin-top:clamp(26px,3vw,34px);display:flex;
  flex-wrap:wrap;gap:12px}
.pg-btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.34)}
.pg-btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.6)}

/* ── mobile action bar — one bottom element; Bullman fab lifts above it,
     same coexistence contract bullman-hub.css uses for .dt-dock/.srm-bar ── */
.pg-bar{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:60;
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;
  transform:translateY(180%);transition:transform .35s var(--ease)}
.pg-bar.show{transform:none}
.pg-bar-cta{min-height:52px;box-shadow:0 14px 34px -12px rgba(0,0,0,.3)}
.pg-bar-ic{display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:50%;background:rgba(255,255,255,.94);border:0.5px solid var(--line-strong);
  color:var(--ink);box-shadow:0 10px 26px -12px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pg-bar-ic:first-of-type{color:#1eb457}
@media(min-width:900px){.pg-bar{display:none}}
/* BLOCKING FIX (mobile): .bmh-fab is left:16px/56px wide and --pg-gut clamps to
   20px at 360px, so the FAB sat ON TOP of body text — it ate the first 4-6
   characters of every line it passed, including one of the 14 fixed eligibility
   pathways. Lifting it vertically only moved the collision from the bar onto the
   copy. While the action bar is shown it already carries WhatsApp AND Call, so
   suppressing the FAB costs no human path; it returns the moment the bar hides. */
body:has(.pg-bar.show) .bmh-fab{opacity:0;visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:no-preference){.bmh-fab{transition:opacity .25s var(--ease)}}

/* ═══ KANNADA-FALLBACK TYPOGRAPHY ═══════════════════════════════════════════
   The page ships lang="kn" by default, so kb.css's html[lang="kn"] rules swap
   every display heading to Noto Sans Kannada at the shorter Kannada step. That
   is correct for real Kannada — but almost every string here is still
   ⟨KN-PENDING⟩, and kb.js's fallback engine renders the ENGLISH sibling while
   the element keeps the Kannada face. The result was the whole page set in
   Noto Sans Kannada: no Bebas anywhere, headings a step too small, and none of
   the Keelambi voice. R8 is not violated — real Kannada still gets Kannada
   type; this only restores the Latin display face to text that IS Latin.

   Detection: kb.js stamps .kn-fallback on the pair it has swapped. :has() is
   the only pure-CSS hook for it. Where :has() is unsupported the rule simply
   does not apply and the page renders as it does today — legible, just less
   branded. Specificity is (0,4,1), which clears kb.css's (0,2,1). ═════════ */
html[lang="kn"] .pg-display:has([data-kn].kn-fallback){
  font-family:var(--f-display);font-weight:400;letter-spacing:.02em;
  line-height:.96;font-size:clamp(38px,5vw,64px)}
html[lang="kn"] .kb-statement:has([data-kn].kn-fallback){
  font-family:var(--f-display);font-weight:400;letter-spacing:.02em;
  line-height:.98;font-size:clamp(30px,3.4vw,42px)}
html[lang="kn"] .pg-q:has([data-kn].kn-fallback){
  font-family:var(--f-display);font-weight:400;letter-spacing:.02em;
  line-height:1;font-size:clamp(26px,2.8vw,32px)}

html[lang="kn"] .kb-eyebrow:has([data-kn].kn-fallback){
  font-family:var(--f-body);letter-spacing:.09em;text-transform:uppercase}

/* ── narrow-phone tuning (<=743px) ── the 15-row pathway index is the tallest
     block on the page; at 360px it reads as fifteen separate rows rather than
     one scannable list. Tightening the row rhythm keeps it an index without
     dropping a single pathway. The bar CTA label wrapped to two lines inside a
     52px pill at 360px, so it loses a little size and side padding. ── */
@media(max-width:743px){
  /* The fixed bar is 52px + insets and sat ON live content — by bad luck it
     landed on "SELCO Foundation decides who joins the pilot, not Keelambi.",
     the one sentence that makes the programme read as institutional rather
     than promotional. Reserve the space instead of overlaying it. */
  body:has(.pg-bar.show) #main{padding-bottom:92px}
  .pg-chip{font-size:14.5px}
  .pg-chips{margin-top:24px}
  /* 286px of pill at 430px against ~160px of label: the wrap was flex
     shrink, not a space problem. nowrap holds one line down to 360px
     (216px available) and keeps the 52px tap target uncramped. */
  .pg-bar-cta{font-size:15px;padding-inline:14px;white-space:nowrap}
  /* KANNADA ONLY. The approved bar label ನಿಮಗೆ ಈ ನೆರವು ಸಿಗುತ್ತಾ ನೋಡಿ measures 203px at
     15px against a 173px content box at 360px, and lands exactly ON the limit at
     390px. R8 forbids shortening the Kannada, so the pill gives the text the room
     instead. Scoped to html[lang="kn"], so English keeps 15px/14px untouched. */
  html[lang="kn"] .pg-bar-cta{font-size:13px;padding-inline:10px}
}

/* ── TYPE SCALE ── R6 allows 8 steps; the page had grown ~15, with four values
     (64/60/50/42) crowded into one octave. Nothing read as big because nothing
     was distinctly bigger. The hero keeps 64 ALONE; every section head drops to
     42 and the question inside a section to 30, so the chapter/moment hierarchy
     is legible and the hero finally reads as the largest thing on the page. */
body[data-kb-page="program"] .kb-statement{font-size:clamp(30px,3.4vw,42px)}
html[lang="kn"] body[data-kb-page="program"] .kb-statement{font-size:clamp(23px,2.6vw,32px)}
html[lang="kn"] .kb-statement:has([data-kn].kn-fallback){font-size:clamp(30px,3.4vw,42px)}

@media(prefers-reduced-motion:reduce){
  .pg-bar,.pg-res.on,.pg-pending.on{transition:none;animation:none}
  .pg-play svg,.pg-ans{transition:none}
  .pg-play:hover svg,.pg-play:active svg{transform:none}
  .pg-ans::after{transition:none}
  .pg-ans:hover{transform:none}
}