
:root{
  --night:#0B1420; --deep:#111F2E; --card:#14232F;
  --glow:#4FD1D9; --lamp:#F5C77E; --paper:#E8EDF2; --mute:#7E93A6;
  --line:rgba(232,237,242,.14); --line2:rgba(232,237,242,.28);
  --pad:clamp(20px,5vw,28px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--night);color:var(--paper);
  font-family:'Archivo',system-ui,sans-serif;font-size:16px;line-height:1.6;
  font-variation-settings:'wdth' 100;
  overflow-x:hidden;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--pad)}
.mono{font-family:'IBM Plex Mono',monospace}

/* ---------- type ---------- */
.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--glow)
}
h1{
  font-size:clamp(38px,8.2vw,84px);line-height:.95;letter-spacing:-.025em;
  font-variation-settings:'wdth' 82,'wght' 800;
}
h2{
  font-size:clamp(27px,4.6vw,44px);line-height:1.02;letter-spacing:-.02em;
  font-variation-settings:'wdth' 84,'wght' 750;
}
h3{font-size:clamp(17px,2.4vw,20px);font-variation-settings:'wdth' 96,'wght' 700;letter-spacing:-.005em}
.lead{font-size:clamp(17px,2.3vw,20px);color:var(--mute);max-width:56ch}
p{max-width:64ch}
.em{color:var(--glow)}
.amber{color:var(--lamp)}

