*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --bg:#FBF5F1;
    --card:#FFFFFF;
    --accent:#C4636C;
    --accent2:#AD525B;
    --accent-soft:#F5D5D9;
    --accent-glow:rgba(196,99,108,0.22);
    --text:#3A2224;
    --text2:#6D4E52;
    --text3:#A08082;
    --border:#EDE0E2;
    --green:#4EA06E;
    --green-soft:#E2F3EA;
    --amber:#C89B40;
    --amber-soft:#FDF3DC;
    --red-soft:#FAEAEB;
    --shadow:0 2px 12px rgba(70,25,30,0.06);
    --shadow2:0 6px 24px rgba(70,25,30,0.10);
    --r:14px;
}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',sans-serif;
    background:var(--bg);color:var(--text);
    min-height:100dvh;line-height:1.45;
    -webkit-font-smoothing:antialiased;
}
.wrap{max-width:420px;margin:0 auto;padding:0 16px;overflow-x:hidden}

/* ====== SCREEN: STEP 1 — Names ====== */
.s{display:none;padding:16px 0 24px}
.s.active{display:block}

.logo{text-align:center;font-size:11px;color:var(--text3);letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}
.logo span{color:var(--accent);font-weight:600}

h1{text-align:center;font-size:21px;font-weight:700;line-height:1.3;margin-bottom:6px}
h1 em{font-style:normal;color:var(--accent)}
.sub{text-align:center;font-size:13px;color:var(--text2);margin-bottom:14px;line-height:1.4}

