/* ══════════════════════════════════════════════════
   Knok — shared design system
   Tokens, page chrome, nav. Page-specific CSS stays
   inline in each page.
   ══════════════════════════════════════════════════ */

:root{
  /* ink */
  --ink-900:#14161F;--ink-800:#1C1F2B;--ink-700:#2A2E3D;--ink-600:#3D4356;
  --ink-500:#565C71;--ink-300:#9AA0B4;--ink-200:#C7CBD8;--ink-100:#E4E6EE;--ink-050:#F1F2F7;
  /* brand */
  --saffron-700:#C26400;--saffron-600:#E57700;--saffron-500:#FF8A00;--saffron-400:#FFA33D;
  --saffron-200:#FFD9A8;--saffron-050:#FFF4E6;
  --indigo-900:#131533;--indigo-800:#1D2148;
  /* semantic */
  --green-700:#075E41;--green-600:#0B7F58;--green-500:#0E9F6E;--green-400:#34C48C;--green-050:#E3F6EE;
  --red-600:#C93B3F;--red-500:#E5484D;--red-050:#FDECEC;
  --blue-600:#1D4FD7;--blue-500:#2563EB;--blue-050:#EAF1FE;
  --violet-500:#7C4DFF;--violet-050:#F0EBFF;
  /* surfaces */
  --surface:#FBFAF7;--raised:#FFFFFF;--sunken:#F4F3EF;
  /* texture */
  --mesh-warm:radial-gradient(at 12% 6%,#FFE3BE 0,transparent 52%),radial-gradient(at 88% 2%,#FFC58A 0,transparent 46%),radial-gradient(at 62% 98%,#FFF0DC 0,transparent 58%),#FFFCF7;
  --mesh-deep:radial-gradient(at 18% -4%,#3E2C77 0,transparent 54%),radial-gradient(at 92% 12%,#1B3E7A 0,transparent 48%),radial-gradient(at 48% 104%,#4E1F5E 0,transparent 52%),#121430;
  --mesh-money:radial-gradient(at 16% 4%,#0E7A58 0,transparent 52%),radial-gradient(at 90% 8%,#0A5C6B 0,transparent 46%),radial-gradient(at 52% 100%,#123A2E 0,transparent 55%),#0C2620;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.42'/></svg>");
  /* elevation */
  --glow-saf:0 12px 30px -8px rgba(255,138,0,.5),0 2px 6px rgba(226,119,0,.22);
  --glow-green:0 12px 30px -8px rgba(14,159,110,.46),0 2px 6px rgba(11,127,88,.2);
  --glow-ink:0 12px 30px -10px rgba(20,22,31,.45),0 2px 5px rgba(20,22,31,.16);
  --hi:inset 0 1px 0 rgba(255,255,255,.11);--hi-strong:inset 0 1px 0 rgba(255,255,255,.2);
  --sh-sm:0 1px 2px rgba(20,22,31,.06),0 1px 3px rgba(20,22,31,.04);
  --sh-md:0 6px 16px -4px rgba(20,22,31,.1),0 2px 5px rgba(20,22,31,.05);
  --sh-lg:0 22px 48px -12px rgba(20,22,31,.2),0 6px 14px rgba(20,22,31,.07);
  /* shape + motion */
  --r-sm:10px;--r-md:14px;--r-lg:20px;--r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);--spring:cubic-bezier(.34,1.4,.5,1);
  /* validated categorical series (see cost page) */
  --s1:#C26400;--s2:#2563EB;--s3:#0B7F58;--s4:#7C4DFF;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--surface);
  color:var(--ink-900);line-height:1.55;-webkit-font-smoothing:antialiased}
.ml{font-family:'Noto Sans Malayalam','Inter',sans-serif}
.mono{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;font-variant-ligatures:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 24px}
.narrow{max-width:1080px}
.disp{font-family:'Bricolage Grotesque',Inter,sans-serif;font-weight:800;letter-spacing:-.035em}
.tab-num{font-variant-numeric:tabular-nums}

/* ── nav ─────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:200;background:rgba(251,250,247,.86);
  backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--ink-100)}
.nav .inner{max-width:1320px;margin:0 auto;padding:11px 24px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;flex:none}
.brand .mk{width:31px;height:31px;border-radius:9px;background:var(--ink-900);display:grid;place-items:center;
  box-shadow:var(--glow-ink),var(--hi);flex:none}
.brand .wd{font-family:'Bricolage Grotesque',Inter,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.02em}
.brand .tg{font-size:10px;font-weight:700;color:var(--saffron-700);background:var(--saffron-050);
  padding:3px 7px;border-radius:var(--r-pill);letter-spacing:.03em}
.navlinks{display:flex;gap:3px;margin-left:auto;flex-wrap:wrap}
.navlinks a{font-size:13.5px;font-weight:600;color:var(--ink-500);text-decoration:none;
  padding:8px 13px;border-radius:var(--r-pill);transition:.16s var(--ease);white-space:nowrap}
.navlinks a:hover{color:var(--ink-900);background:var(--ink-050)}
.navlinks a.on{color:var(--ink-900);background:var(--ink-900);color:#fff}
@media(max-width:760px){.nav .inner{flex-wrap:wrap;gap:12px}.navlinks{margin-left:0;width:100%}}

/* ── hero ────────────────────────────────────── */
.hero{position:relative;padding:64px 0 48px;overflow:hidden;background:var(--mesh-warm);
  border-bottom:1px solid rgba(226,119,0,.16)}
.hero::after{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.32;
  mix-blend-mode:multiply;pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.hero.deep{background:var(--indigo-900);border-bottom:none}
.hero.deep::before{content:'';position:absolute;inset:0;background:var(--mesh-deep)}
.hero.deep::after{mix-blend-mode:overlay;opacity:.3}
.hero.deep h1,.hero.deep .disp{color:#fff}
.hero.deep .lede{color:rgba(255,255,255,.66)}
.hero.deep .lede strong{color:#fff}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(20,22,31,.92);color:#fff;
  padding:7px 14px;border-radius:var(--r-pill);font-size:12px;font-weight:700;margin-bottom:22px;
  box-shadow:var(--glow-ink)}
.hero.deep .badge{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);box-shadow:var(--hi)}
h1{font-family:'Bricolage Grotesque',Inter,sans-serif;font-weight:800;
  font-size:clamp(33px,5vw,56px);line-height:1.03;letter-spacing:-.04em;max-width:18ch}
.lede{font-size:18.5px;color:#6B5233;max-width:66ch;margin-top:19px;line-height:1.6}
.lede strong{color:var(--ink-900);font-weight:600}

/* ── sections ────────────────────────────────── */
section{padding:58px 0;border-bottom:1px solid var(--ink-100)}
section.dark{background:var(--indigo-900);border:none;position:relative;overflow:hidden}
section.dark::before{content:'';position:absolute;inset:0;background:var(--mesh-deep)}
section.dark::after{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.3;pointer-events:none}
section.dark .wrap{position:relative;z-index:2}
section.dark h2,section.dark h3,section.dark .disp{color:#fff}
section.dark .sec-sub{color:rgba(255,255,255,.62)}
section.dark .sec-kicker{color:var(--saffron-400)}
section.tint{background:var(--sunken)}
h2{font-family:'Bricolage Grotesque',Inter,sans-serif;font-weight:800;
  font-size:clamp(26px,3.1vw,35px);letter-spacing:-.03em;margin-bottom:10px}
h3{font-size:16px;font-weight:700;letter-spacing:-.01em}
.sec-kicker{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--saffron-700);margin-bottom:12px}
.sec-sub{color:var(--ink-500);max-width:74ch;font-size:16.5px;margin-bottom:34px;line-height:1.62}
.sec-sub strong{color:var(--ink-900);font-weight:600}

/* ── cards / grid ────────────────────────────── */
.grid{display:grid;gap:14px}
/* explicit column counts — auto-fit silently makes extra columns on wide screens */
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1040px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--raised);border:1px solid var(--ink-100);border-radius:var(--r-md);
  padding:18px;box-shadow:var(--sh-sm)}
.card h3{margin-bottom:7px}
.card p{font-size:13.5px;color:var(--ink-500);line-height:1.6}
.card p strong{color:var(--ink-900);font-weight:600}
section.dark .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);box-shadow:var(--hi)}
section.dark .card p{color:rgba(255,255,255,.66)}
section.dark .card p strong{color:#fff}
.kicker-sm{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-300);margin-bottom:8px}
section.dark .kicker-sm{color:rgba(255,255,255,.45)}

