@charset "UTF-8";
/* ============================================================
   LAWCLERK – Global CSS Variables & Base Styles
   Reusable across all screens / components
   ============================================================ */
/* ── Google Fonts ── */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");
/* line 10, app/assets/stylesheets/website/registration_2026.scss */
:root {
  /* ── Brand Colors ── */
  --lc-primary:       #3A4B5B;
  /* Dark navy  – headings, primary text, staff icon bg */
  --lc-accent:        #C6B25D;
  /* Gold       – buttons, links, active states */
  --lc-accent-light:  #D5C47B;
  /* Light gold – attorney icon bg */
  --lc-accent-lighter-bg:#f5f3e6;
  /* ── Text Colors ── */
  --lc-text:          #5D5D5D;
  /* Body / secondary text */
  --lc-text-dark:     #3A4B5B;
  /* Alias for --lc-primary */
  --lc-text-white:    #FFFFFF;
  /* ── Surface Colors ── */
  --lc-bg:            #EAE8E7;
  /* Page background – warm light gray */
  --lc-bg-white:      #FFFFFF;
  /* Cards, TopBar */
  /* ── Border ── */
  --lc-border:        #DAD5D0;
  /* Dividers, TopBar bottom border */
  /* ── Typography ── */
  --lc-font:          'Montserrat', sans-serif;
  /* ── Layout ── */
  --lc-topbar-h:        72px;
  --lc-topbar-h-mobile: 56px;
  /* ── Border Radius ── */
  --lc-radius-card: 16px;
  --lc-radius-btn:   8px;
  --lc-radius-icon: 50%;
}

/* ── Global Resets & Base ── */
/* line 43, app/assets/stylesheets/website/registration_2026.scss */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* line 49, app/assets/stylesheets/website/registration_2026.scss */
body {
  font-family: var(--lc-font);
  background-color: var(--lc-bg);
  color: var(--lc-text);
  margin: 0;
  padding: 0;
}

/* line 57, app/assets/stylesheets/website/registration_2026.scss */
body.su-page {
  overflow: hidden;
}

/* Tall single-column screens (verify-email, ID verification) can exceed the
   viewport at high zoom. The body tag adds su-page--scroll on just those
   pages so they scroll while the rest of the su-page screens stay locked.
   Must follow body.su-page above to win on equal specificity. */
/* line 65, app/assets/stylesheets/website/registration_2026.scss */
body.su-page--scroll {
  overflow-y: auto;
}

/* line 69, app/assets/stylesheets/website/registration_2026.scss */
a {
  text-decoration: none;
}

/* line 73, app/assets/stylesheets/website/registration_2026.scss */
a:hover {
  text-decoration: none;
}

/* ============================================================
   LAWCLERK – Pre-Registration: Role Selection Screen
   Screen-specific styles only. Variables live in main.css.
   ============================================================ */
/* ── Top Bar ─────────────────────────────────────────────── */
/* line 84, app/assets/stylesheets/website/registration_2026.scss */
.pr-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--lc-topbar-h);
  background-color: var(--lc-bg-white);
  border-bottom: 1px solid var(--lc-border);
}

/* line 95, app/assets/stylesheets/website/registration_2026.scss */
.pr-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  margin: 0 auto;
  padding: 0 40px;
}

/* Logo – left side */
/* line 105, app/assets/stylesheets/website/registration_2026.scss */
.pr-topbar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* line 111, app/assets/stylesheets/website/registration_2026.scss */
.pr-topbar__logo svg {
  width: 273px;
  height: 24px;
  display: block;
}

/* Back link – right side, desktop only */
/* line 118, app/assets/stylesheets/website/registration_2026.scss */
.pr-topbar__back {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--lc-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.15s ease;
}

/* line 130, app/assets/stylesheets/website/registration_2026.scss */
.pr-topbar__back:hover {
  color: var(--lc-primary);
}

/* ── Mobile TopBar overrides ── */
@media (max-width: 767.98px) {
  /* line 136, app/assets/stylesheets/website/registration_2026.scss */
  .pr-topbar {
    height: var(--lc-topbar-h-mobile);
  }
  /* line 140, app/assets/stylesheets/website/registration_2026.scss */
  .pr-topbar__inner {
    padding: 0 16px;
    justify-content: center;
  }
  /* line 145, app/assets/stylesheets/website/registration_2026.scss */
  .pr-topbar__back {
    display: none;
  }
  /* line 149, app/assets/stylesheets/website/registration_2026.scss */
  .pr-topbar__logo svg {
    width: 205px;
    height: 18px;
  }
}

/* ── Main Layout ─────────────────────────────────────────── */
/* line 158, app/assets/stylesheets/website/registration_2026.scss */
.pr-main {
  padding-top: var(--lc-topbar-h);
  min-height: 100vh;
  display: flex;
  align-items: center;
}

@media (max-width: 767.98px) {
  /* line 166, app/assets/stylesheets/website/registration_2026.scss */
  .pr-main {
    padding-top: var(--lc-topbar-h-mobile);
    align-items: flex-start;
  }
}

/* Constrained content container (872 px = 2 × 420 px cards + 32 px gap) */
/* line 173, app/assets/stylesheets/website/registration_2026.scss */
.pr-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 14px 48px;
}

@media (max-width: 767.98px) {
  /* line 181, app/assets/stylesheets/website/registration_2026.scss */
  .pr-container {
    padding: 32px 16px 40px;
  }
}

/* ── Page Headings ───────────────────────────────────────── */
/* line 189, app/assets/stylesheets/website/registration_2026.scss */
.pr-heading {
  font-size: 40px;
  font-weight: 700;
  color: var(--lc-primary);
  line-height: 1.22;
  text-align: center;
  margin: 0 0 5px;
}

/* line 198, app/assets/stylesheets/website/registration_2026.scss */
.pr-subheading {
  font-size: 16px;
  font-weight: 400;
  color: var(--lc-text);
  line-height: 1.5;
  text-align: center;
  margin: 0 0 24px;
}

/* line 207, app/assets/stylesheets/website/registration_2026.scss */
.pr-question {
  font-size: 18px;
  font-weight: 600;
  color: var(--lc-primary);
  line-height: 1.22;
  text-align: center;
  margin: 0 0 23px;
}

@media (max-width: 767.98px) {
  /* line 217, app/assets/stylesheets/website/registration_2026.scss */
  .pr-heading {
    font-size: 24px;
    margin-bottom: 8px;
  }
  /* line 222, app/assets/stylesheets/website/registration_2026.scss */
  .pr-subheading {
    font-size: 14px;
    margin-bottom: 20px;
  }
  /* line 227, app/assets/stylesheets/website/registration_2026.scss */
  .pr-question {
    font-size: 16px;
    margin-bottom: 16px;
  }
}

/* ── Role Cards ──────────────────────────────────────────── */
/* Cards row – flexbox with 32 px gap matching Figma */
/* line 237, app/assets/stylesheets/website/registration_2026.scss */
.pr-cards-row {
  display: flex;
  gap: 32px;
}

/* Card shell */
/* line 243, app/assets/stylesheets/website/registration_2026.scss */
.role-card {
  flex: 1;
  background-color: var(--lc-bg-white);
  border: 1.5px solid var(--lc-border);
  border-radius: var(--lc-radius-card);
  padding: 36px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 1px 2px 0 rgba(58, 75, 91, 0.06), 0 1px 3px 0 rgba(58, 75, 91, 0.04);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.5s ease;
  will-change: transform, box-shadow;
}

/* Hover: card lifts off the page with elevated shadow */
/* line 263, app/assets/stylesheets/website/registration_2026.scss */
.role-card:hover,
.role-card:focus-within {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 2px 4px 0 rgba(58, 75, 91, 0.06), 0 12px 24px -6px rgba(58, 75, 91, 0.18), 0 28px 48px -12px rgba(58, 75, 91, 0.22), 0 0 0 1px rgba(198, 178, 93, 0.08);
}

/* Icon circle */
/* line 274, app/assets/stylesheets/website/registration_2026.scss */
.role-card__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--lc-radius-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  margin-bottom: 14px;
}

/* line 286, app/assets/stylesheets/website/registration_2026.scss */
.role-card__icon--atty {
  background-color: var(--lc-accent-light);
}

/* line 290, app/assets/stylesheets/website/registration_2026.scss */
.role-card__icon--staff {
  background-color: var(--lc-primary);
}

/* Card title */
/* line 295, app/assets/stylesheets/website/registration_2026.scss */
.role-card__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--lc-primary);
  text-align: center;
  margin: 0 0 10px;
  line-height: 1.22;
}

