/* monstermoney.ai guides + hub + Money Matcher (2026-10-27). Brand: onyx + cyan→turq→green gradient, Monoton display, Manrope text. No WebGL here (CWV). */
:root{--onyx:#05070C;--panel:#0A1219;--panel2:#0D1820;--line:rgba(65,182,215,.22);--cyan:#41B6D7;--turq:#47D1B2;--green:#39E19B;--ecyan:#5EE6FF;--txt:#E8FFF6;--body:#C9E4DC;--mut:#8FB9AE;--grad:linear-gradient(90deg,#41B6D7,#47D1B2,#39E19B)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body.g{background:var(--onyx);color:var(--body);font:400 17px/1.7 Manrope,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 500px at 85% -10%,rgba(65,182,215,.14),transparent 60%),radial-gradient(700px 500px at -10% 20%,rgba(57,225,155,.08),transparent 60%),
  linear-gradient(rgba(65,182,215,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(65,182,215,.035) 1px,transparent 1px);background-size:auto,auto,44px 44px,44px 44px;background-attachment:fixed}
a{color:var(--ecyan);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--green)}
.g-wrap{max-width:1160px;margin:0 auto;padding:0 20px}
/* top bar */
.g-top{position:sticky;top:0;z-index:20;background:rgba(5,7,12,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.g-top-in{display:flex;align-items:center;justify-content:space-between;height:60px;gap:12px}
.g-logo{display:flex;align-items:center;gap:9px;text-decoration:none}
.g-logo img{filter:drop-shadow(0 0 8px rgba(57,225,155,.55))}
.g-logo b{font:400 1.08rem Monoton,cursive;letter-spacing:.05em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.g-nav{display:flex;align-items:center;gap:18px;font-weight:700;font-size:.9rem}
.g-nav a{color:var(--txt);text-decoration:none}
.g-nav a:hover{color:var(--green)}
.g-join{padding:8px 14px;border-radius:999px;background:var(--grad);color:#03140D!important}
@media(max-width:620px){.g-nav a:not(.g-join){display:none}.g-logo b{font-size:.95rem}}
/* layout */
.g-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;padding-top:28px;padding-bottom:20px}
@media(max-width:980px){.g-grid{grid-template-columns:1fr}.g-side{display:none}}
.g-art{max-width:760px;min-width:0}
.g-bc{font-size:.82rem;color:var(--mut);margin-bottom:14px}
.g-bc a{color:var(--mut)}
.g h1{font:800 clamp(2rem,4.6vw,3.05rem)/1.12 Manrope,sans-serif;letter-spacing:-.02em;color:#fff;margin-bottom:12px}
.g h1{background:linear-gradient(180deg,#fff 30%,#bff7ff 70%,#8ff0c6);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-dek{font-size:1.15rem;color:var(--txt);opacity:.92;margin-bottom:10px;line-height:1.5}
.g-by{font-size:.85rem;color:var(--mut);margin-bottom:22px}
.g-by a{color:var(--mut)}
.g-answer{position:relative;background:linear-gradient(180deg,rgba(57,225,155,.09),rgba(65,182,215,.05));border:1px solid rgba(57,225,155,.4);border-radius:16px;padding:18px 20px 16px;margin:6px 0 22px}
.g-answer-k{font:800 .7rem/1 Manrope;letter-spacing:.22em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.g-answer p{color:#fff;font-size:1.06rem;line-height:1.6}
.g-take{list-style:none;margin:0 0 24px;display:grid;gap:8px}
.g-take li{position:relative;padding-left:26px;color:var(--txt)}
.g-take li:before{content:"$";position:absolute;left:4px;top:0;color:var(--green);font-weight:800}
.g-art h2{font:800 clamp(1.35rem,2.6vw,1.7rem)/1.25 Manrope;color:#fff;margin:38px 0 12px;letter-spacing:-.01em}
.g-art h3{font:800 1.12rem/1.35 Manrope;color:var(--txt);margin:22px 0 6px}
.g-art p{margin:0 0 14px}
.g-art ul,.g-art ol{margin:0 0 16px 22px}
.g-art li{margin:6px 0}
.g-art strong{color:#fff}
.g-toc-m{display:none;border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:8px;background:var(--panel)}
.g-toc-m summary{cursor:pointer;font-weight:800;color:var(--txt)}
.g-toc-m ol{margin:10px 0 0 20px;font-size:.92rem}
@media(max-width:980px){.g-toc-m{display:block}}
.g-side{position:relative}
.g-toc{position:sticky;top:84px;border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:rgba(10,18,25,.7);font-size:.86rem;margin-bottom:16px}
.g-toc b{display:block;color:var(--txt);margin-bottom:8px}
.g-toc ol{margin-left:18px;display:grid;gap:5px}
.g-toc a{color:var(--mut);text-decoration:none}
.g-toc a:hover{color:var(--green)}
.g-side .g-mm{position:sticky;top:calc(84px + 1rem);flex-direction:column;align-items:flex-start}
/* table */
.g-table{overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.g-table table{border-collapse:collapse;width:100%;min-width:620px;font-size:.9rem}
.g-table caption{text-align:left;padding:12px 14px 4px;font-weight:800;color:var(--txt)}
.g-table th,.g-table td{padding:10px 14px;border-bottom:1px solid rgba(65,182,215,.12);text-align:left;vertical-align:top}
.g-table thead th{color:var(--green);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}
.g-table tbody th{color:#fff}
.g-table tr:last-child>*{border-bottom:0}
/* cta + promo */
.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:13px 20px;border-radius:12px;background:var(--grad);color:#03140D!important;font:800 .92rem/1 Manrope;letter-spacing:.04em;text-decoration:none;box-shadow:0 0 0 2px #33E08A,0 0 22px rgba(51,224,138,.35);white-space:nowrap}
.g-btn:hover{filter:brightness(1.08)}
.g-btn.ghost{background:transparent;color:var(--txt)!important;box-shadow:inset 0 0 0 1px var(--line)}
.g-cta{margin:34px 0 10px;padding:22px;border-radius:18px;background:radial-gradient(500px 200px at 100% 0,rgba(57,225,155,.16),transparent 70%),var(--panel2);border:1px solid rgba(57,225,155,.35)}
.g-cta-k{font:800 .7rem/1 Manrope;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.g-cta h3{font:400 1.25rem Monoton,cursive;letter-spacing:.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 8px}
.g-cta p{font-size:.95rem}
.g-cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.g-mm{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:26px 0;padding:16px 18px;border-radius:14px;border:1px dashed rgba(94,230,255,.45);background:rgba(65,182,215,.06)}
.g-mm b{display:block;color:#fff;margin-bottom:2px}
.g-mm span{display:block;font-size:.88rem;color:var(--mut);line-height:1.5}
@media(max-width:560px){.g-mm{flex-direction:column;align-items:flex-start}}
/* faq */
.g-faq details{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin:10px 0;padding:0 16px}
.g-faq summary{cursor:pointer;list-style:none;padding:14px 26px 14px 0;font-weight:800;color:#fff;position:relative}
.g-faq summary::-webkit-details-marker{display:none}
.g-faq summary:after{content:"+";position:absolute;right:0;top:12px;color:var(--green);font-size:1.3rem}
.g-faq details[open] summary:after{content:"–"}
.g-faq details p{padding:0 0 14px}
.g-author{display:flex;gap:14px;align-items:flex-start;margin:34px 0 14px;padding:16px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.g-author b{display:block;color:#fff}
.g-author span{font-size:.88rem;color:var(--mut);line-height:1.55}
.g-disc{font-size:.78rem;color:var(--mut);line-height:1.55}
/* cards */
.g-rel{padding:10px 20px 40px}
.g-rel h2,.g-home h2{font:800 1.5rem Manrope;color:#fff;margin:10px 0 16px}
.g-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:900px){.g-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.g-cards{grid-template-columns:1fr}}
.g-card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:14px;background:var(--panel);border:1px solid var(--line);text-decoration:none;transition:border-color .2s,transform .2s}
.g-card:hover{border-color:rgba(57,225,155,.6);transform:translateY(-2px)}
.g-card b{color:#fff;font-size:1rem;line-height:1.35}
.g-card span{color:var(--mut);font-size:.86rem;line-height:1.5}
.g-hub{padding-top:28px;padding-bottom:40px;max-width:1160px}
.g-hub>.g-answer,.g-hub>.g-dek,.g-hub>h1{max-width:820px}
.g-cards-hub{margin:8px 0 24px}
.g-stat{display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:14px;border:1px solid var(--line);background:var(--panel);margin:10px 0}
.g-stat b{font:400 2.4rem Monoton,cursive;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-stat span{font-size:.92rem}
/* homepage hub section (sits under the phone gate) */
.g-home{position:relative;z-index:3;padding:40px 0 30px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(5,7,12,.6),var(--onyx) 120px);font:400 16px/1.65 Manrope,system-ui,sans-serif;color:var(--body)}
.g-home .g-answer{max-width:820px}
.g-home-k{font:800 .72rem/1 Manrope;letter-spacing:.28em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.g-home h2{font:400 clamp(1.6rem,4vw,2.3rem)/1.2 Monoton,cursive;letter-spacing:.03em;background:linear-gradient(180deg,#fff 10%,var(--ecyan) 55%,var(--green));-webkit-background-clip:text;background-clip:text;color:transparent;text-align:left;margin:4px 0 16px}
.g-more{font-weight:800}
.g-foot{border-top:1px solid var(--line);padding:30px 0 40px;font-size:.78rem;color:var(--mut);line-height:1.7;text-align:center;position:relative;z-index:3}
.g-foot .co{font-weight:800;color:var(--txt);letter-spacing:.05em;margin:12px 0 6px}
.g-foot a{color:var(--ecyan)}
.g-foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:.85rem;font-weight:700}
.g-foot p{max-width:720px;margin:4px auto}
/* Money Matcher */
.mm-q{display:none}.mm-q.on{display:block}
.mm-box{max-width:760px;margin:0 auto 30px;padding:24px;border-radius:20px;background:var(--panel2);border:1px solid rgba(57,225,155,.35)}
.mm-prog{height:6px;border-radius:9px;background:rgba(65,182,215,.15);overflow:hidden;margin-bottom:18px}
.mm-prog i{display:block;height:100%;width:0;background:var(--grad);transition:width .35s}
.mm-step{font:800 .72rem Manrope;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.mm-q h2{font:800 1.4rem/1.3 Manrope;color:#fff;margin:6px 0 14px}
.mm-opts{display:grid;gap:10px}
.mm-opts button{text-align:left;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--txt);font:700 1rem Manrope;cursor:pointer;transition:border-color .15s,background .15s}
.mm-opts button:hover,.mm-opts button:focus-visible{border-color:var(--green);background:rgba(57,225,155,.08);outline:none}
.mm-back{margin-top:14px;background:none;border:0;color:var(--mut);font:600 .88rem Manrope;cursor:pointer}
.mm-res{display:none}.mm-res.on{display:block}
.mm-r{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:12px 0;background:var(--panel)}
.mm-r.top{border-color:rgba(57,225,155,.7);box-shadow:0 0 0 1px rgba(57,225,155,.25),0 10px 40px rgba(57,225,155,.12)}
.mm-r h3{font:800 1.12rem Manrope;color:#fff;margin:0 0 4px;display:flex;justify-content:space-between;gap:10px}
.mm-r h3 em{font-style:normal;color:var(--green);font-size:.9rem;white-space:nowrap}
.mm-bar{height:6px;border-radius:9px;background:rgba(65,182,215,.15);margin:8px 0 10px;overflow:hidden}
.mm-bar i{display:block;height:100%;background:var(--grad)}
.mm-meta{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}
.mm-meta span{font-size:.75rem;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--mut)}
.mm-r p{font-size:.93rem;margin:0 0 6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}