:root{
--charcoal:#2D2D38;
--charcoal-ink:#1C1C24;
--gold:#D9C41E;
--gold-deep:#B8A518;
--cream:#F7F5EF;
--paper:#FCFBF8;
--stone:#8A8A94;
--line:#E4E1D6;
--green:#4C9A6A;
--amber:#C98A1F;
--red:#C24C3D;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;overflow-x:clip;}
  body{
margin:0;
background:var(--paper);
color:var(--charcoal-ink);
font-family:'Inter', sans-serif;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:clip;
  }
  h1,h2,h3,h4{
font-family:'Inter', sans-serif;
font-weight:600;
margin:0;
color:var(--charcoal);
  }
  a{color:inherit;}
  .wrap{max-width:760px;margin:0 auto;padding:0 clamp(16px,4vw,28px);width:100%;}
  .eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--gold);font-weight:600;
  }
  .eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);}

  /* HERO */
  .hero{
background:var(--charcoal);
color:#EFEEE6;
padding:72px 0 60px;
position:relative;
overflow:hidden;
  }
  .hero::after{
content:"";position:absolute;right:-120px;top:-140px;
width:420px;height:420px;border-radius:50%;
background:radial-gradient(circle at center, rgba(217,196,30,.16), transparent 70%);
  }
  .hero .wrap{position:relative;}
  .hero .slogan{
font-family:'Inter',sans-serif;
font-size:clamp(22px,3.4vw,30px);
line-height:1.32;
color:#F6F4EC;
max-width:640px;
margin:16px 0 0;
  }
  .hero .slogan em{color:var(--gold);font-style:normal;}

  /* TOOL SHELL */
  .tool-shell{padding:56px 0 90px;}
  .tool-card{
background:var(--paper);
border:1px solid var(--line);
border-radius:6px;
padding:44px 44px 40px;
  }

  /* PROGRESS */
  .progress-row{display:flex;align-items:center;gap:14px;margin-bottom:38px;}
  .progress-track{flex:1;height:3px;background:var(--line);border-radius:2px;overflow:hidden;}
  .progress-fill{height:100%;background:var(--gold);width:14.28%;transition:width .3s ease;}
  .progress-label{font-size:12.5px;color:var(--stone);white-space:nowrap;font-weight:600;letter-spacing:.02em;}

  /* QUESTION STEP */
  .step{display:none;}
  .step.active{display:block;animation:fadein .25s ease;}
  @keyframes fadein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
  .q-num{font-size:12.5px;color:var(--gold-deep);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;}
  .q-text{font-size:23px;margin-bottom:26px;line-height:1.35;}

  .opt-grid{display:flex;flex-direction:column;gap:10px;}
  .opt{
display:block;
width:100%;
text-align:left;
background:#fff;
border:1px solid var(--line);
border-radius:4px;
padding:15px 18px;
font-family:'Inter',sans-serif;
font-size:15px;
color:var(--charcoal-ink);
cursor:pointer;
transition:border-color .15s ease, background .15s ease;
  }
  .opt:hover{border-color:var(--gold-deep);}
  .opt.selected{
border-color:var(--gold-deep);
background:rgba(217,196,30,.08);
font-weight:600;
  }

  .nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:34px;}
  .btn{
display:inline-block;
background:var(--charcoal);
color:#F6F4EC;
padding:13px 28px;
border:none;
border-radius:2px;
text-decoration:none;
font-size:14.5px;font-weight:600;letter-spacing:.02em;
cursor:pointer;
transition:background .2s ease, opacity .2s ease;
font-family:'Inter',sans-serif;
  }
  .btn:hover{background:var(--gold-deep);color:var(--charcoal-ink);}
  .btn:disabled{opacity:.35;cursor:not-allowed;}
  .btn:disabled:hover{background:var(--charcoal);color:#F6F4EC;}
  .btn-ghost{
background:transparent;color:var(--stone);border:1px solid var(--line);
  }
  .btn-ghost:hover{background:var(--cream);color:var(--charcoal-ink);}

  /* RESULTS */
  .results{display:none;}
  .results.active{display:block;animation:fadein .3s ease;}
  .score-head{display:flex;align-items:center;gap:32px;flex-wrap:wrap;margin-bottom:38px;}
  .score-ring{position:relative;width:132px;height:132px;flex:none;}
  .score-ring svg{transform:rotate(-90deg);}
  .score-num{
position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  .score-num .n{font-family:'Inter',sans-serif;font-size:34px;color:var(--charcoal);font-weight:600;}
  .score-num .d{font-size:11.5px;color:var(--stone);}
  .score-title{font-size:13px;color:var(--stone);letter-spacing:.04em;text-transform:uppercase;font-weight:600;}
  .score-sub{font-size:15px;color:var(--charcoal-ink);margin-top:8px;max-width:360px;}

  .rrow{
display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
padding:18px 0;border-top:1px solid var(--line);
  }
  .rrow:last-of-type{border-bottom:1px solid var(--line);}
  .rrow .label{font-size:14px;color:var(--stone);}
  .rrow .value{font-size:15px;font-weight:600;color:var(--charcoal-ink);text-align:right;}
  .dot{display:inline-flex;align-items:center;gap:8px;}
  .dot::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;}
  .dot.green::before{background:var(--green);}
  .dot.amber::before{background:var(--amber);}
  .dot.red::before{background:var(--red);}

  .risks{margin-top:36px;}
  .risks h4{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--charcoal);font-weight:600;margin-bottom:14px;}
  .risks ol{margin:0;padding-left:20px;}
  .risks li{font-size:14.5px;color:var(--charcoal-ink);padding:6px 0;}

  .next-step{
margin-top:40px;
background:var(--charcoal);
border-radius:4px;
padding:32px 34px;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
  }
  .next-step .ns-label{font-size:12px;color:var(--gold);letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:8px;}
  .next-step h3{color:#F6F4EC;font-size:20px;}
  .next-step .btn{background:var(--gold);color:var(--charcoal-ink);}
  .next-step .btn:hover{background:#EAE06B;}

  .restart{
display:block;text-align:center;margin-top:24px;font-size:13.5px;color:var(--stone);
text-decoration:underline;cursor:pointer;background:none;border:none;font-family:inherit;
  }

  .disclaimer{font-size:12.5px;color:var(--stone);margin-top:28px;text-align:center;}

  @media (max-width:600px){
.hero{padding:52px 0 44px;}
.tool-shell{padding:40px 0 64px;}
.tool-card{padding:32px 24px;}
.q-text{font-size:19px;}
.score-head{flex-direction:column;align-items:flex-start;}
.next-step{flex-direction:column;align-items:flex-start;}
.il-topbar-inner{padding:12px 0;}
.il-crumb{font-size:11.5px;line-height:1.45;}
  }