/* Brand values from Star Universe (star.sa/universe): Salamanca Blue, Disruptive Orange, Jet Black, Bright White, GC Gatuzo, Futura 100 Arabic */
@font-face{font-family:"GC Gatuzo";src:url(assets/GCGatuzo-Regular-padtTdPG.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"GC Gatuzo";src:url(assets/GCGatuzo-Medium-D_VadtQW.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"GC Gatuzo";src:url(assets/GCGatuzo-SemiBold-CVTWUzgJ.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Futura 100 Arabic";src:url(assets/Futura-100-ARA-Regular-X1Da6y_6.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}

:root{
  --blue:#10069f; --blue-hover:#3a17fa; --orange:#ff6f2a;
  --black:#0c0c0e; --white:#fdfdfe; --muted:#6b6b76; --line:#e4e4ea;
  --red:#dc2626; --green:#16a34a; --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"GC Gatuzo","Futura 100 Arabic",system-ui,-apple-system,sans-serif;
  color:var(--black); background:#fff; -webkit-font-smoothing:antialiased;
  min-height:100svh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.bar{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.logo{height:28px;width:auto}
main{max-width:560px;margin:0 auto;padding:24px 20px 40px}
.screen{animation:in .25s ease-out}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1{font-size:2rem;font-weight:600;letter-spacing:-.01em;margin:0 0 8px}
h2{font-size:1.5rem;font-weight:600;margin:8px 0 20px}
p{line-height:1.55;color:var(--muted)}
.hero{position:relative;overflow:hidden;background:var(--blue);color:#fff;border-radius:20px;padding:40px 24px 48px;margin-bottom:24px}
.hero p{color:rgba(255,255,255,.8);margin:0;max-width:22rem}
.hero-star{position:absolute;width:12rem;right:-3rem;bottom:-3rem;opacity:.18;pointer-events:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;height:48px;border:0;border-radius:var(--radius);
  font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;transition:opacity .15s;-webkit-tap-highlight-color:transparent}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.btn-primary:hover{opacity:.9}
.btn:disabled{opacity:.55;cursor:default}
.btn:focus-visible,.back:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.btn-big{height:64px;font-size:1.1rem}
.plus{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--orange);font-size:1.2rem;line-height:1}
.back{background:none;border:0;font:inherit;color:var(--blue);padding:6px 0;cursor:pointer;font-weight:500}
.field{display:block;margin-bottom:18px}
.field>span{display:block;font-size:.9rem;font-weight:500;margin-bottom:8px}
.field em{font-style:normal;color:var(--muted);font-weight:400}
input,select,textarea{
  width:100%;font:inherit;font-size:16px; /* 16px stops iOS zoom */
  color:var(--black);background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;transition:border-color .15s,box-shadow .15s;
}
input,select{height:48px}
select{appearance:none;-webkit-appearance:none;padding-inline-end:40px;
  background:#fff 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' fill='none' stroke='%2310069f' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center}
textarea{line-height:1.7;padding:14px 16px;min-height:9rem;resize:vertical;white-space:pre-wrap;overflow-wrap:anywhere}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(16,6,159,.12)}
.invalid{border-color:var(--red)!important}
.error{color:var(--red);background:#fef2f2;border-radius:var(--radius);padding:12px 14px;line-height:1.5;white-space:pre-line}
#done{text-align:center;padding-top:40px}
.check{width:72px;height:72px;margin:0 auto 12px;border-radius:50%;background:var(--green);color:#fff;font-size:2.2rem;display:flex;align-items:center;justify-content:center}
#done p{margin:0 0 28px}