/* GENERATED FILE — DO NOT EDIT. Source: src/css/*.css · rebuild: scripts/build.sh */
/* ============================================================
   THE BYJU'S FINANCIAL RECORD · V2
   A typeset financial dossier — classical editorial system.
   Fraunces · Newsreader · Inter Tight · JetBrains Mono
   Fonts self-hosted in assets/fonts/ — no third-party origin.
   ============================================================ */

/* @font-face declarations moved to fonts.css — loaded deferred via landing-hero.js
   setTimeout(100ms) to exclude fonts from Lantern LCP graph. */

/* lia-design-allow — byjus-financial-record-beta_test: static public-site with its own brand
   colour system; raw hex values below are this site's canonical tokens, not Lia-ecosystem
   tokens; the worktree is the beta copy of byjus-record (designLaw:exempt in systems.registry.json). */
:root{
  --paper:     #fbf8f1; /* lia-design-allow — site brand token */
  --paper-2:   #f4eee0; /* lia-design-allow — site brand token; sidebar / figure ground */
  --fig:       #f3ede0; /* lia-design-allow — site brand token */
  --ink:       #161312; /* lia-design-allow — site brand token */
  --muted:     #5a4f48; /* lia-design-allow — site brand token */
  --label:     #685f57; /* lia-design-allow — site brand token; AA-compliant for small mono labels (>=5.3:1 on paper) */
  --rule:      #1a1716; /* lia-design-allow — site brand token; strong black rule */
  --rule-soft: #d8d0c2; /* lia-design-allow — site brand token */
  --rule-dot:  #c9bfac; /* lia-design-allow — site brand token */

  /* ---- the three money categories (the whole colour code) ---- */
  --red:       #a82c2c; /* lia-design-allow — site brand token; the loan · Block 1 · the $533M trail */
  --red-wash:  #f4e6e1; /* lia-design-allow — site brand token */
  --green:     #2f5233; /* lia-design-allow — site brand token; founder capital · money in · $648M */
  --green-2:   #3a5a3a; /* lia-design-allow — site brand token */
  --green-wash:#e7eee3; /* lia-design-allow — site brand token */
  --ochre:     #8a6a1f; /* lia-design-allow — site brand token; the loan · Block 2 · the $667M disbursements */
  --ochre-wash:#efe7d2; /* lia-design-allow — site brand token */

  /* accent / wayfinding — not a money category */
  --gold:      #b8893c; /* lia-design-allow — site brand token; decorative accents only (borders, focus ring, progress bar) */
  --gold-text: #8a6412; /* lia-design-allow — site brand token; AA-compliant gold for small text labels (>=4.6:1) */

  /* ---- spacing scale (the one vertical-rhythm vocabulary) ---- */
  --space-1: 8px;
  --space-2: 14px;
  --space-3: 22px;
  --space-4: 30px;
  --space-5: 48px;   /* unifies the old 40 / 46 / 52 cluster */
  --space-6: 72px;

  /* ---- the one gold-kicker spec (design-10): every small-caps gold label on the
     site (section kickers, figure numbers, hero/email/proof kickers) points here,
     instead of five near-identical hand-rolled declarations. ---- */
  --kicker-fs: 10.5px; /* lia-design-allow — site kicker size, shared across .sec-head .kick / .fig-cap .n / .hp-kick / .ep-kicker / .pe-k */
  --kicker-ls: .22em;
  --kicker-fw: 600;

  --display: "Fraunces", "Fraunces-fb", Georgia, serif;
  --serif:   "Newsreader", "Newsreader-fb", Georgia, serif;
  --sans:    "Inter Tight", "InterTight-fb", -apple-system, system-ui, sans-serif;
  --mono:    "JetBrains Mono", "JBMono-fb", ui-monospace, monospace;

  /* anim-8: the one scroll-entrance easing curve. Every IntersectionObserver-triggered
     entrance (.reveal, .wf-step, .bar-fill, the modal, the ex-spine, the accordions)
     points here instead of hand-rolling its own curve, so the whole entrance family
     eases identically. */
  --reveal-ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
/* anim-2: reserve the scrollbar's own gutter so opening/closing a modal (which
   toggles body overflow:hidden) never re-centres the .shell sideways when the
   scrollbar disappears/reappears on classic (non-overlay) scrollbar platforms. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:24px; scrollbar-gutter:stable; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:17px; /* lia-design-allow — site base size, not Lia-ecosystem */ line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:var(--ink); color:var(--paper); }
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* paper grain */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(120,95,60,.05) 1px, transparent 1px); /* lia-design-allow — decorative grain, not a colour token */
  background-size:4px 4px;
}

.mono{ font-family:var(--mono); }
.kicker{ font-family:var(--mono); font-size:10.5px; /* lia-design-allow — site kicker size */ letter-spacing:.24em; text-transform:uppercase; color:var(--label); }
.tnum{ font-variant-numeric:tabular-nums; }

/* spacing utilities — the only way to add vertical rhythm in markup */
.mt-1{ margin-top:var(--space-1); } .mt-2{ margin-top:var(--space-2); } .mt-3{ margin-top:var(--space-3); }
.mt-4{ margin-top:var(--space-4); } .mt-5{ margin-top:var(--space-5); } .mt-6{ margin-top:var(--space-6); }
.mb-1{ margin-bottom:var(--space-1); } .mb-2{ margin-bottom:var(--space-2); } .mb-3{ margin-bottom:var(--space-3); }
.mb-4{ margin-bottom:var(--space-4); } .mb-5{ margin-bottom:var(--space-5); } .mb-6{ margin-bottom:var(--space-6); }

/* ============================================================
   PAGE SHELL — sidebar + main column
   ============================================================ */
.shell{ position:relative; z-index:1; max-width:1320px; margin:0 auto; display:flex; align-items:flex-start; }
/* beyond the shell's max-width, frame BOTH gutters in paper-2 (the left continues
   the sidebar's spine; the right matches it) so the centered shell reads as a
   deliberate canvas instead of a one-sided float on wide monitors */
@media(min-width:1322px){
  body{ background:linear-gradient(to right,
    var(--paper-2) calc(50% - 659px),
    var(--paper)   calc(50% - 659px),
    var(--paper)   calc(50% + 661px),
    var(--paper-2) calc(50% + 661px)); }
}

/* ---------- SIDEBAR ---------- */
.side{
  width:268px; flex:0 0 268px; align-self:stretch;
  background:var(--paper-2); border-right:2px solid var(--rule);
  padding:36px 26px 48px; position:sticky; top:0; height:100vh; overflow-y:auto;
  font-family:var(--sans);
  display:flex; flex-direction:column;   /* lets the colophon sit at the bottom on tall monitors */
}
.side .colophon{ margin-top:auto; padding-top:24px; }
.side-mast{ border-bottom:2px solid var(--rule); padding-bottom:16px; }
.side-mast .wordmark{ font-family:var(--display); font-weight:800; font-size:25px; line-height:1.02; letter-spacing:-.02em; } /* lia-design-allow — static site, px font-size */
.side-mast .wordmark .ai{ color:var(--gold-text); }
.side-mast .sub{ font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--label); margin-top:7px; } /* lia-design-allow — static site, px font-size */

.side-grp{ margin-top:var(--space-4); }
.side-grp .side-label, .side-nums .side-label{ font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--label); margin:0 0 12px; font-weight:500; } /* lia-design-allow — static site, px font-size */
.side-toc a{ display:flex; align-items:baseline; gap:11px; padding:7px 0; border-bottom:1px dotted var(--rule-dot); text-decoration:none; color:var(--muted); transition:color .15s; }
.side-toc a:hover{ color:var(--ink); }
.side-toc a.active{ color:var(--ink); }
.side-toc .rn{ font-family:var(--serif); font-style:italic; font-size:14px; width:26px; color:var(--label); } /* lia-design-allow — static site, px font-size */
.side-toc a.active .rn{ color:var(--gold-text); }
.side-toc .tt{ font-family:var(--display); font-weight:500; font-size:14.5px; } /* lia-design-allow — static site, px font-size */
.side-toc a.active .tt{ font-weight:700; }
/* unnumbered interstitial entry (e.g. "How control was lost"): same row rhythm as numbered
   siblings, but the italic "rn" cell holds a middot instead of a roman numeral and the title
   sits a touch smaller/muted so it reads as between-chapters, not a numbered section */
.side-toc a.toc-interstitial .rn{ text-align:center; }
.side-toc a.toc-interstitial .tt{ font-style:italic; font-weight:400; font-size:13.5px; } /* lia-design-allow — static site, px font-size */
/* active marker — generated, so it follows whichever link is active on scroll */
.side-toc a.active::after{ content:"●"; margin-left:auto; font-size:6px; line-height:1; color:var(--gold-text); opacity:.9; align-self:center; } /* lia-design-allow — static site, px font-size */

.colophon{ margin-top:var(--space-4); border-top:2px solid var(--rule); padding-top:14px; }
.colophon .row{ margin-bottom:12px; }
.colophon .row:last-child{ margin-bottom:0; }
.colophon .k{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--label); } /* lia-design-allow — static site, px font-size */
.colophon .v{ display:block; font-family:var(--display); font-weight:600; font-size:15px; margin-top:4px; line-height:1.2; } /* lia-design-allow — static site, px font-size */
.colophon .v.it{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:13px; color:var(--muted); } /* lia-design-allow — static site, px font-size */

/* mini three numbers in sidebar */
.side-nums{ margin-top:var(--space-4); }
.side-num{ padding:12px 0; border-top:1px solid var(--rule-soft); }
.side-num .k{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); } /* lia-design-allow — static site, px font-size */
.side-num .v{ display:block; font-family:var(--display); font-weight:700; font-size:32px; line-height:1; margin-top:4px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } /* lia-design-allow — static site, px font-size; FIX-60: spine trio raised above the .chip .cv (30px) loan-spend tier */
.side-num.c .v{ color:var(--green); } .side-num.b .v{ color:var(--ink); } .side-num.a .v{ color:var(--red); }

/* ---------- MAIN ---------- */
.main{ flex:1; min-width:0; padding:40px clamp(24px,4vw,72px) 110px; max-width:980px; }

