/* ============================================================
   GP Migration Risk Check — Stylesheet
   i95Dev · eCommerce Risk Series
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --navy:#10327b;
  --navy-mid:#1a3d96;
  --navy-light:#e8edf8;
  --teal:#62ded2;
  --teal-dark:#3ab8ab;
  --red:#cc4238;
  --red-bg:#fdf0ef;
  --red-bd:#f0c0bc;
  --amber:#9a5f0a;
  --amber-bg:#fdf5e6;
  --amber-bd:#f0d49a;
  --green:#0f6b4a;
  --green-bg:#eaf5f1;
  --green-bd:#a8ddd0;
  --lavender:#f3f4ff;
  --bg:#f4f5fb;
  --surface:#fff;
  --surface2:#f8f9fd;
  --border:#dde0ee;
  --border-light:#eaecf5;
  --text:#0e1a35;
  --muted:#4a5068;
  --hint:#8a8fa8;
  --shadow:0 8px 32px rgba(16,50,123,.08);
}

body{
  font-family:'Lato',system-ui,sans-serif;
  font-weight:400;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  padding:24px 16px 64px;
}

/* ── Loader ── */
.loader{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(255,255,255,.88);
  z-index:999;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:14px;
}
.loader.on{display:flex}
.spinner{
  width:40px;height:40px;
  border:3px solid var(--border);
  border-top-color:var(--navy);
  border-radius:50%;
  animation:spin .75s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader p{font-size:14px;font-weight:700;color:var(--navy)}

/* ── Layout ── */
.wrapper{max-width:720px;margin:0 auto}

/* ── Header ── */
.header{
  background:var(--navy);
  border-radius:16px 16px 0 0;
  padding:36px 44px 32px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.header::before{
  content:'';position:absolute;top:-60px;right:-60px;
  width:220px;height:220px;border-radius:50%;
  background:rgba(98,222,210,.07);
}
.header::after{
  content:'';position:absolute;bottom:-40px;left:20px;
  width:140px;height:140px;border-radius:50%;
  background:rgba(255,255,255,.03);
}
.h-badge{
  display:inline-block;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  color:var(--teal);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 16px;border-radius:30px;margin-bottom:18px;
  position:relative;z-index:1;
}
.h-title{
  font-family:'InstrumentSerif',serif;
  font-size:30px;font-weight:normal;color:#fff;
  line-height:1.2;margin-bottom:12px;
  position:relative;z-index:1;
}
.h-title em{font-style:italic;color:var(--teal)}
.h-sub{
  font-size:14px;font-weight:300;color:rgba(255,255,255,.72);
  max-width:460px;margin:0 auto;line-height:1.65;
  position:relative;z-index:1;
}

/* ── Progress bar ── */
.prog-wrap{
  background:var(--surface);
  padding:18px 44px 14px;
  border-bottom:1px solid var(--border);
  display:none;
}
.prog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.prog-label{font-size:12px;font-weight:700;color:var(--navy);letter-spacing:.04em;text-transform:uppercase}
.prog-track{height:5px;background:var(--border);border-radius:10px;overflow:hidden}
.prog-fill{
  height:100%;
  background:linear-gradient(90deg,var(--teal),var(--navy));
  border-radius:10px;
  transition:width .5s ease;
  width:0%;
}

/* ── Card ── */
.card{
  background:var(--surface);
  padding:36px 44px;
  border-radius:0 0 16px 16px;
  box-shadow:var(--shadow);
}

/* ── Sections ── */
.section{display:none}
.section.active{display:block;animation:fadeUp .3s ease}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Intro screen ── */
.intro-pills{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:24px;padding-bottom:22px;
  border-bottom:1px solid var(--border-light);
}
.pill{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--lavender);border:.5px solid var(--border);
  border-radius:20px;padding:6px 14px;
  font-size:12.5px;color:var(--muted);
}
.pill-dot{width:5px;height:5px;border-radius:50%;background:var(--teal);flex-shrink:0}
.intro-pts{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.intro-pt{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13.5px;color:var(--muted);line-height:1.5;
}
.pt-dot{width:5px;height:5px;border-radius:50%;background:var(--teal);margin-top:7px;flex-shrink:0}

/* ── Setup screen ── */
.setup-intro{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border-light)}
.setup-intro h2{font-family:'InstrumentSerif',serif;font-size:22px;font-weight:normal;color:var(--text);margin-bottom:6px}
.setup-intro p{font-size:13.5px;color:var(--muted);line-height:1.55}

/* ── Form elements ── */
.fgroup{margin-bottom:18px}
.flabel{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:6px;letter-spacing:.02em}
.fopt{font-weight:400;color:var(--hint);font-size:11px;margin-left:4px}
.inp{
  width:100%;padding:11px 15px;
  border:1.5px solid var(--border);border-radius:8px;
  font-family:'Lato',sans-serif;font-size:14px;color:var(--text);
  outline:none;background:var(--surface2);
  transition:border-color .18s;
}
.inp:focus{border-color:var(--navy)}
.inp.invalid{border-color:var(--red)}
select.inp{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8fa8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;cursor:pointer;
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:7px 14px;border-radius:20px;
  border:1.5px solid var(--border);background:var(--surface2);
  font-family:'Lato',sans-serif;font-size:13px;color:var(--muted);
  cursor:pointer;transition:all .15s;user-select:none;
}
.chip:hover{border-color:var(--navy);color:var(--navy)}
.chip.on{background:var(--navy-light);border-color:var(--navy);color:var(--navy);font-weight:700}
.field-err{font-size:12px;color:var(--red);margin-top:4px;display:none}

/* ── Question screen ── */
.q-block{margin-bottom:28px}
.q-num{
  display:inline-block;background:var(--lavender);color:var(--navy);
  font-size:11px;font-weight:700;padding:2px 9px;border-radius:5px;
  margin-bottom:8px;letter-spacing:.4px;
}
.q-text{font-size:16px;font-weight:700;color:var(--text);margin-bottom:12px;line-height:1.45}
.options{display:flex;flex-direction:column;gap:8px}
.opt{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border:1.5px solid var(--border);border-radius:10px;
  cursor:pointer;transition:border-color .18s,background .18s;user-select:none;
}
.opt:hover{border-color:var(--navy);background:var(--navy-light)}
.opt.selected{border-color:var(--navy);background:var(--navy-light)}
.radio{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,background .15s;
}
.opt.selected .radio{border-color:var(--navy);background:var(--navy)}
.opt.selected .radio::after{content:'';width:7px;height:7px;border-radius:50%;background:#fff}
.opt-label{font-size:13.5px;color:var(--text);line-height:1.4}
.opt.selected .opt-label{color:var(--navy);font-weight:500}
.err-msg{display:none;color:var(--red);font-size:13px;font-weight:500;margin-top:4px;margin-bottom:12px}

/* ── Gate screen ── */
.gate-hero{
  background:var(--navy);border-radius:12px;
  padding:32px 36px 28px;margin-bottom:28px;
  position:relative;overflow:hidden;
}
.gate-hero::after{
  content:'';position:absolute;top:-40px;right:-40px;
  width:160px;height:160px;border-radius:50%;
  background:rgba(98,222,210,.07);
}
.gate-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);border-radius:20px;
  padding:5px 14px;margin-bottom:14px;
}
.gate-dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.gate-dot-txt{font-size:12px;color:rgba(255,255,255,.8)}
.gate-h{
  font-family:'InstrumentSerif',serif;font-size:26px;
  font-weight:normal;color:#fff;line-height:1.25;margin-bottom:6px;
}
.gate-sub{font-size:13.5px;font-weight:300;color:rgba(255,255,255,.65);line-height:1.5}
.gate-form{max-width:460px}
.privacy{text-align:center;font-size:12px;color:var(--hint);margin-top:14px}