/* Card description */
/* line 305, app/assets/stylesheets/website/registration_2026.scss */
.role-card__desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--lc-text);
  line-height: 1.22;
  text-align: center;
  margin: 0;
  flex: 1;
  /* pushes button to the bottom */
}

/* CTA button */
/* line 316, app/assets/stylesheets/website/registration_2026.scss */
.btn-role {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  background-color: var(--lc-accent);
  color: var(--lc-text-white);
  font-family: var(--lc-font);
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: var(--lc-radius-btn);
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.12s ease;
  white-space: nowrap;
  margin-top: 58px;
  /* gap from desc bottom to button top per Figma */
}

/* line 335, app/assets/stylesheets/website/registration_2026.scss */
.btn-role:hover,
.btn-role:focus {
  background-color: #b5a251;
  color: var(--lc-text-white);
  outline: none;
  transform: translateY(-1px);
}

/* line 343, app/assets/stylesheets/website/registration_2026.scss */
.btn-role:active {
  transform: translateY(0);
}

/* ── Mobile card overrides ── */
@media (max-width: 767.98px) {
  /* line 349, app/assets/stylesheets/website/registration_2026.scss */
  .pr-cards-row {
    flex-direction: column;
    gap: 16px;
  }
  /* line 354, app/assets/stylesheets/website/registration_2026.scss */
  .role-card {
    padding: 24px 20px 16px;
  }
  /* line 358, app/assets/stylesheets/website/registration_2026.scss */
  .role-card__icon {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
  }
  /* line 364, app/assets/stylesheets/website/registration_2026.scss */
  .role-card__icon svg {
    width: 28px;
    height: 28px;
  }
  /* line 369, app/assets/stylesheets/website/registration_2026.scss */
  .role-card__title {
    font-size: 18px;
    margin-bottom: 8px;
  }
  /* line 374, app/assets/stylesheets/website/registration_2026.scss */
  .role-card__desc {
    font-size: 13px;
  }
  /* line 378, app/assets/stylesheets/website/registration_2026.scss */
  .btn-role {
    margin-top: 24px;
  }
}

/* ── Sign-In Footer ──────────────────────────────────────── */
/* line 386, app/assets/stylesheets/website/registration_2026.scss */
.pr-signin {
  font-size: 14px;
  font-weight: 400;
  color: var(--lc-text);
  text-align: center;
  margin: 43px 0 0;
}

/* line 394, app/assets/stylesheets/website/registration_2026.scss */
.pr-signin__link {
  font-weight: 600;
  color: var(--lc-accent);
  transition: color 0.15s ease;
}

/* line 400, app/assets/stylesheets/website/registration_2026.scss */
.pr-signin__link:hover {
  color: #b5a251;
}

@media (max-width: 767.98px) {
  /* line 405, app/assets/stylesheets/website/registration_2026.scss */
  .pr-signin {
    display: none;
    /* Not shown on mobile per Figma */
  }
}

/* ── Mobile Back Link (below cards) ─────────────────────── */
/* line 413, app/assets/stylesheets/website/registration_2026.scss */
.pr-back-mobile {
  display: none;
  align-items: center;
  gap: 6px;
  color: var(--lc-text);
  font-size: 13px;
  font-weight: 400;
  margin-top: 8px;
  transition: color 0.15s ease;
}

/* line 424, app/assets/stylesheets/website/registration_2026.scss */
.pr-back-mobile:hover {
  color: var(--lc-primary);
}

@media (max-width: 767.98px) {
  /* line 429, app/assets/stylesheets/website/registration_2026.scss */
  .pr-back-mobile {
    display: flex;
  }
}

/* ── Forms ───────────────────────────────────────────────── */
/* line 437, app/assets/stylesheets/website/registration_2026.scss */
.pr-form {
  width: 100%;
  margin: 24px 0 0;
}

/* Form section with fieldset */
/* line 443, app/assets/stylesheets/website/registration_2026.scss */
.pr-form__section {
  border: none;
  margin: 0 0 28px;
  padding: 0;
}

/* line 449, app/assets/stylesheets/website/registration_2026.scss */
.pr-form__section:last-of-type {
  margin-bottom: 24px;
}

/* Section legend (ACCOUNT, YOUR INFORMATION, etc.) */
/* line 454, app/assets/stylesheets/website/registration_2026.scss */
.pr-form__legend {
  font-size: 12px;
  font-weight: 700;
  color: var(--lc-primary);
  letter-spacing: 0.5px;
  margin: 0 0 14px;
  padding: 0;
  text-transform: uppercase;
}

/* Label styling */
/* line 465, app/assets/stylesheets/website/registration_2026.scss */
.pr-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--lc-primary);
  margin-bottom: 6px;
  padding: 0;
}

/* Form inputs (text, email, password) */
/* line 475, app/assets/stylesheets/website/registration_2026.scss */
.pr-input {
  font-size: 14px;
  font-weight: 400;
  color: var(--lc-primary);
  background-color: var(--lc-bg-white);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-btn);
  padding: 10px 12px;
  height: 40px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* line 487, app/assets/stylesheets/website/registration_2026.scss */
.pr-input::placeholder {
  color: #a8a8a8;
}

/* line 491, app/assets/stylesheets/website/registration_2026.scss */
.pr-input:focus {
  border-color: var(--lc-accent);
  box-shadow: 0 0 0 3px rgba(198, 178, 93, 0.1);
  outline: none;
}

/* line 497, app/assets/stylesheets/website/registration_2026.scss */
.pr-input:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

/* Select dropdowns */
/* line 504, app/assets/stylesheets/website/registration_2026.scss */
.pr-select {
  font-size: 14px;
  font-weight: 400;
  color: var(--lc-primary);
  background-color: var(--lc-bg-white);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-btn);
  padding: 10px 12px;
  height: 40px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* line 516, app/assets/stylesheets/website/registration_2026.scss */
.pr-select:focus {
  border-color: var(--lc-accent);
  box-shadow: 0 0 0 3px rgba(198, 178, 93, 0.1);
  outline: none;
}

/* line 522, app/assets/stylesheets/website/registration_2026.scss */
.pr-select option {
  color: var(--lc-primary);
  background-color: var(--lc-bg-white);
}

/* Primary button */
/* line 528, app/assets/stylesheets/website/registration_2026.scss */
.pr-btn-primary {
  width: 100%;
  height: 44px;
  background-color: var(--lc-accent);
  color: var(--lc-text-white);
  font-family: var(--lc-font);
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: var(--lc-radius-btn);
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.12s ease;
}

/* line 542, app/assets/stylesheets/website/registration_2026.scss */
.pr-btn-primary:hover,
.pr-btn-primary:focus {
  background-color: #b5a251;
  color: var(--lc-text-white);
  outline: none;
  transform: translateY(-1px);
}

/* line 550, app/assets/stylesheets/website/registration_2026.scss */
.pr-btn-primary:active {
  transform: translateY(0);
}

/* line 554, app/assets/stylesheets/website/registration_2026.scss */
.pr-btn-primary:disabled {
  background-color: #d4d4d4;
  cursor: not-allowed;
  transform: none;
}

/* Form actions area */
/* line 561, app/assets/stylesheets/website/registration_2026.scss */
.pr-form__actions {
  margin-top: 28px;
  margin-bottom: 16px;
}