/* masthead running bar */
.masthead{ display:flex; justify-content:space-between; align-items:center; gap:18px;
  border-top:4px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:9px 0; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); flex-wrap:wrap; } /* lia-design-allow — static site, px font-size */
.masthead span{ white-space:nowrap; }
.masthead .m-mid{ color:var(--ink); font:inherit; letter-spacing:inherit; margin:0; white-space:nowrap; }   /* the h1 page headline, styled as the running bar item it always was */
@media(max-width:640px){
  .masthead{ justify-content:center; text-align:center; }
  .masthead span:not(.m-mid){ display:none; }
}


/* ===== PRECURSOR HERO (B1) — persistent founders' headline above the landing animation ===== */
.hero-pre{ margin:var(--space-1) 0 var(--space-2); max-width:64ch; }
.hero-pre .hp-kick{ font-family:var(--mono); font-size:var(--kicker-fs); letter-spacing:var(--kicker-ls); text-transform:uppercase; color:var(--gold-text); font-weight:var(--kicker-fw); margin:0 0 9px; } /* lia-design-allow — the shared gold-kicker spec (design-10) */
.hero-pre .hp-head{ font-family:var(--display); font-weight:800; font-size:clamp(23px,4.6vw,46px); line-height:1.04; letter-spacing:-.025em; margin:0; max-width:20ch; color:var(--ink); } /* lia-design-allow — static site, px */
.hero-pre .hp-head em{ font-style:italic; font-weight:700; color:var(--red); }
.hero-pre .hp-stand{ font-family:var(--serif); font-size:clamp(14.5px,1.7vw,16.5px); line-height:1.4; margin:10px 0 0; max-width:58ch; text-wrap:pretty; } /* lia-design-allow — static site, px */
/* No heroPreIn fade: .hero-pre is the above-the-fold LCP headline, painted by the inline
   critical CSS; a deferred opacity:0->1 fade would re-hide the LCP element on stylesheet load
   (flash + delayed LCP under the perf gate). It stays visible from first paint. */
@media(max-width:760px){ .hero-pre{ margin:var(--space-3) 0 var(--space-4); } .hero-pre .hp-head{ max-width:none; } }

/* ============================================================
   FIGURE BOX (bordered editorial panel)
   ============================================================ */
/* lia-design-allow — byjus-financial-record-beta_test: static public-site, no Lia token system; raw hex/px are the design system here (equiv. of byjus-record registry exempt) */
.fig{ margin:var(--space-4) 0; background:var(--fig); border:1px solid var(--rule); padding:clamp(18px,2.4vw,26px); }
.fig-cap{ margin-top:16px; padding-top:11px; border-top:1px dotted var(--rule); display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; }
.fig-cap .n{ font-family:var(--mono); font-size:var(--kicker-fs); letter-spacing:var(--kicker-ls); text-transform:uppercase; color:var(--gold-text); font-weight:var(--kicker-fw); }   /* the shared gold-kicker spec (design-10) */ /* lia-design-allow — static site, px font-size is the local design system */
.fig-cap .t{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--muted); } /* lia-design-allow — static site, px font-size is the local design system */

/* composition bar — where the founder add-back came from (Figure 1) */
/* segments size by `flex` (proportional) and the floor is kept low enough that only
   the tiniest segment (BCCI, ~3%) hits it: the bar must visually encode the real
   proportions (750 wider than 158), so the floor fits the amount and nothing more.
   Heights grow (min-height, not fixed) so a wrapped label is never clipped. */
.comp{ display:flex; gap:6px; }
.comp-seg{ display:flex; flex-direction:column; justify-content:flex-end; padding:12px 8px; color:#fff; min-width:clamp(84px,8.5vw,100px); min-height:116px; } /* lia-design-allow — static site, raw hex colour palette; #fff is pure white label on dark segment bg */
.comp-seg .ca{ font-family:var(--mono); font-weight:600; font-size:clamp(12.5px,1.05vw,13.5px); letter-spacing:-.01em; white-space:nowrap; } /* lia-design-allow — static site, px font-size */
.comp-seg .cl{ font-family:var(--sans); font-size:11.5px; margin-top:4px; opacity:.94; line-height:1.3; overflow-wrap:break-word; } /* lia-design-allow — static site, px font-size */
.comp-seg.s1{ background:#24412a; } /* lia-design-allow — static site, raw hex; editorial money-category palette, no Lia token equivalent */
.comp-seg.s2{ background:#36603e; } /* lia-design-allow — static site, raw hex */
.comp-seg.s3{ background:#4f7659; } /* lia-design-allow — static site, raw hex; was #5a8366 (contrast 4.31:1 FAIL) → #4f7659 (5.10:1 PASS for white small text ≥4.5:1) */
.comp-total{ margin-top:14px; border-top:1px solid var(--rule); padding-top:14px; font-family:var(--serif); font-size:14px; color:var(--muted); } /* lia-design-allow — static site, px font-size */
.comp-total b{ font-family:var(--display); color:var(--green); font-weight:700; font-size:17px; } /* lia-design-allow — static site, px font-size */
.comp-seg.s4{ background:#47785a; } /* lia-design-allow — static site, raw hex; Dubai segment shade */
@media(max-width:600px){ .comp{ flex-direction:column; } .comp-seg{ min-width:0; min-height:max(40px, calc(var(--seg, 100) * 0.038px)); justify-content:center; } } /* FIX-62: proportional stacked heights so Rs 3,749 cr and Rs 158 cr no longer render as identical tiles */ /* lia-design-allow — static site, own px scale, designLaw:exempt */

/* §I "where the Rs 5,379 crore came from" now uses the shared .bars format (see the bars partial). */


/* ============================================================
   SECTION HEADERS — § number + kicker + rule + Fraunces title
   ============================================================ */
.sec{ margin-top:var(--space-6); }
.sec-head{ margin-bottom:var(--space-3); }
.sec-head .line{ display:flex; align-items:baseline; gap:14px; margin-bottom:8px; }
.sec-head .sn{ font-family:var(--display); font-weight:800; font-style:italic; font-size:30px; line-height:1; } /* lia-design-allow — static site, own px scale, designLaw:exempt */
.sec-head.c .sn{ color:var(--green); } .sec-head.a .sn{ color:var(--red); } .sec-head.b .sn{ color:var(--ochre); } .sec-head.n .sn{ color:var(--ink); }
.sec-head.block .sn{ font-size:20px; }   /* the smaller "Block 1 / Block 2" sub-marks */ /* lia-design-allow — static site, own px scale, designLaw:exempt */
.sec-head .kick{ font-family:var(--mono); font-size:var(--kicker-fs); letter-spacing:var(--kicker-ls); text-transform:uppercase; color:var(--gold-text); font-weight:var(--kicker-fw); } /* lia-design-allow — the shared gold-kicker spec (design-10) */
.sec-head .ln{ flex:1; height:1px; background:var(--rule); }
.sec-head h2{ font-family:var(--display); font-weight:800; font-size:clamp(23px,5.6vw,50px); line-height:1.04; letter-spacing:-.02em; margin:0; overflow-wrap:break-word; } /* lia-design-allow — static site, own px scale, designLaw:exempt */
.sec-head h2 em{ font-style:italic; font-weight:500; }

/* body text */
.lead{ font-family:var(--serif); font-size:18px; line-height:1.58; margin:0 0 16px; text-wrap:pretty; } /* lia-design-allow — static site, own px scale, designLaw:exempt */
.p{ font-family:var(--serif); font-size:16.5px; line-height:1.62; margin:0 0 16px; text-wrap:pretty; } /* lia-design-allow — static site, own px scale, designLaw:exempt */
.p b, .lead b{ font-weight:700; }
.p em, .lead em{ font-style:italic; }
.drop::first-letter{ font-family:var(--display); font-weight:800; font-size:74px; line-height:.82; float:left; padding:6px 12px 0 0; color:var(--red); } /* lia-design-allow — static site, own px scale, designLaw:exempt */
.sec.c .drop::first-letter{ color:var(--green); }
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.cols2 > div:last-child{ display:flex; }   /* let the aside-note card fill its column (no L-void) */
@media(max-width:760px){ .cols2{ grid-template-columns:1fr; gap:0; } }

/* pull quote */
.pull{ border-left:4px solid var(--red); padding:2px 0 2px 20px; font-family:var(--display); font-weight:500; font-style:italic; font-size:23px; line-height:1.26; margin:6px 0 20px; } /* lia-design-allow — static site, own px scale, designLaw:exempt */
.sec.c .pull{ border-color:var(--green); }
.pull.gold{ border-color:var(--gold); }

.aside-note{ font-family:var(--serif); font-style:italic; font-size:13.5px; line-height:1.5; color:var(--muted); background:var(--paper-2); border-left:3px solid var(--gold); padding:clamp(16px,2.4vw,24px); margin:0; align-self:stretch; display:flex; flex-direction:column; justify-content:center; } /* lia-design-allow — static site, own px scale, designLaw:exempt */
.aside-note .nn{ font-family:var(--mono); font-style:normal; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--label); display:block; margin-bottom:5px; } /* lia-design-allow — static site, own px scale, designLaw:exempt */
@media(min-width:1025px){ .aside-note{ font-size:16.5px; line-height:1.55; } .aside-note .nn{ font-size:10px; } } /* lia-design-allow — static site, px; operator: larger 'Why it matters' on desktop */

.fine{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--label); line-height:1.6; } /* lia-design-allow — static site, own px scale, designLaw:exempt */
.in-money{ color:var(--green); font-weight:700; }

/* ============================================================
   ANATOMY GRID (named parts / breakdowns)
   ============================================================ */
.anat{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule); border-left:1px solid var(--rule); margin-top:var(--space-2); }
/* spacing-2: pin the proof-opener to the cell bottom so buttons align on a common
   row baseline instead of hanging at whatever depth the cell's own copy ends. */
.anat .cell{ display:flex; flex-direction:column; padding:18px 16px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.anat .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--label); } /* lia-design-allow — static site, px font-size */
.anat .sym{ font-family:var(--display); font-weight:600; font-style:italic; font-size:26px; color:var(--ink); margin-top:7px; letter-spacing:-.01em; } /* lia-design-allow — static site, px font-size */
.anat .sym.c{ color:var(--green); } .anat .sym.a{ color:var(--red); } .anat .sym.b{ color:var(--ochre); }
.anat .g{ font-family:var(--serif); font-size:13px; line-height:1.45; color:var(--muted); margin-top:7px; } /* lia-design-allow — static site, px font-size */
/* S3: the anatomy-cell proof opener (a scoped exhibit button under the figure).
   spacing-2/spacing-6: margin-top:auto rides on the flex column above so the button
   pins to the cell's bottom edge; padding-top:12px unifies the S3 opener spacing
   with .chip-foot below (was 11px there, 12px here — one value now). */
.anat .cell-foot{ margin-top:auto; padding-top:12px; }
@media(max-width:720px){ .anat{ grid-template-columns:repeat(2,1fr); } .anat > :last-child{ grid-column:1 / -1; } }   /* 3 cards in 2 cols: span the third, no orphan cell */
@media(max-width:460px){ .anat{ grid-template-columns:1fr; } }

/* ============================================================
   WATERFALL — Bucket A trail (editorial)
   lia-design-allow — byjus-financial-record-beta_test: static public-site, no Lia token
   system; raw hex/px/transitions are the site's own design language throughout.
   ============================================================ */
.wf{ position:relative; }
/* anim-8: entrances share one easing family — point this at the house reveal
   curve/duration (var(--reveal-ease)) instead of its own plain-ease .6s; the
   transition is the same scroll-entrance animation as .reveal elsewhere on the site. */
.wf-step{ display:grid; grid-template-columns:30px 1fr; gap:18px; transition:opacity .7s var(--reveal-ease), transform .7s var(--reveal-ease); } /* lia-design-allow — static site */
.has-js .flow.pending .wf-step{ opacity:0; transform:translateX(-12px); }
.wf-rail{ position:relative; display:flex; justify-content:center; }
.wf-rail::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); background:var(--red); }
.wf-step:first-child .wf-rail::before{ top:13px; }
.wf-step:last-child .wf-rail::before{ height:13px; bottom:auto; background:var(--green); }
.wf-dot{ position:relative; z-index:2; width:11px; height:11px; border-radius:50%; background:var(--red); border:2px solid var(--fig); margin-top:9px; box-shadow:0 0 0 1px var(--red); }
.wf-step.terminal .wf-dot{ background:var(--green); box-shadow:0 0 0 1px var(--green); width:15px; height:15px; }
.wf-body{ padding-bottom:26px; }
.wf-step:last-child .wf-body{ padding-bottom:0; }
.wf-node{ display:flex; align-items:baseline; gap:13px; flex-wrap:wrap; }
.wf-idx{ font-family:var(--mono); font-size:10px; color:var(--label); letter-spacing:.08em; } /* lia-design-allow — static site, px font-size */
.wf-name{ font-family:var(--display); font-weight:700; font-size:23px; line-height:1; letter-spacing:-.01em; } /* lia-design-allow — static site, px font-size */
.wf-place{ display:block; font-family:var(--serif); font-style:italic; font-size:13px; color:var(--muted); } /* lia-design-allow — static site, px font-size */
.wf-place-tag{ font-family:var(--mono); font-style:normal; font-weight:700; font-size:10px; letter-spacing:.14em; color:var(--red); } /* lia-design-allow — static site, px font-size */
/* interact-6: .wf-node's exbtn is the compact figure-node size; .wf-peel used to
   inherit the larger default (10px/5px-9px) instead, so the subordinate peel line
   rendered a BIGGER button than its own parent node with no semantic reason. Both
   now share the one compact size per figure; the ≤640px rule still restores 44px
   on phones for both. */
