:root {
      --brand-blue: #056dae;       /* requested brand tint */
  --citiedge-dark-blue: #002d72;
      --ink-900: #1f2937;
      --ink-800: #253040;
      --ink-700: #374151;
      --ink-600: #4b5563;
      --ink-500: #6b7280;
      --line: #e5e7eb;
      --panel: #f3f4f6;
      --page-pad: 64px;
      --radius: 6px;
    }

    body { background:#fff; margin:0; font-family: var(--font-regular); }

    /* Top progress */
    .progress-bar-container {
      position: sticky; top: 0; z-index: 20;
      background: #fff; height: 8px;        /* taller */
      box-shadow: 0 1px 0 rgba(0,0,0,.06);
    }
    .progress-bar { height: 100%; width: 16.66%; background: var(--brand-blue); transition: width .3s ease; }

    /* Layout */
    .registration-wrapper{
      max-width: 1280px;
      margin: 24px auto 48px;
      padding: 0 var(--page-pad);
      display: grid;
      grid-template-columns: 330px 1fr;
      gap: 40px;  /* space between left card and right content */
    }

    /* LEFT: sticky steps card */
    .sidebar-card{
      position: sticky; top: 20px; align-self: start;
      background:#fff; border-radius:16px;
      box-shadow:0 10px 24px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
      overflow:hidden; margin-top:14px; height:auto;
    }
    .card-image{ width:100%; height:170px; overflow:hidden; }
    .card-image img{ width:100%; height:100%; object-fit:cover; display:block; }

    .steps-container{ padding:26px 30px 36px 30px; }
    .steps-title{
      font-size:28px; font-weight:400; color:var(--ink-900);
      padding:14px 0 22px; margin:0;
    }
    .steps-list{ list-style:none; margin:0; padding-left:8px; }
    .step-item{
      padding:6px 0; margin:0 0 4px;
      color:var(--ink-700); font-size:14px; font-weight:300; line-height:1.35;
      background:transparent; border-radius:0; display:block;
    }
    .step-number{ margin-right:10px; font-weight:300; }
    .step-item.active{
  background:var(--citiedge-dark-blue); color:#fff; font-weight:700;
      margin-left:-30px; margin-right:-30px; padding:12px 30px; border-radius:0;
      text-transform:uppercase;
    }

    /* RIGHT content */
    .main-content{
      padding:0;
      margin-top: 18px;   /* pushes right side down a bit */
    }
    .content-header{
      display:flex; align-items:center; justify-content:space-between;
      padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:24px;
    }
    .product-title{ margin:0; color:#0a4da2; font-size:20px; font-weight:700; }

    /* Tiny, plain, black secure label with lock icon */
    .secure-badge{
      display:inline-flex; align-items:center; gap:6px;
      background:transparent; border:none; padding:0;
      color:#000; font-size:11px; font-weight:600; line-height:1;
    }
    .secure-badge img{ width:12px; height:12px; display:block; }

    .welcome-title{ margin:8px 0 22px; font-size:42px; font-weight:300; color:var(--ink-900); }
    .info-section{ margin-bottom:22px; }
    .info-title{ margin:0 0 10px; font-size:17px; font-weight:700; color:var(--ink-900); }
    .info-list{ margin:0; padding-left:22px; }
    .info-list li{ color:var(--ink-600); font-size:16px; line-height:1.85; margin-bottom:10px; }

    /* Section header */
    .section-title{
      margin:30px 0 12px; font-size:18px;
  letter-spacing:.4px; color:var(--citiedge-dark-blue); font-weight:800; text-transform:uppercase;
      position:relative; padding-bottom:10px;
    }
    .section-title::after{
      content:""; position:absolute; left:0; right:0; bottom:0;   /* full width */
      height:1px; transform:scaleY(.5); transform-origin:center;  /* ~0.5px */
      background:#000;                                            /* black line */
    }

    /* Summary shown after step 1 */
    .summary-grid{
      display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px;
      padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:18px;
    }
    .summary-item{ display:flex; flex-direction:column; }
  .summary-label{ font-size:12px; font-weight:800; color:var(--ink-800); margin-bottom:6px; text-transform:none; }
  .summary-value{ font-size:22px; color:var(--ink-700); font-weight:700; letter-spacing:0.5px; }

    /* Form (wider, larger labels, more vertical spacing between rows) */
    .form-row{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
    .form-row + .form-row{ margin-top:28px; }  /* extra space between rows */
    .form-row-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:20px; }
    .form-row-3 + .form-row{ margin-top:28px; }

    .form-group{ display:flex; flex-direction:column; }
    .form-group.full{ grid-column: 1 / -1; }

    /* State field positioning fix - ensure text input doesn't overlap */
    .form-group #state-text{
        height: 46px;
        padding: 12px 14px;
        border: 1px solid #ccd5e0;
        border-radius: var(--radius);
        background: #fff;
        font-size: 15px;
        color: #111827;
        font-family: var(--font-regular);
        width: 100%;
        box-sizing: border-box;
        margin-top: 0;
    }

    /* Ensure both state dropdown and text input are properly positioned */
    .form-group #state {
        width: 100%;
        box-sizing: border-box;
        height: 46px;
    }

    /* Remove any margin/padding that might interfere with grid alignment */
    .form-row-3 .form-group {
        margin: 0;
        padding: 0;
    }

    /* Ensure the state form group doesn't expand beyond its grid cell */
    .form-row-3 .form-group:nth-child(2) {
        overflow: hidden;
    }

    /* When state text input is shown, ensure it's properly positioned */
    .form-group #state-text[style*="display: block"] {
        position: relative;
        z-index: 1;
    }

    .form-group #state-text:focus{
        outline: none;
        border-color: var(--brand-blue);
        box-shadow: 0 0 0 3px rgba(5,109,174,.14);
    }

    /* Country field spacing */
    .country-row {
        margin-bottom: 20px !important;
    }

    /* Ensure proper spacing between form groups - but not in 3-column layout */
    .form-row .form-group {
        margin-bottom: 8px;
    }

    /* Override margin for 3-column layout */
    .form-row-3 .form-group {
        margin-bottom: 0 !important;
    }
    .form-label{ font-size:13.5px; color:var(--ink-700); margin-bottom:6px; }
    .form-input,
    .form-select{
      height:46px; padding:12px 14px; border:1px solid #ccd5e0; border-radius:var(--radius); background:#fff;
      font-size:15px; color:#111827; font-family:var(--font-regular);
    }
    .form-select{ appearance:auto; }
    .form-input:focus, .form-select:focus{
      outline:none; border-color:var(--brand-blue); box-shadow:0 0 0 3px rgba(5,109,174,.14);
    }

    .inline-help{ display:flex; align-items:center; gap:10px; margin-top:8px; color:var(--ink-700); font-size:14px; }
    .checkbox{ width:18px; height:18px; }

    .radio-group{ display:flex; align-items:center; gap:16px; }
    .radio-group label{ display:flex; align-items:center; gap:8px; color:var(--ink-800); font-size:14px; }
    .radio{ width:18px; height:18px; }

    .subsection-title{ font-size:18px; color:var(--ink-900); font-weight:700; margin:28px 0 10px; }
    .muted{ color:var(--ink-600); font-size:14px; margin-bottom:14px; }

    /* Field notes */
    .field-note {
        font-size: 12px;
        color: var(--ink-500);
        margin-top: 4px;
        line-height: 1.4;
        font-style: italic;
    }

    /* Form Error Styles - Override defaults for signup forms */
    .form-error, .field-error, .errorlist {
        color: #d93025 !important;
        font-size: 12px;
        font-weight: 400;
        margin-top: 4px;
        line-height: 1.4;
        display: block;
    }

    /* Error state for all input types in signup */
    .form-input.error,
    .form-select.error,
    input.error,
    select.error,
    textarea.error {
        border-color: #d93025 !important;
        box-shadow: 0 0 0 1px #d93025 !important;
    }

    .form-input.error:focus,
    .form-select.error:focus,
    input.error:focus,
    select.error:focus,
    textarea.error:focus {
        border-color: #d93025 !important;
        box-shadow: 0 0 0 2px rgba(217, 48, 37, 0.2) !important;
    }

    /* Django errorlist styling */
    .errorlist {
        list-style: none;
        padding: 0;
        margin: 4px 0 0 0;
    }

    .errorlist li {
        color: #d93025;
        font-size: 12px;
        margin: 0;
        padding: 0;
    }

    /* Field group error styling */
    .form-group.has-error .form-input,
    .form-group.has-error .form-select {
        border-color: #d93025 !important;
        box-shadow: 0 0 0 1px #d93025 !important;
    }

    /* Buttons */
    .button-container{ margin-top:22px; }
    .btn-continue{
      background:var(--brand-blue); color:#fff; border:none; border-radius:var(--radius);
      padding:16px 36px; font-size:17px; font-weight:700; cursor:pointer; transition:background .2s ease;
    }
    .btn-continue:hover{ background:#045c92; }

    /* Legal panel */
    .legal-section{
      margin:40px var(--page-pad) 0;
      padding:40px 28px;
      background:var(--panel); border-radius:8px;
    }
    .legal-title{ margin:0 0 22px; font-size:29px; font-weight:300; color:var(--ink-900); }
    .legal-block{ margin-bottom:28px; }
    .legal-block h5{
      margin:0 0 10px; font-size:13.5px; font-weight:900; color:var(--ink-900);
      letter-spacing:.4px; text-transform:uppercase;
    }
    .legal-block p{ margin:0 0 10px; font-size:13.5px; color:var(--ink-600); line-height:1.75; }

    /* Mobile */
    @media (max-width: 992px){
      :root{ --page-pad: 16px; }
      .registration-wrapper{ grid-template-columns:1fr; gap:24px; }
      .sidebar-card{ display:none !important; }
      .main-content{ order:1; margin-top: 8px; }
      .welcome-title{ font-size:34px; }
      .form-row, .form-row-3{ grid-template-columns:1fr; }
      .legal-section{ margin:32px var(--page-pad) 0; padding:28px 20px; }
    }