/* ---------- hero ---------- */
header{
  padding:clamp(46px,9vw,86px) 0 clamp(38px,6vw,60px);
  background:radial-gradient(120% 95% at 8% 0%,#16304A 0%,var(--night) 62%);
  border-bottom:1px solid var(--line);
}
.hero-eyebrow{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:26px;align-items:center}
h1{margin-bottom:22px}
.hero-lead{margin-bottom:32px}
.moneyline{
  border-left:3px solid var(--lamp);padding-left:16px;max-width:60ch;
  font-size:clamp(15px,2vw,17px);color:var(--paper);margin-bottom:34px
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:44px}

/* trust strip — above the fold on purpose */
.trust{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.trust div{background:var(--night);padding:18px 20px}
.trust .n{
  font-size:clamp(26px,4vw,36px);line-height:1;
  font-variation-settings:'wdth' 110,'wght' 800;color:var(--lamp);
  display:block;margin-bottom:6px
}
.trust .l{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-variation-settings:'wght' 750;font-size:16px;
  padding:16px 30px;border:2px solid var(--glow);background:var(--glow);
  color:var(--night);text-decoration:none;cursor:pointer;font-family:inherit;
  transition:background .15s,color .15s;
}
.btn:hover{background:transparent;color:var(--glow)}
.btn.ghost{background:transparent;color:var(--glow)}
.btn.ghost:hover{background:var(--glow);color:var(--night)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible{
  outline:2px solid var(--lamp);outline-offset:3px
}

/* ---------- sections ---------- */
section{padding:clamp(52px,8vw,88px) 0;border-bottom:1px solid var(--line)}
.sec-top{margin-bottom:clamp(28px,4vw,44px)}
.sec-top .eyebrow{display:block;margin-bottom:14px}

/* ---------- the shift grid: signature ---------- */
.grid42{display:grid;grid-template-columns:repeat(14,1fr);gap:3px;margin:22px 0 10px}
.cell{aspect-ratio:1;background:rgba(232,237,242,.09);border-radius:1px}
.cell.mine{background:var(--glow)}
.cell.bench{background:var(--lamp)}
.legend{display:flex;flex-wrap:wrap;gap:16px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
.legend i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px;background:rgba(232,237,242,.16)}
.legend i.a{background:var(--glow)}.legend i.b{background:var(--lamp)}

/* ---------- pay explainer ---------- */
.halves{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:26px 0}
.half{background:var(--deep);padding:clamp(20px,3vw,30px)}
.half .k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--glow);display:block;margin-bottom:12px}
.half h3{margin-bottom:8px}
.half p{color:var(--mute);font-size:15px}
@media(max-width:640px){.halves{grid-template-columns:1fr}}

/* ---------- calculator ---------- */
.calc{background:var(--card);border:1px solid var(--line2);padding:clamp(22px,4vw,38px)}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.preset{
  background:transparent;border:1px solid var(--line2);color:var(--mute);
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:10px 16px;cursor:pointer;transition:border-color .15s,color .15s
}
.preset:hover{border-color:var(--glow);color:var(--glow)}
.preset.on{border-color:var(--glow);color:var(--night);background:var(--glow);font-weight:600}
.badge{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;color:var(--lamp);margin-top:8px
}
.ctrl{margin-bottom:26px}
.ctrl label{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:10px;font-size:14.5px}
.ctrl .val{font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:600;color:var(--lamp)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;
  background:var(--line2);outline:none;border-radius:2px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--glow);cursor:pointer;border:3px solid var(--night)
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--glow);
  cursor:pointer;border:3px solid var(--night)
}
/* per-profile slider colors */
input[type=range].prof.a::-webkit-slider-thumb{background:var(--glow)}
input[type=range].prof.b::-webkit-slider-thumb{background:var(--lamp)}
input[type=range].prof.c::-webkit-slider-thumb{background:#9FB4C7}
input[type=range].prof.a::-moz-range-thumb{background:var(--glow)}
input[type=range].prof.b::-moz-range-thumb{background:var(--lamp)}
input[type=range].prof.c::-moz-range-thumb{background:#9FB4C7}
.dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;vertical-align:-1px}
.dot.a{background:var(--glow)}.dot.b{background:var(--lamp)}.dot.c{background:#9FB4C7}
/* stacked 3-profile bar + total */
.stack{display:flex;height:14px;gap:3px;margin:4px 0 10px}
.stack i{display:block;height:100%;border-radius:2px;transition:width .12s}
.stack i.a{background:var(--glow)}.stack i.b{background:var(--lamp)}.stack i.c{background:#9FB4C7}
.sumline{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.sumline .big{
  font-size:clamp(32px,5.4vw,48px);line-height:1;color:var(--glow);
  font-variation-settings:'wdth' 108,'wght' 800;font-family:'Archivo',sans-serif
}
.out{border-top:1px solid var(--line);margin-top:8px;padding-top:22px}
.orow{display:flex;justify-content:space-between;gap:16px;padding:10px 0;font-size:15px;border-bottom:1px solid var(--line)}
.orow span:last-child{font-family:'IBM Plex Mono',monospace;font-weight:500}
.orow.total{border-bottom:0;padding-top:18px;font-size:clamp(19px,3vw,24px);font-variation-settings:'wght' 750;align-items:baseline}
.orow.total span:last-child{color:var(--glow);font-size:clamp(26px,5vw,40px);font-variation-settings:'wdth' 108,'wght' 800;font-family:'Archivo',sans-serif}
.note{font-size:13px;color:var(--mute);margin-top:16px;max-width:none}

/* ---------- lists ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px)}
@media(max-width:720px){.two{grid-template-columns:1fr}}
ul.marks{list-style:none}
ul.marks li{position:relative;padding-left:30px;margin-bottom:14px;font-size:15.5px}
ul.marks li::before{
  content:"";position:absolute;left:0;top:9px;width:12px;height:2px;background:var(--glow)
}
ul.marks.no li::before{background:var(--mute);width:12px;height:2px;transform:rotate(0)}
ul.marks.no li{color:var(--mute)}

/* ---------- faq ---------- */
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;list-style:none;font-variation-settings:'wght' 650;font-size:16.5px;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--glow);font-family:'IBM Plex Mono',monospace;font-size:20px;line-height:1;flex:0 0 auto}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:var(--mute);font-size:15px}

/* ---------- voice agent slot ---------- */
.voice{
  background:var(--deep);border:1px solid var(--line2);
  padding:clamp(24px,4vw,40px);display:flex;flex-wrap:wrap;gap:24px;
  align-items:center;justify-content:space-between
}
.voice-copy{flex:1 1 320px}
#agente-voz{flex:0 0 auto;min-width:200px}

/* ---------- agent (voice + chat) ---------- */
.agent{background:var(--card);border:1px solid var(--line2);max-width:720px}
.agent-head{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:16px clamp(16px,3vw,24px);border-bottom:1px solid var(--line)}
.modeswitch{display:flex;border:1px solid var(--line2)}
.mode{background:transparent;border:0;color:var(--mute);font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;padding:10px 20px;cursor:pointer}
.mode.on{background:var(--glow);color:var(--night);font-weight:600}
.agent-status{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.michelp{padding:18px clamp(16px,3vw,24px);background:var(--deep);border-bottom:1px solid var(--line)}
.michelp h3{margin-bottom:10px;color:var(--lamp)}
.michelp p{color:var(--mute);font-size:14px;margin-bottom:8px}
.chatlog{padding:clamp(16px,3vw,24px);min-height:220px;max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.msg{max-width:85%;padding:12px 16px;font-size:15px;line-height:1.5;white-space:pre-wrap}
.msg.ai{background:var(--deep);border-left:2px solid var(--glow);align-self:flex-start}
.msg.user{background:rgba(79,209,217,.12);border-right:2px solid var(--lamp);align-self:flex-end;text-align:right}
.msg.sys{background:none;color:var(--mute);font-size:12.5px;font-family:'IBM Plex Mono',monospace;align-self:center;text-align:center}
.voicebar{padding:0 clamp(16px,3vw,24px) clamp(18px,3vw,26px)}
.chatbar{display:flex;gap:10px;padding:0 clamp(16px,3vw,24px) clamp(18px,3vw,26px)}
.chatbar input{flex:1}
.chatbar .btn{padding:14px 24px}

/* ---------- form ---------- */
.formwrap{background:var(--card);border:1px solid var(--line2);padding:clamp(22px,4vw,40px);max-width:600px}
.steps{display:flex;gap:6px;margin-bottom:26px}
.sbar{height:3px;flex:1;background:var(--line2)}
.sbar.on{background:var(--glow)}
.step{display:none}.step.on{display:block}
.step .eyebrow{display:block;margin-bottom:16px}
.field{margin-bottom:20px}
.field label{display:block;font-size:14px;margin-bottom:8px;color:var(--paper)}
.field .hint{font-size:12.5px;color:var(--mute);margin-top:6px}
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%;background:var(--night);border:1px solid var(--line2);
  color:var(--paper);padding:14px 16px;font-size:16px;font-family:inherit;border-radius:0
}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--glow) 50%),linear-gradient(135deg,var(--glow) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat}
textarea{resize:vertical;min-height:90px}
.formnav{display:flex;gap:12px;align-items:center;margin-top:26px}
.back{background:none;border:0;color:var(--mute);font-family:inherit;font-size:14px;cursor:pointer;text-decoration:underline}
#done{display:none;text-align:left}
#done h3{margin-bottom:12px}

footer{padding:44px 0 64px;color:var(--mute);font-size:13px}
footer p{max-width:70ch}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