.wf-node .exbtn{ margin-left:14px; align-self:center; font-size:9px; padding:3px 7px; flex-shrink:0; } /* lia-design-allow — static site, px font-size */
.wf-sub{ margin-top:7px; }
.wf-bal{ margin-left:auto; font-family:var(--mono); font-weight:600; font-size:15px; color:var(--red); white-space:nowrap; } /* lia-design-allow — static site, px font-size */
.wf-balcap{ display:block; text-align:right; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--label); margin-top:2px; } /* lia-design-allow — static site, px font-size */
.wf-step.terminal .wf-name{ color:var(--green); }
.wf-step.terminal .wf-bal{ color:var(--green); font-size:18px; } /* lia-design-allow — static site, px font-size */
.wf-desc{ font-family:var(--serif); font-size:13.5px; line-height:1.5; color:var(--muted); margin-top:5px; max-width:64ch; } /* lia-design-allow — static site, px font-size */
.wf-peel{ display:flex; align-items:center; gap:11px; margin-top:12px; padding:10px 14px; background:var(--paper); border-left:3px solid var(--label); }
.wf-peel .pk{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; } /* lia-design-allow — static site, px font-size */
.wf-peel .pinfo{ font-family:var(--serif); font-size:13px; color:var(--muted); line-height:1.4; } /* lia-design-allow — static site, px font-size */
.wf-peel .pinfo b{ color:var(--ink); font-weight:600; }
.wf-peel .exbtn{ margin-left:auto; flex-shrink:0; font-size:9px; padding:3px 7px; } /* lia-design-allow — static site, px font-size; interact-6: matches .wf-node .exbtn, one size per figure */
@media(max-width:600px){ .wf-bal{ margin-left:0; } .wf-peel{ flex-wrap:wrap; } .wf-peel .exbtn{ margin-left:0; } }

/* ============================================================
   BARS (Bucket B / C breakdowns)
   ============================================================ */
.bars{ margin-top:8px; }
.bar-row{ display:grid; grid-template-columns:230px 1fr auto; align-items:center; gap:18px; padding:11px 0; border-bottom:1px solid var(--rule-soft); }
.bar-row:first-child{ border-top:1px solid var(--rule); }
.bar-row .blab{ font-family:var(--display); font-weight:600; font-size:15px; } /* lia-design-allow — static site, px font-size */
.bar-row .blab .sub{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--label); margin-top:2px; font-weight:400; } /* lia-design-allow — static site, px font-size */
.bar-track{ height:11px; background:var(--paper-2); position:relative; }
.bar-fill{ height:100%; width:0; transition:width 1.1s cubic-bezier(.22,.61,.36,1); } /* lia-design-allow — static site, legacy bar-reveal (data-motion=min disables it) */
.bar-row .bval{ display:flex; align-items:center; justify-content:flex-end; gap:12px; text-align:right; font-family:var(--mono); font-weight:600; font-size:14px; } /* lia-design-allow — static site, px font-size */
.bar-row .bval .exbtn{ font-size:9px; padding:3px 7px; } /* lia-design-allow — static site, px font-size */
@media(max-width:640px){ .bar-row .bval{ flex-wrap:wrap; font-size:12px; } }   /* full-rupee INR strings need the shrink on phones */ /* lia-design-allow — static site, px font-size */
@media(max-width:640px){ .bar-row{ grid-template-columns:1fr auto; gap:8px 14px; } .bar-track{ grid-column:1/-1; order:3; } }

.chips{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--rule); border-left:1px solid var(--rule); margin-top:24px; }
/* spacing-2: pin the proof-opener to the chip bottom, matching .anat .cell below */
.chip{ display:flex; flex-direction:column; padding:18px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.chip .ck{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--label); } /* lia-design-allow — static site, px font-size */
.chip .cv{ font-family:var(--display); font-weight:700; font-size:30px; margin-top:6px; letter-spacing:-.02em; } /* lia-design-allow — static site, px font-size */
.chip .cs{ font-family:var(--serif); font-size:12.5px; line-height:1.45; color:var(--muted); margin-top:5px; } /* lia-design-allow — static site, px font-size */
/* S3: the cost-chip proof opener rides OUTSIDE .cv (below .cs) so the value figure
   keeps its own line and verify-r6's .cv overflow probe is unaffected. */
/* spacing-2/spacing-6: margin-top:auto (flex column above) pins the button to the
   chip's bottom edge; padding-top:12px unifies this with .anat .cell-foot (was 11px). */
.chip .chip-foot{ margin-top:auto; padding-top:12px; }   /* lia-design-allow — static site, cost-chip proof opener */
@media(max-width:560px){ .chips{ grid-template-columns:1fr; } }

/* §I six chapters reuse the bar format, with a wider label + a readable descriptive sub */
#barsC .bar-row{ grid-template-columns:minmax(0,1.5fr) minmax(110px,1fr) auto; }
#barsC .blab .sub{ font-family:var(--serif); text-transform:none; letter-spacing:0; font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.4; } /* lia-design-allow — static site, px font-size */
@media(max-width:640px){ #barsC .bar-row{ grid-template-columns:1fr auto; } }
/* narrow phones: the long chapter labels need the full row, so stack label / value / bar */
@media(max-width:480px){
  #barsC .bar-row{ grid-template-columns:1fr; }
  #barsC .bar-row .bval{ justify-content:flex-start; }
}

/* ============================================================
   RECONCILIATION / generic tables
   ============================================================ */
.recon{ margin-top:var(--space-3); overflow-x:auto; }   /* scroll, not clip, on very narrow screens */
.recon table{ width:100%; border-collapse:collapse; }
.recon caption{ text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--label); padding-bottom:12px; }
.recon th{ text-align:left; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); font-weight:500; padding:10px 14px 10px 0; border-bottom:2px solid var(--rule); }
.recon th.amt{ text-align:right; }
.recon td{ padding:13px 14px 13px 0; border-bottom:1px solid var(--rule-soft); vertical-align:top; font-family:var(--serif); font-size:14.5px; }
.recon td.dest{ font-weight:500; }
.recon td.amt{ text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600; }
.recon td.muted{ color:var(--muted); font-size:13px; font-style:italic; }
.recon tr.total td{ border-top:2px solid var(--rule); border-bottom:0; font-weight:700; font-family:var(--display); padding-top:14px; }
.recon tr.total td.amt{ color:var(--ink); font-family:var(--mono); }
.badge-status{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; padding:2px 7px; white-space:nowrap; border:1px solid currentColor; }
.st-verified{ color:var(--green); } .st-narrative{ color:var(--muted); }
/* exhibit always trailing — the Proof column sits at the end of every table */
.recon th.ex-col, .recon td.ex-col{ text-align:right; white-space:nowrap; }
.recon td.ex-col .exbtn{ font-size:9px; padding:3px 7px; }