/* ── Results screen ── */
.res-hero{border-radius:14px;padding:28px 32px;margin-bottom:20px}
.res-hero.red{background:var(--red-bg);border:1px solid var(--red-bd)}
.res-hero.amber{background:var(--amber-bg);border:1px solid var(--amber-bd)}
.res-hero.green{background:var(--green-bg);border:1px solid var(--green-bd)}
.res-tag{
  display:inline-block;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:4px 12px;border-radius:20px;margin-bottom:12px;
}
.res-tag.red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-bd)}
.res-tag.amber{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-bd)}
.res-tag.green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-bd)}
.res-h{font-family:'InstrumentSerif',serif;font-size:22px;font-weight:normal;line-height:1.3;margin-bottom:10px}
.res-h.red{color:var(--red)}.res-h.amber{color:var(--amber)}.res-h.green{color:var(--green)}
.res-sum{font-size:13.5px;color:var(--muted);line-height:1.65;margin-bottom:10px}
.res-stat{
  display:none;font-size:12.5px;font-weight:700;
  padding:5px 12px;border-radius:8px;
  color:var(--red);background:rgba(204,66,56,.08);border:1px solid rgba(204,66,56,.15);
}

.sec-title{
  font-size:15px;font-weight:800;color:var(--text);
  margin:20px 0 14px;display:flex;align-items:center;gap:10px;
}
.sec-title::before{
  content:'';width:4px;height:18px;
  background:var(--navy);border-radius:2px;flex-shrink:0;
}

