:root{
  --white:#FFFFFF; --offwhite:#F7F7F7; --border:#EBEBEB;
  --ink:#222222; --ink-soft:#6A6A6A; --ink-faint:#9A9A9A;
  --red:#FF385C; --red-dark:#D91E48; --red-tint:#FFF0F2;
  --green:#1c8a4a; --green-tint:#E4F5E9;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--white); color:var(--ink); font-family:'DM Sans',sans-serif; line-height:1.5;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
input,select,textarea,button{font-family:inherit; font-size:15px;}

.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 5vw; border-bottom:1px solid var(--border); position:relative;}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; font-size:18px;}
.brand .dot{width:26px;height:26px;border-radius:8px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;}
.brand b{color:var(--red);}
.nav-links{display:flex; gap:22px; align-items:center; font-size:14px; font-weight:600; color:var(--ink-soft);}
.nav-links a:hover{color:var(--ink);}
.nav-cta{background:var(--red); color:#fff !important; padding:9px 18px; border-radius:9px;}
.nav-cta:hover{background:var(--red-dark);}
.nav-toggle{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px;}
.nav-toggle span{width:20px; height:2px; background:var(--ink); border-radius:2px;}
@media (max-width:900px){
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:50;
    background:#fff; border-bottom:1px solid var(--border);
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 5vw 16px;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:12px 0; border-bottom:1px solid var(--border); width:100%; }
  .nav-toggle{ display:flex; }
}

main{max-width:1360px; margin:0 auto; padding:40px 5vw 80px;}
.narrow{max-width:480px; margin:40px auto;}

h1{font-size:30px; font-weight:800; margin-bottom:10px;}
h2{font-size:22px; font-weight:800; margin-bottom:14px;}
p.lead{color:var(--ink-soft); margin-bottom:28px;}

.card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:28px;}
.form-group{margin-bottom:18px;}
.form-group label{display:block; font-size:13.5px; font-weight:700; margin-bottom:6px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],input[type=number],input[type=datetime-local],select,textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:10px; background:#fff;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--red);}
.hint{font-size:12.5px; color:var(--ink-faint); margin-top:5px;}