/* ── pills ───────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);
  font-size:11px;font-weight:700;white-space:nowrap}
.pill.green{background:var(--green-050);color:var(--green-700)}
.pill.saf{background:var(--saffron-050);color:var(--saffron-700)}
.pill.blue{background:var(--blue-050);color:var(--blue-600)}
.pill.vio{background:var(--violet-050);color:var(--violet-500)}
.pill.red{background:var(--red-050);color:var(--red-600)}
.pill.ink{background:var(--ink-050);color:var(--ink-700)}
.pill.gl{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.2)}

/* ── rules (do / don't) ──────────────────────── */
.rule{background:var(--raised);border:1px solid var(--ink-100);border-radius:var(--r-md);
  padding:17px;box-shadow:var(--sh-sm)}
.rule .yn{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-bottom:7px}
.rule.do .yn{color:var(--green-600)}.rule.dont .yn{color:var(--red-600)}
.rule p{font-size:13.5px;color:var(--ink-500);line-height:1.6}
.rule strong{color:var(--ink-900);font-weight:600}

/* ── tables ──────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--raised);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm);border:1px solid var(--ink-100)}
.tbl th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-300);padding:11px 14px;background:var(--sunken);border-bottom:1px solid var(--ink-100);
  white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--ink-050);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr.total td{background:var(--ink-900);color:#fff;font-weight:700;border:none}
.tbl tr.sub td{background:var(--sunken);font-weight:700}
.tbl .muted{color:var(--ink-500);font-size:12px;display:block;margin-top:2px}

/* ── code ────────────────────────────────────── */
.code{background:var(--ink-900);color:#D9DEEB;border-radius:var(--r-md);padding:16px 18px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.7;
  overflow-x:auto;box-shadow:var(--glow-ink),var(--hi)}