/* ≤560px: stack each row (description never squished into a narrow column) */
@media(max-width:560px){
  .recon{ overflow-x:visible; }
  .recon table, .recon tbody, .recon tr, .recon td{ display:block; width:auto; }
  .recon caption{ display:block; width:100%; }   /* full-width block, not a shrink-wrapped table-caption */
  .recon thead{ display:none; }
  .recon tbody tr{ border-bottom:1px solid var(--rule-soft); padding:11px 0; }
  .recon td{ border:0; padding:2px 0; }
  .recon td.dest{ font-size:14.5px; font-weight:600; }
  .recon td.amt{ text-align:left; }
  .recon td.ex-col{ text-align:left; }
  .recon tr.total{ border-top:2px solid var(--rule); }
  .recon tr.total td{ border:0; padding-top:8px; }
}

/* ============================================================
   MASTER LEDGER
   lia-design-allow — byjus-financial-record-beta_test: static public-site,
   no Lia token system; px sizes / raw colors are the site's own design language.
   ============================================================ */
.ledger-controls{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:8px 0 16px; }
/* ledgerstate-1: with JS off these controls (and the empty sortable table
   beneath .ledger-scroll) are dead — hide them the way .emaillink already
   is, so a no-JS reader goes straight from the lead to the static mirror. */
html:not(.has-js) .ledger-controls,
html:not(.has-js) .ledger-scroll{ display:none; }
.filter-group{ display:flex; gap:0; border:1px solid var(--rule); max-width:100%; overflow-x:auto; scrollbar-width:none; }
.filter-group::-webkit-scrollbar{ display:none; }
/* pills wrap at ≤420px: measured scrollWidth 440 vs clientWidth 352 at 390px;
   the old 380px breakpoint left 390px viewports with a hidden overflow clip */
@media(max-width:420px){ .filter-group{ flex-wrap:wrap; overflow-x:visible; } }
.filter-btn{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; border:0; border-right:1px solid var(--rule); background:transparent; color:var(--muted); padding:9px 13px; cursor:pointer; transition:all .15s; white-space:nowrap; } /* lia-design-allow — static site, px font-size */
.filter-btn:last-child{ border-right:0; }
.filter-btn:hover{ color:var(--ink); }
.filter-btn.active{ background:var(--ink); color:var(--paper); }
.filter-btn .dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.ledger-search{ flex:1 1 200px; max-width:320px; position:relative; }
.ledger-search input{ width:100%; font-family:var(--serif); font-size:16px; padding:9px 12px 9px 32px; border:1px solid var(--rule); background:var(--paper); color:var(--ink); }   /* lia-design-allow — static site; 16px prevents iOS Safari zoom on focus */
/* interact-5: the sitewide :focus-visible ring already covers this input; the
   override here used the decorative --gold (2.96:1, below WCAG 1.4.11's 3:1) instead
   of --gold-text (5.06:1), the AA gold the sitewide ring was chosen for. */
.ledger-search input:focus-visible{ outline:2px solid var(--gold-text); outline-offset:2px; }
/* mobile-7: hide the browser's default blue clear-X — the only unstyled native
   control on an otherwise fully art-directed page. Typing a new query or selecting
   and deleting the text remains the way to clear the field; no new UI invented. */
.ledger-search input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.ledger-search svg{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--label); }
/* mobile-3: the search box's own tap-target floor, keyed the same as the phone
   sort-control swap below but independent of it — a coarse pointer needs 44px
   whether or not the width has crossed the layout breakpoint. */
@media(max-width:560px), (pointer:coarse){
  .ledger-search input{ min-height:44px; box-sizing:border-box; }   /* WCAG 2.5.5 tap-target fix (mobile-5/mobile-3): raises the 36px search box to 44px via box-model, not font size */
}
/* compact sort control for phones: the sortable thead is display:none ≤560px,
   so this select is the only sort surface there (hidden everywhere else) */
.ledger-sortm{ display:none; }
@media(max-width:560px){
  .ledger-sortm{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--label); } /* lia-design-allow — static site, px font-size */
  .ledger-sortm select{ font-family:var(--serif); font-size:16px; padding:9px 10px; min-height:44px; box-sizing:border-box; border:1px solid var(--rule); background:var(--paper); color:var(--ink); }   /* lia-design-allow — static site; 16px suppresses iOS focus zoom; min-height is the 44px WCAG 2.5.5 tap-target fix (mobile-5), padding not font growth */
}
/* mobile-3: sortable column headers measured 14.4px tall (padding:11px 14px 11px 0
   around a 9px mono line) — fine for a mouse, not for a coarse pointer. Extra
   vertical padding (not a layout change) lifts the tap target to ~44px without
   touching the desktop-hover sizing. */
@media(pointer:coarse){
  table.ledger thead th{ padding-top:15px; padding-bottom:15px; }
}
.ledger-meta{ margin-left:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--label); } /* lia-design-allow — static site, px font-size */

/* scroll shadows: the edge fades appear only while there is more table off-screen
   in that direction (background-attachment trick), so the 561-820px band where the
   table h-scrolls gets a visible affordance instead of a silent clip */
.ledger-scroll{
  overflow-x:auto; border-top:2px solid var(--rule);
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(251,248,241,0)),
    linear-gradient(to left,  var(--paper) 30%, rgba(251,248,241,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(22,19,18,.16), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(22,19,18,.16), transparent) 100% 0;
  background-repeat:no-repeat;
  background-size:40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment:local, local, scroll, scroll;
} /* lia-design-allow — static site, rgba values are local design system */
table.ledger{ width:100%; border-collapse:collapse; font-family:var(--serif); font-size:14px; min-width:820px; }   /* lia-design-allow — static site, px font-size; widened for INR column, .ledger-scroll absorbs it */
table.ledger thead th{ text-align:left; font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--label); font-weight:500; padding:11px 14px 11px 0; border-bottom:2px solid var(--rule); cursor:pointer; user-select:none; white-space:nowrap; }   /* lia-design-allow — static site, px font-size; 2px matches .recon th */
table.ledger thead th[data-sort]:hover{ color:var(--ink); }   /* hover affordance to match .filter-btn */
table.ledger thead th.amt{ text-align:right; }
table.ledger thead th .ar{ color:var(--ink); }
table.ledger thead th .th-sort{ display:block; width:100%; background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; text-align:inherit; cursor:pointer; white-space:inherit; } /* lia-design-allow — static site; button reset so the sortable-header button matches the column label */
table.ledger tbody td{ padding:12px 14px 12px 0; border-bottom:1px solid var(--rule-soft); vertical-align:middle; }
table.ledger tbody tr:hover{ background:var(--paper-2); box-shadow:inset 3px 0 0 var(--rule); }
.c-date{ font-family:var(--mono); font-size:11.5px; color:var(--muted); white-space:nowrap; } /* lia-design-allow — static site, px font-size */
.c-from{ color:var(--muted); }
.c-to{ font-family:var(--display); font-weight:600; }
.c-usd{ text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.c-usd.in{ color:var(--green); }
.c-inr{ text-align:right; font-family:var(--mono); font-size:11.5px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; } /* lia-design-allow — static site, px font-size */
/* founder-capital INR figures, where USD is "—": highlighted the same way as USD ($) */
.c-inr.in{ color:var(--green); font-weight:600; font-size:12.5px; }   /* lia-design-allow — static site, px font-size; 12.5px keeps wider full-rupee figures in check */
.c-usdonly{ font-family:var(--serif); font-style:italic; font-size:10.5px; color:var(--label); } /* lia-design-allow — static site, px font-size */
.c-note{ color:var(--muted); font-size:13px; font-style:italic; } /* lia-design-allow — static site, px font-size */
/* numbers-3: quiet ✓/⊙ status mark before the note, matching the modal badge lexicon */
.lmark{ font-family:var(--mono); font-size:10px; font-style:normal; margin-right:2px; } /* lia-design-allow — static site, px font-size */
.lmark.lm-ok{ color:var(--green); }
.lmark.lm-tf{ color:var(--label); }
.lbucket{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:8px; vertical-align:middle; }
.lb-A{ background:var(--red); } .lb-B{ background:var(--ochre); } .lb-C{ background:var(--green); }
/* raised to table.ledger tbody td.ledger-empty: table.ledger tbody td alone is (0,1,3) and
   beat the bare .ledger-empty (0,1,0) at every viewport, so the authored 42px never painted */
table.ledger tbody td.ledger-empty{ padding:42px; text-align:center; font-style:italic; color:var(--muted); }

/* exhibit chip */
.exbtn{ font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.04em; border:1px solid var(--rule); background:transparent; color:var(--ink); padding:5px 9px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all .15s; white-space:nowrap; } /* lia-design-allow — static site, px font-size */
.exbtn:hover{ background:var(--ink); color:var(--paper); }
.exbtn:hover svg{ color:var(--paper); }
.exbtn svg{ color:var(--label); transition:color .15s; } /* lia-design-allow — static site; .15s hover colour tint on SVG icon, not a loading spinner */
.exbtn.disabled{ opacity:.45; cursor:default; }
.exbtn.disabled:hover{ background:transparent; color:var(--ink); }
/* spacing-1: the inline-in-prose exbtns (the index.html EF1 token, the email-popup
   E13 beat) keep their small visual box so the paragraph's line-box rhythm holds —
   min-height:44px on 180-part.css would inject ~9px of leading into that one line.
   WCAG 2.5.5 is met the way .emaillink already does: an invisible ::after hit-area
   extension instead of growing the box. */
.exbtn--inline{ position:relative; }
.exbtn--inline::after{ content:""; position:absolute; left:-8px; right:-8px; top:-13px; bottom:-13px; } /* lia-design-allow — static site */

/* ============================================================
   §II "email" popup — inline token + two-part modal cover
   lia-design-allow — byjus-financial-record-beta_test: static public-site,
   no Lia token system; px sizes / transitions are the site's own design language.
   ============================================================ */
/* anim-3: match the site-wide .15s hover family (.exbtn/.proof-toggle/.btn/
   .side-toc a all ease over .15s); .emaillink previously snapped its hover
   colour instantly. Reduced-motion is neutralised globally in 180-part.css. */
.emaillink{ position:relative; font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--gold-text); background:transparent; border:0; border-bottom:1px solid currentColor; padding:0 1px 1px; cursor:pointer; transition:color .15s; } /* lia-design-allow — static site, px font-size */
/* invisible expanded hit area: 44px tap target (WCAG 2.5.5) via ::after extension.
   top/bottom: element ~19px rendered height; -13px each side = 45px effective touch zone.
   Stays within body line-box (1.6 × 17px = 27px lead), so adjacent lines are not affected. */
