@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Lato:wght@300;400;700&display=swap');

/* ---- scoped reset + base (from approved mockup, prefixed) ---- */
#ii-join2, #ii-join2 *, #ii-join2 *::before, #ii-join2 *::after { box-sizing: border-box; }
#ii-join2 { background:#F6F5F7; color:#404041;
  font-family:'Lato','Helvetica Neue',Arial,sans-serif; font-weight:400; font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; }
#ii-join2 a { color:#664787; text-decoration:none; }
#ii-join2 a:hover { color:#4E3568; text-decoration:underline; }
#ii-join2 h1, #ii-join2 h2, #ii-join2 h3, #ii-join2 h4 { font-family:'Montserrat','Helvetica Neue',Arial,sans-serif; color:#404041; margin:0; }
#ii-join2 h1 { font-weight:700; font-size:30px; line-height:1.2; letter-spacing:-0.01em; }
#ii-join2 h2 { font-weight:700; font-size:21px; line-height:1.25; }
#ii-join2 h3 { font-weight:700; font-size:16px; line-height:1.3; }
#ii-join2 p { margin:0; }
#ii-join2 .page { width:100%; max-width:1440px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; background:#F6F5F7; }
#ii-join2 .grow { flex-grow:1; }
#ii-join2 .col { width:100%; max-width:980px; display:flex; flex-direction:column; }
#ii-join2 .topbar { height:76px; background:#FFFFFF; border-bottom:1px solid #CDC8D1;
  display:flex; align-items:center; justify-content:space-between; padding:0 56px; flex-shrink:0; }
#ii-join2 .topbar-right { display:flex; align-items:center; gap:18px; font-size:14px; color:#1C1411; }
#ii-join2 .card { background:#FFFFFF; border:1px solid #CDC8D1; border-radius:8px; }
#ii-join2 .card-pad { padding:32px; }
#ii-join2 .label { display:block; font-family:'Lato',Arial,sans-serif; font-weight:700; font-size:13px;
  letter-spacing:0.06em; text-transform:uppercase; color:#404041; margin-bottom:7px; }
#ii-join2 .req { color:#404041; }
#ii-join2 .input { height:48px; width:100%; border:1px solid #CDC8D1; border-radius:5px; background:#FFFFFF;
  display:flex; align-items:center; padding:0 14px; font-size:15px; color:#1C1411; }
#ii-join2 .input.filled { color:#404041; }
#ii-join2 .input.locked { background:#F1F0F2; color:#1C1411; justify-content:space-between; }
/* real form controls styled to match the mockup's .input look */
#ii-join2 input.input, #ii-join2 textarea.input { display:block; font-family:inherit; color:#404041; outline:none; -webkit-appearance:none; appearance:none; }
#ii-join2 input.input::placeholder, #ii-join2 textarea.input::placeholder { color:#1C1411; }
#ii-join2 input.input:focus, #ii-join2 textarea.input:focus { border-color:#664787; box-shadow:0 0 0 3px rgba(102,71,135,0.12); }
#ii-join2 textarea.input { height:auto; min-height:82px; padding:12px 14px; line-height:1.5; resize:vertical; }
#ii-join2 .hint { font-size:13px; color:#1C1411; margin-top:6px; }
#ii-join2 .btn { height:50px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center;
  font-family:'Montserrat',Arial,sans-serif; font-weight:700; font-size:15px; padding:0 30px; cursor:pointer; user-select:none; }
#ii-join2 .btn-primary { background:#664787; color:#FFFFFF; }
#ii-join2 .btn-primary:hover { color:#FFFFFF; text-decoration:none; }
#ii-join2 .btn-secondary { background:#FFFFFF; color:#664787; border:2px solid #664787; }
#ii-join2 .btn-ghost { color:#1C1411; font-family:'Lato',Arial,sans-serif; font-weight:400; }
#ii-join2 .btn-disabled { background:#FFFFFF; color:#1C1411; border:1px solid #CDC8D1; cursor:not-allowed; }
#ii-join2 .grid2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px; }
#ii-join2 .grid3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; }
#ii-join2 .stack { display:flex; flex-direction:column; }
#ii-join2 .row { display:flex; align-items:center; }
#ii-join2 .tag { display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:3px;
  font-family:'Lato',Arial,sans-serif; font-weight:700; font-size:13px; letter-spacing:0.09em; text-transform:uppercase; }
#ii-join2 .note { background:#FCF3EE; border:1px solid #F7DFD2; border-radius:6px; padding:16px 18px; font-size:14px; }
#ii-join2 .neutral-note { background:#FBFAFC; border:1px solid #CDC8D1; border-radius:6px; padding:16px 18px; font-size:14px; }
#ii-join2 .checkbox { width:20px; height:20px; border:2px solid #CDC8D1; border-radius:3px; background:#FFFFFF; flex-shrink:0; cursor:pointer; }
#ii-join2 .checkbox.on { background:#664787; border-color:#664787; display:flex; align-items:center; justify-content:center; }
#ii-join2 .radio { width:20px; height:20px; border:2px solid #CDC8D1; border-radius:10px; background:#FFFFFF; flex-shrink:0; cursor:pointer; }
#ii-join2 .radio.on { border:6px solid #664787; }
#ii-join2 .well { border:1px dashed #CDC8D1; border-radius:6px; background:#FBFAFC;
  display:flex; flex-direction:column; align-items:center; gap:14px; padding:26px; }
