/* NYC Made Simple — "Manhattan after dark" theme */
:root{
  --night:#0b1030; --panel:#141b45; --panel2:#1a2356; --line:#2a3470;
  --amber:#ffc24a; --amber-ink:#2a1d00; --cyan:#86e3ff;
  --text:#eef1ff; --mut:#a9b1dc; --ok:#4fe3a1; --ok-bg:rgba(79,227,161,.12); --no:#ff7a8a; --no-bg:rgba(255,122,138,.12); --warn-bg:rgba(255,194,74,.12);
  --display:"Unbounded",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible","Noto Sans Bengali","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-lg:22px; --r-md:14px; --r-sm:10px;
}
*{box-sizing:border-box}
html{background:var(--night)}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.6;color:var(--text);background:var(--night);-webkit-font-smoothing:antialiased}
a{color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
::selection{background:var(--amber);color:var(--amber-ink)}

/* ---------- The grid: Manhattan's streets run ~29° off north ---------- */
.grid-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.grid-bg::before{content:"";position:absolute;inset:-60%;transform:rotate(29deg);
  background:
    repeating-linear-gradient(90deg,transparent 0 78px,rgba(134,227,255,.10) 78px 79px),
    repeating-linear-gradient(0deg,transparent 0 22px,rgba(134,227,255,.06) 22px 23px);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 30%,#000 10%,transparent 70%);
          mask-image:radial-gradient(ellipse 70% 60% at 70% 30%,#000 10%,transparent 70%)}
.grid-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(600px 340px at 78% 18%,rgba(255,194,74,.18),transparent 70%),radial-gradient(520px 380px at 10% 90%,rgba(134,227,255,.10),transparent 70%)}
.grid-bg i{position:absolute;inset:-60%;transform:rotate(29deg);
  background:repeating-linear-gradient(90deg,transparent 0 312px,rgba(255,194,74,.55) 312px 313.5px);
  -webkit-mask-image:linear-gradient(0deg,transparent 0 40%,#000 50%,transparent 60%);
          mask-image:linear-gradient(0deg,transparent 0 40%,#000 50%,transparent 60%);
  -webkit-mask-size:100% 300%;mask-size:100% 300%;animation:avenue 2.4s cubic-bezier(.4,0,.2,1) .3s 1 both;opacity:.0}
@keyframes avenue{0%{-webkit-mask-position:0 100%;mask-position:0 100%;opacity:1}100%{-webkit-mask-position:0 0;mask-position:0 0;opacity:0}}
@media (prefers-reduced-motion:reduce){.grid-bg i{animation:none}}

/* ---------- Header ---------- */
.site-head{position:relative;z-index:5;border-bottom:1px solid rgba(42,52,112,.7);background:rgba(11,16,48,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-head .in{max-width:1080px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.01em;white-space:nowrap}
.brand svg{flex:0 0 26px}
.site-nav{display:flex;gap:4px;white-space:nowrap}
.site-nav a{color:var(--mut);text-decoration:none;font-weight:700;font-size:.92rem;padding:8px 12px;border-radius:999px}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--text);background:var(--panel)}
@media (max-width:640px){.brand span{display:none}.site-nav a{padding:8px 9px;font-size:.88rem}}

/* ---------- Home hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .in{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:84px 20px 76px;display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:end}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:.98;letter-spacing:-.035em;margin:0 0 22px}
.hero h1 .l2{display:block;color:transparent;-webkit-text-stroke:1.5px var(--amber)}
.hero p.sub{font-size:1.15rem;color:var(--mut);max-width:34ch;margin:0}
.lookup{background:linear-gradient(180deg,rgba(26,35,86,.92),rgba(20,27,69,.92));border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.lookup label{font-weight:700;display:block;margin-bottom:10px}
.lookup .row{display:flex;flex-wrap:wrap;gap:10px}
.lookup input{flex:1 1 130px;font-family:var(--display);font-size:1.6rem;font-weight:600;letter-spacing:.04em;padding:12px 14px;width:100%}
.lookup select{flex:1 1 200px;width:auto}
.lookup .ans{margin-top:16px;min-height:96px}
.lookup .fine{font-family:var(--display);font-size:2.6rem;font-weight:700;color:var(--amber);line-height:1}
.lookup .what{color:var(--text);margin-top:6px}
.lookup .more{display:inline-block;margin-top:12px;font-weight:700;color:var(--cyan)}
@media (max-width:820px){.hero .in{grid-template-columns:1fr;padding:56px 20px 48px;gap:32px}}

/* ---------- Home tool rows ---------- */
.tools{max-width:1080px;margin:0 auto;padding:64px 20px 24px}
.tools h2{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:-.02em;margin:0 0 22px}
.tool-row{display:grid;grid-template-columns:64px 1fr auto;gap:20px;align-items:center;padding:24px 4px;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.tool-row:last-child{border-bottom:1px solid var(--line)}
.tool-row .ico{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line)}
.tool-row h3{font-family:var(--display);font-weight:600;font-size:1.25rem;letter-spacing:-.015em;margin:0 0 4px}
.tool-row p{margin:0;color:var(--mut);max-width:58ch}
.tool-row .go{font-weight:700;color:var(--amber);white-space:nowrap}
.tool-row:hover h3{color:var(--amber)}
.langs-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.langs-strip span{border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:.85rem;color:var(--text)}
@media (max-width:640px){.tool-row{grid-template-columns:48px 1fr;align-items:start}.tool-row .ico{width:48px;height:48px;border-radius:14px}.tool-row .go{grid-column:2}}

.promise{max-width:1080px;margin:0 auto;padding:40px 20px 10px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.promise h3{font-family:var(--display);font-size:1rem;font-weight:600;margin:0 0 6px;color:var(--text)}
.promise p{margin:0;color:var(--mut);font-size:.96rem}
@media (max-width:820px){.promise{grid-template-columns:1fr;gap:18px}}

/* ---------- Inner page header ---------- */
.page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero .in{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:52px 20px 40px}
.page-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,4.6vw,2.9rem);line-height:1.05;letter-spacing:-.03em;margin:10px 0 14px}
.page-hero .lead{color:var(--mut);font-size:1.1rem;max-width:56ch;margin:0}
.crumbs{font-size:.9rem;color:var(--mut)}.crumbs a{color:var(--mut)}

/* ---------- Content shell ---------- */
.wrap{max-width:860px;margin:0 auto;padding:28px 20px 40px}
.wrap h1{display:none} /* calculators' own h1 moves into page-hero */
h2{font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:-.02em;margin:1.8em 0 .6em}
h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em}
.lead{color:var(--mut)}
.hint{font-weight:400;color:var(--mut);font-size:.85rem}
.hide{display:none!important}

/* panels: one radius for interactive panels, smaller for nested items */
.card,#app{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;margin-bottom:18px}
.card h3{margin:0 0 12px;font-size:1rem;color:var(--text)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
label{display:block;font-size:.92rem;font-weight:700;margin-bottom:6px}
input,select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);font:inherit;font-size:1rem;color:var(--text);background:var(--night);color-scheme:dark}
input:focus,select:focus{outline:2px solid var(--cyan);outline-offset:0;border-color:transparent}
button{font:inherit}
.wrap button:not(.opt):not(.mode):not(.x):not(.link),#calc,button.primary{background:var(--amber);color:var(--amber-ink);border:0;border-radius:var(--r-md);padding:14px 20px;font-weight:700;font-size:1rem;cursor:pointer;width:100%;margin-top:14px}
.wrap button:not(.opt):not(.mode):not(.x):not(.link):hover{filter:brightness(1.06)}
button.sec,.wrap button.sec{background:transparent!important;color:var(--text)!important;border:1px solid var(--line)!important}
.result{border:1px solid var(--amber)!important;background:linear-gradient(180deg,rgba(255,194,74,.08),var(--panel))!important}
.big{font-family:var(--display);font-size:2.4rem;font-weight:700;color:var(--amber);line-height:1.1;margin:4px 0 10px}
.line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line)}
.warn,.ok,.note{border-radius:var(--r-sm);padding:12px 14px;font-size:.95rem;margin-top:12px}
.warn{background:var(--warn-bg);border:1px solid rgba(255,194,74,.35)}
.ok{background:var(--ok-bg);border:1px solid rgba(79,227,161,.35)}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.82rem;color:var(--mut);font-weight:700}
.tag{display:inline-block;border-radius:999px;padding:1px 9px;font-size:.78rem;font-weight:700;margin-top:4px}
.tag.ok{background:var(--ok-bg);color:var(--ok);border:0;padding:1px 9px;margin-top:4px}
.tag.w{background:var(--warn-bg);color:var(--amber)}
.tag.no{background:var(--no-bg);color:var(--no)}
.x{background:none;border:0;color:var(--mut);cursor:pointer;font-size:1rem;padding:6px}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.cmp div{background:var(--night);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px}.cmp b{display:block;font-size:1.3rem}
.badge,.pill{display:inline-block;border:1px solid rgba(255,194,74,.5);color:var(--amber);border-radius:999px;padding:3px 12px;font-size:.85rem;font-weight:700}
.disc,footer.site-foot{font-size:.85rem;color:var(--mut)}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;margin-bottom:10px}
.faq summary{font-weight:700;cursor:pointer}
.faq details[open] summary{color:var(--amber)}

