.wrap{max-width:1020px;margin:30px auto 50px; }
/* Hero */
.hero{text-align:center;margin-bottom:36px;animation:fadeUp .5s ease both;}
.hero-tag{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:6px 18px;border-radius:100px;margin-bottom:16px;backdrop-filter:blur(6px);}
.hero h1{font-size:clamp(24px,5vw,44px);font-weight:800;color:#fff;line-height:1.12;letter-spacing:-.5px;margin-bottom:12px;text-shadow:0 2px 20px rgba(0,0,0,.2);}
.hero p{color:rgba(255,255,255,.82);font-size:15px;font-weight:300;max-width:480px;margin:0 auto;line-height:1.7;}
/* Progress */
.prog-wrap{display:flex;align-items:flex-start;gap:0;margin-bottom:22px;animation:fadeUp .5s ease .05s both;}
.prog-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;}
.prog-dot{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:rgba(255,255,255,.55);transition:all .3s;position:relative;z-index:1;}
.prog-dot.active{background:#fff;border-color:#fff;color:#e8357a;}
.prog-dot.done{background:rgba(255,255,255,.9);border-color:#fff;color:#3fb950;}
.prog-label{font-size:10px;font-weight:600;color:rgba(255,255,255,.5);letter-spacing:.5px;text-transform:uppercase;text-align:center;}
.prog-label.active{color:#fff;}
.prog-line{flex:1;height:2px;background:rgba(255,255,255,.22);margin-top:17px;margin-bottom:26px;transition:background .3s;}
.prog-line.done{background:rgba(255,255,255,.8);}
/* Card */
.card{background:#fff;border-radius:20px;box-shadow:0px 50px 113.8px 0px #0000001A;overflow:hidden;}
/* Screens */
.screen{display:none;}
.screen.active{display:block;animation:fadeUp .4s ease both;}
/* ── SCREEN 1 ── */
.s1-body{padding:0;}
.sec-title{font-size:15px;font-weight:700;color:#1a1a2e;margin-bottom:24px;display:flex;align-items:center;gap:8px;}
.sec-title::before{content:'';width:4px;height:18px;background:linear-gradient(180deg,#e8357a,#f0265c);border-radius:4px;flex-shrink:0;}
.fields{display:flex;flex-direction:column;gap:18px;}
.fg{}
.fl{display: block; color: #1F2E4E;font-family: Poppins;font-weight: 700;font-size: 14px;letter-spacing: 0%;text-transform: uppercase;margin-bottom: 10px;}
.fl .sn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#e8357a,#f0265c);color:#fff;font-size:10px;font-weight:800;margin-right:6px;}
.opt-badge{display:inline-block;background:rgba(232,53,122,.1);color:#e8357a;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 8px;border-radius:100px;margin-left:6px;vertical-align:middle;}
.sub-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end;}
@media(max-width:540px){.sub-row{grid-template-columns:1fr;}}
.sw{position:relative;}
.sw::after{content:'▾';position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#e8357a;font-size:14px;pointer-events:none;font-weight:700;}
select:focus{border-color:#e8357a;background:#fff;box-shadow:0 0 0 3px rgba(232,53,122,.12);}
select:disabled{background:#f0f0f8;color:#aaa;cursor:not-allowed;border-color:#e0e0ee;}
select option{color:#1a1a2e;background:#fff;}
/* Buttons */
.pink-btn:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 12px 32px rgba(232,53,122,.45);}
.pink-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}
.ghost-btn{background:transparent;border:2px solid #e0d0f0;color:#8040a0;padding:10px 24px;border-radius:8px;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;}
.ghost-btn:hover{border-color:#e8357a;color:#e8357a;background:rgba(232,53,122,.06);}
/* ── SCREEN 2 ── */
.s2-body{padding:36px 36px 32px;}
.lf-header{background:linear-gradient(135deg,rgba(201,59,138,.08),rgba(240,38,92,.05));border:1px solid rgba(232,53,122,.18);border-radius:12px;padding:18px 20px;margin-bottom:28px;display:flex;align-items:center;gap:14px;}
.lf-icon-box{width:46px;height:46px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,#c93b8a,#f0265c);display:flex;align-items:center;justify-content:center;font-size:22px;}
.lf-htext h3{font-size:14px;font-weight:700;color:#1a1a2e;margin-bottom:3px;}
.lf-htext p{font-size:12px;color:#6a6a8a;font-weight:300;line-height:1.5;}
.lf-fields{display:flex;flex-direction:column;gap:14px;}
.lf-grp{position:relative;}
.lf-inp{width:100%;padding:13px 16px 13px 44px;background:#f8f4ff;border:2px solid #e8e0ff;border-radius:10px;font-family:'Poppins',sans-serif;font-size:14px;color:#1a1a2e;transition:border-color .2s,box-shadow .2s,background .2s;outline:none;}
.lf-inp:focus{border-color:#e8357a;background:#fff;box-shadow:0 0 0 3px rgba(232,53,122,.12);}
.lf-inp::placeholder{color:#a0a0c0;}
textarea.lf-inp{min-height:96px;resize:vertical;padding-top:13px;}
.lf-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;}
.lf-grp.ta .lf-ico{top:15px;transform:none;}
.cap-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:stretch;}
.cap-box{background:linear-gradient(135deg,#1a1a2e,#2d2d50);border-radius:10px;padding:0 20px;display:flex;align-items:center;justify-content:center;min-width:110px;}
.cap-num{font-size:22px;font-weight:800;color:#fff;letter-spacing:5px;font-family:'Courier New',monospace;user-select:none;}
.cap-err{color:#f85149;font-size:12px;min-height:16px;margin-top:5px;font-weight:500;}
.lf-note{font-size:11px;color:#a0a0c0;text-align:center;line-height:1.6;}
.lf-note a{color:#e8357a;text-decoration:none;}
.back-row{text-align:center;margin-top:18px;}
/* ── SCREEN 3 ── */
.s3-body{padding:32px 28px 36px;background:#fff;}

/* 1. Score circle — top center with ring */
.score-top {
    text-align: center;
    margin-bottom: 20px;
    background: #F5F5FF;
    border-radius: 66.5px;
    padding: 40px;
}
.score-ring-wrap{position:relative;display:inline-block;margin-bottom:12px;}
.score-ring-svg{display:block;}
.score-ring-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.scnum{font-size:68px;font-weight:700;color:#1a1a2e;line-height:1;}
.sclbl{font-size:18px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#888;}
.vtag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 14px;
    border-radius: 100px;
    margin-bottom: 10px;
    font-family: Poppins;
    font-weight: 700;
    font-size: 16px;
    line-height: 27px;
    letter-spacing: 10%;
    text-align: center;
    text-transform: uppercase;
}.vt-High{background:rgba(63,185,80,.12);color:#3fb950;}
.vt-Conditional{background:rgba(245,200,66,.15);color:#c49000;}
.vt-Low{background:rgba(248,81,73,.12);color:#f85149;}
.vtitle {
    color: #1F2E4E;
    font-family: Almarai;
    font-weight: 700;
    font-size: 32px;
    line-height: 32px;
    letter-spacing: -5%;
    text-align: center;
    vertical-align: middle;
}

/* 2. Why This Verdict card — left illustration, right text */
.why-card {
    background: #FFF5FD;
    border-radius: 25px;
    overflow: hidden;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    min-height: 140px;
    border: 1px solid #fff5fd;
    padding: 40px;
}
.why-illo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.why-illo svg{width:90px;height:90px;}
.why-text{padding:20px 20px 20px 18px;flex:1;}
.why-text h4{font-size:14px;font-weight:700;color:#1a1a2e;margin-bottom:8px;}
.why-text p{color: #1F2E4E;font-family: Poppins;font-weight: 400;font-size: 16px;line-height: 23px;letter-spacing: 0%;}

/* 3. Platform + Journey row */
.plat-journey-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
@media(max-width:480px){.plat-journey-row{grid-template-columns:1fr;}}

.plat-card{background: #5B2879;border-radius: 25px;padding: 30px;border: 0;}
.pc-label{font-size:10px;font-weight:700;color:#a070c0;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:12px;}
.plat-tags{display:flex;flex-direction: row;gap:8px;justify-content: center;}
.plat-tag-row{display:flex;align-items:center;gap:8px;flex-direction: column;}
.plat-tag-lbl{min-width:62px;font-family: Poppins;font-weight: 700;font-size: 14px;line-height: 27px;letter-spacing: 10%;text-align: center;text-transform: uppercase;color: white;}
.ptag{background:linear-gradient(135deg,#c93b8a,#f0265c);color:#fff;padding:7px 18px;border-radius:100px;display:inline-block;font-family: Poppins;font-weight: 700;font-size: 18px;line-height: 41px;letter-spacing: 0%;text-align: center;}
.ptag2{background: white;color: #f0265c;padding: 7px 18px;border-radius: 100px;display: inline-block;font-family: Poppins;font-weight: 700;font-size: 18px;line-height: 41px;letter-spacing: 0%;text-align: center;}

.journey-card{background:#fff;border-radius:14px;padding:18px 18px 16px;border:1px solid #ece6f8;}
.jc-label{font-size:10px;font-weight:700;color:#a070c0;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:12px;}
.jc-title{font-size:14px;font-weight:700;color:#1a1a2e;margin-bottom:6px;}
.lpath{font-size:13px;color:#5a5a7a;line-height:1.8;font-weight:400;}
.larr{color:#e8357a;font-weight:700;}

/* 4. How To Use It Right — dark navy card */
.how-card{background:#1F2E4E;border-radius:25px;padding:40px;margin-bottom:20px;}
.how-card h4{font-size:14px;font-weight:700;color:#fff;margin-bottom:12px;}
.how-card p{    color: #fff;
    font-family: Poppins;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 0%;}

/* 5. Start Over button */
.reset-row{text-align:center;}
.start-over-btn{display:inline-block;background:linear-gradient(135deg,#c93b8a,#f0265c);color:#fff;font-family:'Poppins',sans-serif;font-size:14px;font-weight:700;padding:14px 48px;border-radius:100px;border:none;cursor:pointer;box-shadow:0 8px 24px rgba(232,53,122,.35);transition:opacity .2s,transform .15s;}
.start-over-btn:hover{opacity:.9;transform:translateY(-1px);}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes ringDraw{from{stroke-dashoffset:var(--full);}to{stroke-dashoffset:var(--offset);}}
@media(max-width:560px){.s1-body,.s2-body,.s3-body{padding:24px 16px;}
  .why-illo{width:90px;} .why-illo svg{width:64px;height:64px;} .why-text{padding:14px 14px 14px 12px;}}


  .s1-body, .s2-body {
    display: flex;
    grid-gap: 30px;
    align-items: center;
    padding: 0;
}

.image-side {
    display: flex;
    width: 40%;
}

.image-side img {
    width: 100%;
    height: 100%;
    display: block;
}

.right-side {
    padding: 0 70px 0 10px;
    width: 60%;
}

.right-side h2 {
    font-family: Almarai;
    font-weight: 700;
    font-size: 41px;
    line-height: 52px;
    letter-spacing: -5%;
    margin: 0 0 10px 0;
    text-align: left;
}

.right-side h2 span {
    color: #d73379;
}

.right-side p {
    font-family: Almarai;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0%;
    text-align: left;
    color: #1F2E4E !important;
    margin: 0 0 30px 0;
}


.s2-body select, .s1-body select, .lf-inp {
    width: 100%;
    padding: 13px 40px 13px 16px;
    background: #f8f4ff00 !important;
    border: 1px solid #D9D9D9 !important;
    border-radius: 60px !important;
    font-size: 16px;
    color: #8C8C8C;
    cursor: pointer;
    appearance: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    font-family: Almarai;
    font-weight: 400;
    letter-spacing: 0%;
}

.pink-btn {
    font-family: Poppins;
    font-weight: 700;
    font-size: 20px;
    line-height: 41px;
    letter-spacing: 0%;
    padding: 3px 20px;
    display: flex;
    align-items: center;
    border-radius: 25px;
    border: 2px solid transparent;
    min-width: 180px;
    justify-content: center;
    cursor: pointer;
}

.s3-body h4, .jc-label {
    font-family: Almarai;
    font-weight: 700;
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -5%;
    vertical-align: middle;
}


.journey-card .jc-label {
    color: #1F2E4E;
    margin-bottom: 0px;
}

.journey-card {
    background: #F5F5FF;
    border-radius: 25px;
    padding: 30px;
    border: 0;
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: center;
}

div#rPath {
    font-family: Poppins;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0%;
    text-transform: capitalize;
    color: #1F2E4E;
}

ul.steps-bul li {
    width: 50px;
    height: 7px;
    background: #dfdfdf;
}

ul.steps-bul li.active{
    background: #e8357a;
}

ul.steps-bul {
    display: flex;
    grid-gap: 10px;
    justify-content: center;
    margin-top: 55px;
}