/* ---------- family progress page ---------- */
.page{max-width:600px;margin:0 auto;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.hdr{padding:18px 20px 0}
.toprow{display:flex;justify-content:space-between;align-items:center}
.priv{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:#4B5563;background:#fff;border:1px solid rgba(17,24,39,.08);border-radius:99px;padding:6px 10px}
.fampage h1{font-family:BFDisplay,BFInter,sans-serif;font-size:25px;line-height:1.18;font-weight:800;letter-spacing:-.025em;margin-top:6px;overflow-wrap:anywhere}
.sub{font-size:13.5px;color:#6B7280;margin-top:6px;line-height:1.45;overflow-wrap:anywhere}
.official{display:flex;gap:11px;align-items:flex-start;margin-top:14px;background:#fff;border:1px solid rgba(17,24,39,.07);border-radius:16px;padding:12px 14px;box-shadow:0 1px 2px rgba(17,24,39,.03)}
.official .oi{width:26px;height:26px;border-radius:9px;background:linear-gradient(180deg,#1F2937,#111827);display:grid;place-items:center;flex:none;margin-top:1px}
.official p{font-size:13.5px;line-height:1.5;color:#374151}
.official b{color:#111827;font-weight:700}
.wrap{padding:0 16px}
.robanner{margin-top:14px;display:flex;gap:10px;align-items:flex-start;background:#FFF8D6;border:1px solid rgba(224,180,0,.45);border-radius:14px;padding:11px 13px;font-size:13px;line-height:1.5;color:#5C4A00}
.robanner svg{margin-top:1px}
.status{margin-top:16px;padding:20px;background:radial-gradient(120% 120% at 100% 0%,#1F2A44 0%,#111827 55%,#0B0F17 100%);color:#fff;border:0;box-shadow:0 22px 40px -22px rgba(17,24,39,.7)}
.strow{display:flex;gap:16px;align-items:center}
.ring{position:relative;width:96px;height:96px;flex:none}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring b{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1}.ring b small{font-size:15px;opacity:.55;font-weight:700}
.ring span{font-size:10.5px;opacity:.65;margin-top:3px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.stinfo{min-width:0}
.stl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FF8DA3}
.stt{font-family:BFDisplay,BFInter,sans-serif;font-size:21px;font-weight:800;line-height:1.2;letter-spacing:-.02em;margin-top:5px}
.ontrack{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#86EFAC;margin-top:8px}
.ontrack:before{content:"";width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.ontrack.ro{color:#FDE68A}.ontrack.ro:before{background:#FDD200;box-shadow:0 0 0 3px rgba(253,210,0,.2)}
.appt{margin-top:16px;display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px 14px}
.cal{width:46px;flex:none;border-radius:10px;overflow:hidden;background:#fff;color:#111827;text-align:center}
.cal i{display:block;background:#E20935;color:#fff;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.1em;padding:3px 0}
.cal b{display:block;font-size:19px;font-weight:800;padding:3px 0 4px;line-height:1}
.appt .t{font-size:13px;line-height:1.45;color:rgba(255,255,255,.85);min-width:0;overflow-wrap:anywhere}.appt .t b{color:#fff;font-size:14px;display:block}
.sec{margin-top:24px;padding:0 4px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sec h2{font-family:BFDisplay,BFInter,sans-serif;font-size:18px;font-weight:800;letter-spacing:-.02em;min-width:0;overflow-wrap:anywhere}
.sec span{font-size:12.5px;color:#6B7280;font-weight:500;white-space:nowrap}
.appsCard{margin-top:10px;padding:14px}
.appintro{font-size:13px;color:#4B5563;line-height:1.5;padding:0 2px}
.apps{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.asum{font-size:12px;font-weight:600;color:#374151;background:#F9FAFB;border:1px solid rgba(17,24,39,.06);border-radius:10px;padding:7px 10px;line-height:1.5}
.asum b{color:#111827}
.ac{border:1px solid rgba(17,24,39,.08);border-radius:14px;padding:11px 12px;background:#fff}
.ac.k-offer{border-color:rgba(22,163,74,.35);background:linear-gradient(180deg,#F4FDF7,#fff)}
.ac.k-rej{background:#FAFAFA}
.ac .a1{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.ac .cn{font-size:14px;font-weight:700;line-height:1.35;min-width:0;overflow-wrap:anywhere}
.ac.k-rej .cn{color:#4B5563}
.ac .un{font-size:12.5px;color:#4B5563;margin-top:2px;line-height:1.45;overflow-wrap:anywhere}
.ac .ad{font-size:11.5px;color:#9CA3AF;margin-top:2px;line-height:1.5}
.ac .rn{font-size:12px;color:#6B7280;margin-top:7px;line-height:1.5;border-top:1px dashed #E5E7EB;padding-top:7px}
.aempty{margin-top:12px;display:flex;gap:10px;align-items:flex-start;background:#F9FAFB;border:1px dashed #D1D5DB;border-radius:14px;padding:12px;font-size:13px;color:#4B5563;line-height:1.5}
/* how your updates work */
.how{margin-top:12px;padding:16px 16px 12px;background:linear-gradient(180deg,#FFFFFF,#FBFBFA)}
.howh{display:flex;gap:11px;align-items:flex-start}
.howi{width:30px;height:30px;border-radius:10px;background:linear-gradient(180deg,#F2264E,#D7072F);display:grid;place-items:center;flex:none;box-shadow:0 6px 14px -8px rgba(226,9,53,.7)}
.how h3{font-size:15px;font-weight:800;letter-spacing:-.01em}
.how .howh p{font-size:12.5px;color:#4B5563;line-height:1.45;margin-top:2px}
.howl{list-style:none;margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.howl li{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid rgba(17,24,39,.07);border-radius:12px;padding:8px 9px;min-width:0}
.howl .hi{width:26px;height:26px;border-radius:8px;background:#F3F4F6;color:#111827;display:grid;place-items:center;flex:none}
.howl li.acc .hi{background:#FFF0F3;color:#D7072F}
.howl li.gold .hi{background:#FFF8D6;color:#8A6D00}
.howl .ht{font-size:12px;font-weight:600;line-height:1.3;color:#111827;min-width:0}
.howl .ht small{display:block;font-size:10.5px;font-weight:500;color:#6B7280;margin-top:1px}
.howl li:last-child{grid-column:1/-1}
/* next */
.next{margin-top:12px;padding:18px;background:linear-gradient(180deg,#FFFDF0,#FFFFFF);border:1px solid rgba(253,210,0,.55)}
.next h3{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:800;letter-spacing:-.01em}
.next h3 i{width:26px;height:26px;border-radius:8px;background:#FDD200;display:grid;place-items:center;font-style:normal}
.next p{font-size:14px;line-height:1.55;color:#374151;margin-top:10px;overflow-wrap:anywhere}
.fam{margin-top:12px;display:flex;gap:10px;background:#fff;border:1px solid rgba(17,24,39,.08);border-radius:14px;padding:11px 12px;font-size:13.5px;line-height:1.5;color:#111827;overflow-wrap:anywhere}
.fam .ic{width:22px;height:22px;border-radius:50%;background:#111827;color:#fff;display:grid;place-items:center;flex:none;font-size:12px;font-weight:700;margin-top:1px}
/* timeline */
.tl{margin-top:10px;padding:8px 18px}
.st{display:flex;gap:14px;position:relative;padding:12px 0}
.st .rail{position:relative;width:28px;flex:none;display:flex;justify-content:center}
.st:not(:last-child) .rail:after{content:"";position:absolute;top:30px;bottom:-14px;width:2px;background:#111827;left:13px}
.st.cur .rail:after,.st.up .rail:after{background:repeating-linear-gradient(#D1D5DB 0 4px,transparent 4px 8px)}
.dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:1}
.done .dot{background:linear-gradient(180deg,#1F2937,#111827)}
.cur .dot{background:#E20935;box-shadow:0 0 0 5px rgba(226,9,53,.14)}
.cur .dot:after{content:"";width:9px;height:9px;border-radius:50%;background:#fff}
.up .dot{background:#fff;border:2px dashed #D1D5DB}
.st .bd{flex:1;min-width:0;padding-top:3px}
.st .r1{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.st .nm{font-weight:700;font-size:15px;line-height:1.3;min-width:0}
.up .nm{color:#6B7280}
.st .dt{font-size:12.5px;color:#6B7280;font-weight:500;white-space:nowrap;padding-top:2px}
.st .ds{font-size:13px;color:#4B5563;margin-top:3px;line-height:1.45;overflow-wrap:anywhere}
.offer{display:inline-flex;align-items:flex-start;gap:8px;margin-top:8px;line-height:1.4;background:#F9FAFB;border:1px solid rgba(17,24,39,.07);border-radius:12px;padding:7px 10px;font-size:12.5px;font-weight:600;color:#111827;max-width:100%}
.offer .lg{width:22px;height:22px;border-radius:6px;background:#16A34A;display:grid;place-items:center;flex:none;margin-top:-2px}
.offer .ot{min-width:0;overflow-wrap:anywhere;padding-top:1px}
.pill{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:3px 8px;margin-left:6px;vertical-align:2px;white-space:nowrap;display:inline-block;line-height:1.3}
.pill.pnow{background:#E20935;color:#fff}
.pill.live{background:#ECFDF3;color:#15803D;display:inline-flex;align-items:center;gap:4px}
.pill.live:before{content:"";width:6px;height:6px;border-radius:50%;background:#22C55E}
.ftext{margin-top:7px;background:#F9FAFB;border:1px solid rgba(17,24,39,.06);border-radius:12px;padding:9px 12px;font-size:12.5px;color:#4B5563;line-height:1.5}
/* payments */
.pay{margin-top:10px;padding:4px 16px}
.pr{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #F3F4F6}
.pr .pi{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none}
.pr.paid .pi{background:#ECFDF3;color:#16A34A}
.pr.due .pi{background:#FFF8D6;color:#8A6D00}
.pr.later .pi{background:#F3F4F6;color:#9CA3AF}
.pr .pt{flex:1;min-width:0}.pr .pt b{display:block;font-size:14px;font-weight:700}.pr .pt span{font-size:12.5px;color:#6B7280}
.badge{font-size:11.5px;font-weight:700;border-radius:99px;padding:5px 10px;white-space:nowrap}
.badge.paid{background:#ECFDF3;color:#15803D}
.badge.due{background:#FDD200;color:#111827}
.badge.later{background:#F3F4F6;color:#6B7280}
.pnote{font-size:12px;color:#9CA3AF;padding:10px 0 12px;line-height:1.5}
.upd{margin-top:18px;padding:0 12px;text-align:center;line-height:1.6;font-size:12.5px;color:#4B5563;font-weight:500}
.upd .av{display:inline-grid;vertical-align:-6px;margin-right:7px;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid rgba(17,24,39,.08);place-items:center}
.upd .av .dots{display:flex;gap:1.5px}.upd .av .dots i{width:4px;height:4px;border-radius:50%;display:block}
.foot{margin:16px 16px 0;padding:14px 10px 0;border-top:1px solid rgba(17,24,39,.08);font-size:12px;color:#6B7280;text-align:center;line-height:1.5}
.foot p{display:flex;align-items:center;justify-content:center;gap:6px}
.lockbtn{margin-top:10px;background:none;border:0;color:#4B5563;font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px}
.fcontact{margin-top:4px}.fcontact a{color:#111827;font-weight:600}
/* PIN */
.pinpage,.msg{background:#fff}
.pinpage html,.msg{background:#fff}
.pinb,.msgwrap{min-height:100vh;min-height:100dvh;max-width:420px;margin:0 auto;display:flex;flex-direction:column;align-items:center;padding:34px 24px calc(18px + env(safe-area-inset-bottom));text-align:center}
.pinb .wm,.msgwrap .wm{align-items:center}
.lockc{width:60px;height:60px;border-radius:20px;background:linear-gradient(180deg,#1F2937,#111827);display:grid;place-items:center;margin-top:24px;box-shadow:0 14px 26px -12px rgba(17,24,39,.6)}
.pinh,.msgwrap h1{font-family:BFDisplay,BFInter,sans-serif;font-size:26px;font-weight:800;letter-spacing:-.025em;line-height:1.2;margin-top:8px;overflow-wrap:anywhere}
.msgwrap h1{margin-top:22px}
.pinoff{font-size:13.5px;color:#374151;line-height:1.5;margin-top:10px;max-width:340px;background:#F9FAFB;border:1px solid rgba(17,24,39,.06);border-radius:14px;padding:10px 12px}
.msgp{font-size:15px;color:#4B5563;line-height:1.6;margin-top:12px;max-width:360px}
.msgp a{color:#111827;font-weight:600}
.pinform{width:100%;display:flex;flex-direction:column;align-items:center}
.pinlabel{font-size:15px;color:#6B7280;margin-top:16px;max-width:300px;line-height:1.45;text-wrap:balance}
.pininput{margin-top:12px;width:180px;height:52px;text-align:center;font-size:24px;letter-spacing:.5em;border:1.5px solid #E5E7EB;border-radius:14px}
.js .pininput{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0;border:0}
.pinbox{display:none;gap:12px;margin-top:20px}
.js .pinbox{display:flex}
.pinbox i{width:56px;height:62px;border-radius:16px;border:1.5px solid #E5E7EB;display:grid;place-items:center;transition:border-color .15s}
.pinbox i.f{border-color:#111827}.pinbox i.f:after{content:"";width:13px;height:13px;border-radius:50%;background:#111827}
.pinbox i.c{border:2px solid #E20935;box-shadow:0 0 0 4px rgba(226,9,53,.1)}
.pinform.bad .pinbox{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.pinerr{min-height:20px;margin-top:12px;font-size:13.5px;font-weight:600;color:#C8072F;line-height:1.45;max-width:320px}
.pad{display:none;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:330px;margin-top:10px}
.js .pad{display:grid}
.pad button{height:56px;border-radius:16px;background:#F6F6F4;border:0;font-size:23px;font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .12s,transform .08s;display:grid;place-items:center}
.pad button:active{background:#E9E9E5;transform:scale(.97)}
.pad button:focus-visible,.pinsubmit:focus-visible{outline:2px solid #E20935;outline-offset:2px}
.pad button:disabled{opacity:.4;cursor:not-allowed}
.pad button.del{background:transparent}
.pad .e{display:block}
.pinsubmit{margin-top:14px;height:50px;padding:0 28px;border-radius:15px;border:0;background:#111827;color:#fff;font-weight:700;font-size:15px;cursor:pointer}
.js .pinsubmit{display:none}
.pinsubmit:disabled{opacity:.5}
.forgot{margin:22px 0 16px;font-size:13.5px;color:#6B7280}
.forgot a{color:#111827;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.grow{flex:1}
.only,.msgfoot{font-size:11.5px;color:#9CA3AF;display:flex;align-items:center;gap:6px;margin-top:10px}
.msgfoot{margin-top:auto;padding-top:30px}
.msgwrap .teambar{position:fixed;left:0;right:0;top:0}
@media (min-width:700px){
  .page{padding-top:18px}
  .hdr{padding:26px 24px 0}
  .fampage h1{font-size:30px}
  .wrap{padding:0 20px}
}
@media (max-width:359px){
  .ring{width:84px;height:84px}.ring svg{width:84px;height:84px}
  .stt{font-size:18px}
  .pinbox i{width:50px;height:56px}
  .howl{grid-template-columns:1fr}
}