/* ==========================================================
   X2 WEB — DESKTOP/TABLET AUTH + SHOWCASE V2
   Scope: min-width 781px only.
   Mobile <=780px remains untouched.
   ========================================================== */

@media (min-width: 781px) {
  /* Header: brand only. Authentication moves into the main split. */
  .site-header {
    grid-template-columns: 1fr !important;
  }

  .site-header .desktop-nav,
  .site-header .header-actions {
    display: none !important;
  }

  /* Main composition: auth left / slideshow right. */
  .hero.hero-minimal {
    padding-top: clamp(24px, 2.5vw, 38px) !important;
    padding-bottom: clamp(34px, 3.6vw, 54px) !important;
  }

  .hero.hero-minimal .hero-content {
    display: grid !important;
    grid-template-columns: minmax(360px, 48fr) minmax(0, 52fr) !important;
    grid-template-rows: minmax(560px, auto) !important;
    width: 100% !important;
    max-width: 1480px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--x2-border, #dde1e6) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .hero.hero-minimal .hero-eyebrow,
  .hero.hero-minimal h1,
  .hero.hero-minimal .hero-copy,
  .hero.hero-minimal .hero-actions,
  .hero.hero-minimal .development-inline {
    display: none !important;
  }

  /* Left: actual existing auth DOM. */
  .hero.hero-minimal .home-auth {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: clamp(38px, 4vw, 62px) clamp(34px, 4.1vw, 64px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border: 0 !important;
    border-right: 1px solid var(--x2-border, #dde1e6) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .home-auth-modes {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 0 25px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .home-auth-mode {
    min-height: 34px !important;
    padding: 0 9px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: #747b87 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  .home-auth-mode.is-active,
  .home-auth-mode[aria-selected="true"] {
    background: #f1f2f4 !important;
    color: #11172f !important;
  }

  .home-auth-body {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .google-signin-host,
  .social-auth-button,
  .email-form,
  .auth-divider,
  .auth-status,
  .auth-legal {
    width: 100% !important;
    max-width: 420px !important;
  }

  .google-signin-host {
    min-height: 40px !important;
    margin: 0 0 8px !important;
    display: flex !important;
    align-items: center !important;
  }

  

  .social-auth-button {
    min-height: 40px !important;
    margin: 0 0 8px !important;
    padding: 0 12px !important;
    border: 1px solid #dde1e6 !important;
    border-radius: 5px !important;
    background: #fff !important;
    color: #171a21 !important;
    font-family: inherit !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    text-align: center !important;
  }

  .social-auth-button:disabled {
    color: #747b87 !important;
    background: #fbfbfc !important;
    cursor: default !important;
  }

  .auth-divider {
    margin: 22px 0 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #8b919b !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }

  .auth-divider::before,
  .auth-divider::after {
    content: "" !important;
    height: 1px !important;
    flex: 1 !important;
    background: #eceef1 !important;
  }

  .auth-divider span {
    white-space: nowrap !important;
  }

  .email-form {
    margin: 0 !important;
  }

  .email-form label {
    display: block !important;
    margin: 0 0 7px !important;
    color: #171a21 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
  }

  .email-field {
    width: 100% !important;
    margin: 0 0 8px !important;
  }

  .email-field input {
    width: 100% !important;
    min-height: 40px !important;
    padding: 0 11px !important;
    border: 1px solid #dde1e6 !important;
    border-radius: 5px !important;
    background: #fff !important;
    color: #171a21 !important;
    font-family: inherit !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .email-field input:focus {
    border-color: #aeb5bf !important;
    box-shadow: 0 0 0 2px rgba(17,23,47,.04) !important;
  }

  .email-form > button[type="submit"] {
    width: 100% !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid #cfd4db !important;
    border-radius: 5px !important;
    background: #fff !important;
    color: #171a21 !important;
    font-family: inherit !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  .email-form > button[type="submit"]:hover {
    background: #fafafa !important;
    border-color: #bcc2cb !important;
  }

  .email-code-note,
  .email-code-actions,
  .auth-status {
    font-size: 10px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
  }

  .email-change {
    font-weight: 500 !important;
  }

  .auth-legal {
    margin: 20px 0 0 !important;
    color: #8b919b !important;
    font-size: 9px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
  }

  /* Right: clean slideshow surface. No labels, no placeholder text. */
  .hero.hero-minimal .mobile-showcase-frame {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 560px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #eef1f4 !important;
    box-shadow: none !important;
  }

  .hero.hero-minimal .mobile-showcase-frame::before,
  .hero.hero-minimal .mobile-showcase-frame::after {
    content: none !important;
    display: none !important;
  }
}

@media (min-width: 781px) and (max-width: 1120px) {
  .hero.hero-minimal .hero-content {
    grid-template-columns: minmax(330px, 46fr) minmax(0, 54fr) !important;
    grid-template-rows: minmax(520px, auto) !important;
  }

  .hero.hero-minimal .home-auth {
    padding: 34px 28px !important;
  }

  .hero.hero-minimal .mobile-showcase-frame {
    min-height: 520px !important;
  }
}

.desktop-tagline{display:none;}
@media (min-width:781px){
  .site-header{position:relative!important;}
  .desktop-tagline{
    display:block!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    color:#747b87!important;
    font-size:13px!important;
    line-height:1!important;
    font-weight:500!important;
    letter-spacing:.005em!important;
    white-space:nowrap!important;
    pointer-events:none!important;
  }
}

@media (min-width:781px){
  .desktop-tagline{
    color:#11172f!important;
    font-size:13px!important;
    font-weight:500!important;
    letter-spacing:.04em!important;
    text-transform:uppercase!important;
  }
  .home-auth .email-field{
    margin:0 0 8px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .home-auth .email-field input{
    width:100%!important;
    min-height:40px!important;
    margin:0!important;
    padding:0 12px!important;
    border:1px solid #dde1e6!important;
    border-radius:5px!important;
    background:#fff!important;
    box-shadow:none!important;
  }
}