/* ---------- Fire guard exam app ---------- */
.bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:.92rem;color:var(--mut)}
.bar select{width:auto;padding:7px 10px;margin-left:6px}
.chk{display:flex;gap:8px;align-items:center;cursor:pointer;font-weight:400}.chk input{width:auto}
.modes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.mode{text-align:left;border:1px solid var(--line);background:var(--night);border-radius:var(--r-md);padding:18px;cursor:pointer;display:flex;flex-direction:column;gap:6px;color:inherit}
.mode:hover{border-color:var(--amber)}.mode b{font-family:var(--display);font-weight:600;font-size:1.05rem}.mode span{color:var(--mut);font-size:.95rem}.mode em{font-style:normal;color:var(--amber);font-weight:700;font-size:.9rem}
.qhead{display:flex;justify-content:space-between;font-size:.9rem;color:var(--mut);font-weight:700}
#clock{color:var(--text);font-family:var(--display)}#clock.low{color:var(--no)}
.streak{color:var(--amber)}
.prog{height:4px;background:var(--line);border-radius:4px;margin:10px 0 18px;overflow:hidden}.prog i{display:block;height:100%;background:var(--amber);transition:width .3s}
.question{font-family:var(--body);font-size:1.2rem;font-weight:700;margin:0 0 16px;line-height:1.45;letter-spacing:0}
.en{display:block;font-size:.85em;color:var(--mut);font-weight:400;margin-top:4px}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:left;border:1px solid var(--line);background:var(--night);border-radius:var(--r-md);padding:14px;cursor:pointer;color:inherit;font-size:1rem}
.opt:hover:not(:disabled){border-color:var(--cyan)}
.opt .letter{flex:0 0 28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:.85rem;color:var(--mut)}
.opt.picked{border-color:var(--amber);background:rgba(255,194,74,.08)}.opt.picked .letter{background:var(--amber);color:var(--amber-ink);border-color:var(--amber)}
.opt.right{border-color:var(--ok);background:var(--ok-bg)}.opt.right .letter{background:var(--ok);color:#03281a;border-color:var(--ok)}
.opt.bad{border-color:var(--no);background:var(--no-bg)}.opt.bad .letter{background:var(--no);color:#3a0008;border-color:var(--no)}
.opt:disabled{cursor:default}
.fb{border-radius:var(--r-md);padding:14px 16px;margin:14px 0;font-size:.98rem}.fb.ok{background:var(--ok-bg)}.fb.no{background:var(--no-bg)}
.nav{display:flex;gap:10px;margin-top:16px}.nav button{margin-top:0!important}
.nav button:first-child:not(.primary){width:auto!important;background:transparent!important;color:var(--text)!important;border:1px solid var(--line)!important}
.nav button:disabled{opacity:.35}
.link{background:none;border:0;color:var(--mut);text-decoration:underline;cursor:pointer;margin-top:14px;font-size:.9rem}
#app .result{text-align:center;border-radius:var(--r-md);padding:22px}
#app .result.ok{border-color:var(--ok)!important;background:var(--ok-bg)!important}
#app .result.no{border-color:var(--no)!important;background:var(--no-bg)!important}
#app .result .big{font-size:3.4rem;color:var(--text)}
.rev{border-left:3px solid var(--ok);background:var(--night);border-radius:var(--r-sm);padding:12px 14px;margin:10px 0;font-size:.95rem}.rev.no{border-color:var(--no)}.rev .ex{color:var(--mut);margin-top:6px}
.facts{display:flex;flex-wrap:wrap;gap:28px;margin:22px 0 0}
.facts div{color:var(--mut);font-size:.92rem}.facts b{display:block;font-family:var(--display);font-size:1.6rem;color:var(--text);font-weight:600}
.notes li{margin:6px 0}
.exam-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.exam{display:block;text-decoration:none;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.exam:hover{border-color:var(--amber)}.exam h3{margin:.1em 0 .4em;color:var(--text);font-size:1.15rem}.exam p{margin:.3em 0;color:var(--mut)}
.exam .spec{color:var(--amber);font-weight:700}

/* ---------- Footer ---------- */
footer.site-foot{border-top:1px solid var(--line);margin-top:40px}
footer.site-foot .in{max-width:1080px;margin:0 auto;padding:28px 20px 40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
footer.site-foot nav a{color:var(--mut);margin-right:16px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.related{margin-top:36px}.related ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.related li{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.related a{font-weight:700;color:var(--text);text-decoration:none}.related a:hover{color:var(--amber)}
.related .hint{display:block}
@media (max-width:480px){.tk th:nth-child(3),.tk td:nth-child(3){display:none}}