*,
     *::before,
     *::after {
         box-sizing: border-box;
         margin: 0;
         padding: 0
     }

     :root {
         --primary: #0d1b4c;
         --secondary: #39b5e5;
         --accent2: #eef3f5;
         --text: #2f3441;
         --cream: #e7d8c0;
         --white: #ffffff;
         --white72: rgba(255, 255, 255, .72);
         --white15: rgba(255, 255, 255, .15);
         --border: #d0d5dd;
         --placeholder: #667085;
         --red: #d92d20;
         --green: #039855;
         --amber: #d4820a;
         --blue-link: #1a56db;
         --teal: #4f8c8d;
         --font-h: 'Barlow Condensed', sans-serif;
         --font-b: 'Plus Jakarta Sans', sans-serif;
     }

     body {
         font-family: var(--font-b);
         color: var(--text);
         background: var(--accent2);
         font-size: 15px;
         line-height: 1.6
     }

     /* HEADER */
     .site-header {
         background: var(--white);
         border-bottom: 1px solid #e4eaf5;
         position: sticky;
         top: 0;
         z-index: 100;
         padding: 10px 0px;
     }

     .hdr {
         max-width: 1170px;
         margin: 0 auto;
         padding: 0 20px;
         height: 60px;
         display: flex;
         align-items: center;
         gap: 20px
     }

     .logo-img {
         width: 76px;
         flex-shrink: 0;
         display: block
     }

     .hdr-nav {
         display: flex;
         align-items: center;
         gap: 4px;
         margin-left: auto;
     }

     .hdr-nav a {
         font-size: 14px;
         font-weight: 400;
         color: var(--secondary);
         text-decoration: none;
         padding: 6px 12px;
         border-radius: 7px;
         white-space: nowrap;
         transition: background .15s, color .15s
     }

     .hdr-nav a:hover {
         background: rgba(57, 181, 229, .1);
         color: var(--primary)
     }

     .hdr-btns {
         display: flex;
         align-items: center;
         gap: 8px;
         flex-shrink: 0
     }

     .btn-agent {
         background: transparent;
         color: var(--primary);
         border: 1px solid var(--primary);
         border-radius: 999px;
         padding: 6px 14px;
         font-family: var(--font-b);
         font-size: 13px;
         font-weight: 700;
         text-decoration: none;
         white-space: nowrap;
         cursor: pointer;
         transition: background .15s
     }

     .btn-agent:hover {
         background: rgba(57, 181, 229, .1)
     }

     .btn-login {
         background: var(--primary);
         color: var(--white);
         border: 1px solid var(--primary);
         border-radius: 999px;
         padding: 6px 14px;
         font-family: var(--font-b);
         font-size: 13px;
         font-weight: 700;
         text-decoration: none;
         white-space: nowrap;
         cursor: pointer;
         transition: background .15s
     }

     .btn-login:hover {
         background: var(--text)
     }

     .hamburger {
         display: none;
         background: none;
         border: none;
         cursor: pointer;
         padding: 4px;
         color: var(--primary);
         margin-left: auto
     }

     .mob-nav {
         display: none;
         flex-direction: column;
         background: var(--white);
         border-top: 1px solid #e4eaf5;
         padding: 16px 20px 20px;
         gap: 4px
     }

     .mob-nav.open {
         display: flex
     }

     .mob-nav a {
         font-size: 15px;
         color: var(--text);
         text-decoration: none;
         padding: 10px 12px;
         border-radius: 7px
     }

     .mob-nav a:hover {
         background: var(--accent2)
     }

     .mob-btns {
         display: flex;
         gap: 10px;
         margin-top: 10px;
         flex-wrap: wrap
     }

     /* HERO */
     .page-hero {
         background: var(--primary);
         padding: 36px 20px 32px
     }

     .hero-in {
         max-width: 1170px;
         margin: 0 auto;
         text-align: center;
         display: flex;
         flex-direction: column;
         align-items: center
     }

     .hero-eyebrow {
         font-family: var(--font-h);
         font-size: 20px;
         font-weight: 700;
         color: var(--cream);
         text-transform: uppercase;
         letter-spacing: .03em;
         border-bottom: 2px solid var(--cream);
         display: inline-block;
         padding-bottom: 2px;
         margin-bottom: 10px;
         line-height: 1.3em
     }

     .hero-title {
         font-family: var(--font-h);
         font-size: 44px;
         font-weight: 800;
         color: var(--white);
         line-height: 1.15em;
         margin-bottom: 10px
     }

     .hero-title span {
         color: var(--cream)
     }

     .hero-body {
         font-size: 15px;
         font-weight: 400;
         color: var(--white72);
         max-width: 520px;
         line-height: 1.5em
     }

     /* MAIN LAYOUT */
     .register-wrap {
         max-width: 1170px;
         margin: 0 auto;
         padding: 48px 20px 80px;
         display: grid;
         grid-template-columns: 340px 1fr;
         gap: 32px;
         align-items: start
     }

     /* REG TYPE SWITCHER */
     .reg-switcher {
         display: flex;
         gap: 0;
         background: rgba(255, 255, 255, .08);
         border-radius: 12px;
         padding: 4px;
         margin-top: 16px;
         max-width: 480px
     }

     .reg-switcher a {
         flex: 1;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
         padding: 10px 20px;
         border-radius: 9px;
         font-family: var(--font-b);
         font-size: 14px;
         font-weight: 600;
         text-decoration: none;
         color: rgba(255, 255, 255, .6);
         transition: background .2s, color .2s;
         text-align: center;
         white-space: nowrap;
     }

     .reg-switcher a.active {
         background: var(--white);
         color: var(--primary)
     }

     .reg-switcher a:not(.active):hover {
         background: rgba(255, 255, 255, .12);
         color: var(--white)
     }

     .reg-switcher a svg {
         width: 16px;
         height: 16px;
         flex-shrink: 0
     }

     div.idpc_autocomplete>input {
         display: block;
         width: 100%;
     }