:root {
      --navy:#241950;
      --purple:#5A347F;
      --purple-2:#7E4DB8;
      --pink:#DB35F2;
      --bg:#F8F7FB;
      --card:#FFFFFF;
      --ink:#17142F;
      --muted:#6F6A82;
      --line:#E7E3EF;
      --green:#39A935;
      --amber:#F5B82E;
      --red:#E94B42;
      --shadow:0 22px 60px rgba(36,25,80,.14);
      --soft-shadow:0 12px 28px rgba(36,25,80,.08);
      --radius:24px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);
      color:var(--ink);
    }

    a{color:var(--purple);font-weight:800;text-decoration:none}
    a:hover{text-decoration:underline}

    .page{max-width:1240px;margin:0 auto;padding:46px 28px 60px}
    .hero{display:grid;grid-template-columns:1fr 520px;gap:44px;align-items:start}

    .hero-copy{padding:46px 4px 0}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      background:#F2EDFA;color:var(--purple);
      border:1px solid #E3D8F3;border-radius:999px;
      padding:9px 14px;font-size:12px;font-weight:950;
      letter-spacing:.06em;text-transform:uppercase
    }
    h1{font-size:64px;line-height:1.02;letter-spacing:-.06em;margin:24px 0 20px;color:var(--navy);max-width:650px}
    .lead{font-size:20px;line-height:1.55;color:var(--muted);max-width:650px;margin:0 0 28px}

    .trust-row{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 34px}
    .trust-pill{
      display:inline-flex;align-items:center;gap:8px;background:#fff;
      border:1px solid var(--line);border-radius:999px;
      padding:10px 14px;font-size:13px;color:var(--ink);
      font-weight:850;box-shadow:var(--soft-shadow)
    }
    .trust-pill .tick{color:var(--green);font-weight:950}

    .signup-card{
      background:#fff;border:1px solid var(--line);
      border-radius:var(--radius);box-shadow:var(--shadow);
      overflow:hidden;position:relative
    }
    .signup-header{
      padding:30px 34px 20px;border-bottom:1px solid var(--line);
      background:linear-gradient(180deg,#fff 0%,#FBFAFD 100%)
    }
    .signup-header h2{margin:0 0 9px;font-size:32px;line-height:1.12;letter-spacing:-.045em;color:var(--navy)}
    .signup-header p{margin:0;color:var(--muted);line-height:1.45;font-size:15px}

    .steps{display:flex;gap:8px;margin-top:22px}
    .step{height:7px;flex:1;border-radius:999px;background:#ECE7F4;overflow:hidden}
    .step.active{background:linear-gradient(90deg,var(--purple),var(--pink))}

    .screen{display:none;padding:30px 34px 34px}
    .screen.active{display:block}
    .form-grid{display:grid;gap:14px}
    .two{grid-template-columns:1fr 1fr}
    label{display:block;margin-bottom:7px;font-size:13px;font-weight:900;color:var(--ink)}
    input,select{
      width:100%;border:1px solid var(--line);border-radius:14px;
      padding:14px 15px;font:inherit;background:#fff;outline:none;color:var(--ink)
    }
    input:focus,select:focus{border-color:var(--purple-2);box-shadow:0 0 0 4px rgba(126,77,184,.12)}

    button{font:inherit;cursor:pointer}
    .auth-btn,.goal,.primary,.secondary,.plan-card{
      border:1px solid var(--line);border-radius:16px;background:#fff;
      padding:15px 17px;font-weight:900;color:var(--ink);
      transition:.15s ease;text-align:center
    }
    .auth-btn:hover,.goal:hover,.secondary:hover,.plan-card:hover{
      transform:translateY(-1px);border-color:#CFC4E3;box-shadow:var(--soft-shadow)
    }
    .auth-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px}
    .auth-stack{display:grid;gap:12px}
    .auth-icon{
      width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
      background:#F2EDFA;color:var(--purple);font-weight:950
    }
    .divider{
      display:flex;align-items:center;gap:12px;margin:21px 0;
      color:var(--muted);font-size:13px;font-weight:850
    }
    .divider:before,.divider:after{content:"";height:1px;background:var(--line);flex:1}

    .primary{
      width:100%;margin-top:20px;border:none;color:#fff;
      background:linear-gradient(135deg,var(--purple),#462273);
      box-shadow:0 14px 28px rgba(90,52,127,.24)
    }
    .secondary{width:100%;margin-top:12px;color:var(--purple);background:#fff}
    .terms{
      margin-top:16px;padding:14px 15px;border-radius:15px;background:#FAF9FD;
      border:1px solid var(--line);font-size:12px;line-height:1.55;
      color:var(--muted);text-align:center
    }
    .login-centre{
      margin-top:20px;text-align:center;font-size:13px;color:var(--muted);font-weight:700
    }

    .plan-grid{display:grid;gap:14px}
    .plan-card{
      width:100%;text-align:left;position:relative;padding:21px 20px;
      display:block
    }
    .plan-card.recommended{
      border-color:var(--purple-2);
      background:linear-gradient(135deg,#fff,#F8F2FF)
    }
    .plan-card h3{margin:0 0 5px;color:var(--navy);font-size:19px}
    .price{color:var(--muted);font-size:14px;font-weight:750;margin-bottom:8px}
    .desc{color:var(--muted);font-size:13px;line-height:1.45;max-width:430px}
    .pill{
      position:absolute;top:15px;right:15px;border-radius:999px;
      background:#F2EDFA;color:var(--purple);font-size:11px;font-weight:950;
      padding:6px 10px;text-transform:uppercase;letter-spacing:.04em
    }

    .selection-screen{margin-bottom:28px}
    .selection-label{
      font-size:15px;font-weight:950;color:var(--navy);
      margin-bottom:14px;letter-spacing:-.01em
    }
    .selection-tags{display:flex;flex-wrap:wrap;gap:14px}
    .selection-tag{
      border:none;min-width:120px;min-height:54px;padding:16px 24px;
      border-radius:999px;background:linear-gradient(135deg,#7E4DB8,#5A347F);
      color:#fff;font-size:14px;font-weight:900;letter-spacing:-.01em;
      box-shadow:0 12px 26px rgba(90,52,127,.25);
      transition:all .18s ease
    }
    .selection-tag:hover{
      transform:translateY(-2px) scale(1.03);
      background:linear-gradient(135deg,#8F5FD0,#6A3D98);
      box-shadow:0 18px 34px rgba(90,52,127,.34)
    }
    .selection-tag.active{
      background:linear-gradient(135deg,#4A2673,#2D1549);
      box-shadow:0 18px 38px rgba(36,25,80,.42)
    }

    .goal-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .goal{
      min-height:120px;text-align:left;display:flex;flex-direction:column;
      align-items:flex-start;gap:8px
    }
    .goal-icon{
      width:38px;height:38px;border-radius:12px;background:#F2EDFA;
      color:var(--purple);display:grid;place-items:center;font-weight:950
    }
    .goal span{font-size:12px;line-height:1.4;color:var(--muted);font-weight:650}

    .foot-actions{
      display:flex;justify-content:space-between;align-items:center;
      padding:18px 34px 30px;border-top:1px solid var(--line);background:#fff
    }
    .back{border:none;background:transparent;color:var(--muted);font-weight:900}
    .next{border:none;border-radius:14px;background:var(--purple);color:#fff;padding:12px 18px;font-weight:950}

    @media(max-width:1020px){
      .hero{grid-template-columns:1fr}
      .signup-card{max-width:620px}
      .hero-copy{padding-top:12px}
      h1{font-size:46px}
      .two,.goal-grid{grid-template-columns:1fr}
    }
  .field-error {
    display: block;
    color: #e53e3e;
    font-size: 12px;
    margin-top: 4px;
    min-height: 16px;
  }
  input.is-invalid, select.is-invalid {
    border-color: #e53e3e !important;
  }
  .goal.selected {
    border-color: var(--primary, #2563eb);
    background: var(--primary-light, #eff6ff);
  }
  .plan-card.selected {
    border-color: var(--primary, #2563eb);
    background: var(--primary-light, #eff6ff);
  }
  #flashMessage {
    display: block;
    color: red;
    text-align: center;
    margin: 10px;
  }
  .password-help {
    display: block;
    font-size: 12px;
    margin-top: 4px;
    min-height: 16px;
}

.primary:hover {
    background: linear-gradient(135deg, #4a2c6f, #35195a);
    box-shadow: 0 18px 32px rgba(90,52,127,.35);
}

.password-container {
  position: relative;
}

.password-container input {
  width: 100%;
  padding-right: 35px; /* Space for the icon */
}

#togglePassword {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
}

.select2-container {
  width: 100% !important;
  font: inherit;
}

/* Main visible box */
.select2-container--default .select2-selection--single {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 15px;
  background: #fff;
  color: var(--ink);
  outline: none;

  display: flex;
  align-items: center;
  height: auto; /* important */
  box-sizing: border-box;
}
.select2-container {
  width: 100% !important;
  font: inherit;
}

/* Main visible box */
.select2-container--default .select2-selection--single {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 15px;
  background: #fff;
  color: var(--ink);
  outline: none;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  min-height: 48px; /* keeps same feel as input */
}

/* Text inside */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink);
  padding: 0;
  line-height: normal;
}

/* Arrow fix */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 10px;
}

/* Focus state (same border style, no glow) */
.select2-container--default.select2-container--focus .select2-selection--single {
  border: 1px solid var(--line);
  outline: none;
  box-shadow: none;
}
.select2-container--default .select2-selection--single {
  border-radius: 14px !important;
}
.select2-search--dropdown .select2-search__field{
  border-radius: 0px;
}