/* IIIT Kottayam: The Unofficial Reality Patch — parody stylesheet */
:root{
  --bg:#ffffff; --bg2:#f1f6f2; --panel:#ffffff; --line:#cfdcd2; --text:#1e2a22; --dim:#55625a;
  --accent:#38b247; --accent-ink:#04210b; --accent-text:#1b7a2c; --link:#0277bd; --blue:#039be5; --deep:#0b3d2c;
  --ok:#39ff88; --bad:#d32f2f; --grid:rgba(11,61,44,.05); --scan:0; --hdr:rgba(255,255,255,.96); --shadow:rgba(11,61,44,.35);
  --mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --display:"Archivo Black","Arial Black",Impact,system-ui,sans-serif;
  --body:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
:root[data-theme="dark"]{
  --bg:#0c1511; --bg2:#13211a; --panel:#172a21; --line:#2b4a3a; --text:#eaf3ec; --dim:#a3b8a9;
  --accent:#38b247; --accent-text:#5fe07a; --link:#4fc3f7; --deep:#38b247; --bad:#ff6b6b;
  --grid:rgba(255,255,255,.03); --scan:.3; --hdr:rgba(12,21,17,.95); --shadow:rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--body);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:32px 32px}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:900;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px);opacity:var(--scan)}
a{color:var(--link)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:.5rem 1rem;z-index:1000}
.skip:focus{left:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
/* disclaimer + nav */
.disclaimer{background:var(--accent);color:var(--accent-ink);font:700 .8rem/1.4 var(--mono);text-align:center;padding:.5rem 1rem;letter-spacing:.02em}
.disclaimer a{color:inherit;text-decoration:underline}
header.top{position:sticky;top:0;z-index:50;background:var(--hdr);backdrop-filter:blur(6px);border-bottom:2px solid var(--line)}
.bar{display:flex;align-items:center;gap:12px;min-height:56px}
.brand{font:400 1.05rem var(--display);color:var(--text);text-decoration:none;letter-spacing:.02em;white-space:nowrap}
.brand b{color:var(--accent-text)}
nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{display:block;padding:.4rem .5rem;color:var(--dim);text-decoration:none;font:600 .76rem var(--mono);white-space:nowrap;border:2px solid transparent}
nav a:hover{color:var(--text);border-color:var(--line)}
nav a[aria-current="page"]{color:var(--accent-ink);background:var(--accent)}
.spacer{flex:1}
.btn{font:700 .85rem var(--mono);background:var(--panel);color:var(--text);border:2px solid var(--deep);padding:.55rem .9rem;cursor:pointer;box-shadow:3px 3px 0 var(--shadow);transition:transform .08s,box-shadow .08s}
.btn:hover{border-color:var(--accent)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--line)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:3px 3px 0 var(--deep)}
.btn.sm{padding:.3rem .6rem;font-size:.75rem}
#menuBtn{display:none}
@media(max-width:860px){
  #menuBtn{display:block}
  nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg2);border-bottom:2px solid var(--line);padding:8px 16px}
  nav.open{display:block}
  nav ul{flex-direction:column}
}
/* type */
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;margin:0 0 .6rem}
h1{font-size:clamp(2.2rem,7vw,4.6rem);text-transform:uppercase;letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,4vw,2.3rem)}
h3{font-size:1.15rem}
.kicker{font:700 .78rem var(--mono);color:var(--accent-text);text-transform:uppercase;letter-spacing:.14em}
.lede{font-size:1.15rem;color:var(--dim);max-width:62ch}
section{padding:44px 0;border-top:1px dashed var(--line)}
.hero{padding:56px 0 40px;border:0}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;overflow:hidden}
.glitch::before{color:var(--bad);transform:translate(2px,0);animation:gl 3.2s infinite steps(1);clip-path:inset(0 0 60% 0)}
.glitch::after{color:#4db8ff;transform:translate(-2px,0);animation:gl 2.7s infinite steps(1) reverse;clip-path:inset(55% 0 0 0)}
@keyframes gl{0%,92%,100%{opacity:0}93%,96%{opacity:.8;transform:translate(3px,-1px)}94%{opacity:.8;transform:translate(-3px,1px)}}
/* windows */
.win{background:var(--panel);border:2px solid var(--deep);box-shadow:6px 6px 0 var(--shadow);margin:0 0 24px}
.win>.title{display:flex;align-items:center;gap:8px;background:var(--deep);color:#fff;font:700 .78rem var(--mono);padding:.3rem .6rem;text-transform:uppercase;letter-spacing:.06em}
.win>.title .x{margin-left:auto;font-size:.7rem}
.win>.body{padding:16px}
.tag{display:inline-block;font:700 .68rem var(--mono);padding:.1rem .45rem;border:1.5px solid currentColor;text-transform:uppercase;letter-spacing:.06em;vertical-align:middle}
.tag.fact{color:var(--accent-text)} .tag.opinion{color:var(--link)} .tag.meme{color:#a1297d}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--panel);border:2px solid var(--line);padding:16px;position:relative}
a.card{display:block;text-decoration:none;color:var(--text);transition:transform .12s,border-color .12s}
a.card:hover{transform:translate(-3px,-3px);border-color:var(--accent);box-shadow:5px 5px 0 var(--accent)}
.card .big{font:400 2rem var(--display);color:var(--accent-text)}
.card p{margin:.3rem 0 0;color:var(--dim)}
.mono{font-family:var(--mono)}
/* controls */
label{display:block;font:600 .8rem var(--mono);color:var(--dim);margin:.7rem 0 .25rem}
input[type=range]{width:100%;accent-color:var(--accent)}
input[type=number],input[type=text],select,textarea{width:100%;background:var(--bg);color:var(--text);border:2px solid var(--line);padding:.5rem;font:inherit;font-family:var(--mono)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.out{margin-top:14px;padding:12px;background:var(--bg);border:2px dashed var(--line);font-family:var(--mono);min-height:3.2rem;white-space:pre-wrap}
.meter{height:22px;background:var(--bg);border:2px solid var(--deep);position:relative;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--accent) 0 10px,transparent 10px 12px);transition:width .5s steps(12)}
.meter.red i{background:repeating-linear-gradient(90deg,var(--bad) 0 10px,transparent 10px 12px)}
.meter-label{display:flex;justify-content:space-between;font:700 .75rem var(--mono);margin:.5rem 0 .2rem}
/* terminal */
.term{background:#050806;color:var(--ok);font:.88rem/1.5 var(--mono);padding:12px;height:260px;overflow:auto;border:2px solid var(--line)}
.term .u{color:var(--text)} .term .e{color:var(--bad)}
.termin{display:flex;gap:8px;margin-top:8px}
.termin span{color:var(--ok);font-family:var(--mono)}
.termin input{flex:1}
/* ticker */
.ticker{overflow:hidden;border-block:2px solid var(--accent);background:var(--bg2);white-space:nowrap}
.ticker div{display:inline-block;padding:.5rem 0;animation:tick 70s linear infinite;font:600 .85rem var(--mono);color:var(--accent-text)}
.ticker:hover div{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
/* toasts */
#toasts{position:fixed;right:12px;bottom:12px;z-index:800;display:grid;gap:10px;max-width:min(360px,calc(100vw - 24px))}
.toast{background:var(--panel);border:2px solid var(--accent);box-shadow:4px 4px 0 var(--shadow);padding:10px 12px;font:.82rem/1.4 var(--mono);animation:pop .25s}
.toast b{color:var(--accent-text)} .toast button{float:right;background:none;border:0;color:var(--dim);cursor:pointer;font:inherit;padding:0 0 0 8px}
@keyframes pop{from{transform:translateY(12px);opacity:0}}
/* dialog */
dialog{background:var(--panel);color:var(--text);border:2px solid var(--deep);box-shadow:8px 8px 0 var(--shadow);max-width:min(480px,92vw);padding:0}
dialog::backdrop{background:rgba(0,0,0,.7)}
dialog .title{background:var(--bad);color:#fff;font:700 .8rem var(--mono);padding:.35rem .7rem}
dialog .body{padding:16px}
/* boot */
#boot{position:fixed;inset:0;z-index:1000;background:#000;color:var(--ok);font:.9rem/1.5 var(--mono);padding:24px;overflow:hidden}
#boot pre{margin:0;white-space:pre-wrap}
#boot button{margin-top:16px}
/* compare cards */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:0;border:2px solid var(--line)}
.vs>div{padding:12px}
.vs .a{background:rgba(56,178,71,.1)} .vs .b{background:rgba(211,47,47,.08);border-left:2px solid var(--line)}
.vs h4{margin:0 0 4px;font:700 .72rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--dim)}
@media(max-width:520px){.vs{grid-template-columns:1fr}.vs .b{border-left:0;border-top:2px solid var(--line)}}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:.5rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font:700 .75rem var(--mono);text-transform:uppercase;color:var(--dim)}
.tablewrap{overflow-x:auto}
details{border:2px solid var(--line);padding:.6rem .9rem;margin:8px 0;background:var(--panel)}
summary{cursor:pointer;font-weight:700}
ul.check{list-style:none;padding:0}
ul.check li{margin:.4rem 0}
.shake{animation:shk .4s}
@keyframes shk{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pixel{image-rendering:pixelated;shape-rendering:crispEdges}
.sprite{width:96px;height:96px;flex:none;border:2px solid var(--deep);background:var(--bg2)}
.bossrow{display:flex;gap:14px;align-items:center}
footer{border-top:2px solid var(--line);padding:30px 0 50px;color:var(--dim);font:.82rem/1.6 var(--mono);margin-top:40px}
.pagenav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:30px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* layout + report card sidebar */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:28px;align-items:start}
.rc{position:sticky;top:76px;margin-top:56px;background:#fffdf4;color:#2a2a2a;border:2px solid #2a2a2a;box-shadow:6px 6px 0 var(--shadow);padding:14px 14px 10px;transform:rotate(1.2deg);font-family:var(--mono);
  background-image:repeating-linear-gradient(0deg,transparent 0 23px,rgba(3,155,229,.25) 23px 24px)}
:root[data-theme="dark"] .rc{background:#f6f1de}
.rc-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #d32f2f;padding-bottom:4px}
.rc-head span{font:400 1.05rem var(--display);letter-spacing:.04em}
.rc-head em{font:italic .68rem var(--mono);color:#d32f2f}
.rc-sub{font:700 .68rem var(--mono);text-transform:uppercase;letter-spacing:.1em;margin:8px 0;color:#555}
.rc-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed #b5ad8d}
.rc-g{font:400 2.1rem var(--display);color:#d32f2f;width:2.6rem;text-align:center;transform:rotate(-6deg);line-height:1}
.rc-row b{display:block;font-size:.78rem}
.rc-row span{display:block;font-size:.72rem;line-height:1.3;color:#555}
.rc-foot{font-size:.7rem;margin-top:8px;color:#444}
@media(max-width:1000px){.layout{grid-template-columns:minmax(0,1fr)}.rc{position:static;transform:none;margin:8px 0 24px;max-width:480px}}
.final{border-top:0}
.rc-final{display:flex;gap:22px;align-items:center;background:var(--deep);color:#fff;padding:22px;border:2px solid var(--deep);box-shadow:8px 8px 0 var(--shadow);flex-wrap:wrap}
.rc-final h2{color:#fff} .rc-final .lede{color:#d8ecdc} .rc-final .kicker{color:#9be6ab}
.rc-stamp{font:400 clamp(6rem,18vw,10rem) var(--display);color:#ff5252;border:8px solid #ff5252;padding:0 28px;transform:rotate(-8deg);line-height:1.1;text-shadow:4px 4px 0 rgba(0,0,0,.35)}
.rc-line{margin:.25rem 0;font-size:.92rem}
.rc-mini{display:inline-block;min-width:2.2rem;text-align:center;color:var(--bad);font-family:var(--display);font-weight:400}
/* brochure vs truth */
.bvtcard{padding:14px}
.bvt{margin-top:8px}
.bvt-stage{position:relative;height:190px;overflow:hidden;border:2px solid var(--deep);user-select:none}
.bvt-a,.bvt-b{position:absolute;inset:0;padding:16px 18px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.bvt-a{background:linear-gradient(135deg,#38b247,#039be5);color:#fff}
.bvt-a .bvt-q{font:italic 400 1.3rem/1.25 Georgia,"Times New Roman",serif;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.bvt-a small{font-size:.65rem;opacity:.85}
.bvt-badge{align-self:flex-start;background:#fff;color:#0b3d2c;font:700 .65rem var(--mono);padding:.15rem .5rem;letter-spacing:.14em}
.bvt-b{background:#12100f;color:#ff8a80;background-image:repeating-linear-gradient(135deg,rgba(255,82,82,.07) 0 8px,transparent 8px 16px);padding-left:calc(18px + 6%)}
.bvt-b .bvt-q{font:600 1.05rem/1.35 var(--mono);color:#ffd5d0}
.bvt-b small{font:.65rem var(--mono);color:#ff5252}
.bvt-stamp{align-self:flex-start;border:3px solid #ff5252;color:#ff5252;font:400 .85rem var(--display);padding:.1rem .6rem;transform:rotate(-3deg);letter-spacing:.08em}
.bvt-a p,.bvt-b p{margin:0;color:inherit}
.bvt-handle{position:absolute;top:0;bottom:0;width:4px;background:#fff;box-shadow:0 0 0 2px var(--deep),0 0 14px rgba(0,0,0,.4);pointer-events:none;transform:translateX(-2px)}
.bvt-handle::after{content:"◀ ▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;color:var(--deep);font:700 .6rem var(--mono);padding:.4rem .3rem;border:2px solid var(--deep);white-space:nowrap}
.bvt-range{width:100%;margin:8px 0 0;height:28px;accent-color:var(--deep);cursor:ew-resize}
.bvt-hint{font:700 .66rem var(--mono);text-align:center;color:var(--dim);transition:opacity .2s;letter-spacing:.12em;text-transform:uppercase}
/* footer */
footer{background:#0a0f0c;color:#b9c9be;border-top:6px solid #38b247;margin-top:56px;padding:34px 0 40px}
.ftgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px}
.ftbig{font:400 1.8rem var(--display);color:#fff}
footer h4{margin:0 0 6px;font:700 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#ff5252}
footer p{margin:0}
.ftsmall{margin-top:26px!important;padding-top:14px;border-top:1px dashed #2f4b3a;font-size:.72rem;color:#7d907f}

.bar{flex-wrap:nowrap}.brand{flex:none}

/* ---- decoder ---- */
.dec{display:grid;grid-template-columns:1.05fr 1fr;gap:22px;align-items:stretch}
.dec-poster{background:linear-gradient(160deg,#0b3d2c,#1b7a2c 60%,#039be5);color:#fff;border:3px solid var(--deep);box-shadow:8px 8px 0 var(--shadow);padding:18px;display:grid;gap:12px}
.dec-top{font:400 1.05rem var(--display);letter-spacing:.06em;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.dec-top em{font:700 .7rem var(--mono);color:#ffe27a;font-style:normal}
.dec-tile{all:unset;box-sizing:border-box;cursor:pointer;display:block;background:rgba(255,255,255,.1);border:2px dashed rgba(255,255,255,.45);padding:12px 14px;transition:transform .12s,background .12s}
.dec-tile:hover{background:rgba(255,255,255,.2);transform:translateX(4px)}
.dec-tile.on{background:#fff;color:#0b3d2c;border-style:solid;border-color:#fff;box-shadow:5px 5px 0 rgba(0,0,0,.35)}
.dec-tile:focus-visible{outline:3px solid #ffe27a;outline-offset:2px}
.dec-tile span{display:block;font:700 .72rem var(--mono);letter-spacing:.14em}
.dec-tile b{display:block;font:400 3rem/1 var(--display)}
.dec-tile.mid b{font-size:2rem}
.dec-tile.tiny{opacity:.75}.dec-tile.tiny b{font:400 .8rem var(--mono);margin-top:2px}.dec-tile.tiny span{font-size:.62rem}
.dec-tile i{display:block;font:italic .7rem var(--mono);opacity:.75;margin-top:4px}
.dec-right{background:var(--panel);border:2px solid var(--deep);padding:16px;display:flex;flex-direction:column;gap:12px}
.dec-legend{display:flex;gap:14px;flex-wrap:wrap;font:700 .72rem var(--mono)}
.dec-legend span{display:flex;align-items:center;gap:6px}
.dec-crowd{display:grid;grid-template-columns:repeat(10,1fr);gap:7px}
.dec-crowd i,.dec-legend i{display:block;aspect-ratio:1;border-radius:50%;background:var(--line);transition:background .25s,transform .25s,box-shadow .25s}
.dec-legend i{width:14px;aspect-ratio:auto;height:14px}
.dec-crowd i.gold,.dec-legend i.gold{background:#ffb400;box-shadow:0 0 0 3px rgba(255,180,0,.35);transform:scale(1.15)}
.dec-crowd i.mid,.dec-legend i.mid{background:#7fd08c}
.dec-crowd i.half,.dec-legend i.half{background:#38b247}
.dec-crowd i.ring,.dec-legend i.ring{background:#d32f2f;box-shadow:0 0 0 3px rgba(211,47,47,.35);transform:scale(1.2)}
.dec-say{font:500 1rem/1.5 var(--body);border-left:4px solid var(--accent);padding-left:12px}
@media(max-width:760px){.dec{grid-template-columns:1fr}}
/* ---- factory ---- */
.fac-step{font:700 .75rem var(--mono);letter-spacing:.16em;color:var(--accent-text);margin-bottom:10px}
.fac{display:grid;grid-template-columns:minmax(260px,.9fr) 1.4fr;gap:24px;align-items:start;background:var(--panel);border:2px solid var(--deep);box-shadow:8px 8px 0 var(--shadow);padding:20px}
#spinForm{display:grid;gap:8px}
.sw{display:flex;gap:12px;align-items:center;padding:10px 12px;border:2px solid var(--line);cursor:pointer;margin:0;color:var(--text);font-family:var(--body);background:var(--bg);transition:border-color .15s,background .15s}
.sw:hover{border-color:var(--accent)}
.sw:has(input:checked){border-color:var(--deep);background:rgba(56,178,71,.12)}
.sw input{position:absolute;opacity:0}
.sw-ui{flex:none;width:46px;height:26px;border-radius:13px;background:#b9c4bb;position:relative;transition:background .2s}
.sw-ui::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .2s}
.sw input:checked+.sw-ui{background:var(--accent)}
.sw input:checked+.sw-ui::after{transform:translateX(20px)}
.sw input:focus-visible+.sw-ui{outline:3px solid var(--accent);outline-offset:2px}
.sw-t b{display:block;font:700 .95rem var(--body);line-height:1.2}
.sw-t small{display:block;font:.78rem var(--body);color:var(--dim);margin-top:2px}
.fac-note{font:.75rem var(--mono);color:var(--dim);margin:10px 0 0}
.fac-faceoff{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch}
.fac-poster,.fac-real{padding:16px 14px;text-align:center;display:flex;flex-direction:column;gap:4px;border:3px solid var(--deep);min-width:0}
.fac-poster{background:linear-gradient(160deg,#38b247,#039be5);color:#fff;transition:transform .2s}
.fac-poster.over{animation:shk .5s}
.fac-real{background:#14110f;color:#ffd5d0;border-color:#ff5252}
.fac-badge{font:700 .62rem var(--mono);letter-spacing:.14em;background:rgba(255,255,255,.92);color:#0b3d2c;padding:.15rem .4rem;align-self:center}
.fac-real .fac-badge{background:#ff5252;color:#14110f}
.fac-huge{font:400 clamp(2.8rem,5.4vw,4.2rem)/1 var(--display);display:flex;justify-content:center;align-items:flex-start;text-shadow:3px 3px 0 rgba(0,0,0,.25)}
.fac-huge small{font:400 1.3rem var(--display);margin-top:.35rem}
.fac-sub{font:700 .85rem var(--mono);letter-spacing:.14em}
.fac-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px;font:500 .8rem var(--body)}
.fac-row small{display:block;font:700 .58rem var(--mono);letter-spacing:.12em;opacity:.85}
.fac-row b{font:700 1.5rem var(--body)}
.fac-fine{font:.6rem var(--mono);opacity:.8;margin-top:6px}
.fac-vs{align-self:center;font:400 1.3rem var(--display);color:var(--bad)}
.fac-gap{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.gapchip{border:2px solid var(--deep);padding:8px 10px;background:var(--bg)}
.gapchip small{display:block;font:700 .58rem var(--mono);letter-spacing:.12em;color:var(--dim)}
.gapchip b{font:700 1.5rem var(--body);color:var(--bad)}
.fac-hon{margin-top:4px}
@media(max-width:860px){.fac{grid-template-columns:1fr}}
@media(max-width:520px){.fac-faceoff{grid-template-columns:1fr}.fac-vs{text-align:center}}
/* ---- ROI ---- */
.roi{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start;background:var(--panel);border:2px solid var(--deep);box-shadow:8px 8px 0 var(--shadow);padding:20px}
.rs{margin-bottom:14px}
.rs label{display:flex;justify-content:space-between;align-items:center;gap:10px;font:600 .9rem var(--body);color:var(--text);margin:0 0 4px}
.rb{font:700 1.1rem var(--body);background:var(--deep);color:#fff;padding:.1rem .6rem;white-space:nowrap}
.receipt{background:#fffdf4;color:#222;font-family:var(--mono);padding:14px 16px;border:2px solid #222;position:relative;box-shadow:5px 5px 0 var(--shadow);
 background-image:linear-gradient(transparent 0,transparent calc(100% - 10px),#fffdf4 calc(100% - 10px))}
.rc-t{text-align:center;font:700 .85rem var(--mono);letter-spacing:.2em;border-bottom:2px dashed #222;padding-bottom:8px;margin-bottom:8px}
.rr{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;padding:3px 0;border-bottom:1px dotted #bbb}
.rr b{font-weight:700;white-space:nowrap}
.rr.tot{border-top:2px dashed #222;border-bottom:0;margin-top:6px;padding-top:8px;font-size:1rem;color:#d32f2f}
.roi-big{background:#14110f;color:#fff;padding:14px 18px;border:3px solid #ff5252}
.roi-big small{font:700 .7rem var(--mono);letter-spacing:.16em;color:#ff8a80}
.roi-big div{font:400 clamp(4.5rem,12vw,7rem)/1 var(--display);color:#ff5252}
.roi-chart{display:flex;align-items:flex-end;gap:4px;height:150px;margin-top:14px;padding:8px;border:2px solid var(--deep);background:var(--bg)}
.cbar{flex:1;background:#d32f2f;min-height:2px;transition:height .4s}
.cbar.paid{background:#38b247}
.roi-axis{display:flex;justify-content:space-between;font:700 .65rem var(--mono);color:var(--dim);margin-top:4px}
.roi-stamp{display:inline-block;margin-top:14px;font:400 1.3rem var(--display);border:4px solid currentColor;padding:.2rem .9rem;transform:rotate(-3deg);letter-spacing:.06em}
.roi-stamp.bad{color:#d32f2f}.roi-stamp.warn{color:#e07b00}.roi-stamp.ok{color:#1b7a2c}
@media(max-width:860px){.roi{grid-template-columns:1fr}}

/* ---- the wall ---- */
.wall{position:relative;border:5px solid #3b1a14;overflow:hidden;padding:56px 22px 46px;display:grid;grid-template-columns:repeat(6,1fr);gap:26px 22px;align-items:center;min-height:620px;
 background-color:#944233;
 background-image:radial-gradient(ellipse at 50% 40%,transparent 35%,rgba(0,0,0,.5) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='56'%3E%3Crect width='88' height='56' fill='%23944233'/%3E%3Cpath d='M0 0H88M0 28H88M0 56H88M0 0V28M44 28V56' stroke='%236b2b20' stroke-width='3' fill='none'/%3E%3Cpath d='M6 8h18M52 12h14M10 38h16M60 42h20' stroke='%23a85341' stroke-width='3'/%3E%3C/svg%3E");
 box-shadow:8px 8px 0 var(--shadow)}
.tape{position:absolute;top:10px;left:-30px;right:-30px;transform:rotate(-1.4deg);white-space:nowrap;overflow:hidden;font:400 .85rem var(--display);letter-spacing:.14em;color:#111;padding:.3rem 0;z-index:3;
 background:repeating-linear-gradient(-45deg,#ffd400 0 18px,#111 18px 36px);text-shadow:0 0 0 #fff}
.tape{background:#ffd400;border-block:3px solid #111}
.wp{position:relative;z-index:2;min-width:0}
.w1{grid-column:1/5;transform:rotate(-3deg)}
.w2{grid-column:5/7;transform:rotate(3deg)}
.w3{grid-column:1/4;transform:rotate(2deg)}
.w4{grid-column:4/7;transform:rotate(-2.5deg)}
.w5{grid-column:1/4;transform:rotate(-2deg)}
.w6{grid-column:4/7;transform:rotate(2deg)}
.hand{display:block;font:600 1.15rem/1.15 "Caveat","Comic Sans MS",cursive}
.spray{display:block;font:400 clamp(1.8rem,5.4vw,3.2rem)/1 "Permanent Marker","Archivo Black",cursive;color:#ffe27a;text-shadow:0 0 8px rgba(255,226,122,.55),3px 3px 0 rgba(0,0,0,.35);letter-spacing:.02em}
.w1 .hand{color:#fff;margin-top:6px}
.poster{background:#f3ecd6;color:#222;padding:22px 14px 14px;border:2px solid #cbbf98;box-shadow:4px 4px 0 rgba(0,0,0,.4);clip-path:polygon(0 3%,6% 0,14% 4%,24% 0,40% 3%,56% 0,72% 4%,88% 0,100% 3%,98% 40%,100% 62%,97% 100%,60% 97%,30% 100%,0 96%,3% 60%)}
.poster b{font:400 1.05rem var(--display);display:block}
.poster .hand{color:#d32f2f;margin-top:6px}
.tp{position:absolute;top:-4px;left:50%;width:70px;height:20px;margin-left:-35px;background:rgba(255,230,140,.8);transform:rotate(-4deg)}
.pb{height:16px;border:2px solid #222;margin:8px 0;background:#fff}
.pb u{display:block;width:99%;height:100%;background:repeating-linear-gradient(90deg,#38b247 0 10px,transparent 10px 12px)}
.chalk{background:#25352d;color:#f1f1e8;padding:16px 16px 14px;border:6px solid #8a6a43;box-shadow:inset 0 0 18px rgba(0,0,0,.5),4px 4px 0 rgba(0,0,0,.4);font-family:"Caveat",cursive}
.chalk b{display:block;font:600 1.2rem "Caveat",cursive;letter-spacing:.04em;margin-top:6px}
.chalk .hand{opacity:.85}
.tally{display:flex;gap:10px;flex-wrap:wrap}
.tally s{position:relative;text-decoration:none;font:700 1.7rem/1 "Caveat",cursive;letter-spacing:.18em;opacity:.95}
.tally s:not(:last-child)::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;border-top:3px solid #f1f1e8;transform:rotate(-24deg)}
.sticky{background:#fff176;color:#3a3200;padding:22px 18px 14px;box-shadow:4px 6px 0 rgba(0,0,0,.45);font-family:"Caveat",cursive}
.sticky b{display:block;font:400 1.5rem "Permanent Marker",cursive;color:#d32f2f}
.sticky p{margin:4px 0 0;font:600 1.3rem/1.2 "Caveat",cursive}
.pin{position:absolute;top:6px;left:50%;width:16px;height:16px;border-radius:50%;background:#d32f2f;box-shadow:inset -3px -3px 0 rgba(0,0,0,.3),2px 3px 0 rgba(0,0,0,.4)}
.banner{background:linear-gradient(160deg,#38b247,#039be5);color:#fff;padding:18px 16px;border:3px solid #fff;box-shadow:4px 4px 0 rgba(0,0,0,.45);text-align:center;overflow:hidden}
.banner b{font:400 clamp(1.3rem,3.4vw,1.9rem) var(--display);letter-spacing:.04em;position:relative;display:inline-block}
.banner b::after{content:"";position:absolute;left:-6px;right:-6px;top:52%;border-top:6px solid #ff3b3b;transform:rotate(-3deg)}
.banner .xx{position:absolute;right:8px;top:2px;font:400 2.4rem "Permanent Marker",cursive;color:#ff3b3b}
.banner .hand{color:#fff;margin-top:6px}
.stencil{padding:6px 4px}
.stencil span{display:block;font:400 clamp(2.4rem,7vw,4.2rem)/.95 "Archivo Black",Impact,sans-serif;color:transparent;-webkit-text-stroke:2px #fff;letter-spacing:.06em;text-shadow:3px 3px 0 rgba(0,0,0,.35)}
.stencil span+span{color:#fff;-webkit-text-stroke:0}
.stencil small{display:block;color:#ffd7cc;font:600 1.05rem "Caveat",cursive;margin-top:6px}
.spray-layer{position:absolute;inset:0;z-index:4;pointer-events:none}
.sprayed{position:absolute;font:400 2rem "Permanent Marker",cursive;text-shadow:0 0 6px currentColor,2px 3px 0 rgba(0,0,0,.4);white-space:nowrap;animation:spraypop .35s ease-out}
@keyframes spraypop{from{opacity:0;transform:scale(1.8) rotate(var(--r,0deg))}to{opacity:1;transform:scale(1) rotate(var(--r,0deg))}}
@media(max-width:700px){.wall{grid-template-columns:1fr;padding-top:64px}.wp{grid-column:1/-1!important}}
/* report card hugs the right edge on wide screens */
@media(min-width:1200px){
  .layout{margin-right:calc(-1*(100vw - 1120px)/2 + 24px);grid-template-columns:minmax(0,822px) 270px;justify-content:space-between}
}
@media(min-width:1700px){.rc{width:300px}.layout{grid-template-columns:minmax(0,822px) 300px}}
.bvt-stage{cursor:ew-resize;touch-action:pan-y}
.bvt-handle::after{cursor:ew-resize}

/* =================== MOBILE OPTIMISATION =================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.content{min-width:0}
button,.btn,summary,.sw,.dec-tile{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
header.top{padding-top:env(safe-area-inset-top)}
footer{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
@media(max-width:1000px){.rc{width:100%;max-width:none}}
@media(max-width:700px){
  .wrap{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  body{font-size:16px;line-height:1.55}
  .bar{gap:8px;min-height:60px}
  .brand{font-size:.95rem;min-height:44px;display:flex;align-items:center;letter-spacing:0}
  #menuBtn,#themeBtn{min-height:44px;padding:.5rem .7rem;font-size:.78rem}
  #themeBtn{max-width:7.5rem;line-height:1.15}
  nav a{padding:.9rem .5rem;font-size:.95rem;border-width:2px}
  nav.open{max-height:calc(100vh - 70px);overflow:auto;padding:6px 14px 12px}
  .btn{min-height:44px;padding:.65rem 1rem;font-size:.9rem}
  .btn.sm{min-height:44px;padding:.5rem .9rem;font-size:.82rem}
  .row{gap:10px}.row .btn{flex:1 1 auto;text-align:center}
  h1{font-size:clamp(1.55rem,7.4vw,2.3rem);line-height:1.08;overflow-wrap:anywhere;margin-bottom:.8rem}
  h2{font-size:clamp(1.3rem,6vw,1.7rem);line-height:1.12;overflow-wrap:anywhere}
  h3{font-size:1.05rem}
  .kicker{font-size:.75rem;letter-spacing:.1em}
  .lede{font-size:1rem;line-height:1.55}
  .hero{padding:28px 0 20px}
  section{padding:30px 0}
  .grid{gap:14px}
  .card{padding:14px}
  .card .big{font-size:1.7rem}
  .win{box-shadow:4px 4px 0 var(--shadow);margin-bottom:18px}
  .win>.body{padding:12px}
  .win>.title{font-size:.78rem}
  input[type=number],input[type=text],select,textarea{font-size:16px;min-height:44px}
  input[type=range]{height:32px}
  .out{font-size:.88rem;padding:10px;min-height:2.8rem}
  .term{height:220px;font-size:.85rem}
  .termin input{min-height:44px}
  .pagenav{display:grid;grid-template-columns:1fr;gap:10px;margin-top:24px}
  .pagenav .btn{text-align:center;width:100%}
  .pagenav span{display:none}
  .ticker div{font-size:.8rem;animation-duration:55s}
  #toasts{left:12px;right:12px;max-width:none;bottom:max(12px,env(safe-area-inset-bottom))}
  .toast{font-size:.85rem}
  dialog{max-width:calc(100vw - 28px)}
  /* report card */
  .rc{margin:6px 0 22px;padding:14px;transform:rotate(.6deg)}
  .rc-row span{font-size:.8rem}.rc-row b{font-size:.88rem}.rc-foot{font-size:.78rem}
  .rc-head em{font-size:.75rem}.rc-sub{font-size:.75rem}
  .rc-final{padding:16px;gap:14px}.rc-stamp{font-size:5.2rem;padding:0 18px;border-width:6px}
  /* brochure vs truth */
  .bvtcard{padding:12px}
  .bvt-stage{height:220px}
  .bvt-a,.bvt-b{padding:14px}
  .bvt-b{padding-left:calc(14px + 5%)}
  .bvt-a .bvt-q{font-size:1.15rem}.bvt-b .bvt-q{font-size:.95rem}
  .bvt-badge{font-size:.72rem}.bvt-a small,.bvt-b small{font-size:.75rem}.bvt-stamp{font-size:.85rem}
  .bvt-handle::after{padding:.55rem .45rem;font-size:.7rem}
  .bvt-range{height:36px}.bvt-hint{font-size:.72rem}
  /* decoder */
  .dec-poster{padding:14px;box-shadow:5px 5px 0 var(--shadow)}
  .dec-tile{padding:12px}
  .dec-tile span{font-size:.75rem}.dec-tile b{font-size:2.4rem}.dec-tile.mid b{font-size:1.8rem}
  .dec-tile.tiny span{font-size:.72rem}.dec-tile.tiny b{font-size:.85rem}.dec-tile i{font-size:.78rem}
  .dec-crowd{gap:5px}.dec-legend{font-size:.78rem;gap:10px}.dec-say{font-size:.98rem}
  /* factory */
  .fac,.roi{padding:14px;gap:18px;box-shadow:5px 5px 0 var(--shadow)}
  .fac-step{font-size:.78rem}
  .sw{padding:12px;gap:12px;min-height:56px}
  .sw-t b{font-size:1rem}.sw-t small{font-size:.84rem}
  .fac-note{font-size:.8rem}
  .fac-badge{font-size:.7rem}
  .fac-huge{font-size:3.4rem}.fac-huge small{font-size:1.2rem}
  .fac-sub{font-size:.85rem}.fac-row small{font-size:.72rem}.fac-row b{font-size:1.3rem}.fac-fine{font-size:.74rem}
  .fac-gap{gap:6px}.gapchip{padding:8px}.gapchip small{font-size:.66rem}.gapchip b{font-size:1.1rem}
  /* ROI */
  .rs label{font-size:.95rem;flex-wrap:wrap}.rb{font-size:1.05rem}
  .receipt{padding:12px}.rr{font-size:.86rem}.rc-t{font-size:.85rem}
  .roi-big div{font-size:5rem}.roi-big small{font-size:.75rem}
  .roi-chart{height:130px}.roi-axis{font-size:.72rem}.roi-stamp{font-size:1.1rem}
  /* wall */
  .wall{padding:60px 14px 26px;gap:22px;min-height:0;border-width:4px}
  .tape{font-size:.72rem}
  .spray{font-size:clamp(1.7rem,9vw,2.4rem)}.hand{font-size:1.2rem}
  .chalk b{font-size:1.25rem}.tally s{font-size:1.5rem}
  .sticky p{font-size:1.25rem}.stencil span{font-size:3rem}.stencil small{font-size:1.1rem}
  .w1,.w2,.w3,.w4,.w5,.w6{transform:rotate(0deg)}
  .w1{transform:rotate(-1.5deg)}.w2{transform:rotate(1.5deg)}.w4{transform:rotate(-1deg)}.w6{transform:rotate(1deg)}
  .sprayed{font-size:1.5rem!important}
  /* footer */
  .ftgrid{grid-template-columns:1fr 1fr;gap:18px}
  .ftgrid>div:first-child{grid-column:1/-1}
  .ftbig{font-size:1.5rem}footer h4{font-size:.75rem}footer p{font-size:.88rem}.ftsmall{font-size:.78rem!important;line-height:1.5}
  .tablewrap{margin:0 -14px;padding:0 14px}
}
@media(max-width:380px){
  h1{font-size:1.45rem}
  .brand{font-size:.88rem}
  #themeBtn{max-width:6.2rem;font-size:.72rem}
  .fac-huge{font-size:3rem}
  .dec-tile b{font-size:2.1rem}
  .ftgrid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .fac-badge,.dec-top em,.fac-row small{font-size:.78rem}
  .gapchip small{font-size:.74rem;letter-spacing:.06em}
  .win>.title .x{display:none}
  .dec-top{font-size:1rem}
}
.bvt-a{padding-right:14%}
.brand{gap:.3em}