#ii-join2 .pillar-bar { display:flex; height:6px; }
#ii-join2 .pillar-bar div { flex-grow:1; }
#ii-join2 footer { background:#FFFFFF; border-top:1px solid #CDC8D1; flex-shrink:0; }
#ii-join2 .footer-inner { display:flex; align-items:center; justify-content:space-between;
  padding:20px 56px; font-size:13px; color:#1C1411; }
#ii-join2 .footer-links { display:flex; gap:20px; flex-wrap:wrap; }
#ii-join2 table { border-collapse:collapse; width:100%; }
#ii-join2 th, #ii-join2 td { text-align:left; padding:14px 20px; border-bottom:1px solid #EAE8EC; font-size:14.5px; }
#ii-join2 th { font-family:'Montserrat',Arial,sans-serif; font-weight:700; font-size:13px; }

/* ---- wizard controller ---- */
#ii-join2 .pos-card.sel { border:2px solid #664787 !important; background:#FBFAFC; }
#ii-join2 .plan-card.chosen { outline:2px solid #664787; outline-offset:-1px; }
#ii-join2 .plan-card.disabled { opacity:0.55; }
#ii-join2 [data-panel] { display:none; }
#ii-join2 [data-panel].active { display:flex; flex-direction:column; flex-grow:1; }
#ii-join2 .rail-wrap { display:flex; align-items:center; justify-content:center; padding:30px 0 4px; }
@media (max-width:1000px){
  #ii-join2 .topbar, #ii-join2 .footer-inner { padding-left:24px; padding-right:24px; }
  #ii-join2 .grid3 { grid-template-columns:1fr; }
}

/* ============================================================================
   DARK MODE — #ii-join2 uses hardcoded hex (no tokens) and its id isn't in the
   foundation's flip list, so override the light surfaces explicitly. Real
   <input class="input"> elements are handled by the foundation.
   ============================================================================ */
.ii-dark #ii-join2{ background:#14100D; color:#E9E3DB; }
.ii-dark #ii-join2 .page{ background:#14100D; }
.ii-dark #ii-join2 a{ color:#A488CC; }
.ii-dark #ii-join2 a:hover{ color:#C3B0E0; }
.ii-dark #ii-join2 h1,
.ii-dark #ii-join2 h2,
.ii-dark #ii-join2 h3,
.ii-dark #ii-join2 h4,
.ii-dark #ii-join2 .label,
.ii-dark #ii-join2 .req,
.ii-dark #ii-join2 .input.filled,
.ii-dark #ii-join2 input.input,
.ii-dark #ii-join2 textarea.input{ color:#E9E3DB; }
.ii-dark #ii-join2 .topbar,
.ii-dark #ii-join2 footer{ background:#211B15; border-color:#332D26; }
.ii-dark #ii-join2 .topbar-right,
.ii-dark #ii-join2 .footer-inner,
.ii-dark #ii-join2 .hint,
.ii-dark #ii-join2 .btn-ghost{ color:#A69D93; }
.ii-dark #ii-join2 .input{ background:#211B15; border-color:#332D26; color:#A69D93; }
.ii-dark #ii-join2 .input.locked{ background:#191510; color:#A69D93; }
.ii-dark #ii-join2 input.input::placeholder,
.ii-dark #ii-join2 textarea.input::placeholder{ color:#8C8078; }
.ii-dark #ii-join2 .note{ background:#2A211A; border-color:#33261A; }
.ii-dark #ii-join2 .neutral-note,
.ii-dark #ii-join2 .btn-secondary{ background:#211B15; border-color:#332D26; }
.ii-dark #ii-join2 .btn-secondary{ color:#C3B0E0; border-color:#A488CC; }
.ii-dark #ii-join2 .btn-disabled{ background:#211B15; color:#7A7168; border-color:#332D26; }
.ii-dark #ii-join2 .checkbox,
.ii-dark #ii-join2 .radio{ background:#211B15; border-color:#3A3129; }
.ii-dark #ii-join2 .well{ background:#191510; border-color:#3A3129; }
.ii-dark #ii-join2 th,
.ii-dark #ii-join2 td{ border-color:#332D26; }
.ii-dark #ii-join2 .pos-card.sel{ background:#2A211A; }

/* ---- mobile ---- */
@media (max-width:900px){
  #ii-join2 .grid2{ grid-template-columns:1fr; }
  #ii-join2 .topbar{ padding:0 20px; }
  #ii-join2 .card-pad{ padding:22px; }
}
@media (max-width:520px){
  #ii-join2 .topbar{ height:auto; padding:12px 16px; flex-wrap:wrap; gap:8px; }
  #ii-join2 h1{ font-size:24px; }
  #ii-join2 .footer-inner{ flex-direction:column; align-items:flex-start; gap:10px; }
}