/* Form legal notice */
/* line 567, app/assets/stylesheets/website/registration_2026.scss */
.pr-form__legal {
  font-size: 12px;
  font-weight: 400;
  color: var(--lc-text);
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

/* Links */
/* line 577, app/assets/stylesheets/website/registration_2026.scss */
.pr-link {
  color: var(--lc-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

/* line 583, app/assets/stylesheets/website/registration_2026.scss */
.pr-link:hover {
  color: #b5a251;
  text-decoration: underline;
}

/* Bootstrap form-group overrides */
/* line 589, app/assets/stylesheets/website/registration_2026.scss */
.form-group {
  margin-bottom: 16px;
}

/* line 593, app/assets/stylesheets/website/registration_2026.scss */
.form-row {
  margin-left: -8px;
  margin-right: -8px;
}

/* line 598, app/assets/stylesheets/website/registration_2026.scss */
.form-row > [class*='col-'] {
  padding-left: 8px;
  padding-right: 8px;
}

/* Help text styling */
/* line 604, app/assets/stylesheets/website/registration_2026.scss */
.form-text {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

/* Mobile form overrides */
@media (max-width: 767.98px) {
  /* line 612, app/assets/stylesheets/website/registration_2026.scss */
  .pr-form {
    margin-top: 20px;
  }
  /* line 616, app/assets/stylesheets/website/registration_2026.scss */
  .pr-form__section {
    margin-bottom: 24px;
  }
  /* line 620, app/assets/stylesheets/website/registration_2026.scss */
  .pr-label {
    font-size: 13px;
  }
  /* line 624, app/assets/stylesheets/website/registration_2026.scss */
  .pr-input,
.pr-select {
    font-size: 16px;
  }
  /* line 629, app/assets/stylesheets/website/registration_2026.scss */
  .pr-btn-primary {
    height: 48px;
    font-size: 15px;
  }
  /* line 634, app/assets/stylesheets/website/registration_2026.scss */
  .form-group {
    margin-bottom: 14px;
  }
}

/* ============================================================
   Signup – Two-Panel Layout (Attorney & Staff)
   ============================================================ */
/* ── Page Reset ─────────────────────────────────────────── */
/* line 647, app/assets/stylesheets/website/registration_2026.scss */
.su-page {
  background-color: var(--lc-bg-white);
}

/* ── Two-Panel Layout ────────────────────────────────────── */
/* line 654, app/assets/stylesheets/website/registration_2026.scss */
.su-layout {
  display: flex;
  height: calc(100vh - var(--lc-topbar-h));
  margin-top: var(--lc-topbar-h);
}

/* ── Left Panel (navy sidebar) ───────────────────────────── */
/* line 663, app/assets/stylesheets/website/registration_2026.scss */
.su-left-panel {
  width: 480px;
  min-width: 480px;
  background-color: var(--lc-primary);
  display: flex;
  flex-direction: column;
  padding: 48px;
}

/* line 672, app/assets/stylesheets/website/registration_2026.scss */
.su-left-heading {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.22;
  margin: 0 0 4px;
}

/* line 680, app/assets/stylesheets/website/registration_2026.scss */
.su-left-desc {
  font-size: 16px;
  font-weight: 400;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
}

/* Testimonial pushed to bottom */
/* line 689, app/assets/stylesheets/website/registration_2026.scss */
.su-testimonial {
  margin-top: auto;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 16px;
}

/* line 700, app/assets/stylesheets/website/registration_2026.scss */
.su-testimonial__mark {
  font-size: 56px;
  font-weight: 700;
  color: var(--lc-accent);
  line-height: 1;
  margin: 0;
  font-family: var(--lc-font);
  height: 22px;
}

/* line 710, app/assets/stylesheets/website/registration_2026.scss */
.su-testimonial__photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 4px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

/* line 720, app/assets/stylesheets/website/registration_2026.scss */
.su-testimonial__body {
  margin: 0;
  padding: 0;
  border: none;
}

/* line 726, app/assets/stylesheets/website/registration_2026.scss */
.su-testimonial__text {
  font-size: 14px;
  font-weight: 400;
  color: #d7c1a7;
  line-height: 1.6;
  margin: 0 0 16px;
}

/* line 734, app/assets/stylesheets/website/registration_2026.scss */
.su-testimonial__author {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

/* line 741, app/assets/stylesheets/website/registration_2026.scss */
.su-testimonial__author .su-testimonial__photo {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

/* line 747, app/assets/stylesheets/website/registration_2026.scss */
.su-testimonial__author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* line 753, app/assets/stylesheets/website/registration_2026.scss */
.su-testimonial__author strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--lc-accent);
}

/* line 759, app/assets/stylesheets/website/registration_2026.scss */
.su-testimonial__author em {
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  color: #d7c1a7;
}

/* ── Right Panel ─────────────────────────────────────────── */
/* line 769, app/assets/stylesheets/website/registration_2026.scss */
.su-right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--lc-bg-white);
  overflow-y: auto;
  padding: 0 24px;
}

/* line 778, app/assets/stylesheets/website/registration_2026.scss */
.su-form-wrapper {
  max-width: 420px;
  width: 100%;
  margin: auto;
  padding: 56px 0 48px;
}

/* ── Form Header ─────────────────────────────────────────── */
/* line 788, app/assets/stylesheets/website/registration_2026.scss */
.su-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--lc-primary);
  line-height: 1.22;
  margin: 0 0 11px;
}

/* line 796, app/assets/stylesheets/website/registration_2026.scss */
.su-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: var(--lc-text);
  line-height: 1.22;
  margin: 0 0 13px;
}

/* ── Progress Bar ────────────────────────────────────────── */
/* line 807, app/assets/stylesheets/website/registration_2026.scss */
.su-progress {
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
}

/* line 813, app/assets/stylesheets/website/registration_2026.scss */
.su-progress__seg {
  flex: 1;
  height: 4px;
  background-color: var(--lc-border);
  border-radius: 2px;
}

/* line 820, app/assets/stylesheets/website/registration_2026.scss */
.su-progress__seg--active {
  background-color: var(--lc-accent);
}

/* ── Section Labels ──────────────────────────────────────── */
/* line 827, app/assets/stylesheets/website/registration_2026.scss */
.su-section-label {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.22;
  margin: 10px 0 7px;
}

/* line 837, app/assets/stylesheets/website/registration_2026.scss */
.su-form .su-section-label:first-of-type {
  margin-top: 0;
}

/* ── Field Group ─────────────────────────────────────────── */
/* line 844, app/assets/stylesheets/website/registration_2026.scss */
.su-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

/* line 850, app/assets/stylesheets/website/registration_2026.scss */
.su-field:last-of-type {
  margin-bottom: 0;
}

/* line 854, app/assets/stylesheets/website/registration_2026.scss */
.su-field__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--lc-primary);
  margin: 0 0 6px;
  line-height: 1.22;
}

/* line 862, app/assets/stylesheets/website/registration_2026.scss */
.su-field__input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  font-family: var(--lc-font);
  font-size: 14px;
  font-weight: 400;
  color: var(--lc-primary);
  background-color: var(--lc-bg-white);
  border: 1.5px solid var(--lc-border);
  border-radius: var(--lc-radius-btn);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

/* line 877, app/assets/stylesheets/website/registration_2026.scss */
.su-field__input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

/* line 882, app/assets/stylesheets/website/registration_2026.scss */
.su-field__input:focus {
  border-color: var(--lc-accent);
  box-shadow: 0 0 0 3px rgba(198, 178, 93, 0.12);
  outline: none;
}

/* Password field with eye toggle */
/* line 889, app/assets/stylesheets/website/registration_2026.scss */
.su-pw-wrapper {
  position: relative;
}

/* line 893, app/assets/stylesheets/website/registration_2026.scss */
.su-pw-wrapper .su-field__input {
  padding-right: 42px;
}

/* line 897, app/assets/stylesheets/website/registration_2026.scss */
.su-pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 16px;
  text-decoration: none;
  line-height: 1;
}

/* line 908, app/assets/stylesheets/website/registration_2026.scss */
.su-pw-toggle:hover {
  color: var(--lc-primary);
}

/* line 912, app/assets/stylesheets/website/registration_2026.scss */
.su-field__input-wrap {
  position: relative;
}

/* line 916, app/assets/stylesheets/website/registration_2026.scss */
.su-field__input-wrap .su-field__input {
  padding-right: 42px;
}

/* line 920, app/assets/stylesheets/website/registration_2026.scss */
.su-eye-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

/* line 936, app/assets/stylesheets/website/registration_2026.scss */
.su-eye-btn:hover {
  opacity: 1;
}

/* Password requirement hints */
/* line 941, app/assets/stylesheets/website/registration_2026.scss */
.su-pw-hints {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: none;
}

/* line 948, app/assets/stylesheets/website/registration_2026.scss */
.su-pw-hints.su-pw-hints--visible {
  display: block;
}

/* line 952, app/assets/stylesheets/website/registration_2026.scss */
.su-pw-hints li {
  font-size: 12px;
  line-height: 1.6;
  color: #94a3b8;
  padding-left: 18px;
  position: relative;
}

/* line 960, app/assets/stylesheets/website/registration_2026.scss */
.su-pw-hints li::before {
  content: "\2022";
  position: absolute;
  left: 4px;
}

/* line 966, app/assets/stylesheets/website/registration_2026.scss */
.su-pw-hints li.su-pw-pass {
  color: #16a34a;
}

/* line 970, app/assets/stylesheets/website/registration_2026.scss */
.su-pw-hints li.su-pw-pass::before {
  content: "\2713";
}