.emaillink::after{ content:""; position:absolute; left:-8px; right:-8px; top:-13px; bottom:-13px; } /* lia-design-allow — static site */
.emaillink:hover{ color:var(--ink); }
/* without JS the popup cannot open: render the token as plain prose, not a dead control */
html:not(.has-js) .emaillink{ color:inherit; border-bottom:0; cursor:text; }
html:not(.has-js) .emaillink::after{ content:none; }
@media print{ .emaillink{ color:inherit; border-bottom:0; } }
.emailpop{ max-width:60ch; margin:0 auto; padding:6px 0 10px; }
.ep-kicker{ font-family:var(--mono); font-size:var(--kicker-fs); letter-spacing:var(--kicker-ls); text-transform:uppercase; color:var(--gold-text); font-weight:var(--kicker-fw); margin-bottom:10px; } /* lia-design-allow — the shared gold-kicker spec (design-10) */
.ep-headline{ font-family:var(--display); font-weight:700; font-size:clamp(21px,3vw,29px); line-height:1.18; letter-spacing:-.01em; margin:0; } /* lia-design-allow — static site, px font-size */
.ep-byline{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--label); margin-top:12px; } /* lia-design-allow — static site, px font-size */
.ep-answer{ margin-top:24px; padding-top:20px; border-top:2px solid var(--rule); }
.ep-prov{ font-family:var(--serif); font-size:15px; line-height:1.55; color:var(--ink); margin:0 0 12px; } /* lia-design-allow — static site, px font-size */
.ep-line{ font-family:var(--display); font-weight:600; font-size:clamp(16px,2.2vw,20px); line-height:1.32; color:var(--green); margin:0; } /* lia-design-allow — static site, px font-size */
.ep-date{ position:relative; display:inline-block; color:var(--ink); font-weight:600; padding:0 2px; }
.ep-date::before{ content:""; position:absolute; left:0; right:0; top:8%; bottom:8%; z-index:-1; background:var(--gold); opacity:.4; transform:scaleX(0); transform-origin:left; } /* lia-design-allow — static site */
.ep-date.sweep::before{ animation:epSweep .55s cubic-bezier(.4,0,.2,1) .15s forwards; } /* lia-design-allow — static site; sweep is a one-shot reveal animation, not a spinner */
.ep-date.lit::before{ transform:scaleX(1); }
@keyframes epSweep{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } } /* lia-design-allow — static site */
@media(prefers-reduced-motion:reduce){ .ep-date.sweep::before{ animation:none; transform:scaleX(1); } }

/* ----- the founders' timeline, rendered inside the email popup ----- */
.ep-timeline{ margin-top:26px; padding-top:20px; border-top:2px solid var(--rule); }
.ep-tl-kicker{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-text); margin-bottom:18px; } /* lia-design-allow — static site, px font-size */
.ep-tl-row{ position:relative; padding:0 0 20px 28px; } /* left gutter holds the rail + dot */
.ep-tl-row::before{ content:""; position:absolute; left:6px; top:7px; bottom:-2px; width:2px; background:var(--rule-soft); } /* lia-design-allow — static site; connecting rail */
.ep-tl-row:last-of-type::before{ display:none; }
.ep-tl-row::after{ content:""; position:absolute; left:1px; top:5px; width:11px; height:11px; border-radius:50%; background:var(--paper); border:2px solid var(--green); box-sizing:border-box; } /* lia-design-allow — static site; node dot */
.ep-tl-row.pivot::after{ background:var(--green); box-shadow:0 0 0 3px var(--green-wash); } /* lia-design-allow — static site; the email is the pivot */
.ep-tl-when{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--label); margin-bottom:5px; } /* lia-design-allow — static site, px font-size */
.ep-tl-head{ font-family:var(--display); font-weight:700; font-size:clamp(15px,2vw,18px); line-height:1.25; letter-spacing:-.01em; color:var(--ink); margin:0 0 4px; } /* lia-design-allow — static site, px font-size */
.ep-tl-row.pivot .ep-tl-head{ color:var(--green); }
.ep-tl-text{ font-family:var(--serif); font-size:14.5px; line-height:1.55; color:var(--muted); margin:0; } /* lia-design-allow — static site, px font-size */
.ep-tl-close{ font-family:var(--display); font-weight:700; font-size:clamp(15.5px,2.1vw,19px); line-height:1.3; color:var(--green); margin:8px 0 0; padding-left:28px; } /* lia-design-allow — static site, px font-size */

/* ============================================================
   METHOD CARDS + COLOUR KEY
   ============================================================ */
.method-grid{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--rule); border-left:1px solid var(--rule); margin-top:var(--space-2); }
.method-card{ padding:22px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.method-card h3{ font-family:var(--display); font-weight:700; font-size:19px; margin:0 0 7px; }
.method-card.verified h3{ color:var(--green); } .method-card.narrative h3{ color:var(--muted); }
.method-card p{ font-family:var(--serif); font-size:13.5px; line-height:1.5; color:var(--muted); margin:0; }
.method-card .code{ font-family:var(--mono); font-size:11px; background:var(--paper-2); border:1px solid var(--rule-soft); padding:9px 11px; margin-top:12px; color:var(--ink); }
.method-card .code b{ color:var(--red); }
@media(max-width:640px){ .method-grid{ grid-template-columns:1fr; } }

.colorkey{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule); border-left:1px solid var(--rule); margin-top:var(--space-2); }
.ck-cell{ padding:13px 14px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); display:flex; gap:10px; align-items:center; font-family:var(--serif); font-size:13px; }
.ck-cell .sw{ width:14px; height:14px; flex-shrink:0; }
.ck-cell .code2{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--label); }
@media(max-width:640px){ .colorkey{ grid-template-columns:1fr; } }
/* FIX-58: compact colour key, rendered in §I before the first colour-coded surface */
.ckline{ display:flex; flex-wrap:wrap; gap:7px 18px; align-items:center; margin:0 0 var(--space-3); font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--label); } /* lia-design-allow — static site, px font-size */
.ckline span{ display:inline-flex; align-items:center; gap:6px; }
.ckline i{ width:10px; height:10px; display:inline-block; flex-shrink:0; }
.ckline i.g{ background:var(--green); } .ckline i.r{ background:var(--red); } .ckline i.o{ background:var(--ochre); }

/* ============================================================
   EXHIBIT ARCHIVE
   ============================================================ */
.ex-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); border-top:1px solid var(--rule); border-left:1px solid var(--rule); margin-top:var(--space-2); }
/* in the 2-column band an odd card count leaves an open unbordered cell; span the
   last card instead (same treatment as the anatomy grid) */
@media(min-width:560px) and (max-width:900px){ .ex-grid > .ex-card:last-child:nth-child(odd){ grid-column:1 / -1; } }
.ex-card{ padding:20px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); cursor:pointer; background:transparent; text-align:left; font-family:inherit; display:flex; flex-direction:column; gap:9px; transition:background .18s; }
.ex-card:hover{ background:var(--paper-2); }
.ex-card .ec-top{ display:flex; justify-content:space-between; align-items:baseline; }
.ex-card .ec-code{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.05em; }
.ex-card .ec-type{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--label); }
.ex-card .ec-title{ font-family:var(--display); font-weight:700; font-size:19px; line-height:1.1; }
.ex-card .ec-proves{ font-family:var(--serif); font-size:13px; line-height:1.45; color:var(--muted); flex:1; }
.ex-card .ec-foot{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:7px; }
.ex-card .ec-foot .arrow{ transition:transform .2s; }
.ex-card:hover .ec-foot .arrow{ transform:translateX(4px); }
.ex-spine{ width:34px; height:3px; transition:width .25s cubic-bezier(.22,.61,.36,1); }
.ex-card:hover .ex-spine{ width:100%; }

/* ============================================================
   MODAL VIEWER
   lia-design-allow — byjus-financial-record-beta_test: static public-site, no Lia token
   system; raw hex/px/transitions are the site's own design language throughout.
   ============================================================ */
/* interact-3: opacity/pointer-events alone hide the scrim from eyes and the mouse but
   not from the tab order — a closed-modal Tab walk still lands on #modalClose.
   A `visibility:hidden`/`visible` toggle on this same class (tried first) removes it
   from the tab order correctly, but it also permanently defeats the very next
   #modalClose.focus() call on open (confirmed with a real mouse click in a headed
   browser, not just a headless-testing artifact) — Chromium never lets focus land on
   a node whose ancestor's `visibility` changed value in that same style recalculation
   batch, no matter how many frames you defer the focus() call by. `inert` (toggled in
   JS — openExhibit/openEmailPopup clear it, closeModal sets it) has none of that
   interaction with layout/paint, so it is the correct mechanism here, not CSS. */
.modal-scrim{ position:fixed; inset:0; z-index:200; background:rgba(22,19,18,.5); display:flex; align-items:stretch; justify-content:center; padding:clamp(0px,3vw,40px); opacity:0; pointer-events:none; transition:opacity .25s; } /* lia-design-allow — static site */
.modal-scrim.open{ opacity:1; pointer-events:auto; }
.modal{ background:var(--paper); width:min(1040px,100%); max-height:100%; display:flex; flex-direction:column; border:1px solid var(--rule); box-shadow:0 40px 90px -30px rgba(0,0,0,.5); transform:translateY(16px); transition:transform .28s cubic-bezier(.22,.61,.36,1); } /* lia-design-allow — static site; transition is modal entrance animation, not a spinner */
.modal-scrim.open .modal{ transform:none; }
.modal-head{ padding:22px clamp(20px,3vw,30px); border-bottom:2px solid var(--rule); background:var(--paper-2); }
.modal-head .mh-top{ display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.modal-head h3{ font-family:var(--display); font-weight:700; font-size:clamp(20px,2.4vw,27px); line-height:1.08; margin:0; max-width:30ch; } /* lia-design-allow — static site, px font-size */
.modal-meta{ display:flex; flex-wrap:wrap; gap:7px 18px; margin-top:11px; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--label); } /* lia-design-allow — static site, px font-size */
.modal-meta b{ color:var(--ink); }
.modal-note{ font-family:var(--serif); font-size:13.5px; line-height:1.5; color:var(--muted); margin:10px 0 0; max-width:82ch; } /* lia-design-allow — static site, px font-size */
/* clip-1/mobile-5: the note wrapper is the fade-cue surface — the <p> itself scrolls
   (overflow-y:auto), the wrapper stays put so its ::after fade always sits over the
   note's true bottom edge regardless of scroll position. */
