/* How to God: consistent with SMT case study, with a soft teal and gold game palette. */
.htg-page{--smt-cyan:#65e4d6;--smt-cyan-soft:#c1fcf1;background:#0b2025;color:#f5fbfa}
.htg-page .topbar{background:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.50) 42%,transparent 90%)}
.htg-hero{background:#10292b}
.htg-hero-art{object-position:center 49%;filter:saturate(.92)}
.htg-hero-tint{background:linear-gradient(180deg,rgba(4,16,21,.05),rgba(4,16,21,.18) 34%,rgba(6,22,26,.78) 78%,#0b2025 100%),linear-gradient(90deg,rgba(2,18,22,.90),rgba(2,18,22,.53) 47%,transparent 85%)}
.htg-hero h1{color:#ffc780;text-shadow:0 5px 18px #06201d,0 2px 8px #051310}
.htg-page .smt-formerly{color:#d8faef}
.htg-page .smt-section-title{background:linear-gradient(110deg,#42c3c5,#9ff0d9 54%,#ffd2a1);-webkit-background-clip:text;background-clip:text}
.htg-page .smt-details{background:linear-gradient(180deg,#0b2025,#103a3b 65%,#0b2025)}
.htg-page .smt-fact-icon{background:#081d1f;color:#8cf0dc;border-color:rgba(132,249,218,.27)}
.htg-page .smt-fact-label{color:#87e5d5}
.htg-page .smt-fact-value{color:#f1fff9}
.htg-page .smt-fact-value span{color:#bddbd7}
.htg-intro{padding-bottom:30px}
.htg-disclosure{margin:35px 0 6px;padding:21px 27px;background:#103238;border-left:3px solid #81e3d2;color:#d6f1ee}
.htg-disclosure strong{font:600 13px/1.2 'Chakra Petch',sans-serif;color:#b2f1df;letter-spacing:.13em}
.htg-disclosure p{font:400 clamp(14px,1.1vw,17px)/1.55 'Funnel Sans',sans-serif;max-width:1030px;margin-top:10px}
.htg-image-pair{display:grid;grid-template-columns:1.24fr .84fr;gap:22px;align-items:stretch}
.htg-figure{margin:0;background:#0b2e33;border:1px solid #2c6971;overflow:hidden}
.htg-figure img{display:block;width:100%;height:auto;aspect-ratio:1.2/1;object-fit:cover;object-position:center center;transition:transform .3s ease}
.htg-figure:hover img{transform:scale(1.025)}
.htg-figure figcaption{font:500 13px/1.4 'Chakra Petch',sans-serif;color:#c1eee5;letter-spacing:.035em;padding:14px 16px;background:#123439}
.htg-population-image img{aspect-ratio:16/9;object-fit:cover}
.htg-bug-grid{display:grid;grid-template-columns:minmax(135px,240px) 1fr;align-items:center;gap:25px 55px;background:#0f3437;padding:40px;border:1px solid #2b6668}
.htg-bug-grid p{font:400 clamp(19px,1.5vw,24px)/1.55 'Funnel Sans',sans-serif;color:#eaf9f3;max-width:680px}
.htg-bug-number{font:500 clamp(65px,10vw,135px)/1 'Chakra Petch',sans-serif;color:#9befd9;letter-spacing:-.04em}
.htg-bug-number span{color:#ffd28e}
.htg-qa{padding-bottom:120px}
.htg-page .smt-bottom-nav{border-top-color:#396f6e}
.htg-page .smt-bottom-nav a{color:#ffd28e}
@media(max-width:700px){.htg-image-pair{grid-template-columns:1fr;gap:19px}.htg-image-pair .htg-figure img{aspect-ratio:auto;max-height:470px;object-fit:contain;background:#0a2528}.htg-bug-grid{grid-template-columns:1fr;gap:10px;padding:26px}.htg-qa{padding-bottom:65px}}
@media(max-width:600px){.htg-hero-art{aspect-ratio:16/11;object-fit:cover;object-position:center}.htg-hero-tint{height:76vw;background:linear-gradient(180deg,transparent 12%,#0b2025 99%)}.htg-hero h1{font-size:clamp(40px,11.5vw,66px)}.htg-disclosure{padding:17px 18px}}
@media(prefers-reduced-motion:reduce){.htg-figure img{transition:none}}
/* Keep differing aspect-ratio screenshots natural rather than stretching the smaller card. */
.htg-image-pair{align-items:start}