/* PASTED India — form + thank-you styles.
   Layered on top of styles.css (Alan's design system). Uses its variables only. */

.page-pad{ padding:120px 0 110px; }
@media (max-width:900px){ .page-pad{ padding:80px 0 70px; } }

.join-grid{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:0;
  border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-top:44px;
}
@media (max-width:900px){ .join-grid{ grid-template-columns:1fr; } }

/* ---------- left rail ---------- */
.join-aside{
  padding:48px 44px; border-right:1px solid var(--line); position:relative;
  background:linear-gradient(160deg, rgba(194,59,43,0.10) 0%, rgba(255,255,255,0) 55%), #0a0a0a;
}
@media (max-width:900px){ .join-aside{ border-right:none; border-bottom:1px solid var(--line); padding:36px 26px; } }
.join-aside h3{
  font-family:var(--editorial); font-weight:400; font-size:30px; line-height:1.05;
  text-transform:uppercase; margin-bottom:18px;
}
.join-aside .lead{ color:var(--dim); font-size:14.5px; line-height:1.7; }
.join-list{ margin-top:28px; display:flex; flex-direction:column; gap:16px; }
.join-list div{ display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--dim); line-height:1.55; }
.join-list svg{ width:15px; height:15px; color:var(--gold-bright); flex-shrink:0; margin-top:3px; }
.join-list b{ color:var(--white); font-weight:700; }
.join-seal{
  margin-top:32px; padding:16px 18px; border:1px solid rgba(226,80,59,0.35); border-radius:12px;
  background:linear-gradient(135deg, rgba(194,59,43,0.12) 0%, rgba(194,59,43,0.03) 100%);
}
.join-seal .t{
  font-size:10px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold-bright); margin-bottom:7px;
}
.join-seal p{ font-size:13px; color:var(--dim); line-height:1.6; }

/* ---------- form ---------- */
.join-form-wrap{ padding:48px 44px; background:var(--panel); }
@media (max-width:900px){ .join-form-wrap{ padding:36px 26px; } }

.field{ margin-bottom:22px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; gap:0; } }

label.fl{
  display:block; font-size:11px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--white); margin-bottom:9px;
}
label.fl .opt{ color:var(--faint); font-weight:600; letter-spacing:0.06em; text-transform:none; }
label.fl .req{ color:var(--gold-bright); }

