/* jhandimundapro.com — Jhandi Munda
   Structure: no sidebar, no sticky top bar. A dark opening block with the
   headline and the three numbers that matter, a bento grid for the symbols,
   numbered body sections, data as bars rather than a table, two column FAQ,
   and a docked action bar on phones. */

:root{
  --ink:#0c0c0e;
  --ink-2:#1a1a1f;
  --ink-3:#2a2a31;
  --paper:#faf8f5;
  --paper-2:#ffffff;
  --sand:#f0ebe3;
  --muted:#6f6b66;
  --muted-2:#9a948c;
  --line:#e6e1d9;
  --line-d:#33333c;
  --saffron:#e8952f;
  --saffron-2:#ffb85c;
  --saffron-d:#a5620f;
  --jade:#1f8a5b;
  --crimson:#c9354a;
  --wrap:1160px;
  --narrow:760px;
  --fd:'Sora',-apple-system,'Segoe UI',sans-serif;
  --fb:'Manrope',-apple-system,'Segoe UI',Roboto,sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--fb);font-size:17.5px;line-height:1.7;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--saffron-d);text-underline-offset:3px}
a:hover{color:var(--crimson)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 26px}
.narrow{max-width:var(--narrow)}

/* ---------- top bar: scrolls away, no sticky chrome ---------- */
.bar{background:var(--ink)}
.bar .wrap{display:flex;align-items:center;gap:20px;min-height:76px;flex-wrap:wrap}
.logo{
  display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;
  font-family:var(--fd);font-weight:600;font-size:17px;color:#fff;letter-spacing:-.3px;
}
.logo .pin{
  width:32px;height:32px;flex:0 0 32px;border-radius:9px;background:var(--saffron);
  display:grid;place-items:center;
}
.logo .pin svg{width:18px;height:18px}
.logo span{color:var(--muted-2);font-weight:400}
.barnav{display:flex;gap:4px;flex-wrap:wrap}
.barnav a{
  color:#c9c5bf;text-decoration:none;font-size:15px;font-weight:500;
  padding:8px 14px;border-radius:99px;
}
.barnav a:hover{background:var(--ink-3);color:#fff}
.barnav a[aria-current="page"]{background:#fff;color:var(--ink)}

/* ---------- opening block ---------- */
.open{background:var(--ink);color:#fff;padding:34px 0 0}
.tagline{
  font-family:var(--fm);font-size:12.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--saffron-2);margin:0 0 22px;
}
h1{
  font-family:var(--fd);font-weight:600;letter-spacing:-2px;
  font-size:clamp(38px,7vw,76px);line-height:1.02;margin:0 0 24px;color:#fff;
  max-width:16ch;
}
h1 em{font-style:normal;color:var(--saffron)}
.standfirst{
  font-size:clamp(18px,2.1vw,22px);line-height:1.55;color:#b8b3ac;
  max-width:58ch;margin:0 0 34px;
}

/* three figures, the spine of the whole site */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-d);margin:0 0 40px}
.fig3{background:var(--ink);padding:26px 24px 28px}
.fig3 b{
  display:block;font-family:var(--fm);font-weight:600;letter-spacing:-2px;
  font-size:clamp(34px,5vw,54px);line-height:1;color:#fff;margin:0 0 10px;
}
.fig3 b.acc{color:var(--saffron)}
.fig3 p{margin:0;font-size:15px;color:#8f8a83;line-height:1.45;max-width:26ch}

.openbtns{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding-bottom:42px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  background:var(--saffron);color:#221604;text-decoration:none;font-weight:700;
  padding:0 30px;border-radius:99px;font-size:16.5px;
}
.btn:hover{background:var(--saffron-2);color:#221604}
.btn.line{background:transparent;color:#fff;border:1px solid #3d3d47}
.btn.line:hover{background:var(--ink-3);color:#fff}
.small{font-size:14px;color:#78736c;margin:14px 0 0}

/* ---------- bento: the six symbols ---------- */
.bento{
  display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(120px,auto);
  gap:14px;margin:-30px 0 0;position:relative;z-index:2;
}
.tile{
  background:var(--paper-2);border:1px solid var(--line);border-radius:20px;
  padding:20px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 10px 30px rgba(12,12,14,.07);
}
.tile.wide{grid-column:span 2}
.tile svg{width:38px;height:38px}
.tile b{display:block;font-family:var(--fd);font-size:17px;font-weight:600;margin-top:14px}
.tile span{display:block;font-size:14px;color:var(--muted);line-height:1.4}
.tile.note{background:var(--ink);border-color:var(--ink);color:#fff;justify-content:center}
.tile.note b{color:var(--saffron);margin:0 0 6px}
.tile.note span{color:#a8a39c;font-size:15px}

/* ---------- body sections ---------- */
.body{padding:70px 0 0}
.sec{margin:0 0 68px;scroll-margin-top:24px}
.secnum{
  font-family:var(--fm);font-size:13px;color:var(--saffron-d);letter-spacing:1.4px;
  display:block;margin:0 0 12px;
}
h2{
  font-family:var(--fd);font-weight:600;letter-spacing:-1px;
  font-size:clamp(27px,3.8vw,42px);line-height:1.1;margin:0 0 16px;max-width:20ch;
}
.dek{font-size:19px;color:var(--muted);margin:0 0 26px;max-width:56ch;line-height:1.6}
h3{font-family:var(--fd);font-weight:600;font-size:22px;letter-spacing:-.4px;margin:34px 0 10px}
p{margin:0 0 18px;max-width:66ch}
ul,ol{margin:0 0 20px;padding-left:22px;max-width:66ch}
li{margin:0 0 10px}
strong{font-weight:700}

/* big pull line */
.say{
  font-family:var(--fd);font-weight:500;letter-spacing:-.8px;
  font-size:clamp(22px,3vw,32px);line-height:1.28;margin:34px 0;max-width:22ch;
  color:var(--ink);
}
.say u{text-decoration:none;color:var(--saffron-d)}

/* ---------- data as bars, not a table ---------- */
.bars{margin:0 0 30px;max-width:800px}
.brow{display:grid;grid-template-columns:150px 1fr 130px;gap:20px;align-items:center;padding:15px 0;border-top:1px solid var(--line)}
.brow:last-child{border-bottom:1px solid var(--line)}
.brow .lab{font-size:16px;font-weight:600}
.brow .track{background:var(--sand);border-radius:99px;height:16px;overflow:hidden}
.brow .fill{display:block;height:100%;border-radius:99px;background:var(--ink)}
.brow .fill.hot{background:var(--saffron)}
.brow .fill.cold{background:var(--crimson)}
.brow .pct{font-family:var(--fm);font-size:19px;font-weight:600;text-align:right;letter-spacing:-.6px}
.brow .pct small{display:block;font-family:var(--fb);font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0}

/* spec rows */
.spec{margin:0 0 28px;max-width:720px;border-top:1px solid var(--ink)}
.spec div{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;padding:14px 0;border-bottom:1px solid var(--line)}
.spec dt{font-weight:700;font-size:15.5px}
.spec dd{margin:0;font-size:16px;color:var(--muted)}

/* numbered steps */
.steps{list-style:none;padding:0;margin:0 0 30px;max-width:720px}
.steps li{padding:20px 0;border-top:1px solid var(--line);margin:0}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps strong{display:block;font-family:var(--fd);font-size:19px;font-weight:600;margin-bottom:5px;letter-spacing:-.3px}
.steps p{margin:0;color:var(--muted);font-size:16.5px;max-width:60ch}

/* callout */
.mark{
  background:var(--ink);color:#fff;border-radius:20px;padding:26px 30px;margin:0 0 30px;max-width:720px;
}
.mark p{margin:0 0 12px;font-size:17px;color:#c9c5bf;max-width:none}
.mark p:last-child{margin:0}
.mark strong{color:var(--saffron)}
.caution{border:1px solid var(--crimson);border-radius:20px;padding:24px 28px;margin:0 0 30px;max-width:720px;background:rgba(201,53,74,.04)}
.caution p{margin:0 0 12px;font-size:16.5px}
.caution p:last-child{margin:0}
.caution strong{color:var(--crimson)}

/* ---------- FAQ: question left, answer right ---------- */
.faq{border-top:1px solid var(--ink)}
.faq .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:40px;padding:26px 0;border-bottom:1px solid var(--line)}
.faq .q{font-family:var(--fd);font-weight:600;font-size:20px;line-height:1.3;margin:0;letter-spacing:-.4px}
.faq .a{margin:0;font-size:16.5px;color:var(--muted);max-width:none}

/* figure + slot */
.shot{margin:30px 0;max-width:820px}
.shot img{width:100%;border-radius:18px;border:1px solid var(--line)}
.shot figcaption{margin-top:12px;font-size:14.5px;color:var(--muted)}
.imgslot{
  border:2px dashed #2fae6b;background:rgba(47,174,107,.07);
  border-radius:18px;padding:26px 24px;margin:30px 0;max-width:820px;text-align:center;
}
.imgslot .tag2{display:inline-block;background:#2fae6b;color:#04240f;font-weight:700;font-size:13.5px;letter-spacing:1.3px;padding:9px 20px;border-radius:99px;margin-bottom:14px}
.imgslot .what{margin:0 0 8px;font-size:16.5px;font-weight:700;color:#0d5e37;max-width:none}
.imgslot .spectxt{margin:0;font-size:13.5px;color:#3c6b52;max-width:none;line-height:1.55}
.imgslot code{background:rgba(47,174,107,.16);padding:2px 7px;border-radius:5px;font-size:12.5px;font-family:var(--fm)}

.gonote{font-size:14px;color:var(--muted);margin:12px 0 0}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#8f8a83;margin-top:70px;padding:48px 0 40px;font-size:15px}
.foot a{color:var(--saffron-2)}
.footgrid{display:grid;grid-template-columns:1fr 2fr;gap:44px}
.foot .fl{display:flex;flex-direction:column;gap:10px}
.foot .fl a{text-decoration:none;font-weight:600;font-size:16px}
.foot p{margin:0 0 14px;max-width:70ch;line-height:1.6;font-size:14.5px}
.foot strong{color:#fff}

/* ---------- docked action bar, phones only ---------- */
.dock{display:none}

@media (max-width:1000px){
  .bento{grid-template-columns:repeat(3,1fr)}
  .tile.wide{grid-column:span 3}
  .footgrid{grid-template-columns:1fr;gap:26px}
}
@media (max-width:860px){
  .faq .row{grid-template-columns:1fr;gap:10px}
  .figs{grid-template-columns:1fr;gap:1px}
  .fig3 p{max-width:none}
}
@media (max-width:700px){
  body{font-size:17px}
  .wrap{padding:0 20px}
  .bar .wrap{min-height:64px}
  .barnav a{padding:10px 13px;min-height:44px;display:inline-flex;align-items:center}
  .logo{min-height:44px}
  .open{padding-top:26px}
  .bento{grid-template-columns:repeat(2,1fr);gap:11px;margin-top:-22px}
  .tile.wide{grid-column:span 2}
  .body{padding-top:48px}
  .sec{margin-bottom:50px}
  .brow{grid-template-columns:1fr 92px;gap:12px}
  .brow .track{grid-column:1/-1;order:3}
  .brow .pct{font-size:17px}
  .spec div{grid-template-columns:1fr;gap:3px}
  .mark,.caution{padding:20px 22px;border-radius:16px}
  /* leave room for the dock */
  .foot{padding-bottom:96px}
  .dock{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:12px;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom));
    background:rgba(12,12,14,.95);backdrop-filter:blur(10px);
    border-top:1px solid var(--line-d);align-items:center;
  }
  .dock .dtxt{flex:1;min-width:0;font-size:13px;color:#8f8a83;line-height:1.35}
  .dock .dtxt b{display:block;color:#fff;font-size:14.5px;font-weight:600}
  .dock .btn{min-height:46px;padding:0 22px;font-size:15.5px;flex:0 0 auto}
}
@media (hover:none){
  a{padding-top:1px;padding-bottom:1px}
  .btn{min-height:52px}
}

/* Footer links are navigation too. 44px on touch, same as the top bar. */
@media (hover:none),(max-width:700px){
  .foot .fl a,.logo{min-height:44px;display:inline-flex;align-items:center}
}