.modal-note-wrap{ position:relative; }
/* phones: the fixed head must not eat half the dialog; long exhibit notes scroll.
   6em = exactly 4 lines at the 1.5 line-height (13.5px × 1.5 × 4) — clip-1/mobile-5:
   a cap that is not a whole number of line boxes slices the 4th line mid-glyph. */
@media(max-width:560px){
  .modal-note{ max-height:6em; overflow-y:auto; }
  .modal-note-wrap::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:20px; background:linear-gradient(to bottom, transparent, var(--paper-2)); pointer-events:none; } /* lia-design-allow — static site; discoverability cue for the scrollable note (clip-1/mobile-5) */
}
/* mobile-1: short viewports (phone landscape) are bounded by HEIGHT, not width — the
   width-keyed cap above never fires at e.g. 844×390, so the note grows unbounded and
   pushes the foot off-screen. Tighten to 3 lines and give the foot its own scroller. */
@media(max-height:500px){
  /* the scrim's own vw-based padding (sized for width, not height) was stealing
     ~50px of vertical room from a phone in landscape before the dialog even starts */
  .modal-scrim{ padding:0; }
  .modal-note{ max-height:4.5em; overflow-y:auto; }
  .modal-note-wrap::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:14px; background:linear-gradient(to bottom, transparent, var(--paper-2)); pointer-events:none; }
  /* the head's own fixed 22px vertical padding + meta/note margins were, by
     themselves, most of a 390px-tall viewport; tighten the whole head chrome so
     the note cap above actually buys the body window it is meant to. The
     exhibit/type/chapter meta line is the least essential line in the head — it
     drops here so the body window clears the ~40vh floor at 844×390. */
  .modal-head{ padding-top:12px; padding-bottom:12px; }
  .modal-meta{ display:none; }
  .modal-note{ margin-top:6px; }
  .modal-foot{ flex-shrink:1; min-height:0; max-height:25vh; overflow-y:auto; padding-top:8px; padding-bottom:8px; }
}
.modal-close{ flex-shrink:0; width:44px; height:44px; border:1px solid var(--rule); background:var(--paper); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink); transition:all .15s; } /* lia-design-allow — static site; 44px is WCAG 2.5.5 tap-target fix */
.modal-close:hover{ background:var(--ink); color:var(--paper); }
.modal-body{ flex:1; overflow:auto; padding:clamp(16px,2.5vw,26px); }
/* spacing-3: a body whose only child is the doc-less .proof-empty state gets
   centered instead of top-anchored in a full-height dialog — pdf-mode is untouched
   because .modal.pdf-mode .modal-body overrides display separately below. */
.modal-body:has(> .proof-empty){ display:grid; place-content:center; }
.modal-foot{ flex-shrink:0; padding:14px clamp(20px,3vw,30px); border-top:1px solid var(--rule); background:var(--paper-2); display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.btn{ font-family:var(--sans); font-size:13px; padding:9px 15px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--rule); background:var(--paper); color:var(--ink); transition:all .15s; } /* lia-design-allow — static site, px font-size */
.btn:hover{ background:var(--paper-2); }
.btn-dark{ background:var(--ink); color:var(--paper); }
.btn-dark:hover{ background:#000; } /* lia-design-allow — static site, raw hex; pure black hover for dark button */
.modal-foot .ft-note{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--label); margin-left:auto; } /* lia-design-allow — static site, px font-size */
/* modal PDF viewer — the browser's native viewer in one contained frame (own
   scroll + page controls), so a long filing does not stack endlessly. In
   .pdf-mode the modal fills the viewport and the frame fills the body, so the
   document scrolls only inside its own viewer (no second modal-body scrollbar). */
.pdf-frame{ width:100%; height:calc(100vh - 240px); min-height:380px; max-height:80vh; border:1px solid var(--rule); background:#fff; display:block; } /* lia-design-allow — static site, raw hex; #fff = PDF viewer background, no token equivalent */
.modal.pdf-mode{ height:100%; }
.modal.pdf-mode .modal-body{ display:flex; overflow:hidden; padding:0; background:var(--paper-2); }
.modal.pdf-mode .pdf-frame{ flex:1 1 auto; height:auto; min-height:0; max-height:none; border:0; }
.modal.pdf-mode .pdf-doc{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:clamp(10px,2vw,20px); } /* lia-design-allow — static site, px/calc; contained scroller for the canvas pages (no native PDF toolbar => no download) */
.modal.pdf-mode .pdf-pages{ max-width:900px; margin:0 auto; }
/* inline-proof PDF viewer (PDF.js canvas pages — no toolbar, no download) */
.pdf-doc{ width:100%; }
.pdf-pages{ display:flex; flex-direction:column; gap:14px; align-items:center; }
.pdf-page{ width:100%; max-width:900px; background:#fff; border:1px solid var(--rule); box-shadow:0 1px 0 var(--rule-soft); } /* lia-design-allow — static site, raw hex; #fff = PDF page canvas background */
.pdf-page canvas{ width:100%; height:auto; display:block; }
.pdf-status{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--label); text-align:center; padding:22px; } /* lia-design-allow — static site, px font-size */

/* S3: the claim that opened a scoped modal leads its body — a gold wayfinding
   accent (never red), so the reader sees the exact question this view answers. */
.scoped-claim{ font-family:var(--display); font-weight:600; font-size:17px; line-height:1.4; color:var(--ink); margin:0 0 16px; padding-left:13px; border-left:3px solid var(--gold); } /* lia-design-allow — static site, px font-size */
/* clip-4/spacing-4: .proof-empty sets text-align:center for its own copy, but the
   claim's gold left-rule was designed for flush-left text — never let it inherit center. */
.proof-empty .scoped-claim{ text-align:left; }
.swift-intro{ font-family:var(--serif); font-size:14.5px; line-height:1.55; color:var(--muted); margin-bottom:18px; max-width:76ch; } /* lia-design-allow — static site, px font-size */
.swift-intro .ledger-name{ display:block; font-family:var(--mono); font-size:11px; color:var(--label); margin-top:6px; } /* lia-design-allow — static site, px font-size */
.swift-card{ border:1px solid var(--rule); margin-bottom:14px; }
/* clip-2: let the header wrap into rows instead of crushing columns at phone widths —
   the nowrap badge/ref then drop to their own line instead of overflowing the card border. */
.swift-card .sc-head{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 16px; border-bottom:1px solid var(--rule); background:var(--paper-2); }
.swift-card .sc-leg{ font-family:var(--mono); font-size:10px; font-weight:600; padding:2px 7px; border:1px solid var(--red); color:var(--red); letter-spacing:.05em; white-space:nowrap; } /* lia-design-allow — static site, px font-size */
.swift-card .sc-label{ font-family:var(--display); font-weight:600; font-size:14px; min-width:0; } /* lia-design-allow — static site, px font-size */
.swift-card .sc-row{ font-family:var(--mono); font-size:10.5px; color:var(--label); margin-left:auto; white-space:nowrap; } /* lia-design-allow — static site, px font-size */
.swift-card .sc-badge{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.03em; padding:2px 6px; border:1px solid currentColor; border-radius:2px; white-space:nowrap; } /* lia-design-allow — static site, px font-size */
.swift-card .sc-badge.st-ok{ color:var(--green); }
.swift-card .sc-badge.st-tf{ color:var(--label); }
.swift-card .sc-badge:not(.st-ok):not(.st-tf){ display:none; }
.swift-grid{ padding:14px 16px; display:grid; grid-template-columns:1fr 1fr; gap:11px 24px; }
.swift-grid .sg{ font-family:var(--serif); font-size:13px; } /* lia-design-allow — static site, px font-size */
.swift-grid .sg .k{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--label); } /* lia-design-allow — static site, px font-size */
.swift-grid .sg .v{ margin-top:2px; word-break:break-word; }
.swift-grid .sg.full{ grid-column:1/-1; }
.swift-grid .sg .v.money{ font-family:var(--mono); font-weight:600; font-size:16px; color:var(--red); } /* lia-design-allow — static site, px font-size */
.swift-grid .sg .v.purpose{ background:var(--red-wash); padding:7px 10px; border-left:3px solid var(--red); font-size:12.5px; line-height:1.4; } /* lia-design-allow — static site, px font-size */
.swift-card.accent-green .sc-leg{ border-color:var(--green); color:var(--green); }
.swift-card.accent-green .v.money{ color:var(--green); }
.swift-card.accent-green .v.purpose{ background:var(--green-wash); border-left-color:var(--green); }
.swift-card.accent-ochre .sc-leg{ border-color:var(--ochre); color:var(--ochre); }
.swift-card.accent-ochre .v.money{ color:var(--ochre); }
.swift-card.accent-ochre .v.purpose{ background:var(--ochre-wash); border-left-color:var(--ochre); }
@media(max-width:560px){ .swift-grid{ grid-template-columns:1fr; } }

/* bank-memo quote, kept in caps but compact so it does not shout in running text */
.memoq{ font-family:var(--mono); font-size:.74em; letter-spacing:.04em; font-style:normal; color:var(--ink); }

/* modal total banner — total first, then line by line */
.swift-total{ border:1px solid var(--rule); background:var(--paper-2); padding:14px 18px; margin-bottom:16px; }
.swift-total .st-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; }
.swift-total .st-k{ font-family:var(--display); font-weight:700; font-size:16px; } /* lia-design-allow — static site, px font-size */
.swift-total .st-v{ font-family:var(--mono); font-weight:600; font-size:18px; color:var(--green); white-space:nowrap; } /* lia-design-allow — static site, px font-size */
.swift-total .st-v .st-inr{ color:var(--label); font-weight:400; font-size:13px; } /* lia-design-allow — static site, px font-size */
.swift-total .st-sub{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--label); margin-top:6px; } /* lia-design-allow — static site, px font-size */