.code .c{color:#6E7690}.code .k{color:var(--saffron-400)}.code .s{color:#7FD4A8}.code .n{color:#8FB8FF}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--ink-050);padding:1.5px 5px;border-radius:5px;color:var(--ink-700)}
section.dark code{background:rgba(255,255,255,.12);color:#fff}

/* ── callout ─────────────────────────────────── */
.callout{background:var(--raised);border:1px solid var(--ink-100);border-left:3px solid var(--saffron-500);
  border-radius:var(--r-md);padding:17px 19px;box-shadow:var(--sh-sm)}
.callout h4{font-size:14.5px;font-weight:700;color:var(--saffron-700);margin-bottom:6px}
.callout p{font-size:13.5px;color:var(--ink-500);line-height:1.62}
.callout p strong{color:var(--ink-900);font-weight:600}
.callout.g{border-left-color:var(--green-500)}.callout.g h4{color:var(--green-700)}
.callout.r{border-left-color:var(--red-500)}.callout.r h4{color:var(--red-600)}
section.dark .callout{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);
  border-left-color:var(--saffron-400);box-shadow:var(--hi)}
section.dark .callout h4{color:var(--saffron-400)}
section.dark .callout p{color:rgba(255,255,255,.68)}
section.dark .callout p strong{color:#fff}

/* ── stat tiles ──────────────────────────────── */
.stat{background:var(--raised);border:1px solid var(--ink-100);border-radius:var(--r-md);
  padding:18px;box-shadow:var(--sh-sm)}
.stat .lbl{font-size:11px;font-weight:700;color:var(--ink-300);letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:9px}
.stat .val{font-family:'Bricolage Grotesque',Inter,sans-serif;font-weight:800;font-size:33px;
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat .sub{font-size:12.5px;color:var(--ink-500);margin-top:8px;line-height:1.5}
.stat.dark{background:var(--ink-900);border:none;box-shadow:var(--glow-ink),var(--hi)}
.stat.dark .lbl{color:rgba(255,255,255,.5)}.stat.dark .val{color:#fff}
.stat.dark .sub{color:rgba(255,255,255,.6)}
.stat.dark .sub strong{color:#fff}
section.dark .stat{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);box-shadow:var(--hi)}
section.dark .stat .val{color:#fff}section.dark .stat .lbl{color:rgba(255,255,255,.45)}
section.dark .stat .sub{color:rgba(255,255,255,.6)}

/* ── footer ──────────────────────────────────── */
footer{padding:44px 0 66px;color:var(--ink-300);font-size:13.5px;line-height:1.7}
footer strong{color:var(--ink-700)}
footer a{color:var(--ink-500)}

/* ── low-power tier ──────────────────────────── */
.tier-b .hero::after,.tier-b section.dark::after{display:none}
.tier-b .nav{backdrop-filter:none;background:var(--surface)}
.tier-b *{animation:none!important}