/* line 974, app/assets/stylesheets/website/registration_2026.scss */
.su-pw-hints li.su-pw-fail {
  color: var(--lc-error, #d93025);
}

/* line 978, app/assets/stylesheets/website/registration_2026.scss */
.su-pw-hints li.su-pw-fail::before {
  content: "\2717";
}

/* Side-by-side field pair */
/* line 983, app/assets/stylesheets/website/registration_2026.scss */
.su-field-row {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

/* line 989, app/assets/stylesheets/website/registration_2026.scss */
.su-field-row .su-field {
  flex: 1;
  margin-bottom: 0;
}

/* ── Select Dropdown ─────────────────────────────────────── */
/* line 997, app/assets/stylesheets/website/registration_2026.scss */
.su-select-wrapper {
  position: relative;
}

/* line 1001, app/assets/stylesheets/website/registration_2026.scss */
.su-field__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4 4L7 1' stroke='%235D5D5D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* line 1011, app/assets/stylesheets/website/registration_2026.scss */
.su-field__select:focus {
  border-color: var(--lc-accent);
  box-shadow: 0 0 0 3px rgba(198, 178, 93, 0.12);
  outline: none;
}

/* ── Submit Button ───────────────────────────────────────── */
/* line 1020, app/assets/stylesheets/website/registration_2026.scss */
.su-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  background-color: var(--lc-accent);
  color: #ffffff;
  font-family: var(--lc-font);
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: var(--lc-radius-btn);
  cursor: pointer;
  margin-top: 12px;
  transition: background-color 0.18s ease, transform 0.12s ease;
}

/* line 1038, app/assets/stylesheets/website/registration_2026.scss */
.su-btn-primary:hover,
.su-btn-primary:focus {
  background-color: #b5a251;
  outline: none;
  transform: translateY(-1px);
}

/* line 1045, app/assets/stylesheets/website/registration_2026.scss */
.su-btn-primary:active {
  transform: translateY(0);
}

/* ── Legal Text ──────────────────────────────────────────── */
/* line 1052, app/assets/stylesheets/website/registration_2026.scss */
.su-legal {
  margin-top: 12px;
  text-align: center;
}

/* line 1057, app/assets/stylesheets/website/registration_2026.scss */
.su-legal p {
  font-size: 12px;
  font-weight: 400;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
}

/* line 1065, app/assets/stylesheets/website/registration_2026.scss */
.su-legal__link {
  font-size: 12px;
  font-weight: 500;
  color: var(--lc-accent);
  transition: color 0.15s ease;
}

/* line 1072, app/assets/stylesheets/website/registration_2026.scss */
.su-legal__link:hover {
  color: #b5a251;
  text-decoration: underline;
}

/* ── Sign-in Redirect ────────────────────────────────────── */
/* line 1079, app/assets/stylesheets/website/registration_2026.scss */
.su-signin-redirect {
  margin: 14px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #94A3B8;
  line-height: 1.4;
}

/* line 1088, app/assets/stylesheets/website/registration_2026.scss */
.su-signin-redirect__link {
  margin-left: 6px;
  font-weight: 600;
  color: var(--lc-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

/* line 1096, app/assets/stylesheets/website/registration_2026.scss */
.su-signin-redirect__link:hover,
.su-signin-redirect__link:focus {
  color: #b5a251;
  text-decoration: underline;
}

/* ── Select Placeholder State ────────────────────────────── */
/* line 1104, app/assets/stylesheets/website/registration_2026.scss */
.su-field__select:has(option[value=""]:checked) {
  color: #94a3b8;
}

/* line 1108, app/assets/stylesheets/website/registration_2026.scss */
.su-field__select option {
  color: var(--lc-primary);
}

/* line 1112, app/assets/stylesheets/website/registration_2026.scss */
.su-field__select option[value=""][disabled] {
  color: #94a3b8;
}

/* ── Left Panel Info Box ─────────────────────────────────── */
/* line 1119, app/assets/stylesheets/website/registration_2026.scss */
.su-infobox {
  margin-top: auto;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* line 1130, app/assets/stylesheets/website/registration_2026.scss */
.su-infobox__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* line 1136, app/assets/stylesheets/website/registration_2026.scss */
.su-infobox__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--lc-accent);
  line-height: 1.22;
  margin: 0;
}

/* line 1144, app/assets/stylesheets/website/registration_2026.scss */
.su-infobox__body {
  font-size: 13px;
  font-weight: 400;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
}

/* ── Signup Mobile ───────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* line 1156, app/assets/stylesheets/website/registration_2026.scss */
  .su-layout {
    flex-direction: column;
    min-height: auto;
    margin-top: var(--lc-topbar-h-mobile);
  }
  /* line 1162, app/assets/stylesheets/website/registration_2026.scss */
  .su-left-panel {
    width: 100%;
    min-width: unset;
    padding: 32px 20px;
  }
  /* line 1168, app/assets/stylesheets/website/registration_2026.scss */
  .su-testimonial {
    display: none;
  }
  /* line 1172, app/assets/stylesheets/website/registration_2026.scss */
  .su-left-heading {
    font-size: 22px;
  }
  /* line 1176, app/assets/stylesheets/website/registration_2026.scss */
  .su-left-desc {
    font-size: 14px;
  }
  /* line 1180, app/assets/stylesheets/website/registration_2026.scss */
  .su-right-panel {
    padding: 0 16px;
  }
  /* line 1184, app/assets/stylesheets/website/registration_2026.scss */
  .su-form-wrapper {
    padding: 32px 0 40px;
  }
  /* line 1188, app/assets/stylesheets/website/registration_2026.scss */
  .su-title {
    font-size: 20px;
  }
  /* line 1192, app/assets/stylesheets/website/registration_2026.scss */
  .su-field-row {
    flex-direction: column;
    gap: 0;
  }
  /* line 1197, app/assets/stylesheets/website/registration_2026.scss */
  .su-field-row .su-field {
    margin-bottom: 10px;
  }
}

/* ============================================================
   OTP / Email Verification
   ============================================================ */
/* ── Page layout ─────────────────────────────────────────── */
/* line 1210, app/assets/stylesheets/website/registration_2026.scss */
.otp-main {
  min-height: 100vh;
  padding-top: var(--lc-topbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--lc-bg);
}

/* ── Card ────────────────────────────────────────────────── */
/* line 1222, app/assets/stylesheets/website/registration_2026.scss */
.otp-card {
  width: 480px;
  background-color: var(--lc-bg-white);
  border: 1px solid var(--lc-border);
  border-radius: 16px;
  padding: 40px 40px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Mail icon circle ────────────────────────────────────── */
/* line 1237, app/assets/stylesheets/website/registration_2026.scss */
.otp-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 18px;
}

/* ── Heading & description ───────────────────────────────── */
/* line 1252, app/assets/stylesheets/website/registration_2026.scss */
.otp-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--lc-primary);
  line-height: 1.22;
  margin: 0 0 6px;
}

/* line 1260, app/assets/stylesheets/website/registration_2026.scss */
.otp-desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--lc-text);
  line-height: 1.5;
  margin: 0 0 22px;
  max-width: 380px;
}

/* ── OTP inputs ──────────────────────────────────────────── */
/* line 1272, app/assets/stylesheets/website/registration_2026.scss */
.otp-inputs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}

/* line 1279, app/assets/stylesheets/website/registration_2026.scss */
.otp-input {
  width: 56px;
  height: 64px;
  border: 1.5px solid var(--lc-border);
  border-radius: var(--lc-radius-btn);
  background-color: var(--lc-bg-white);
  font-family: var(--lc-font);
  font-size: 24px;
  font-weight: 600;
  color: var(--lc-primary);
  text-align: center;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  caret-color: var(--lc-accent);
}

/* line 1295, app/assets/stylesheets/website/registration_2026.scss */
.otp-input:focus {
  border-color: var(--lc-accent);
  box-shadow: 0 0 0 3px rgba(198, 178, 93, 0.12);
}

/* line 1300, app/assets/stylesheets/website/registration_2026.scss */
.otp-input:not(:placeholder-shown) {
  border-color: var(--lc-primary);
}

/* line 1305, app/assets/stylesheets/website/registration_2026.scss */
.otp-error {
  color: #DC2626;
  font-size: 13px;
  text-align: center;
  margin: 0 0 12px;
}

/* ── Resend row ──────────────────────────────────────────── */
/* line 1314, app/assets/stylesheets/website/registration_2026.scss */
.otp-resend {
  font-size: 14px;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 0;
}

/* line 1322, app/assets/stylesheets/website/registration_2026.scss */
.otp-resend__label {
  font-weight: 400;
  color: #94a3b8;
}

/* line 1327, app/assets/stylesheets/website/registration_2026.scss */
.otp-resend__link {
  font-weight: 600;
  color: var(--lc-accent);
  margin-left: 4px;
  transition: color 0.15s ease;
}

/* line 1334, app/assets/stylesheets/website/registration_2026.scss */
.otp-resend__link:hover {
  color: #b5a251;
  text-decoration: underline;
}

