/* DayzHUB Mods home, FAQ and Coming soon pages (website split, 2026-10-09). Scoped under .mh; uses the hub.css tokens. */
.mh section{padding:clamp(44px,7vw,88px) 0}.mh section.line{border-top:1px solid var(--line)}
.mh .head{display:flex;flex-direction:column;gap:12px;margin-bottom:34px}
.mh .hero{padding-top:clamp(40px,6vw,80px);background:radial-gradient(900px 400px at 75% 0,rgba(231,201,139,.09),transparent 70%)}
.mh .hero-in{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.mh .hero .lead{margin:18px 0 28px}.mh .cta{display:flex;flex-wrap:wrap;gap:12px}
.mh .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}.mh .chip{font:600 12px/1 var(--f-m);color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:7px 11px}
.mh .shot{border:1px solid var(--line-2);border-radius:18px;overflow:hidden;background:var(--surface)}
.mh .shot img{width:100%;aspect-ratio:16/10;object-fit:cover}
.mh .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mh .card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s}
.mh a.card:hover{border-color:var(--gold-line)}
.mh .card .pic{width:100%;align-self:stretch;position:relative;aspect-ratio:16/9;background:var(--surface-3);overflow:hidden;display:grid;place-items:center}
.mh .card .pic img{width:100%;height:100%;object-fit:cover}
.mh .card .pic.ph{background:linear-gradient(135deg,#1c1f24,#14161a 60%,#221d12);color:var(--gold);font:800 34px var(--f-d)}
.mh .card .body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}.mh .card p{color:var(--ink-2);font-size:14.5px;line-height:1.5}
.mh .card .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
.mh .price{font:700 16px/1 var(--f-m)}
.mh .st{position:absolute;right:10px;top:10px;font:700 10.5px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:6px 9px;background:rgba(8,9,11,.82);border:1px solid}
.mh .st.av{color:var(--ok);border-color:rgba(92,195,138,.45)}.mh .st.cs{color:var(--gold);border-color:rgba(231,201,139,.4)}.mh .st.fr{color:var(--live);border-color:rgba(92,195,216,.45)}
.mh .ver{font:600 11px/1 var(--f-m);color:var(--live);background:var(--live-soft);border:1px solid var(--live-line);border-radius:6px;padding:5px 7px;white-space:nowrap}
.mh .sub{font:700 12px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:34px 0 14px}
.mh .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:s}
.mh .step{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.mh .step::before{counter-increment:s;content:counter(s);font:700 12px/1 var(--f-m);color:#1A140A;background:var(--gold-grad);border-radius:999px;width:26px;height:26px;display:grid;place-items:center;margin-bottom:12px}
.mh .step b{display:block;font-family:var(--f-d);margin-bottom:4px}.mh .step p{color:var(--ink-2);font-size:14px;line-height:1.5}
.mh code{font:600 12.5px var(--f-m);background:var(--surface-3);padding:2px 6px;border-radius:5px;color:var(--gold-2);word-break:break-all}
.mh .notes{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px;color:var(--ink-2);font-size:14.5px}.mh .notes span::before{content:"\2713\00a0";color:var(--ok)}
.mh .why{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.mh .why div{border-top:2px solid var(--gold);padding-top:14px}.mh .why p{color:var(--ink-2);font-size:14.5px;margin-top:6px}
.mh .langs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}.mh .langs span{border:1px solid var(--line-2);border-radius:8px;padding:7px 12px;font-size:13.5px;color:var(--ink-2)}
.mh .strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
.mh .strip figure{margin:0;flex:0 0 min(420px,82%);scroll-snap-align:start}.mh .strip img{border-radius:14px;border:1px solid var(--line-2);aspect-ratio:16/10;object-fit:cover;width:100%}
.mh .strip figcaption{font-size:13px;color:var(--ink-3);margin-top:8px}
.mh .two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.mh .panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px}
.mh .upd{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--line)}.mh .upd:first-child{border-top:0;padding-top:0}.mh .upd time{font:600 12px var(--f-m);color:var(--ink-3);flex:0 0 84px;padding-top:3px}.mh .upd b{display:block;font-size:15px}.mh .upd span{color:var(--ink-2);font-size:14px}
.mh details{border-top:1px solid var(--line);padding:12px 0}.mh details:first-child{border-top:0;padding-top:0}.mh summary{cursor:pointer;font-weight:600;list-style:none}.mh summary::after{content:"+";float:right;color:var(--gold)}.mh details[open] summary::after{content:"\2212"}.mh details p{color:var(--ink-2);font-size:14.5px;margin-top:8px}
.mh .more{margin-top:14px;color:var(--gold);font-weight:600;display:block}
.mh .cta2{text-align:center;background:radial-gradient(600px 240px at 50% 0,rgba(231,201,139,.12),transparent 70%);border-top:1px solid var(--line)}.mh .cta2 .cta{justify-content:center;margin-top:24px}
.mh .soon{min-height:60vh;display:grid;place-items:center;text-align:center;padding:clamp(60px,12vw,140px) 0;background:radial-gradient(700px 320px at 50% 0,rgba(231,201,139,.1),transparent 70%)}
.mh .soon .lead{margin:18px auto 28px}.mh .soon .cta{justify-content:center}
.mh .faq-page{max-width:820px;margin:0 auto}
.mh .prod{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.mh .grid{grid-template-columns:repeat(2,1fr)}.mh .steps{grid-template-columns:1fr 1fr}.mh .why{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.mh .hero-in,.mh .two{grid-template-columns:1fr;gap:28px}.mh .prod{grid-template-columns:1fr}}
@media(max-width:620px){.mh .grid,.mh .steps,.mh .why{grid-template-columns:1fr}}
.mh .st.inline{position:static;display:inline-block;align-self:flex-start;margin-bottom:2px}