.inp, .sel{
  width:100%; padding:14px 16px; border-radius:10px;
  background:rgba(255,255,255,0.04); border:1px solid var(--line);
  color:var(--white); font-family:var(--sans); font-size:15px; transition:border-color .2s ease, background .2s ease;
  -webkit-appearance:none; appearance:none;
}
.inp::placeholder{ color:rgba(245,245,243,0.28); }
.inp:focus, .sel:focus{ outline:none; border-color:var(--gold-bright); background:rgba(255,255,255,0.06); }
.sel{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e2503b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:42px; cursor:pointer;
}
.sel option{ background:#111; color:var(--white); }

.phone-row{ display:grid; grid-template-columns:118px 1fr; gap:10px; }

/* radio cards */
.choice{ display:flex; flex-direction:column; gap:10px; }
.choice label{
  display:flex; gap:13px; align-items:flex-start; cursor:pointer;
  padding:15px 16px; border:1px solid var(--line); border-radius:11px;
  background:rgba(255,255,255,0.02); transition:border-color .2s ease, background .2s ease;
}
.choice label:hover{ border-color:rgba(226,80,59,0.5); }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.dot{
  width:17px; height:17px; border-radius:50%; border:1px solid rgba(245,245,243,0.4);
  flex-shrink:0; margin-top:2px; position:relative; transition:all .2s ease;
}
.choice input:checked ~ .dot{ border-color:var(--gold-bright); }
.choice input:checked ~ .dot::after{
  content:''; position:absolute; inset:3px; border-radius:50%; background:var(--gold-bright);
}
.choice input:checked + .dot, .choice label:has(input:checked){
  border-color:var(--gold-bright); background:rgba(194,59,43,0.09);
}
.choice .ct{ font-size:14px; font-weight:700; color:var(--white); }
.choice .cd{ font-size:12.5px; color:var(--dim); margin-top:3px; line-height:1.5; }
.choice input:focus-visible ~ .dot{ outline:2px solid var(--gold-bright); outline-offset:3px; }

/* consent */
.consent{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; margin-top:4px; }
.consent input{ position:absolute; opacity:0; pointer-events:none; }
.box{
  width:19px; height:19px; border-radius:5px; border:1px solid rgba(245,245,243,0.4);
  flex-shrink:0; margin-top:2px; position:relative; transition:all .2s ease;
}
.consent input:checked ~ .box{ background:var(--gold-bright); border-color:var(--gold-bright); }
.consent input:checked ~ .box::after{
  content:''; position:absolute; left:6px; top:2px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.consent input:focus-visible ~ .box{ outline:2px solid var(--gold-bright); outline-offset:3px; }
.consent span{ font-size:12.5px; color:var(--dim); line-height:1.6; }

/* errors + state */
.err{ display:none; font-size:12px; color:#ff6b57; margin-top:7px; font-weight:600; }
.field.invalid .err{ display:block; }
.field.invalid .inp, .field.invalid .sel{ border-color:#ff6b57; }
.form-error{
  display:none; margin-bottom:20px; padding:14px 16px; border-radius:10px;
  border:1px solid rgba(255,107,87,0.45); background:rgba(255,107,87,0.09);
  color:#ff8e7d; font-size:13.5px; line-height:1.6;
}
.form-error.show{ display:block; }
.btn-submit{
  width:100%; justify-content:center; border:none; cursor:pointer;
  font-family:var(--sans); margin-top:6px;
}
.btn-submit[disabled]{ opacity:0.55; cursor:not-allowed; transform:none !important; }
.spin{
  width:15px; height:15px; border:2px solid rgba(255,255,255,0.35); border-top-color:#fff;
  border-radius:50%; animation:sp .7s linear infinite; display:none;
}
.btn-submit.loading .spin{ display:block; }
.btn-submit.loading .lbl{ opacity:0.85; }
@keyframes sp{ to{ transform:rotate(360deg); } }
.form-foot{
  margin-top:18px; font-size:11.5px; color:var(--faint); text-align:center; line-height:1.6;
}

/* progressive disclosure */
#cityWrap{ display:none; }
#cityWrap.show{ display:block; animation:fadeIn .35s ease; }

/* ---------- thank you ---------- */
.ty{ text-align:center; max-width:680px; margin:0 auto; }
.ty-check{
  width:74px; height:74px; border-radius:50%; margin:0 auto 30px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(194,59,43,0.22) 0%, rgba(194,59,43,0.06) 100%);
  border:1px solid rgba(226,80,59,0.5);
}
.ty-check svg{ width:30px; height:30px; color:var(--gold-bright); }
.ty h1{
  font-family:var(--editorial); font-weight:400; text-transform:uppercase; line-height:1.0;
  font-size:clamp(36px,6vw,68px); margin-bottom:20px;
}
.ty h1 em{ font-style:italic; color:var(--gold-bright); }
.ty .sub{ color:var(--dim); font-size:16px; line-height:1.7; max-width:520px; margin:0 auto; }
.ty-steps{
  margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; text-align:left;
}
@media (max-width:760px){ .ty-steps{ grid-template-columns:1fr; } }
.ty-step{ background:var(--bg); padding:30px 26px; }
.ty-step .n{
  font-family:var(--editorial); font-size:13px; color:var(--white);
  width:32px; height:32px; border-radius:50%; background:var(--gold-bright);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:15px;
}
.ty-step h4{ font-size:14.5px; font-weight:700; margin-bottom:8px; }
.ty-step p{ font-size:13px; color:var(--dim); line-height:1.65; }
.ty-actions{ margin-top:44px; display:flex; gap:15px; justify-content:center; flex-wrap:wrap; }
.ty-note{
  margin-top:30px; display:inline-flex; align-items:center; gap:10px; font-size:11.5px;
  letter-spacing:0.05em; color:var(--faint); border:1px solid var(--line); padding:11px 22px; border-radius:100px;
}
.ty-note b{ color:var(--gold-bright); }