/* line 1339, app/assets/stylesheets/website/registration_2026.scss */
.otp-resend__link--disabled {
  color: #94a3b8;
  pointer-events: none;
  cursor: default;
}

/* line 1345, app/assets/stylesheets/website/registration_2026.scss */
.otp-resend__link--disabled:hover {
  color: #94a3b8;
  text-decoration: none;
}

/* ── Hint notes ──────────────────────────────────────────── */
/* line 1352, app/assets/stylesheets/website/registration_2026.scss */
.otp-note {
  font-size: 12px;
  font-weight: 400;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0 0 15px;
  max-width: 400px;
}

/* line 1361, app/assets/stylesheets/website/registration_2026.scss */
.otp-auto-note {
  font-size: 12px;
  font-weight: 500;
  color: var(--lc-accent);
  line-height: 1.5;
  margin: 0 0 17px;
  max-width: 400px;
}

/* ── Verifying loader ────────────────────────────────────── */
/* line 1373, app/assets/stylesheets/website/registration_2026.scss */
.otp-verifying {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 8px 0 16px;
}

/* line 1381, app/assets/stylesheets/website/registration_2026.scss */
.otp-verifying__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--lc-border);
  border-top-color: var(--lc-accent);
  border-radius: 50%;
  animation: otp-spin 0.7s linear infinite;
}

@keyframes otp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* line 1394, app/assets/stylesheets/website/registration_2026.scss */
.otp-verifying__text {
  font-family: var(--lc-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--lc-text-muted);
  margin: 0;
}

/* ── QA bypass button ────────────────────────────────────── */
/* line 1404, app/assets/stylesheets/website/registration_2026.scss */
.otp-qa-bypass {
  width: 400px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-btn);
  font-family: var(--lc-font);
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

/* line 1418, app/assets/stylesheets/website/registration_2026.scss */
.otp-qa-bypass:hover {
  border-color: #94a3b8;
  color: var(--lc-text);
}

/* ── OTP Mobile ──────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* line 1427, app/assets/stylesheets/website/registration_2026.scss */
  .otp-main {
    padding-top: var(--lc-topbar-h-mobile);
    align-items: flex-start;
    padding-bottom: 32px;
  }
  /* line 1433, app/assets/stylesheets/website/registration_2026.scss */
  .otp-card {
    width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 32px 20px 24px;
  }
  /* line 1441, app/assets/stylesheets/website/registration_2026.scss */
  .otp-title {
    font-size: 22px;
  }
  /* line 1445, app/assets/stylesheets/website/registration_2026.scss */
  .otp-input {
    width: 44px;
    height: 52px;
    font-size: 20px;
  }
  /* line 1451, app/assets/stylesheets/website/registration_2026.scss */
  .otp-qa-bypass {
    width: 100%;
  }
}

/* ============================================================
   Email Verified – Success Screen
   ============================================================ */
/* ── Card ────────────────────────────────────────────────── */
/* line 1464, app/assets/stylesheets/website/registration_2026.scss */
.verified-card {
  width: 480px;
  height: 320px;
  background-color: var(--lc-bg-white);
  border: 1px solid var(--lc-border);
  border-radius: 16px;
  padding: 40px 50px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Check icon circle ───────────────────────────────────── */
/* line 1480, app/assets/stylesheets/website/registration_2026.scss */
.verified-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #dcfce7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 18px;
}

/* ── Text ────────────────────────────────────────────────── */
/* line 1495, app/assets/stylesheets/website/registration_2026.scss */
.verified-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--lc-primary);
  line-height: 1.22;
  margin: 0 0 11px;
}

/* line 1503, app/assets/stylesheets/website/registration_2026.scss */
.verified-desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--lc-text);
  line-height: 1.22;
  margin: 0 0 21px;
}

/* ── Spinner ─────────────────────────────────────────────── */
/* line 1514, app/assets/stylesheets/website/registration_2026.scss */
.verified-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(198, 178, 93, 0.25);
  border-top-color: var(--lc-accent);
  border-radius: 50%;
  animation: verified-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes verified-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Verified Mobile ─────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* line 1532, app/assets/stylesheets/website/registration_2026.scss */
  .verified-card {
    width: calc(100% - 32px);
    height: auto;
    padding: 40px 24px 40px;
  }
}

/* ============================================================
   Progressive Form Steps
   ============================================================ */
/* Form step container */
/* line 1545, app/assets/stylesheets/website/registration_2026.scss */
.su-form-step {
  opacity: 1;
  margin-top: 1rem;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    margin-top: 1.5rem;
  }
  to {
    opacity: 1;
    margin-top: 1rem;
  }
}

/* Hidden step container */
/* line 1565, app/assets/stylesheets/website/registration_2026.scss */
.su-form-step--hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
}

/* Form actions container – always visible */
/* line 1572, app/assets/stylesheets/website/registration_2026.scss */
.su-form-actions {
  margin-top: 20px;
}

/* line 1576, app/assets/stylesheets/website/registration_2026.scss */
.su-form-error {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--lc-radius-btn);
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  font-size: 13px;
  color: var(--lc-error, #d93025);
}

/* LAW-463 #3/#6 — inline field-level error shown directly beneath its input. */
/* line 1587, app/assets/stylesheets/website/registration_2026.scss */
.su-field__error {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--lc-error, #d93025);
}

/* Disabled button state */
/* line 1595, app/assets/stylesheets/website/registration_2026.scss */
.su-btn-primary:disabled {
  background-color: #d4d4d4;
  color: #888888;
  cursor: not-allowed;
}

/* line 1601, app/assets/stylesheets/website/registration_2026.scss */
.su-btn-primary:disabled:hover {
  background-color: #d4d4d4;
  transform: none;
}

/* ============================================================
   Multi-Select – Signup Page Overrides
   Scoped to .su-page so existing multi-select is unaffected.
   ============================================================ */
/* line 1612, app/assets/stylesheets/website/registration_2026.scss */
.su-page .selectMultiple {
  background-color: var(--lc-bg-white);
  border: 1.5px solid var(--lc-border);
  border-radius: var(--lc-radius-btn);
}

/* line 1618, app/assets/stylesheets/website/registration_2026.scss */
.su-page .selectMultiple > div {
  padding: 0.5rem 2rem 0.5rem 0.5rem;
  font-size: 14px;
  min-height: 40px;
  line-height: 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* line 1628, app/assets/stylesheets/website/registration_2026.scss */
.su-page .selectMultiple > div span {
  color: #94a3b8;
  font-size: 14px;
  line-height: 21px;
  padding-left: 8px;
}

/* line 1635, app/assets/stylesheets/website/registration_2026.scss */
.su-page .selectMultiple > div a {
  padding: 4px 24px 4px 8px;
  line-height: 16px;
  color: var(--lc-accent);
  background-color: var(--lc-accent-lighter-bg);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  margin: 2px 6px 2px 0;
}

/* line 1646, app/assets/stylesheets/website/registration_2026.scss */
.su-page .selectMultiple > div a:before {
  background-color: var(--lc-bg-white);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-btn);
}

/* line 1652, app/assets/stylesheets/website/registration_2026.scss */
.su-page .selectMultiple > div a i {
  height: 24px;
  width: 24px;
}

/* line 1657, app/assets/stylesheets/website/registration_2026.scss */
.su-page .selectMultiple > div a i:before,
.su-page .selectMultiple > div a i:after {
  background: var(--lc-accent);
  height: 8px;
}

/* line 1663, app/assets/stylesheets/website/registration_2026.scss */
.su-page .selectMultiple > div .arrow:before,
.su-page .selectMultiple > div .arrow:after {
  border-bottom-color: #94a3b8;
}

/* line 1668, app/assets/stylesheets/website/registration_2026.scss */
.su-page .selectMultiple > ul {
  border-radius: var(--lc-radius-btn);
  font-size: 14px;
  max-height: calc((10px + 10px + 14px * 1.5) * 10);
  overflow-y: auto;
}

/* line 1675, app/assets/stylesheets/website/registration_2026.scss */
.su-page .selectMultiple > ul li {
  padding: 10px 14px;
  font-size: 14px;
}

/* line 1680, app/assets/stylesheets/website/registration_2026.scss */
.su-page .selectMultiple > ul li:hover {
  background: var(--lc-accent-lighter-bg);
  color: var(--lc-primary);
}

/* line 1685, app/assets/stylesheets/website/registration_2026.scss */
.su-page .selectMultiple.open > ul {
  border: 1.5px solid var(--lc-border);
  border-radius: var(--lc-radius-btn);
}

/* line 1690, app/assets/stylesheets/website/registration_2026.scss */
.su-page .selectMultiple:hover span.tooltiptext {
  opacity: 0;
}