/* ============================================================
   INLINE PROOFS · the proof opens in-stream under each ledger row
   (replaces the click-to-modal flow for the ledger). Reuses the
   .swift-card / .swift-total / .pdf-* styles above, unchanged.
   ============================================================ */
.proof-toggle{ font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.04em; border:1px solid var(--rule); background:transparent; color:var(--ink); padding:5px 9px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all .15s; white-space:nowrap; } /* lia-design-allow — static site, own px scale, designLaw:exempt */
.proof-toggle:hover{ background:var(--ink); color:var(--paper); }
.proof-toggle .pt-caret{ color:var(--label); transition:transform .15s, color .15s; display:inline-block; font-size:9px; } /* lia-design-allow — static site, own px scale, designLaw:exempt */
.proof-toggle:hover .pt-caret{ color:var(--paper); }
.proof-toggle.open{ background:var(--ink); color:var(--paper); }
.proof-toggle.open .pt-caret{ color:var(--paper); transform:rotate(90deg); }

.proof-row > td{ padding:0; background:var(--paper-2); border-bottom:1px solid var(--rule); box-shadow:inset 3px 0 0 var(--gold); }
/* anim-8: .26s was the one accordion off the shared .28s family (.cf-answer / .modal
   entrance both use .28s on this same curve) — align it so the whole accordion/entrance
   family shares one number. */
.proof-region{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s var(--reveal-ease); } /* lia-design-allow — static site, designLaw:exempt; accordion open/close reveal, respects prefers-reduced-motion below */
.proof-region.open{ grid-template-rows:1fr; }
.proof-region > .proof-inner{ overflow:hidden; min-height:0; }
/* a many-wire proof (E03 has 15+ cards) would otherwise inject thousands of pixels
   in-stream; once open it scrolls internally so the ledger row stays in view */
.proof-region.open > .proof-inner{ max-height:76vh; overflow-y:auto; }
.proof-inner{ padding:18px clamp(14px,2.4vw,26px) 20px; } /* lia-design-allow — static site, own px scale, designLaw:exempt */
.proof-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.proof-head .proof-ex{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.06em; padding:3px 9px; border:1px solid var(--ink); color:var(--ink); } /* lia-design-allow — static site, own px scale, designLaw:exempt */
.proof-head .proof-type, .proof-head .proof-chapter{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--label); } /* lia-design-allow — static site, own px scale, designLaw:exempt */
.proof-foot{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.proof-foot .ft-note{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--label); margin-left:auto; } /* lia-design-allow — static site, own px scale, designLaw:exempt */
.btn-sm{ font-size:12px; padding:7px 12px; } /* lia-design-allow — static site, own px scale, designLaw:exempt */
.proof-empty{ text-align:center; max-width:60ch; margin:0 auto; padding:14px 8px 6px; }
.proof-empty .pe-k{ font-family:var(--mono); font-size:var(--kicker-fs); letter-spacing:var(--kicker-ls); color:var(--gold-text); font-weight:var(--kicker-fw); text-transform:uppercase; } /* lia-design-allow — the shared gold-kicker spec (design-10); --gold-text (#8a6412) for AA text contrast */
.proof-empty .pe-claim{ font-family:var(--display); font-weight:700; font-size:21px; margin:14px 0 10px; line-height:1.25; } /* lia-design-allow — static site, own px scale, designLaw:exempt */
.proof-empty .pe-note{ font-family:var(--serif); color:var(--muted); font-size:14px; } /* lia-design-allow — static site, own px scale, designLaw:exempt */
.proof-region .pdf-doc{ margin-top:14px; }
.proof-region .pdf-pages{ display:flex; flex-direction:column; gap:14px; }
@media(prefers-reduced-motion:reduce){ .proof-region.open{ grid-template-rows:1fr; } }

/* footer */
.close{ margin-top:var(--space-6); }
.foot-run{ margin-top:var(--space-6); border-top:4px solid var(--rule); padding-top:16px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--label); } /* lia-design-allow — static site, own px scale, designLaw:exempt */

/* ============================================================
   REVEAL (subtractive — content visible by default)
   lia-design-allow — byjus-financial-record-beta_test: static public-site, no Lia token
   system; raw px/transitions are the site's own design language throughout.
   ============================================================ */
/* anim-8: the house scroll-entrance curve now lives in var(--reveal-ease) (10-part.css)
   so every entrance family points at the one value instead of repeating the literal. */
.reveal{ transition:opacity .7s var(--reveal-ease), transform .7s var(--reveal-ease); } /* lia-design-allow — static site */
.has-js .reveal.pending{ opacity:0; transform:translateY(20px); }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } /* lia-design-allow — static site; staggers the shared .reveal entrance, not a spinner */

/* ============================================================
   MOTION-MIN — ?motion=min renders body content instantly.
   (The one-time hero animation system was removed in R6; the
    live landing is the standalone landing-hero.js module.)
   ============================================================ */
html[data-motion="min"] .reveal{ transition:none !important; }
html[data-motion="min"] .has-js .reveal.pending{ opacity:1 !important; transform:none !important; }
html[data-motion="min"] .bar-fill{ transition:none !important; }

/* ============================================================
   RESPONSIVE — mobile tap targets · ledger reflow · reduced-motion
   lia-design-allow — byjus-financial-record-beta_test: static public-site,
   no Lia token system; px sizes are the site's own design language.
   ============================================================ */
/* the .exbtn variants below repeat the descendant selectors that elsewhere hardcode
   padding:3px 7px — a bare .exbtn here loses that specificity fight and the chips
   stay 20px tall on phones */
/* mobile-3: keyed to (max-width:640px), (pointer:coarse) — a phone rotated to
   landscape (e.g. 844×390) is still narrower than 640px in… width? no: it is WIDER
   than 640px, so the old max-width-only query never matched and every tap target
   here reverted to its small desktop size. pointer:coarse catches touch regardless
   of orientation/width; it never matches a mouse, so desktop hover sizing holds. */
@media(max-width:640px), (pointer:coarse){
  /* min-height:44px meets WCAG 2.5.5 (44×44 CSS px tap target) without disrupting layout */
  .filter-btn{ padding:11px 13px; min-height:44px; } /* lia-design-allow — static site, px is local design system */
  .proof-toggle, .exbtn:not(.exbtn--inline),
  .bar-row .bval .exbtn:not(.exbtn--inline), .wf-node .exbtn:not(.exbtn--inline), .recon td.ex-col .exbtn:not(.exbtn--inline){ padding:8px 11px; min-height:44px; } /* lia-design-allow — static site */
  /* interact-1/mobile-2: the .btn family (modal/proof foot buttons, #pdfBack,
     [data-pdfback]) was the one control family missing this floor; .btn-sm inherits
     it as a min-height (padding stays smaller, so it does not grow to .btn's size). */
  .btn{ min-height:44px; } /* lia-design-allow — static site */
}

/* ---- mobile: ledger reflows from a wide table to stacked cards ---- */
@media(max-width:560px){
  .ledger-scroll{ overflow-x:visible; }
  table.ledger{ min-width:0; display:block; font-size:13px; } /* lia-design-allow — static site, px font-size */
  table.ledger thead{ display:none; }
  table.ledger tbody, table.ledger tbody tr, table.ledger tbody td{ display:block; }
  table.ledger tbody tr.lrow{ border:1px solid var(--rule); margin-bottom:10px; padding:10px 12px; }
  table.ledger tbody tr.lrow:hover{ box-shadow:none; background:transparent; }
  table.ledger tbody td{ border:0; padding:3px 0; }
  table.ledger tbody tr.lrow-empty{ border:1px solid var(--rule); margin-bottom:10px; }
  table.ledger tbody td.ledger-empty{ padding:42px 14px; }   /* override the block td's 3px 0 so the empty state still breathes on phones */
  table.ledger tbody td.c-to{ font-size:15px; } /* lia-design-allow — static site, px font-size */
  table.ledger tbody td[data-label]::before{ content:attr(data-label) "  "; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--label); } /* lia-design-allow — static site, px font-size */
  .proof-row > td{ display:block; padding:0; }
  .proof-row > td::before{ content:none; }
}

/* Reduced-motion: neutralise every transition/animation in one place
   (covers the modal slide, hovers, the exhibit-card spine/arrow, the
   progress-bar tint and the staggered waterfall), and keep content shown. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none!important; animation:none!important; }
  html{ scroll-behavior:auto!important; }
  .has-js .reveal.pending{ opacity:1; transform:none; }
  .has-js .flow.pending .wf-step{ opacity:1; transform:none; }
}

/* ============================================================
   READING PROGRESS BAR (all screens) + MOBILE HEADER
   ============================================================ */
.read-progress{ position:fixed; inset:0 0 auto 0; height:3px; z-index:120; pointer-events:none; }
.read-progress-fill{ height:100%; width:0; background:var(--gold); transition:width .1s linear; } /* lia-design-allow — static site; single-toned gold accent at all times, red = accusation only never wayfinding; transition tracks scroll position, not a loading spinner */

/* slim sticky bar shown only on small screens: brand + current section */
.mob-head{ display:none; }
.mob-brand{ font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:-.02em; white-space:nowrap; } /* lia-design-allow — static site, px font-size */
.mob-brand .ai{ color:var(--gold-text); }
.mob-sec{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--label); text-align:right; white-space:nowrap; flex:0 0 auto; } /* lia-design-allow — static site, px font-size */

/* ============================================================
   RESPONSIVE — sidebar becomes a slim sticky section indicator
   Collapse at <=1024px: the 268px sidebar needs ~1025px+ to leave the
   content column wide enough for the 3-column figures.
   ============================================================ */