.area-rows{
  display:flex;flex-direction:column;
  margin-bottom:20px;border:1px solid var(--border);
  border-radius:12px;overflow:hidden;
}
.area-row{padding:14px 18px;border-bottom:1px solid var(--border-light)}
.area-row:last-child{border-bottom:none}
.area-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.area-name{font-size:13px;font-weight:700;color:var(--text)}
.area-badge{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:10px;
}
.area-badge.red{background:var(--red-bg);color:var(--red)}
.area-badge.amber{background:var(--amber-bg);color:var(--amber)}
.area-badge.green{background:var(--green-bg);color:var(--green)}
.area-track{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:8px}
.area-fill{height:5px;border-radius:0;transition:width 1s cubic-bezier(.4,0,.2,1)}
.area-fill.red{background:var(--red)}
.area-fill.amber{background:#c4870a}
.area-fill.green{background:var(--green)}
.area-narrative{font-size:12.5px;color:var(--muted);line-height:1.55}

/* ── CTA block ── */
.cta-block{
  background:var(--navy);border-radius:14px;
  padding:28px 32px;margin-top:20px;text-align:center;
}
.cta-h{
  font-family:'InstrumentSerif',serif;font-size:21px;
  font-weight:normal;color:#fff;margin-bottom:8px;line-height:1.3;
}
.cta-sub{
  font-size:13px;font-weight:300;color:rgba(255,255,255,.65);
  line-height:1.6;max-width:400px;margin:0 auto 20px;
}
.cta-btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* ── Buttons ── */
.nav{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:28px;padding-top:22px;border-top:1px solid var(--border);
}
.btn{
  padding:11px 26px;border-radius:8px;font-size:14px;font-weight:700;
  cursor:pointer;border:none;transition:all .18s;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  font-family:'Lato',sans-serif;
}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-mid);box-shadow:0 4px 14px rgba(16,50,123,.3);transform:translateY(-1px)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{background:transparent;color:var(--hint);border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy)}
.btn-outline-w{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.btn-outline-w:hover{background:rgba(255,255,255,.1)}
.btn-teal{background:var(--teal);color:var(--navy);font-weight:700}
.btn-teal:hover{background:var(--teal-dark);transform:translateY(-1px)}

/* ── Responsive ── */
@media(max-width:600px){
  .header,.prog-wrap,.card{padding-left:22px;padding-right:22px}
  .h-title{font-size:23px}
  .gate-hero{padding:22px 20px 18px}
  .res-hero{padding:20px 18px}
  .cta-block{padding:22px 18px}
  .nav{flex-direction:column-reverse;gap:10px}
  .btn{width:100%;justify-content:center}
}