/* IMO intake forms. Self-contained on purpose — this is served on its own
   hostname per IMO and is the thing standing between an agent and a submitted
   application, so it depends on nothing else shipping.

   Sized for a phone held at a kitchen table: 16px floor so iOS never zooms on
   focus, 46px tap targets, and no horizontal scroll at 320px. */

:root{
  --bg:#070b14; --navy:#0f1729; --card:#121b30; --ink:#ece9f4;
  --faint:rgba(236,233,244,.42); --dim:rgba(236,233,244,.66);
  --line:rgba(236,233,244,.14); --accent:#7f6ce0; --season:#9d8bff;
  --warn:#e6b96e; --good:#6ee6a8; --bad:#e88b8b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);min-height:100svh;
  font:400 16px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  padding:0 0 7rem;
}
.wrap{max-width:44rem;margin:0 auto;padding:0 1.15rem}

/* header + progress */
header{position:sticky;top:0;z-index:20;background:rgba(7,11,20,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem 0 .8rem}
.wm{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
#agentflag{color:var(--warn)}
.bar{height:2px;background:rgba(236,233,244,.08)}
.barfill{height:100%;background:var(--accent);width:0;transition:width .3s ease}

/* steps */
.step{display:none;padding:2.2rem 0 1rem}
.step.on{display:block;animation:in .28s ease both}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.eyebrow{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--season);margin-bottom:.7rem}
h1{font-size:1.42rem;line-height:1.25;font-weight:600;letter-spacing:-.01em}
.sub{color:var(--dim);margin:.55rem 0 1.6rem;font-size:.93rem}

/* questions */
.q{margin:0 0 1.35rem}
.qlabel{display:block;font-size:.93rem;margin-bottom:.5rem;color:var(--ink)}
.opt{color:var(--faint);font-size:.72rem;margin-left:.5rem;letter-spacing:.04em}
.hint{display:block;color:var(--faint);font-size:.78rem;margin:-.25rem 0 .5rem}

input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=number],select,textarea{
  width:100%;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:.6rem;
  padding:.8rem .85rem;font:inherit;font-size:16px;min-height:46px;
}
textarea{min-height:6.5rem;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.2rem}

/* money gets a $ so a number field reads as currency without a masking lib */
.ifield{position:relative}
.pre{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
input.money{padding-left:1.7rem}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:block;padding:.62rem .9rem;min-height:46px;display:flex;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:.6rem;
  font-size:.88rem;cursor:pointer;transition:border-color .15s,background .15s}
.chip input:checked+span{border-color:var(--accent);background:rgba(127,108,224,.16);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}

/* repeating groups — the reason these forms are not GHL surveys */
.group{margin:0 0 1.5rem}
.grow{background:rgba(18,27,48,.55);border:1px solid var(--line);border-radius:.75rem;
  padding:1rem .9rem .25rem;margin:.7rem 0}
.ghead{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem}
.ghead span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--season)}
.grm{background:none;border:0;color:var(--faint);font:inherit;font-size:.78rem;
  cursor:pointer;padding:.35rem .2rem;min-height:auto;text-decoration:underline}
.grm:hover{color:var(--bad)}
.gadd{width:100%;background:none;border:1px dashed var(--line);color:var(--season);
  border-radius:.6rem;padding:.75rem;font:inherit;font-size:.88rem;cursor:pointer;min-height:46px}
.gadd:hover{border-color:var(--accent);background:rgba(127,108,224,.07)}
.gsum{display:flex;flex-wrap:wrap;gap:.75rem;margin:.5rem 0 .8rem;font-size:.8rem}
.gsum .ok{color:var(--good)}
.gsum .bad{color:var(--warn)}

/* consent */
.consent{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:.6rem;padding:.9rem}
.consent input{margin-top:.25rem;width:20px;height:20px;flex:0 0 auto;accent-color:var(--accent)}
.consent p{font-size:.8rem;color:var(--dim);line-height:1.55}

.err{color:var(--warn);font-size:.86rem;min-height:1.3rem;margin:.2rem 0 0}
.done h1{color:var(--good)}

/* bottom nav */
nav{position:fixed;bottom:0;left:0;right:0;z-index:20;
  background:rgba(7,11,20,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.nrow{display:flex;align-items:center;gap:.8rem;padding:.8rem 1.15rem;
  padding-bottom:calc(.8rem + env(safe-area-inset-bottom))}
nav button{background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:.6rem;padding:.7rem 1.1rem;font:inherit;font-size:.9rem;cursor:pointer;min-height:46px}
nav button.primary{background:var(--accent);border-color:var(--accent);color:#fff;margin-left:auto;font-weight:500}
nav button.primary:disabled{opacity:.55;cursor:default}
.count{font-size:.72rem;color:var(--faint);letter-spacing:.06em}
.saved{font-size:.68rem;color:var(--good);letter-spacing:.05em;margin-left:auto}
nav button.primary{margin-left:.6rem}

@media (max-width:380px){
  .nrow{gap:.5rem;padding-left:.9rem;padding-right:.9rem}
  .saved{display:none}
  h1{font-size:1.28rem}
}
@media (prefers-reduced-motion:reduce){
  .step.on{animation:none}
  .barfill{transition:none}
}