/* line 1694, app/assets/stylesheets/website/registration_2026.scss */
.su-page .selectMultiple > div a em {
  white-space: normal;
}

/* ============================================================
   Sign-In Page (login- prefix)
   ============================================================ */
/* ── Visually hidden helper ──────────────────────────────── */
/* line 1708, app/assets/stylesheets/website/registration_2026.scss */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Form wrapper ────────────────────────────────────────── */
/* line 1723, app/assets/stylesheets/website/registration_2026.scss */
.login-form-wrapper {
  max-width: 420px;
  width: 100%;
  margin: auto;
  padding: 56px 0 48px;
}

/* line 1730, app/assets/stylesheets/website/registration_2026.scss */
.login-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--lc-primary);
  line-height: 1.22;
  margin: 0 0 8px;
}

/* line 1738, app/assets/stylesheets/website/registration_2026.scss */
.login-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 24px;
}

/* line 1746, app/assets/stylesheets/website/registration_2026.scss */
.login-form .form-group {
  margin-bottom: 0;
}

/* line 1750, app/assets/stylesheets/website/registration_2026.scss */
.login-form .string {
  margin-bottom: 0;
}

/* ── Role Cards (2-up) ───────────────────────────────────── */
/* line 1757, app/assets/stylesheets/website/registration_2026.scss */
.login-role-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border: 0;
  padding: 0;
  margin: 0 0 22px;
}

/* line 1766, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px;
  background-color: var(--lc-bg-white);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  user-select: none;
}

/* line 1783, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card:hover {
  border-color: #cbd5e1;
}

/* line 1787, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  inset: 0;
}

/* line 1794, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  transition: background-color 0.18s ease, color 0.18s ease;
}

/* line 1807, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* line 1813, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* line 1820, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card__title {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.22;
  transition: color 0.18s ease;
}

/* line 1828, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card__desc {
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
  line-height: 1.22;
}

/* line 1835, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card__icon-img {
  display: block;
}

/* line 1839, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card__icon-img--selected {
  display: none;
}

/* line 1843, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card--selected .login-role-card__icon-img--default {
  display: none;
}

/* line 1847, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card--selected .login-role-card__icon-img--selected {
  display: block;
}

/* line 1851, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card.login-role-card--selected[data-role="hire"] {
  background-color: #f5f3e6;
  border-color: #a89844;
}

/* line 1856, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card.login-role-card--selected[data-role="hire"] .login-role-card__icon {
  background-color: #a89844;
}

/* line 1860, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card.login-role-card--selected[data-role="hire"] .login-role-card__title {
  color: #1e293b;
}

/* line 1864, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card.login-role-card--selected[data-role="work"] {
  background-color: #eff6ff;
  border-color: #2563eb;
}

/* line 1869, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card.login-role-card--selected[data-role="work"] .login-role-card__icon {
  background-color: #2563eb;
}

/* line 1873, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card.login-role-card--selected[data-role="work"] .login-role-card__title {
  color: #1e293b;
}

/* line 1877, app/assets/stylesheets/website/registration_2026.scss */
.login-role-card:has(.login-role-card__input:focus-visible) {
  outline: 2px solid var(--lc-accent);
  outline-offset: 2px;
}

/* ── Form field spacing ──────────────────────────────────── */
/* line 1885, app/assets/stylesheets/website/registration_2026.scss */
.login-form .su-field {
  margin-bottom: 16px;
}

/* line 1889, app/assets/stylesheets/website/registration_2026.scss */
.login-form .su-field__input {
  height: 44px;
}

/* line 1893, app/assets/stylesheets/website/registration_2026.scss */
.login-btn {
  height: 48px;
  font-size: 14px;
  margin-top: 6px;
}

/* ── Forgot password ── */
/* line 1901, app/assets/stylesheets/website/registration_2026.scss */
.login-forgot {
  text-align: right;
  margin-top: 2px;
  margin-bottom: 10px;
}

