/* INTERVIEW MAX · monstermoney.ai/interview/ · brand: onyx + cyan→turq→green, Monoton wordmark, Manrope text. Mobile first. */
:root{--onyx:#05070C;--panel:#0A1219;--panel2:#0D1820;--line:rgba(65,182,215,.24);--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:64px;-webkit-text-size-adjust:100%}
body{background:var(--onyx);color:var(--body);font:400 17px/1.6 Manrope,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;
 background-image:radial-gradient(800px 480px at 85% -10%,rgba(65,182,215,.16),transparent 60%),radial-gradient(700px 500px at -10% 25%,rgba(57,225,155,.09),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}
a{color:var(--ecyan);text-underline-offset:3px}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.w{max-width:760px;margin:0 auto;padding:0 18px}
.top{position:sticky;top:0;z-index:20;background:rgba(5,7,12,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .w{display:flex;align-items:center;justify-content:space-between;height:56px;gap:10px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;min-width:0}
.logo img{border-radius:50%;filter:drop-shadow(0 0 8px rgba(57,225,155,.5))}
.logo b{font:400 1rem Monoton,cursive;letter-spacing:.05em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.snd{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:7px 12px;font-size:.82rem;font-weight:700;color:var(--txt);white-space:nowrap}

/* stage */
#iv{padding:22px 0 8px;text-align:center}
.live{display:inline-flex;align-items:center;gap:8px;font:800 .72rem/1 Manrope;letter-spacing:.2em;text-transform:uppercase;color:var(--green);border:1px solid rgba(57,225,155,.4);border-radius:999px;padding:7px 12px;background:rgba(57,225,155,.07)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(57,225,155,.7);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(57,225,155,0)}100%{box-shadow:0 0 0 0 rgba(57,225,155,0)}}
.headbox{position:relative;width:210px;height:210px;margin:14px auto 4px}
.headbox:before{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(65,182,215,.28),transparent 68%)}
#ivHead{position:relative;width:210px;height:210px}
#iv[data-phase=ask] .headbox,#iv[data-phase=turn] .headbox,#iv[data-phase=offer] .headbox{width:150px;height:150px}
#iv[data-phase=ask] #ivHead,#iv[data-phase=turn] #ivHead,#iv[data-phase=offer] #ivHead{width:150px;height:150px}
h1{font:800 clamp(2rem,8.4vw,3.1rem)/1.08 Manrope,sans-serif;letter-spacing:-.02em;margin:8px 0 12px;background:linear-gradient(180deg,#fff 30%,#bff7ff 70%,#8ff0c6);-webkit-background-clip:text;background-clip:text;color:transparent}
.dek{font-size:1.08rem;color:var(--txt);max-width:560px;margin:0 auto 6px}
.inv{font-weight:800;color:var(--green);margin:0 0 6px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:440px;margin:16px auto 0;padding:17px 20px;border-radius:999px;border:0;background:var(--grad);color:#03140D;font-weight:800;font-size:1.12rem;text-decoration:none;box-shadow:0 10px 34px rgba(57,225,155,.28)}
.btn:active{transform:translateY(1px)}
.btn.sec{background:transparent;color:var(--txt);border:1px solid var(--line);box-shadow:none;font-size:1rem;padding:13px 18px}
.quiet{display:inline-block;margin-top:12px;font-size:.92rem;color:var(--mut)}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin:18px auto 0;font-size:.88rem;color:var(--mut);list-style:none;max-width:520px}
.trust li:before{content:"✓ ";color:var(--green);font-weight:800}
#iv[data-phase=idle] .run,#iv:not([data-phase=idle]) .pre{display:none}
#iv[data-phase=turn] .askui,#iv[data-phase=offer] .askui{display:none}
#iv:not([data-phase=turn]) #ivOpts{display:none}
.status{font:800 .72rem/1 Manrope;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-top:6px}
.you{display:inline-block;max-width:92%;margin:12px auto 0;padding:8px 14px;border-radius:16px 16px 4px 16px;background:#12303a;color:#dff8ff;font-size:.95rem;text-align:left}
.you:before{content:"You: ";font-weight:800;color:var(--ecyan)}
.cap{min-height:118px;margin:12px auto 0;max-width:620px;padding:16px 18px;border-radius:18px;border:1px solid rgba(57,225,155,.35);background:linear-gradient(180deg,rgba(57,225,155,.09),rgba(65,182,215,.05));color:#fff;font-size:1.08rem;line-height:1.5;text-align:left}
.miss{margin:10px auto 0;font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px auto 0;max-width:660px}
.iv-chip{border:1px solid var(--line);background:var(--panel);color:var(--txt);border-radius:999px;padding:10px 14px;font-size:.95rem;font-weight:600;text-align:left}
.iv-chip:hover{border-color:var(--green)}
.iv-chip.done{opacity:.55}.iv-chip.done:before{content:"✓ ";color:var(--green)}
.chips.short .iv-chip.more{display:none}
.morebtn{background:none;border:0;color:var(--ecyan);font-weight:700;font-size:.92rem;margin-top:10px;text-decoration:underline}
.ask{display:flex;gap:8px;max-width:620px;margin:16px auto 0}
.ask input{flex:1;min-width:0;padding:14px 16px;border-radius:999px;border:1px solid var(--line);background:#081018;color:#fff;font:inherit;font-size:16px}
.ask input:focus{outline:2px solid var(--green);outline-offset:1px}
.ask button{flex:none;width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:var(--panel);font-size:1.25rem}
.ask button.go{background:var(--grad);color:#03140D;border:0;font-weight:800}
.ask button.on{background:#c0392b;border-color:#ff8f80;animation:pulse 1.2s infinite}
#ivTurn{margin-top:18px}
.opts{display:grid;gap:10px;max-width:480px;margin:16px auto 0}
.iv-opt{padding:15px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:#fff;font-weight:700;font-size:1.02rem;text-align:left}
.iv-opt:hover,.iv-opt:focus-visible{border-color:var(--green);background:var(--panel2)}

/* offer */
#ivOffer{text-align:left;margin:22px auto 0;max-width:620px}
.card{border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:18px;margin-top:14px}
.card h2{font:800 1.2rem/1.3 Manrope;color:#fff;margin-bottom:10px}
.plan{list-style:none;display:grid;gap:12px}
.plan li{display:grid;grid-template-columns:96px 1fr;gap:10px;font-size:.98rem}
.plan b{color:var(--green);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;padding-top:3px}
.letter{border:1px solid rgba(57,225,155,.5);background:linear-gradient(160deg,#0b1a22,#07100f);position:relative;overflow:hidden}
.letter .k{font:800 .7rem/1 Manrope;letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.letter h2{font-size:1.5rem;margin:8px 0 12px}
.letter dl{display:grid;grid-template-columns:118px 1fr;gap:8px 10px;font-size:.98rem}
.letter dt{color:var(--mut);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding-top:3px}
.letter dd{color:#fff}
.fine{font-size:.78rem;line-height:1.5;color:var(--mut);margin-top:12px}
.desk{text-align:center}.desk .qr{width:190px;margin:10px auto;background:#fff;border-radius:12px;padding:8px;line-height:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.row2 .btn{margin-top:10px}

/* written answers + footer */
.sec{padding:34px 0 10px}
.sec h2{font:800 clamp(1.4rem,5vw,1.8rem)/1.2 Manrope;color:#fff;margin-bottom:8px}
.sec>p,.sec .w>p{margin-bottom:12px}
.steps{list-style:none;display:grid;gap:10px;margin:14px 0}
.steps li{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:14px 16px}
.steps b{color:#fff;display:block}
details{border-bottom:1px solid var(--line);padding:14px 2px}
summary{cursor:pointer;font-weight:800;color:#fff;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}summary:after{content:"+";color:var(--green);font-size:1.3rem;line-height:1}
details[open] summary:after{content:"–"}
details p{margin-top:8px}
footer{margin-top:40px;border-top:1px solid var(--line);padding:26px 18px 120px;text-align:center;font-size:.78rem;line-height:1.6;color:var(--mut)}
footer nav{margin:8px 0;display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:center}
footer .co{color:var(--txt);font-weight:700}
@media(max-width:420px){.plan li,.letter dl{grid-template-columns:1fr;gap:2px}.plan li{gap:2px}.row2{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.live i,.ask button.on{animation:none}html{scroll-behavior:auto}}