.btn{display:inline-block; padding:13px 26px; border-radius:10px; font-weight:700; font-size:14.5px; border:none; cursor:pointer; text-align:center;}
.btn-primary{background:var(--red); color:#fff;}
.btn-primary:hover{background:var(--red-dark);}
.btn-dark{background:var(--ink); color:#fff;}
.btn-dark:hover{background:#000;}
.btn-outline{background:#fff; border:1.5px solid var(--border); color:var(--ink);}
.btn-outline:hover{border-color:var(--ink);}
.btn-full{width:100%;}
.btn-sm{padding:8px 14px; font-size:12.5px; border-radius:8px;}
.btn-danger{background:#fff; color:#D91E48; border:1.5px solid #D91E48;}
.btn-danger:hover{background:#D91E48; color:#fff;}
.btn-success{background:#fff; color:var(--green); border:1.5px solid var(--green);}
.btn-success:hover{background:var(--green); color:#fff;}

.alert{padding:14px 18px; border-radius:10px; margin-bottom:20px; font-size:14px; font-weight:600;}
.alert-error{background:var(--red-tint); color:var(--red-dark);}
.alert-success{background:var(--green-tint); color:var(--green);}

.badge{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px;}
.badge-verified{background:var(--green-tint); color:var(--green);}
.badge-pending{background:#FFF6E0; color:#9A6A00;}
.badge-rejected{background:var(--red-tint); color:var(--red-dark);}
.badge-muted{background:var(--offwhite); color:var(--ink-faint);}

table{width:100%; border-collapse:collapse; font-size:14px;}
@media (max-width:760px){
  table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--border);}
th{font-size:12px; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-faint); font-weight:700;}
tr:hover td{background:var(--offwhite);}

.tabs{display:flex; gap:8px; margin-bottom:24px; border-bottom:1px solid var(--border);}
.tabs a{padding:12px 4px; margin-right:20px; font-size:14px; font-weight:700; color:var(--ink-faint); border-bottom:2px solid transparent;}
.tabs a.active{color:var(--ink); border-color:var(--red);}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:34px;}
.stat-box{border:1px solid var(--border); border-radius:var(--radius); padding:20px;}
.stat-box .num{font-size:26px; font-weight:800;}
.stat-box .lbl{font-size:12.5px; color:var(--ink-soft); font-weight:600; margin-top:2px;}

.profile-hero{display:grid; grid-template-columns:340px 1fr; gap:40px; margin-bottom:40px;}
.profile-photo{border-radius:18px; overflow:hidden; aspect-ratio:4/5; position:relative; background:var(--offwhite);}
.profile-photo .fill{width:100%; height:100%; filter:blur(16px) saturate(1.05); transform:scale(1.12); transition:filter .35s ease, transform .35s ease;}
.profile-photo .fill.has-real-photo{background-size:cover; background-position:center 25%;}
.profile-photo.unlocked .fill{filter:none; transform:none;}
.profile-photo .lock-msg{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; font-weight:700; font-size:13px; padding:20px; background:rgba(0,0,0,0.25);}
.tag-row{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0;}
.tag{font-size:12px; font-weight:600; padding:5px 12px; background:var(--offwhite); border-radius:20px; color:var(--ink-soft);}
.price-box{display:flex; gap:24px; padding:18px; border:1px solid var(--border); border-radius:12px; margin:20px 0;}
.price-box div{text-align:center; flex:1;}
.price-box .amt{font-size:19px; font-weight:800;}
.price-box .lbl{font-size:11.5px; color:var(--ink-faint); font-weight:600; text-transform:uppercase;}

.receipt-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:14px;}
.receipt-row.total{font-weight:800; font-size:16px; border-bottom:none; padding-top:14px;}

footer{
  padding:70px 5vw 40px; margin-top:50px; border-top:1px solid var(--border);
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; max-width:1360px; margin-left:auto; margin-right:auto;
}
footer h5{ font-size:12.5px; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; font-weight:700; }
footer ul{ list-style:none; display:flex; flex-direction:column; gap:10px; padding:0; margin:0; }
footer li a{ font-size:14px; color:var(--ink-soft); font-weight:500; }
footer li a:hover{ color:var(--red); }
footer p.about{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; max-width:34ch; margin-top:12px; font-weight:500; }
.foot-bottom{
  margin-top:40px; padding-top:22px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; font-size:12px; color:var(--ink-faint); flex-wrap:wrap; gap:10px;
}
@media (max-width:900px){
  footer{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  footer{ grid-template-columns:1fr; padding:50px 5vw 30px; }
}
.foot-links a:hover{color:var(--red);}

/* ---------- HOMEPAGE (matches approved marketing design) ---------- */
.hero{
  display:grid; grid-template-columns:1fr 0.9fr; gap:60px; align-items:center;
  padding:50px 0 90px;
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; color:var(--red); background:var(--red-tint);
  padding:8px 16px; border-radius:20px; margin-bottom:24px;
}
.hero h1{ font-size:clamp(38px, 4.2vw, 58px); font-weight:800; line-height:1.08; letter-spacing:-0.02em; }
.hero h1 span{ color:var(--red); }
.hero p.sub{ margin-top:20px; font-size:17.5px; color:var(--ink-soft); font-weight:500; max-width:46ch; line-height:1.6; }
.hero-ctas{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
.stat-row{ margin-top:44px; display:flex; gap:36px; flex-wrap:wrap; }
.stat .num{ font-size:26px; font-weight:800; }
.stat .lbl{ font-size:12.5px; color:var(--ink-soft); font-weight:600; margin-top:2px; }

.hero-photos{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.photo-tile{ border-radius:18px; overflow:hidden; position:relative; aspect-ratio:1/1; }
.photo-tile:first-child{ grid-row:1/3; aspect-ratio:auto; }
.photo-tile .fill{ width:100%; height:100%; }
.pt-1 .fill{background:radial-gradient(circle at 40% 30%, #FFA6B4, #B0102A 85%);}
.pt-2 .fill{background:radial-gradient(circle at 40% 30%, #FFC08A, #A3521C 85%);}
.pt-3 .fill{background:radial-gradient(circle at 40% 30%, #FF8FAE, #7A0E3A 85%);}
.photo-tile .verified-chip{
  position:absolute; bottom:10px; left:10px; background:#fff; color:var(--ink);
  font-size:11px; font-weight:700; padding:5px 10px; border-radius:20px; display:flex; align-items:center; gap:4px;
}
.photo-tile .verified-chip::before{content:'✓'; color:var(--red);}

.home-section{ padding:70px 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; gap:24px; flex-wrap:wrap; }
.section-head .tag{ font-size:13px; font-weight:700; color:var(--red); margin-bottom:10px; display:block; }
.section-head h2{ font-size:clamp(28px, 3vw, 38px); font-weight:800; letter-spacing:-0.01em; }
.section-head p{ margin-top:10px; color:var(--ink-soft); font-size:16px; max-width:52ch; font-weight:500; line-height:1.55; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

.steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
.step-card h3{ font-size:19px; font-weight:700; margin:16px 0 8px; }
.step-card p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; font-weight:500; }
.step-num{
  width:38px; height:38px; border-radius:10px; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
}

.carousel-wrap{ position:relative; }
.carousel-arrows{ display:flex; gap:10px; }
.arrow-btn{
  width:40px; height:40px; border-radius:50%; border:1.5px solid var(--border);
  background:#fff; cursor:pointer; font-size:16px; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, transform .15s ease;
}
.arrow-btn:hover{ border-color:var(--ink); transform:translateY(-1px); }
.card-grid{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:6px 6px 18px; margin:0 -6px; perspective:1400px; scrollbar-width:thin;
}
.card-grid::-webkit-scrollbar{ height:6px; }
.card-grid::-webkit-scrollbar-thumb{ background:var(--border); border-radius:10px; }
.companion-card{
  cursor:pointer; flex:0 0 250px; scroll-snap-align:start;
  transform-style:preserve-3d; transition:transform .2s ease; display:block;
}
.companion-card .avatar{ border-radius:var(--radius); overflow:hidden; position:relative; aspect-ratio:4/5; }
.companion-card .silhouette{
  width:100%; height:100%; filter:blur(11px) saturate(1.08); transform:scale(1.12); transition:filter .3s ease;
  background-image:
    radial-gradient(ellipse 60% 42% at 50% 36%, rgba(0,0,0,0.38), transparent 68%),
    radial-gradient(ellipse 92% 55% at 50% 106%, rgba(0,0,0,0.32), transparent 65%),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.22), transparent 45%),
    var(--avatar-wash);
}
.companion-card:hover .silhouette{ filter:blur(4px) saturate(1.15); }
.hc-avatar-1 .silhouette{--avatar-wash: radial-gradient(circle at 45% 30%, #FF9CAE, #8C0C22 85%);}
.hc-avatar-2 .silhouette{--avatar-wash: radial-gradient(circle at 45% 30%, #FFB68F, #7A3A08 85%);}
.hc-avatar-3 .silhouette{--avatar-wash: radial-gradient(circle at 45% 30%, #FF8FC1, #5A0E4A 85%);}
.hc-avatar-4 .silhouette{--avatar-wash: radial-gradient(circle at 45% 30%, #FFCB7A, #7A5008 85%);}
.hc-avatar-5 .silhouette{--avatar-wash: radial-gradient(circle at 45% 30%, #FF7A9E, #6B0C2A 85%);}
.hc-avatar-6 .silhouette{--avatar-wash: radial-gradient(circle at 45% 30%, #FFA8D6, #7A0E5A 85%);}
.hc-avatar-7 .silhouette{--avatar-wash: radial-gradient(circle at 45% 30%, #FFD08A, #8C5A08 85%);}
.hc-avatar-8 .silhouette{--avatar-wash: radial-gradient(circle at 45% 30%, #FF9C7A, #7A2A08 85%);}
.hc-avatar-9 .silhouette{--avatar-wash: radial-gradient(circle at 45% 30%, #FFB0A6, #8C1E1E 85%);}
.hc-avatar-10 .silhouette{--avatar-wash: radial-gradient(circle at 45% 30%, #FF8FB0, #6B0E42 85%);}
.companion-card .avatar-badge{
  position:absolute; top:10px; left:10px; background:#fff; color:var(--ink);
  font-size:11px; font-weight:700; padding:5px 10px; border-radius:20px; display:flex; align-items:center; gap:4px;
}
.companion-card .avatar-badge::before{content:'✓'; color:var(--red);}
.companion-card .unlock-hint{
  position:absolute; bottom:0; left:0; right:0; text-align:center; padding:10px;
  font-size:11px; font-weight:700; color:#fff; background:linear-gradient(0deg, rgba(0,0,0,0.6), transparent);
  opacity:0; transition:opacity .2s ease;
}
.companion-card:hover .unlock-hint{opacity:1;}
.card-info{ padding:14px 2px 0; }
.card-info .name-row{ display:flex; justify-content:space-between; align-items:baseline; }
.card-info .name-row h4{ font-size:16.5px; font-weight:700; color:var(--ink); }
.card-info .name-row .age{ font-size:13px; color:var(--ink-soft); font-weight:600; }
.card-info .loc{ font-size:13px; color:var(--ink-soft); margin-top:2px; font-weight:500; }
.card-info .tags{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.card-info .tags .tag{ font-size:11px; font-weight:600; padding:4px 9px; background:var(--offwhite); border-radius:20px; color:var(--ink-soft); }
.card-info .rate-row{ margin-top:12px; display:flex; justify-content:space-between; align-items:center; }
.card-info .rate{ font-size:15.5px; font-weight:800; color:var(--ink); }
.card-info .rate span{ font-size:11.5px; color:var(--ink-soft); font-weight:500; }
.hc-book-btn{
  font-size:12.5px; font-weight:700; padding:8px 15px; background:var(--ink); color:#fff;
  border-radius:8px; border:none; transition:background .15s ease;
}
.companion-card:hover .hc-book-btn{ background:var(--red); }
.filter-note{ text-align:center; margin-top:36px; font-size:13.5px; color:var(--ink-soft); font-weight:500; }
.filter-note b{ color:var(--red); font-weight:700; }

.city-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; perspective:1200px; }
.city-card{
  border-radius:var(--radius); overflow:hidden; position:relative; aspect-ratio:5/4; cursor:pointer; display:block;
  transform-style:preserve-3d; transition:transform .2s ease, box-shadow .2s ease;
}
.city-card:hover{ box-shadow:0 18px 34px -16px rgba(0,0,0,0.25); }
.city-card .fill{ width:100%; height:100%; }
.cc-1 .fill{background:linear-gradient(150deg, #FF8FA8, #B0102A);}
.cc-2 .fill{background:linear-gradient(150deg, #FFB48A, #A3521C);}
.cc-3 .fill{background:linear-gradient(150deg, #FF8FD0, #7A0E5A);}
.cc-4 .fill{background:linear-gradient(150deg, #FFD08A, #8C5A08);}
.cc-5 .fill{background:linear-gradient(150deg, #FF9C9C, #8C1E1E);}
.cc-6 .fill{background:linear-gradient(150deg, #FFA8C4, #6B0C2A);}
.cc-7 .fill{background:linear-gradient(150deg, #FFC08A, #7A3A08);}
.cc-8 .fill{background:linear-gradient(150deg, #FF8FB0, #5A0E4A);}
.city-card .overlay{
  position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0) 55%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:16px;
}
.city-card h4{ color:#fff; font-size:18px; font-weight:800; margin:0; }
.city-card .count{ color:rgba(255,255,255,0.85); font-size:12.5px; font-weight:600; margin-top:2px; }

.region-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; }
.region-block h5{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; color:var(--red); margin-bottom:16px; }
.region-block ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.region-block li a{ font-size:14px; font-weight:500; color:var(--ink-soft); transition:color .15s ease; }
.region-block li a:hover{ color:var(--red); }
.region-block li.not-live a{ color:var(--ink-faint); }
.seo-blurb{ margin-top:40px; font-size:13.5px; color:var(--ink-faint); line-height:1.7; max-width:80ch; font-weight:500; }

.flow{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.flow-steps{ display:flex; flex-direction:column; gap:24px; }
.flow-step{ display:flex; gap:16px; }
.flow-icon{
  width:38px; height:38px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--red-tint); color:var(--red); font-weight:800; font-size:14px;
}
.flow-step h4{ font-size:16px; font-weight:700; margin-bottom:3px; }
.flow-step p{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; font-weight:500; }

.pricing{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:900px; margin:0 auto; perspective:1200px; }
.price-card{ border-radius:20px; padding:38px 32px; position:relative; border:1.5px solid var(--border); transform-style:preserve-3d; transition:transform .2s ease; }
.price-card.noir{ border-color:var(--red); background:var(--red-tint); }
.price-card .ribbon{
  position:absolute; top:22px; right:22px; background:var(--red); color:#fff;
  font-size:11px; font-weight:800; padding:6px 14px; border-radius:20px;
}
.price-card .tier-label{ font-size:13px; font-weight:700; color:var(--ink-faint); }
.price-card h3{ font-size:26px; margin-top:8px; font-weight:800; }
.price-card .price{ font-size:38px; font-weight:800; margin-top:14px; }
.price-card .price span{ font-size:14px; font-weight:500; color:var(--ink-soft); }
.price-card ul{ list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:11px; }
.price-card li{ font-size:14px; font-weight:500; display:flex; gap:9px; align-items:flex-start; color:var(--ink-soft); }
.price-card li::before{ content:'✓'; color:var(--red); font-weight:800; }
.price-card li.muted{ opacity:0.4; }
.price-card li.muted::before{ content:'—'; color:var(--ink-faint); }
.price-card .cta{
  margin-top:28px; display:block; width:100%; text-align:center; padding:14px; border-radius:10px;
  font-weight:700; font-size:14.5px; cursor:pointer; transition:background .15s ease; text-decoration:none;
}
.price-card.signature .cta{ background:var(--ink); color:#fff; }
.price-card.signature .cta:hover{ background:#000; }
.price-card.noir .cta{ background:var(--red); color:#fff; }
.price-card.noir .cta:hover{ background:var(--red-dark); }

.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; perspective:1000px; }
.trust-item{ transform-style:preserve-3d; transition:transform .2s ease; }
.trust-item .glyph{
  width:38px; height:38px; border-radius:10px; background:var(--red-tint); color:var(--red);
  display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:14px; font-size:14px;
}
.trust-item h4{ font-size:15.5px; font-weight:700; margin-bottom:6px; }
.trust-item p{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; font-weight:500; }
.policy-strip{
  margin:56px auto 0; text-align:center; padding:26px 30px; max-width:900px; border:1px solid var(--border);
  border-radius:16px; font-size:13.5px; color:var(--ink-soft); line-height:1.7; font-weight:500; background:var(--offwhite);
}
.policy-strip b{ color:var(--ink); }

.cta-band{ background:var(--ink); color:#fff; border-radius:20px; padding:50px 6vw; text-align:center; margin:20px 0 30px; }
.cta-band h2{ font-size:26px; font-weight:800; margin-bottom:10px; color:#fff; }
.cta-band p{ color:rgba(255,255,255,0.65); font-size:15px; margin-bottom:22px; }

@media (max-width:980px){
  .hero{ grid-template-columns:1fr; padding-top:20px; }
  .steps{ grid-template-columns:1fr; gap:28px; }
  .flow{ grid-template-columns:1fr; }
  .pricing{ grid-template-columns:1fr; }
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .city-grid{ grid-template-columns:repeat(2,1fr); }
  .region-grid{ grid-template-columns:repeat(2,1fr); gap:24px; }
}
@media (max-width:560px){
  .companion-card{ flex-basis:190px; }
  .trust-grid{ grid-template-columns:1fr; }
  .city-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .region-grid{ grid-template-columns:1fr; }
  .stat-row{ gap:22px; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .hero-photos{ gap:10px; }
}

.admin-shell{display:grid; grid-template-columns:220px 1fr; min-height:100vh;}

/* ---------- ROLE CHOICE SCREEN ---------- */
.role-choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px; }
.role-choice-card{
  display:block; padding:28px 22px; border:1.5px solid var(--border); border-radius:18px;
  text-align:center; transition:border-color .15s ease, transform .15s ease;
}
.role-choice-card:hover{ border-color:var(--red); transform:translateY(-3px); }
.role-choice-icon{ font-size:32px; margin-bottom:12px; }
.role-choice-card h3{ font-size:17px; font-weight:800; margin-bottom:8px; }
.role-choice-card p{ font-size:13.5px; color:var(--ink-soft); font-weight:500; line-height:1.5; }
@media (max-width:560px){
  .role-choice-grid{ grid-template-columns:1fr; }
}

/* ---------- STEP INDICATOR ---------- */
.step-indicator{ display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:28px; }
.step{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--ink-faint); }
.step span{
  width:24px; height:24px; border-radius:50%; background:var(--offwhite); color:var(--ink-faint);
  display:flex; align-items:center; justify-content:center; font-size:12px;
}
.step.active{ color:var(--ink); }
.step.active span{ background:var(--red); color:#fff; }
.step.done span{ background:var(--ink); color:#fff; }
.step-line{ width:28px; height:1.5px; background:var(--border); }
@media (max-width:480px){
  .step-indicator{ gap:3px; }
  .step-line{ width:14px; }
  .step{ font-size:0; gap:0; }
  .step span{ font-size:12px; }
}

/* ---------- JOIN-AS-COMPANION POPUP ---------- */
.join-modal-overlay{
  position:fixed; inset:0; z-index:300; background:rgba(24,11,34,0.55);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
  backdrop-filter:blur(3px);
}
.join-modal-overlay.open{ opacity:1; pointer-events:auto; }
.join-modal{
  background:#fff; border-radius:24px; padding:36px 34px; max-width:440px; width:100%;
  max-height:90vh; overflow-y:auto; position:relative;
  box-shadow:0 40px 80px -20px rgba(0,0,0,0.35);
  transform:translateY(16px) scale(0.97); transition:transform .25s ease;
}
.join-modal-overlay.open .join-modal{ transform:translateY(0) scale(1); }
.join-modal-close{
  position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%;
  border:none; background:var(--offwhite); font-size:20px; line-height:1; cursor:pointer; color:var(--ink-soft);
}
.join-modal-close:hover{ background:var(--red-tint); color:var(--red); }
.join-modal-head .tag{ display:block; font-size:12.5px; font-weight:700; color:var(--red); margin-bottom:8px; }
.join-modal-head h2{ font-size:23px; font-weight:800; }
.join-modal-head p{ margin-top:6px; margin-bottom:20px; font-size:13.5px; color:var(--ink-soft); font-weight:500; }
.join-form .form-group{ margin-bottom:12px; }
.join-form input[type=text], .join-form input[type=email], .join-form input[type=tel], .join-form select{
  width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:10px; font-size:14px;
}
.join-photo-row{ margin-bottom:14px; }
.join-photo-upload{
  display:flex; align-items:center; justify-content:center; height:64px; border:1.5px dashed var(--border);
  border-radius:12px; cursor:pointer; font-size:13.5px; font-weight:700; color:var(--ink-soft);
  transition:border-color .15s ease;
}
.join-photo-upload:hover{ border-color:var(--red); color:var(--red); }
.join-photo-upload input{ display:none; }
.join-tier-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.join-tier-option{
  display:flex; align-items:center; gap:8px; padding:12px; border:1.5px solid var(--border);
  border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; transition:border-color .15s ease;
}
.join-tier-option:has(input:checked){ border-color:var(--red); background:var(--red-tint); }
@media (max-width:560px){
  .join-modal{ padding:28px 24px; border-radius:18px; }
}

/* ---------- WHATSAPP FAB ---------- */
.whatsapp-fab{
  position:fixed; bottom:24px; right:24px; z-index:200;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px -8px rgba(37,211,102,0.6);
  transition:transform .2s ease;
}
.whatsapp-fab:hover{ transform:scale(1.08); }
.whatsapp-fab::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:#25D366; opacity:0.55;
  animation:wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse{
  0%{ transform:scale(1); opacity:0.55; }
  100%{ transform:scale(1.9); opacity:0; }
}
@media (max-width:560px){
  .whatsapp-fab{ width:52px; height:52px; bottom:18px; right:18px; }
}
.admin-sidebar{background:var(--ink); color:#fff; padding:26px 18px;}
.admin-sidebar .brand{color:#fff; margin-bottom:34px;}
.admin-sidebar a{display:block; padding:11px 12px; border-radius:8px; font-size:14px; font-weight:600; color:rgba(255,255,255,0.7); margin-bottom:2px;}
.admin-sidebar a:hover, .admin-sidebar a.active{background:rgba(255,255,255,0.08); color:#fff;}
.admin-main{padding:34px 4vw;}

@media (max-width:900px){
  .profile-hero{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .admin-shell{grid-template-columns:1fr;}
  .admin-sidebar{display:flex; overflow-x:auto; gap:6px; padding:14px;}
  .admin-sidebar .brand{display:none;}
}