/* line 1907, app/assets/stylesheets/website/registration_2026.scss */
.login-forgot__link {
  font-size: 13px;
  font-weight: 500;
  color: var(--lc-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

/* line 1915, app/assets/stylesheets/website/registration_2026.scss */
.login-forgot__link:hover,
.login-forgot__link:focus {
  color: #b5a251;
  text-decoration: underline;
}

/* ── Create-account redirect ─────────────────────────────── */
/* line 1924, app/assets/stylesheets/website/registration_2026.scss */
.login-signup-redirect {
  margin: 22px 0 0;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #64748b;
  line-height: 1.4;
}

/* line 1933, app/assets/stylesheets/website/registration_2026.scss */
.login-signup-redirect__link {
  margin-left: 6px;
  font-weight: 600;
  color: var(--lc-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

/* line 1941, app/assets/stylesheets/website/registration_2026.scss */
.login-signup-redirect__link:hover,
.login-signup-redirect__link:focus {
  color: #b5a251;
  text-decoration: underline;
}

/* ── Login left-panel testimonial overrides ──────────────── */
/* line 1950, app/assets/stylesheets/website/registration_2026.scss */
.login-left-panel .su-testimonial__author strong {
  color: var(--lc-accent);
  font-size: 13px;
}

/* line 1955, app/assets/stylesheets/website/registration_2026.scss */
.login-left-panel .su-testimonial__author em {
  color: #cbd5e1;
  font-size: 12px;
}

/* line 1960, app/assets/stylesheets/website/registration_2026.scss */
.login-left-panel .su-testimonial__text {
  color: #cbd5e1;
}

/* line 1964, app/assets/stylesheets/website/registration_2026.scss */
.login-left-panel .su-left-desc {
  color: #cbd5e1;
}

/* ── Testimonial Initials Avatar ─────────────────────────── */
/* line 1971, app/assets/stylesheets/website/registration_2026.scss */
.su-testimonial__initials {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--lc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* line 1982, app/assets/stylesheets/website/registration_2026.scss */
.su-testimonial__initials span {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  font-family: var(--lc-font);
  line-height: 1;
}

/* ── Sign-In Mobile ─────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* line 1994, app/assets/stylesheets/website/registration_2026.scss */
  .login-form-wrapper {
    padding: 32px 0 40px;
  }
  /* line 1998, app/assets/stylesheets/website/registration_2026.scss */
  .login-title {
    font-size: 20px;
  }
  /* line 2002, app/assets/stylesheets/website/registration_2026.scss */
  .login-subtitle {
    font-size: 13px;
    margin-bottom: 20px;
  }
  /* line 2007, app/assets/stylesheets/website/registration_2026.scss */
  .login-role-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* line 2012, app/assets/stylesheets/website/registration_2026.scss */
  .login-btn {
    height: 48px;
    font-size: 15px;
  }
}

/* line 2019, app/assets/stylesheets/website/registration_2026.scss */
a {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease;
  /* color: #C5B25C; */
}

/* line 2025, app/assets/stylesheets/website/registration_2026.scss */
.bg-primary {
  background: #C5B25C !important;
}

/* line 2028, app/assets/stylesheets/website/registration_2026.scss */
.ftco-section {
  padding: 7em 0;
}

/* line 2031, app/assets/stylesheets/website/registration_2026.scss */
.ftco-no-pt {
  padding-top: 0;
}

/* line 2034, app/assets/stylesheets/website/registration_2026.scss */
.ftco-no-pb {
  padding-bottom: 0;
}

/* line 2037, app/assets/stylesheets/website/registration_2026.scss */
.heading-section {
  font-size: 28px;
  color: #000;
}

/* line 2041, app/assets/stylesheets/website/registration_2026.scss */
.img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/* line 2046, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple {
  width: 100%;
  border: 1px solid #d6dcd0;
  background-color: #f7f7f8;
  position: relative;
}

/* line 2052, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple select {
  display: none;
}

/* line 2055, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div {
  position: relative;
  z-index: 2;
  padding: 1rem 1rem 0.35rem;
  border-radius: 2px;
  font-size: 15px;
  line-height: 30px;
  min-height: 60px;
  box-shadow: none;
}

/* line 2065, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div .arrow {
  right: 1px;
  top: 0;
  bottom: 0;
  cursor: pointer;
  width: 28px;
  position: absolute;
}

/* line 2073, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div .arrow:before,
.selectMultiple > div .arrow:after {
  content: '';
  position: absolute;
  display: block;
  width: 2px;
  height: 8px;
  border-bottom: 8px solid #99A3BA;
  top: 43%;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

/* line 2086, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div .arrow:before {
  right: 12px;
  -webkit-transform: rotate(-130deg);
  -ms-transform: rotate(-130deg);
  transform: rotate(-130deg);
}

/* line 2092, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div .arrow:after {
  left: 9px;
  -webkit-transform: rotate(130deg);
  -ms-transform: rotate(130deg);
  transform: rotate(130deg);
}

/* line 2098, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div span {
  color: #5e5e5e;
  display: block;
  /* position: absolute; */
  /* left: 12px; */
  cursor: pointer;
  /* top: 8px; */
  /* line-height: 14px; */
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

/* line 2110, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div span.hide {
  opacity: 0;
  visibility: hidden;
  display: none;
  -webkit-transform: translate(-4px, 0);
  -ms-transform: translate(-4px, 0);
  transform: translate(-4px, 0);
}

/* line 2118, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a {
  position: relative;
  padding: 8px 30px 8px 8px;
  line-height: 16px;
  color: #333333;
  display: inline-block;
  vertical-align: top;
  margin: 0 8px 8px 0;
}

/* line 2127, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a em {
  font-style: normal;
  display: block;
  white-space: nowrap;
}

/* line 2132, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a:before {
  content: '';
  left: 0;
  top: 0;
  bottom: 0px;
  width: 100%;
  position: absolute;
  display: block;
  /* background: rgba(228, 236, 250, 0.7); */
  background-color: #ffffff;
  border: 1px solid #d6dcd0;
  z-index: -1;
  border-radius: 2px;
}

/* line 2146, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a i {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 32px;
  display: block;
}

/* line 2155, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a i:before,
.selectMultiple > div a i:after {
  content: '';
  display: block;
  width: 2px;
  height: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: #C5B25C;
  border-radius: 1px;
}

/* line 2167, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a i:before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  -ms-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* line 2172, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a i:after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  -ms-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* line 2177, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a.notShown {
  opacity: 0;
  -webkit-transition: opacity .3s ease;
  -o-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

/* line 2183, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a.notShown:before {
  width: 28px;
  -webkit-transition: width 0.45s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.2s;
  -o-transition: width 0.45s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.2s;
  transition: width 0.45s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.2s;
}

/* line 2189, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a.notShown i {
  opacity: 0;
  -webkit-transition: all .3s ease .3s;
  -o-transition: all .3s ease .3s;
  transition: all .3s ease .3s;
}

/* line 2195, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a.notShown em {
  opacity: 0;
  -webkit-transform: translate(-6px, 0);
  -ms-transform: translate(-6px, 0);
  transform: translate(-6px, 0);
  -webkit-transition: all .4s ease .3s;
  -o-transition: all .4s ease .3s;
  transition: all .4s ease .3s;
}

/* line 2204, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a.notShown.shown {
  opacity: 1;
}

/* line 2207, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a.notShown.shown:before {
  width: 100%;
}

/* line 2210, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a.notShown.shown i {
  opacity: 1;
}

/* line 2213, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a.notShown.shown em {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

/* line 2219, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a.remove:before {
  width: 28px;
  -webkit-transition: width 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0s;
  -o-transition: width 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0s;
  transition: width 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0s;
}

/* line 2225, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a.remove i {
  opacity: 0;
  -webkit-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}

/* line 2231, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a.remove em {
  opacity: 0;
  -webkit-transform: translate(-12px, 0);
  -ms-transform: translate(-12px, 0);
  transform: translate(-12px, 0);
  -webkit-transition: all .4s ease 0s;
  -o-transition: all .4s ease 0s;
  transition: all .4s ease 0s;
}

/* line 2240, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a.remove.disappear {
  opacity: 0;
  -webkit-transition: opacity .5s ease 0s;
  -o-transition: opacity .5s ease 0s;
  transition: opacity .5s ease 0s;
}

/* line 2246, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  z-index: 3;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  border-radius: 8px;
  -webkit-transform: translate(0, 20px) scale(0.8);
  -ms-transform: translate(0, 20px) scale(0.8);
  transform: translate(0, 20px) scale(0.8);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-filter: drop-shadow(0 12px 20px rgba(22, 42, 90, 0.08));
  filter: drop-shadow(0 12px 20px rgba(22, 42, 90, 0.08));
  -webkit-transition: all 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44), -webkit-filter 0.3s ease 0.2s;
  transition: all 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44), -webkit-filter 0.3s ease 0.2s;
  -o-transition: all 0.4s ease, transform 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44), filter 0.3s ease 0.2s;
  transition: all 0.4s ease, transform 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44), filter 0.3s ease 0.2s;
  transition: all 0.4s ease, transform 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44), filter 0.3s ease 0.2s, -webkit-transform 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44), -webkit-filter 0.3s ease 0.2s;
}

/* line 2273, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > ul li {
  color: #000;
  background: #fff;
  padding: 12px 16px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  -webkit-transition: all .3s ease, color .3s ease, opacity .5s ease .3s, border-radius .3s ease .3s, -webkit-transform .3s ease .3s;
  transition: all .3s ease, color .3s ease, opacity .5s ease .3s, border-radius .3s ease .3s, -webkit-transform .3s ease .3s;
  -o-transition: all .3s ease, color .3s ease, transform .3s ease .3s, opacity .5s ease .3s, border-radius .3s ease .3s;
  transition: all .3s ease, color .3s ease, transform .3s ease .3s, opacity .5s ease .3s, border-radius .3s ease .3s;
  transition: all .3s ease, color .3s ease, transform .3s ease .3s, opacity .5s ease .3s, border-radius .3s ease .3s, -webkit-transform .3s ease .3s;
}

/* line 2286, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > ul li:first-child {
  border-radius: 2px 2px 0 0;
}

/* line 2289, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > ul li:first-child:last-child {
  border-radius: 2px;
}

/* line 2292, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > ul li:last-child {
  border-radius: 0 0 2px 2px;
}

/* line 2295, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > ul li:last-child:first-child {
  border-radius: 2px;
}

/* line 2298, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > ul li:hover {
  background: #C5B25C;
  color: #fff;
}

/* line 2302, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > ul li:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  border-radius: 100%;
  -webkit-transform: scale(1, 1) translate(-50%, -50%);
  -ms-transform: scale(1, 1) translate(-50%, -50%);
  transform: scale(1, 1) translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

/* line 2319, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > ul li.beforeRemove {
  border-radius: 0 0 8px 8px;
}

/* line 2322, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > ul li.beforeRemove:first-child {
  border-radius: 8px;
}

/* line 2325, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > ul li.afterRemove {
  border-radius: 8px 8px 0 0;
}

/* line 2328, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > ul li.afterRemove:last-child {
  border-radius: 8px;
}

/* line 2331, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > ul li.remove {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  opacity: 0;
}

/* line 2337, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > ul li.remove:after {
  -webkit-animation: ripple .4s ease-out;
  animation: ripple .4s ease-out;
}

/* line 2341, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > ul li.notShown {
  display: none;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  -webkit-transition: opacity .4s ease, -webkit-transform .35s ease;
  transition: opacity .4s ease, -webkit-transform .35s ease;
  -o-transition: transform .35s ease, opacity .4s ease;
  transition: transform .35s ease, opacity .4s ease;
  transition: transform .35s ease, opacity .4s ease, -webkit-transform .35s ease;
}

/* line 2353, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > ul li.notShown.show {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

/* line 2359, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple.open > div {
  box-shadow: none;
}

/* line 2362, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple.open > div .arrow:before {
  -webkit-transform: rotate(-50deg);
  -ms-transform: rotate(-50deg);
  transform: rotate(-50deg);
}

/* line 2367, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple.open > div .arrow:after {
  -webkit-transform: rotate(50deg);
  -ms-transform: rotate(50deg);
  transform: rotate(50deg);
}

/* line 2372, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple.open > ul {
  -webkit-transform: translate(0, 2px) scale(1);
  -ms-transform: translate(0, 2px) scale(1);
  transform: translate(0, 2px) scale(1);
  opacity: 1;
  visibility: visible;
  border-radius: 2px;
  border: 1px solid #efefef;
  /* -webkit-filter: drop-shadow(0 16px 24px rgba(22, 42, 90, 0.16)); */
  /* filter: drop-shadow(0 16px 24px rgba(22, 42, 90, 0.16)); */
}

@-webkit-keyframes ripple {
  0% {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 1;
  }
  25% {
    -webkit-transform: scale(30, 30);
    transform: scale(30, 30);
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(50, 50);
    transform: scale(50, 50);
  }
}

@keyframes ripple {
  0% {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 1;
  }
  25% {
    -webkit-transform: scale(30, 30);
    transform: scale(30, 30);
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(50, 50);
    transform: scale(50, 50);
  }
}

/* line 2417, app/assets/stylesheets/website/registration_2026.scss */
span.tooltiptext {
  opacity: 0;
  width: auto;
  background-color: #ececff;
  color: #5e5e5e;
  text-align: center;
  border-radius: 2px;
  padding: 5px;
  position: absolute;
  top: -42px;
  left: -1px;
  z-index: 1;
  box-shadow: 0 4px 10px #99999945;
  border: 1px solid #ccc;
  transition: all ease-in 300ms;
  font-size: 16px;
}

/* line 2434, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple:hover span.tooltiptext {
  opacity: 1;
  transition: all ease-in 300ms;
}

/* line 2439, app/assets/stylesheets/website/registration_2026.scss */
.minh-unset {
  min-height: unset !important;
}

/* line 2442, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple ul.scroll-max {
  max-height: 40vh;
}

/* line 2446, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a.notShown.shown em {
  white-space: normal;
}

/* line 2450, app/assets/stylesheets/website/registration_2026.scss */
.selectMultiple > div a em {
  white-space: normal;
}

/* ============================================================
   LAWCLERK – Role Selection (signup)
   ============================================================ */
/* line 2457, app/assets/stylesheets/website/registration_2026.scss */
.rs-main {
  /* `.su-page` (shared with login) forces the body white; the design's
     role-selection page sits on the warm-gray page background. Repaint the
     full-height main area so it matches the prototype (--lc-bg: #EAE8E7). */
  background-color: var(--lc-bg);
  padding-top: var(--lc-topbar-h);
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* line 2468, app/assets/stylesheets/website/registration_2026.scss */
.rs-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Headings ── */
/* line 2479, app/assets/stylesheets/website/registration_2026.scss */
.rs-heading {
  font-size: 36px;
  font-weight: 700;
  color: var(--lc-primary);
  text-align: center;
  margin: 0 0 12px;
  line-height: 1.22;
}

/* line 2488, app/assets/stylesheets/website/registration_2026.scss */
.rs-subheading {
  font-size: 16px;
  font-weight: 400;
  color: #64748B;
  text-align: center;
  max-width: 600px;
  line-height: 1.625;
  margin: 0 0 32px;
}

/* ── Cards row ── */
/* line 2499, app/assets/stylesheets/website/registration_2026.scss */
.rs-cards-row {
  display: flex;
  gap: 32px;
  width: 100%;
  justify-content: center;
}

/* ── Card shell ── */
/* line 2507, app/assets/stylesheets/website/registration_2026.scss */
.rs-card {
  width: 420px;
  min-height: 340px;
  background: var(--lc-bg-white);
  border-radius: var(--lc-radius-card);
  padding: 40px 40px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 1px 2px 0 rgba(58, 75, 91, 0.06), 0 1px 3px 0 rgba(58, 75, 91, 0.04);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, box-shadow;
}

/* line 2525, app/assets/stylesheets/website/registration_2026.scss */
.rs-card:hover,
.rs-card:focus-within {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 2px 4px 0 rgba(58, 75, 91, 0.06), 0 12px 24px -6px rgba(58, 75, 91, 0.18), 0 28px 48px -12px rgba(58, 75, 91, 0.22);
}

/* ── Icon circle ── */
/* line 2535, app/assets/stylesheets/website/registration_2026.scss */
.rs-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 26px;
}

/* line 2546, app/assets/stylesheets/website/registration_2026.scss */
.rs-card__icon--hire {
  background-color: #F5F0DC;
}

/* line 2547, app/assets/stylesheets/website/registration_2026.scss */
.rs-card__icon--work {
  background-color: var(--lc-primary);
}

/* ── Card text ── */
/* line 2550, app/assets/stylesheets/website/registration_2026.scss */
.rs-card__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--lc-primary);
  text-align: center;
  margin: 0 0 12px;
  line-height: 1.22;
  width: 100%;
}