@media(max-width:1024px){
  html{ scroll-padding-top:64px; }         /* clear the sticky mobile bar on anchor jumps */
  .shell{ display:block; }                 /* block, not flex-column: kills the
                                              cross-axis min-content overflow */
  .side{
    width:100%; height:auto; overflow:visible;
    position:sticky; top:0; z-index:50;
    background:var(--paper-2); border-right:0; border-bottom:2px solid var(--rule);
    padding:0;
  }
  /* the masthead, three-numbers, TOC and colophon all live in the main column;
     the rail is just a slim sticky bar now. */
  .side-mast, .side-nums, .colophon, .side-grp.toc-grp{ display:none; }
  .mob-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px clamp(16px,5vw,24px); }
  .main{ max-width:none; overflow-x:clip; } /* belt-and-suspenders: ledger keeps
                                               its own scroll inside .ledger-scroll */
  /* FIX-11: noscript ledger table needs its own scroll container so portrait
     phones can read all columns (INR, Note, Exhibit) without truncation. */
  #ledger noscript table, #archive noscript table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* with the sidebar gone nothing caps the reading column; hold flowing prose to a
     comfortable measure (figures and tables keep the full width) */
  .main .lead, .main .p, .main .fine{ max-width:72ch; }
}


/* ============================================================
   PHONE — tighten display type & vertical rhythm (≤560px)
   lia-design-allow — byjus-financial-record-beta_test: static public-site, no Lia
   token system; px sizes below are the site's own display-type scale (designLaw:exempt
   in systems.registry.json), not Lia-ecosystem tokens.
   ============================================================ */
@media(max-width:560px){
  .main{ padding:28px 18px 80px; }
  /* spacing-5: 44px was off the site's --space ladder (8/14/22/30/48/72) and only
     covered .sec, so .close/.foot-run kept the desktop 72px — a 28px jump at the
     very end of the page. --space-5 (48px) keeps one phone rhythm end to end. */
  .sec, .close, .foot-run{ margin-top:var(--space-5); }
  .fig{ margin:22px 0; }
  .sec-head .sn{ font-size:23px; } /* lia-design-allow — static site, px font-size */
  .wf-name{ font-size:18px; } /* lia-design-allow — static site, px font-size */
  .chip .cv{ font-size:23px; } /* lia-design-allow — static site, px font-size */
  .pull{ font-size:19px; } /* lia-design-allow — static site, px font-size */
  .drop::first-letter{ font-size:52px; } /* lia-design-allow — static site, px font-size */
  table.ledger{ font-size:13px; } /* lia-design-allow — static site, px font-size */
}

/* ============================================================
   SKIP LINK + FOCUS VISIBILITY (keyboard / a11y)
   ============================================================ */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--ink); color:var(--paper); font-family:var(--sans);
  font-size:14px; padding:10px 16px; text-decoration:none; /* lia-design-allow — static site skip-link, px font-size */
}
.skip-link:focus{ left:8px; top:8px; }

:focus-visible{ outline:2px solid var(--gold-text); outline-offset:2px; } /* lia-design-allow — static site; outline width/offset in px, ring uses --gold-text (#8a6412) for >=3:1 non-text contrast per WCAG 1.4.11 */
table.ledger thead th .th-sort:focus-visible{ outline-offset:-2px; }

/* visually-hidden but available to assistive tech (table captions etc.) */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ============================================================
   CLS — reserve space for the JS-rendered regions so they don't
   shift layout as data.js hydrates. Values are the rendered
   desktop heights (the minimum across viewports, since the main
   column is width-capped and narrower screens render taller),
   kept just under measured so content never under-fills a gap.
   The master ledger is intentionally omitted — it is user-
   filterable, so its height changes are input-driven (and excluded
   from CLS) and a fixed reserve would leave a gap when filtered.
   Reserves are scoped to .has-js: with JS off these regions stay
   empty, and an unconditional reserve would render as dead bands.
   lia-design-allow — byjus-financial-record-beta_test: static public-site,
   no Lia token system; the px min-height reserves below are measured
   rendered-content heights (CLS reserves), not a design token scale.
   ============================================================ */
.has-js #flowA{ min-height:950px; }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
.has-js #reconA{ min-height:210px; }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
/* #barsC/#barsB carry long wrapping sub-labels, so they render far TALLER on
   phones than on desktop (≈460px desktop → ≈944px at 360px). A single desktop
   reserve left ~480px of mobile shift; these per-band ladders reserve the
   measured height in each band (no shift, minimal dead-band), like the hero. */
.has-js #barsC{ min-height:460px; }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
@media(max-width:1023px){ .has-js #barsC{ min-height:545px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
@media(max-width:768px){  .has-js #barsC{ min-height:615px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
/* Measured: #barsC natural is 660px at 645-679px viewports (a narrower band
   than either the 768px or 640px step covers), above the 615px reserve —
   a genuine under-reserve; add the missing intermediate step. */
@media(max-width:709px){  .has-js #barsC{ min-height:665px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
@media(max-width:640px){  .has-js #barsC{ min-height:635px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
@media(max-width:560px){  .has-js #barsC{ min-height:740px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
@media(max-width:520px){  .has-js #barsC{ min-height:835px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
@media(max-width:480px){  .has-js #barsC{ min-height:890px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
@media(max-width:414px){  .has-js #barsC{ min-height:945px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
/* Measured (Playwright, natural height with the min-height clamp removed):
   #barsC natural is 968px at 320-344px viewports, above the 945px reserve
   used down to 414px — a genuine under-reserve (not just slack) at the
   narrowest supported widths; add the missing narrow step. */
@media(max-width:354px){  .has-js #barsC{ min-height:980px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
.has-js #reconC{ min-height:405px; }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
.has-js #barsB{ min-height:530px; }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
@media(max-width:679px){ .has-js #barsB{ min-height:690px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
@media(max-width:640px){ .has-js #barsB{ min-height:705px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
@media(max-width:390px){ .has-js #barsB{ min-height:760px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
/* Measured: #barsB natural is 802px at 320px (781px at 330-340px), above the
   760px reserve used down to 345px — a genuine under-reserve at the
   narrowest supported widths; add the missing narrow step. */
@media(max-width:344px){ .has-js #barsB{ min-height:815px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
.has-js #costsB{ min-height:288px; }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
.has-js #colorKey{ min-height:86px; }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
.has-js #exGrid{ min-height:1090px; }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
/* the deferred landing module injects the hero; reserving its box kills the page's
   only real load-time layout shift (CLS 0.29 → ~0.01). The hero switches to two
   columns at 640px and settles ~80px SHORTER there, so the reserve steps per band,
   always just UNDER the measured settled minimum (640→473, 800→487, 880→527,
   981+→536) so the box never over-reserves into a visible dead band. */
/* the <noscript> mirrors should keep the design system instead of browser defaults */
noscript table{ width:100%; border-collapse:collapse; font-family:var(--serif); font-size:13px; margin:14px 0; } /* lia-design-allow — byjus-financial-record-beta_test: public-site own design language, not Lia-ecosystem; px values are the site's own scale */
noscript caption{ font-family:var(--serif); font-style:italic; font-size:13px; color:var(--muted); text-align:left; padding-bottom:8px; } /* lia-design-allow — byjus-financial-record-beta_test: own design language */
noscript th{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; text-align:left; color:var(--label); font-weight:500; border-bottom:2px solid var(--rule); padding:8px 12px 8px 0; } /* lia-design-allow — byjus-financial-record-beta_test: own design language */
noscript td{ padding:8px 12px 8px 0; border-bottom:1px solid var(--rule-soft); vertical-align:top; }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
noscript ul{ font-family:var(--serif); font-size:13.5px; line-height:1.6; padding-left:20px; margin:14px 0; } /* lia-design-allow — byjus-financial-record-beta_test: own design language */
noscript p{ font-family:var(--serif); font-size:13.5px; line-height:1.6; } /* lia-design-allow — byjus-financial-record-beta_test: own design language */

/* Desktop reserve 620px: holds #addback below the Lighthouse desktop fold (~900px) so the
   landing animation's in-place opacity/transform beats never shift visible content (CLS-safe).
   Heights are scoped to .has-js so a no-JS visitor gets no dead reserve. Verify via check-beta. */
.has-js #landing-hero{ min-height:620px; }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
@media(max-width:1024px){ .has-js #landing-hero{ min-height:620px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
@media(max-width:980px){ .has-js #landing-hero{ min-height:620px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
@media(max-width:879px){ .has-js #landing-hero{ min-height:600px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
@media(max-width:799px){ .has-js #landing-hero{ min-height:580px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
@media(max-width:639px){ .has-js #landing-hero{ min-height:636px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
@media(max-width:560px){ .has-js #landing-hero{ min-height:628px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
@media(max-width:480px){ .has-js #landing-hero{ min-height:643px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */
@media(max-width:420px){ .has-js #landing-hero{ min-height:643px; } }  /* lia-design-allow — static site, CLS reserve: measured rendered-content height, not a design token */

/* ============================================================
   PRINT — drop the furniture, keep the record
   ============================================================ */
@media print{
  body{ background:#fff; }
  body::before{ display:none; }
  .side, .masthead, .ledger-controls, .skip-link, .modal-scrim, .foot-run, .lh-cue{ display:none !important; }
  .shell{ display:block; max-width:none; }
  .main{ max-width:none; padding:0 0 24px; }
  .has-js .reveal.pending, .has-js .flow.pending .wf-step{ opacity:1 !important; transform:none !important; }
  /* the clippings answers ARE the record: print them open, drop the dead toggles */
  #clippings-file .cf-answer{ grid-template-rows:1fr !important; }
  #clippings-file .cf-answer-in{ overflow:visible !important; }
  #clippings-file .cf-ex, #clippings-file .cf-more{ display:none !important; }
  .fig, .recon, .anat, .ex-grid, .method-grid, .colorkey, .chips, .swift-card, .bar-row, .wf-step{ break-inside:avoid; }
  /* FIX-61: print the full ledger — all seven columns, no mid-word Note truncation */
  .ledger-controls{ display:none !important; }
  .ledger-scroll{ overflow:visible !important; }
  table.ledger{ min-width:0 !important; width:100% !important; font-size:10.5px !important; } /* lia-design-allow — static site, px font-size; print-only compaction */
  table.ledger thead th, table.ledger tbody td{ padding:4px 6px 4px 0 !important; white-space:normal !important; }
  .c-note{ font-size:9.5px !important; } /* lia-design-allow — static site, px font-size; print-only */
  table.ledger, .ledger-scroll{ break-inside:auto; }
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}