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

    body {
      font-family: var(--font-inter), sans-serif;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      background: #fafbfc;
      color: #14171C;
    }

    .signup-content {
      display: flex;
      min-height: 100vh;
      min-height: 100dvh;
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      padding: 0 40px;
    }

    /* === LEFT PANEL === */
    .signup-left {
      width: 44%;
      background: #fafbfc;
      display: flex;
      flex-direction: column;
      padding: 0 40px 40px;
      position: relative;
      flex-shrink: 0;
    }

    .signup-logo {
      display: inline-flex;
      flex-shrink: 0;
    }

    .signup-logo img {
      width: 148px;
      height: 34px;
    }

    .signup-collage {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 0;
    }

    .signup-collage img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    /* === RIGHT PANEL === */
    .signup-right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(24px, 4vh, 60px) 120px;
      background: #FFFFFF;
      border-radius: 80px;
      border: 10px solid #EAFCFF;
      margin: clamp(10px, 2vh, 30px) 40px clamp(10px, 2vh, 30px) 0;
      overflow-y: auto;
    }

    .signup-form {
      width: 100%;
      max-width: 450px;
      display: flex;
      flex-direction: column;
      gap: clamp(16px, 2.5vh, 32px);
    }

    /* === HEADER === */
    .signup-header {
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .signup-title {
      font-size: 40px;
      font-weight: 600;
      line-height: 1.2;
      color: #14171C;
    }

    .signup-subtitle {
      font-size: 16px;
      font-weight: 500;
      color: #14171C;
    }

    /* === FIELDS === */
    .signup-fields {
      display: flex;
      flex-direction: column;
      gap: clamp(10px, 1.5vh, 20px);
    }

    .signup-field {
      display: flex;
      flex-direction: column;
    }

    .signup-label {
      display: none;
    }

    .signup-error {
      font-size: 12px;
      color: #B42318;
      margin-top: 4px;
      display: none;
    }

    .signup-field--error .signup-input {
      border-color: #B42318;
    }

    .signup-field--error .signup-error {
      display: block;
    }

    /* Filled field, soft 16px radius (2026-07-13). Grey fill, no outline at
       rest; hover deepens the fill; focus → white + ink border, no ring.
       16px (not a full pill) on purpose: the email field sits directly above
       the Continue pill at the same width, so a pill field would read as a
       second button. Pill is reserved for BUTTONS; text fields are 16px
       site-wide. */
    .signup-input {
      border: 1.5px solid transparent;
      border-radius: 16px;
      padding: clamp(10px, 1.3vh, 14.5px) 18px;
      font-family: var(--font-inter), sans-serif;
      font-size: 16px;
      color: #14171C;
      outline: none;
      background: #F3F4F6;
      transition: background 0.18s ease, border-color 0.18s ease;
    }

    .signup-input:hover {
      background: #ECEEF1;
    }

    .signup-input:focus {
      background: #FFFFFF;
      border-color: #14171C;
    }

    .signup-input::placeholder {
      color: #9B9B9B;
    }

    /* === PASSWORD FIELD === */
    .signup-password-wrap {
      position: relative;
    }

    .signup-password-wrap .signup-input {
      width: 100%;
      padding-right: 52px;
    }

    .signup-password-toggle {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: #9B9B9B;
      display: flex;
      align-items: center;
      padding: 4px;
    }

    .signup-password-toggle:hover {
      color: #14171C;
    }

    /* === CHECKBOX + SUBMIT GROUP === */
    .signup-action {
      display: flex;
      flex-direction: column;
      gap: clamp(8px, 1vh, 13px);
      margin-top: clamp(4px, 0.5vh, 8px);
    }

    .signup-agree {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
    }

    .signup-agree input[type="checkbox"] {
      width: 20px;
      height: 20px;
      accent-color: #155EEF;
      cursor: pointer;
      flex-shrink: 0;
    }

    .signup-agree-text {
      font-size: 14px;
      color: #14171C;
      line-height: 1.5;
    }

    .signup-agree-text a {
      color: #155EEF;
      text-decoration: none;
    }

    /* === SUBMIT BUTTON === */
    .signup-btn {
      width: 100%;
      height: 54px;
      background: #14171C;
      color: #FFFFFF;
      border: none;
      border-radius: 100px;
      font-family: var(--font-inter), sans-serif;
      font-size: 16px;
      font-weight: 400;
      cursor: pointer;
      transition: background 0.2s;
    }

    .signup-confirm-text {
      text-align: center;
      font-size: 14px;
      color: #C6C6C6;
    }

    .signup-btn:hover {
      background: #2a2e36;
    }

    /* Founder rule (2026-07-12): submit buttons never go grey. Disabled only
       happens while a request is in flight, and it keeps the real look. */
    .signup-btn:disabled {
      cursor: default;
      opacity: 0.85;
    }

    /* === SOCIAL SECTION === */
    .signup-social-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(10px, 1.5vh, 20px);
      margin-top: clamp(4px, 0.5vh, 8px);
    }

    .signup-divider {
      display: flex;
      align-items: center;
      gap: 16px;
      width: 100%;
      align-self: stretch;
    }

    .signup-divider::before,
    .signup-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: #E0E0E0;
    }

    .signup-divider span {
      font-size: 13px;
      color: #9B9B9B;
      white-space: nowrap;
    }

    /* === SOCIAL BUTTONS === */
    .signup-social {
      display: flex;
      justify-content: center;
      gap: 40px;
    }

    .signup-social-btn {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 12px;
      background: #F2F2F2;
      cursor: pointer;
      transition: background 0.2s;
    }

    .signup-social-btn:hover {
      background: #E8E8E8;
    }

    .signup-social-btn svg,
    .signup-social-btn img {
      flex-shrink: 0;
    }

    /* === BOTTOM LINK === */
    .signup-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: #14171C;
    }

    /* Links wrap as whole phrases, never mid-word (e.g. "List your camp"
       breaking after "your" reads cheap on narrow screens). */
    .signup-bottom a {
      color: #14171C;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
      font-weight: 500;
      white-space: nowrap;
      transition: opacity 0.2s;
    }

    .signup-bottom a:hover {
      text-decoration-thickness: 2px;
      opacity: 0.7;
    }

    /* === HEADER === */
    .signup-header-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 40px;
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      flex-shrink: 0;
    }

    .signup-header-bar .header__actions {
      display: flex;
      align-items: center;
      gap: 24px;
      position: relative;
    }

    .signup-header-bar .btn-outline-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      padding: 0 24px;
      border-radius: 118px;
      font-size: 16px;
      font-weight: 400;
      color: #14171C;
      border: 1px solid transparent;
      background: none;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }

    .signup-header-bar .btn-outline-pill:hover {
      background: #155EEF;
      color: #FFFFFF;
      border-color: #155EEF;
    }

    .signup-header-bar .icon-btn {
      width: 40px;
      height: 40px;
      border-radius: 118px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: none;
      background: none;
      transition: background 0.2s;
    }

    .signup-header-bar .icon-btn:hover {
      background: #155EEF;
    }

    .signup-header-bar .icon-btn:hover svg line,
    .signup-header-bar .icon-btn:hover svg circle,
    .signup-header-bar .icon-btn:hover svg path {
      stroke: #FFFFFF;
    }

    .signup-header-bar .icon-btn--active {
      background: #124FCE;
    }

    .signup-header-bar .icon-btn--active svg line,
    .signup-header-bar .icon-btn--active svg circle,
    .signup-header-bar .icon-btn--active svg path {
      stroke: #FFFFFF;
    }

    /* Unified Header Dropdowns — matches Figma 3019:8385.
       Same styling for .su-main-menu and .su-user-menu so the two
       dropdowns look identical (only difference is right offset). */
    .su-main-menu,
    .su-user-menu {
      position: absolute;
      top: calc(100% + 12px);
      width: 220px;
      padding: 20px;
      background: #FFFFFF;
      border-radius: 20px;
      box-shadow: -4px -4px 12px rgba(44, 62, 80, 0.12), 4px 4px 12px rgba(44, 62, 80, 0.12);
      z-index: 300;
      display: none;
    }
    .su-user-menu { right: 0; }
    .su-main-menu { right: 64px; }

    .su-main-menu--open,
    .su-user-menu--open {
      display: flex;
      flex-direction: column;
      /* 18px each side of the divider → 37px total break per Figma 3019:8385. */
      gap: 18px;
    }

    .su-main-menu__section,
    .su-user-menu__section {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .su-main-menu__divider,
    .su-user-menu__divider {
      height: 1px;
      background: rgba(198, 198, 198, 0.5);
      margin: 0;
    }

    .su-main-menu__item,
    .su-user-menu__item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 10px;
      /* 28px hover-background height — see the matching note in
         src/components/header-dropdown.css. */
      min-height: 28px;
      border: none;
      background: none;
      border-radius: 6px;
      font-family: var(--font-inter), sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.3;
      color: #14171C;
      cursor: pointer;
      transition: background 0.15s;
      text-align: left;
      text-decoration: none;
      width: 100%;
    }

    .su-main-menu__item:hover,
    .su-user-menu__item:hover { background: #F7F7F7; }

    .su-user-menu__item--active {
      font-weight: 500;
      color: #FFFFFF;
      background: #155EEF;
      border-radius: 8px;
      padding: 10px 12px;
    }
    .su-user-menu__item--active:hover { background: #124FCE; }

    .su-user-menu__item--login {
      font-weight: 400;
      padding: 8px 10px;
      border-radius: 6px;
    }

    /* Mobile Menu Sheet */
    .su-mmenu {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: rgba(0,0,0,0.3);
    }

    .su-mmenu--open {
      display: flex;
      align-items: flex-end;
    }

    .su-mmenu__sheet {
      width: 100%;
      background: #FFFFFF;
      border-radius: 24px 24px 0 0;
      padding: 24px 24px calc(24px + env(safe-area-inset-bottom));
      position: relative;
      max-height: 85vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .su-mmenu__close {
      position: absolute;
      top: 24px;
      right: 24px;
      width: 32px;
      height: 32px;
      border: none;
      background: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .su-mmenu__nav {
      display: flex;
      flex-direction: column;
      padding-top: 40px;
    }

    .su-mmenu__item {
      font-size: 18px;
      font-weight: 400;
      color: #14171C;
      padding: 18px 0;
      text-decoration: none;
      display: block;
    }

    .su-mmenu__item:active { color: #155EEF; }

    .su-mmenu__divider {
      height: 1px;
      background: rgba(217,217,217,0.5);
    }

    /* Bottom nav uses the global .bnav styles from styles.css; no
       page-local override needed — keeps signup consistent with the
       rest of the app on mobile (Explore / Wishlist / Trips / Profile). */

    /* === RESPONSIVE === */
    @media (max-width: 1024px) {
      body {
        height: auto;
        min-height: 100dvh;
        overflow: auto;
        padding: 0 0 80px;
      }
      .signup-header-bar { padding-left: 32px; padding-right: 32px; }
      .signup-content { padding: 0 32px; }
      /* On mobile the actions are hidden, so center the lone logo
         instead of leaving it anchored to the left edge. */
      .signup-header-bar { padding: 40px 40px 24px; justify-content: center; }
      .signup-header-bar .header__actions { display: none; }
      .signup-content { flex-direction: column; align-items: center; padding: 0; }
      .signup-left { display: none; }
      .signup-collage { display: none; }
      .signup-right {
        flex: none;
        width: 100%;
        max-width: 640px;
        align-self: center;
        padding: 40px 48px;
        border: 10px solid #EAFCFF;
        border-radius: 40px;
        margin: 40px 0 0;
        overflow-y: visible;
      }
      .signup-form { max-width: 100%; }
      .signup-fields { gap: 16px; }
      .signup-input { padding: 22.5px 24px; font-size: 16px; }
      .signup-password-wrap .signup-input { padding-right: 52px; }
      .signup-title { font-size: 32px; }
    }

    @media (max-width: 480px) {
      body { padding: 0 0 32px 0; }
      .signup-header-bar { padding-left: 16px; padding-right: 16px; }
      .signup-content { padding: 0 16px; }
      .signup-header-bar {
        padding: 16px 0;
        padding-top: calc(16px + env(safe-area-inset-top));
      }
      .signup-header-bar .signup-logo img { width: 120px; height: auto; }
      .signup-right {
        padding: 32px 20px;
        border-width: 3px;
        border-radius: 24px;
        margin: 24px 0 0;
      }
      .signup-title { font-size: 24px; }
      .signup-subtitle { font-size: 14px; }
      .signup-form { gap: 20px; }
      .signup-fields { gap: 12px; }
      .signup-input { padding: 16px 20px; font-size: 15px; }
      .signup-password-wrap .signup-input { padding-right: 48px; }
      .signup-action { gap: 12px; }
      .signup-btn { height: 52px; font-size: 16px; }
      .signup-social-btn { width: 52px; height: 52px; }
      .signup-social { gap: 28px; }
      .signup-social-section { gap: 16px; }
    }

/* Primary CTA button in signup header */
.btn-outline-pill--primary {
  background: #155EEF !important;
  color: #FFFFFF !important;
  border-color: #155EEF !important;
}
.btn-outline-pill--primary:hover {
  background: #124FCE !important;
  border-color: #124FCE !important;
}