/* line 2560, app/assets/stylesheets/website/registration_2026.scss */
.rs-card__desc {
  font-size: 14px;
  font-weight: 400;
  color: #64748B;
  text-align: center;
  max-width: 256px;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

/* ── CTA button ── */
/* line 2572, app/assets/stylesheets/website/registration_2026.scss */
.rs-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  background-color: var(--lc-accent);
  color: var(--lc-text-white);
  font-family: var(--lc-font);
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: var(--lc-radius-btn);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  margin-top: 28px;
  flex-shrink: 0;
  transition: background-color 0.18s ease, transform 0.12s ease;
}

/* line 2593, app/assets/stylesheets/website/registration_2026.scss */
.rs-btn:hover,
.rs-btn:focus {
  background-color: #b5a251;
  color: var(--lc-text-white);
  outline: none;
  transform: translateY(-1px);
}

/* line 2601, app/assets/stylesheets/website/registration_2026.scss */
.rs-btn:active {
  transform: translateY(0);
}

/* ── Sign-in footer ── */
/* line 2606, app/assets/stylesheets/website/registration_2026.scss */
.rs-signin {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 33px;
  font-size: 13px;
  font-weight: 400;
  color: #64748B;
}

/* line 2616, app/assets/stylesheets/website/registration_2026.scss */
.rs-signin__link {
  font-size: 13px;
  font-weight: 600;
  color: #A89844;
  transition: color 0.15s ease;
}

/* line 2623, app/assets/stylesheets/website/registration_2026.scss */
.rs-signin__link:hover {
  color: #8a7a36;
}

/* ── Mobile ── */
@media (max-width: 767.98px) {
  /* line 2628, app/assets/stylesheets/website/registration_2026.scss */
  .rs-main {
    padding-top: var(--lc-topbar-h-mobile);
    align-items: flex-start;
  }
  /* line 2633, app/assets/stylesheets/website/registration_2026.scss */
  .rs-container {
    padding: 32px 16px 40px;
  }
  /* line 2635, app/assets/stylesheets/website/registration_2026.scss */
  .rs-heading {
    font-size: 24px;
    margin-bottom: 8px;
  }
  /* line 2637, app/assets/stylesheets/website/registration_2026.scss */
  .rs-subheading {
    font-size: 14px;
    margin-bottom: 24px;
  }
  /* line 2639, app/assets/stylesheets/website/registration_2026.scss */
  .rs-cards-row {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
  /* line 2645, app/assets/stylesheets/website/registration_2026.scss */
  .rs-card {
    width: 100%;
    min-height: auto;
    padding: 24px 20px 20px;
  }
  /* line 2651, app/assets/stylesheets/website/registration_2026.scss */
  .rs-card__icon {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
  }
  /* line 2653, app/assets/stylesheets/website/registration_2026.scss */
  .rs-btn {
    height: 44px;
    font-size: 14px;
    margin-top: 20px;
  }
  /* line 2655, app/assets/stylesheets/website/registration_2026.scss */
  .rs-signin {
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 24px;
  }
  /* line 2657, app/assets/stylesheets/website/registration_2026.scss */
  body.su-page {
    overflow-y: auto;
  }
}

/* ── Bar admission jurisdictional gate alert ───────────────────────
   Gold warning callout shown when "I am not admitted…" is selected.
   Ported from lawclerk-html/css/modules/registration.css (.su-bar-alert). */
/* line 2666, app/assets/stylesheets/website/registration_2026.scss */
.su-bar-alert {
  display: flex;
  gap: 12px;
  background-color: #F5F0DC;
  border: 1px solid #E0D28A;
  border-radius: var(--lc-radius-btn);
  padding: 14px 16px;
  margin-top: 10px;
}

/* line 2676, app/assets/stylesheets/website/registration_2026.scss */
.su-bar-alert[hidden] {
  display: none;
}

/* line 2680, app/assets/stylesheets/website/registration_2026.scss */
.su-bar-alert__icon {
  flex-shrink: 0;
  padding-top: 1px;
}

/* line 2685, app/assets/stylesheets/website/registration_2026.scss */
.su-bar-alert__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* line 2691, app/assets/stylesheets/website/registration_2026.scss */
.su-bar-alert__title {
  font-size: 13px;
  font-weight: 700;
  color: #5B421F;
  margin: 0;
  line-height: 1.4;
}

/* line 2699, app/assets/stylesheets/website/registration_2026.scss */
.su-bar-alert__text {
  font-size: 12px;
  font-weight: 400;
  color: #5B421F;
  margin: 0;
  line-height: 1.5;
}

/* line 2707, app/assets/stylesheets/website/registration_2026.scss */
.su-bar-alert__link {
  color: var(--lc-accent);
  font-weight: 500;
  transition: color 0.15s ease;
}

/* line 2713, app/assets/stylesheets/website/registration_2026.scss */
.su-bar-alert__link:hover {
  color: #b5a251;
  text-decoration: underline;
}