/* social bar */
.sbar{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.sbar .ch{
    font-size:10.5px;color:var(--text2);background:var(--card);
    border:1px solid var(--border);border-radius:18px;
    padding:3px 9px;display:flex;align-items:center;gap:4px;white-space:nowrap;
}
.ch b{font-weight:600}
.ch .dot{width:5px;height:5px;border-radius:50%;background:var(--green);display:inline-block}

/* form card */
.fcard{
    background:var(--card);border:1px solid var(--border);border-radius:var(--r);
    padding:16px;box-shadow:var(--shadow2);margin-bottom:12px;
}
.flabel{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.frow{margin-bottom:10px}
.finput{
    width:100%;height:48px;border:1.5px solid var(--border);border-radius:10px;
    padding:0 14px;font-size:16px;color:var(--text);background:var(--bg);
    outline:none;transition:border .2s;
}
.finput:focus{border-color:var(--accent)}
.finput::placeholder{color:var(--text3);font-size:14px}

.cta{
    width:100%;height:52px;border:none;border-radius:12px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;font-size:16px;font-weight:700;cursor:pointer;
    box-shadow:0 4px 20px var(--accent-glow);
    transition:transform .12s;letter-spacing:.2px;
    animation:pulse 2.5s ease infinite;
}
.cta:active{transform:scale(0.97);animation:none}
@keyframes pulse{0%,100%{box-shadow:0 4px 20px var(--accent-glow)}50%{box-shadow:0 4px 30px rgba(196,99,108,0.38)}}

.err{color:var(--accent);font-size:12px;text-align:center;margin-top:4px;display:none}

.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 10px;margin-top:10px}
.chips span{font-size:10px;color:var(--text3)}

/* value stack below form */
.vbox{margin-top:14px;margin-bottom:10px}
.vbox-t{font-size:11.5px;font-weight:600;color:var(--text2);text-align:center;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.vitems{display:flex;flex-direction:column;gap:5px}
.vit{
    display:flex;align-items:center;gap:8px;
    background:var(--card);border:1px solid var(--border);border-radius:10px;
    padding:8px 12px;font-size:12.5px;color:var(--text2);line-height:1.3;
}
.vit .vi{flex-shrink:0;font-size:14px;width:22px;text-align:center}

/* reviews */
.revs{display:flex;gap:7px;margin-top:10px}
.rv{
    flex:1;background:var(--card);border:1px solid var(--border);
    border-radius:10px;padding:9px 10px;font-size:11px;
    color:var(--text2);line-height:1.35;box-shadow:var(--shadow);
}
.rv .rn{font-weight:600;color:var(--text);font-size:10.5px;margin-bottom:1px}
.rv .rs{color:#DDA528;font-size:9px;letter-spacing:1.5px;margin-bottom:2px}

/* ====== SCREEN: STEP 2 — DOB (optional) ====== */
.step2-head{text-align:center;margin-bottom:14px}
.step2-head .names{font-size:17px;font-weight:700;color:var(--accent);margin-bottom:4px}
.step2-head p{font-size:13px;color:var(--text2)}

.dob-row{display:flex;gap:8px;margin-bottom:10px}
.dob-row .finput{flex:1;text-align:center;font-size:15px;letter-spacing:.5px}
.skip-link{
    display:block;text-align:center;font-size:12px;color:var(--text3);
    margin-top:8px;cursor:pointer;text-decoration:underline;
    text-underline-offset:2px;
}

/* ====== SCREEN: LOADER ====== */
.loader-inner{padding:60px 0;text-align:center}
.ld-names{font-size:18px;font-weight:700;color:var(--text);margin-bottom:4px}
.ld-sub{font-size:12px;color:var(--text3);margin-bottom:14px}
.pbar-wrap{width:100%;height:5px;background:var(--border);border-radius:3px;margin-bottom:18px;overflow:hidden}
.pbar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:3px;transition:width .35s ease}
.lstep{font-size:13px;color:var(--text3);margin-bottom:5px;opacity:0;transform:translateY(6px);transition:all .3s}
.lstep.vis{opacity:1;transform:translateY(0)}
.lstep.done{color:var(--green)}
.lstep .chk{display:none}
.lstep.done .chk{display:inline}
.lstep.done .sp{display:none}

/* ====== SCREEN: PHONE ====== */
/* phone hero recap */
.ph-hero{
    background:var(--card);border:1px solid var(--border);border-radius:var(--r);
    padding:16px;margin-bottom:12px;text-align:center;
    box-shadow:var(--shadow2);
}
/* unified green status */
.ph-status{
    display:inline-flex;align-items:center;gap:6px;
    background:#E6F5EC;border:1px solid #C2E4D0;border-radius:20px;
    padding:6px 16px;margin-bottom:12px;
    font-size:13px;font-weight:700;color:#2E7D4F;
}
.ph-status-dot{
    width:8px;height:8px;border-radius:50%;background:#3EA86A;
    animation:blink 1.5s ease infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.ph-status-timer{font-weight:500;color:#4A9A68}
.ph-status .ti{font-variant-numeric:tabular-nums;font-weight:600}
.ph-hero-names{font-size:22px;font-weight:700;color:var(--text);margin-bottom:3px}
.ph-hero-dob{font-size:12px;color:var(--text3);min-height:14px}

.ph-card{
    background:var(--card);border:1px solid var(--border);border-radius:var(--r);
    box-shadow:var(--shadow2);padding:16px;text-align:center;margin-bottom:12px;
}
.ph-card-icon{font-size:22px;margin-bottom:4px}
.ph-card h3{font-size:15.5px;font-weight:700;margin-bottom:4px}
.ph-reason{font-size:12.5px;color:var(--text2);line-height:1.45;margin-bottom:14px}
.ph-inp{
    width:100%;height:52px;border:1.5px solid var(--border);border-radius:10px;
    padding:0 14px;font-size:18px;color:var(--text);background:var(--bg);
    outline:none;text-align:center;letter-spacing:.5px;margin-bottom:10px;
}
.ph-inp:focus{border-color:var(--accent)}
.ph-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 10px;margin-top:10px}
.ph-trust span{font-size:10.5px;color:var(--text3)}

/* consent */
.consent{
    display:flex;align-items:flex-start;gap:8px;
    margin-top:12px;cursor:pointer;text-align:left;
}
.consent input[type="checkbox"]{
    flex-shrink:0;width:16px;height:16px;margin-top:1px;
    accent-color:var(--accent);cursor:pointer;
}
.consent span{font-size:10.5px;color:var(--text3);line-height:1.4}

/* ready list */
.rdy{
    background:var(--card);border:1px solid var(--border);border-radius:var(--r);
    padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow);
}
.rdy-t{font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:8px;text-align:center}
.rdy-list{display:flex;flex-direction:column;gap:6px}
.rdy-i{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:var(--text2);line-height:1.35}
.rdy-i .ri{
    flex-shrink:0;width:20px;font-size:14px;text-align:center;
}
.rdy-i.bonus{opacity:.85}


.footer{padding:20px 0 28px;text-align:center;font-size:9.5px;color:var(--text3);line-height:1.6}

/* anims */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fu{animation:fadeUp .4s ease both}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}

.hidden{display:none!important}