/* Same tokens as the dashboard and the marketing site — this is the screen
     between the two, and it used to be a third palette of its own. */
  :root{
    --bg:var(--la-bg); --surface:var(--la-surface); --field:#0f121b;
    --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.14);
    --text:var(--la-text); --muted:var(--la-muted);
    --accent:var(--la-accent); --accent-2:var(--la-accent-bright); --green:var(--la-success); --red:#ef5350;
  }
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    height:auto; /* Tall signup cards must expand the page instead of clipping above it. */
    margin:0; min-height:100dvh; display:flex; align-items:center; justify-content:center;
    padding:24px;
    background:
      radial-gradient(1100px 520px at 50% -8%, rgba(99,102,241,.10), transparent 68%),
      var(--bg);
    color:var(--text);
    font-family:var(--la-font);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  .card{
    width:384px; max-width:100%; background:var(--surface);
    border:1px solid var(--border); border-radius:20px; padding:36px 32px 30px;
    box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 24px 60px -24px rgba(0,0,0,.7);
  }
  .brand{ display:flex; align-items:center; gap:11px; margin-bottom:22px; }
  .brand .wm{ font-size:19px; font-weight:760; letter-spacing:0; }
  .brand .a{ background:linear-gradient(90deg,#a78bfa,#4f63ec);
             -webkit-background-clip:text; background-clip:text; color:transparent; }
  h1{ font-size:22px; font-weight:600; letter-spacing:-.02em; margin:0 0 6px; }
  .sub{ color:var(--muted); font-size:14px; line-height:1.5; margin:0 0 24px; }
  .signup-card{ width:440px; padding:26px 28px 24px; }
  .signup-card .brand{ justify-content:center; margin-bottom:20px; }
  .signup-card h1{ text-align:center; font-size:26px; letter-spacing:-.035em; }
  .signup-card .sub{ margin:8px 0 24px; text-align:center; }
  .signup-card .field{ margin-bottom:12px; }
  .signup-card .profile-fields{ display:flex; gap:12px; }
  .signup-card .profile-fields .field{ flex:1; min-width:0; }
  .signup-card .check-row{ min-height:40px; align-items:center; }
  .signup-card button.submit{ margin-top:12px; }
  .signup-card .alt{ margin-top:16px; }
  @media(max-width:480px){
    body:has(.signup-card){ padding:16px; }
    .signup-card{ padding:24px 20px; }
    .signup-card input:not([type=checkbox]), .signup-card select{ font-size:16px; }
    .signup-card .profile-fields{ gap:10px; }
    .desktop-break{ display:none; }
  }
  @media(max-width:350px){
    .signup-card .profile-fields{ flex-direction:column; gap:0; }
  }
  .signup-reassurance{ color:var(--muted); font-size:13px; line-height:1.55; text-align:center; margin:12px 0 0; }
  .signup-reassurance strong{ display:block; color:var(--text); font-weight:500; margin-bottom:4px; }

  .signup-creator{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 20px;color:#eee9ff;font-size:20px;overflow-wrap:anywhere}.signup-creator img{width:64px;height:64px;object-fit:contain;border-radius:14px;background:#fff;flex-shrink:0}.signup-creator strong{min-width:0}
  .branding-preview-fields{border:0;margin:0;padding:0;min-width:0;width:100%}
  .branding-preview-note a{color:#c1afff;text-underline-offset:3px}
  .signup-partner{display:flex;align-items:center;gap:14px;margin:18px 0;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--field)}
  .signup-partner img{flex:none;object-fit:contain;border-radius:10px;background:#fff}
  .signup-partner span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
  .signup-partner strong{display:block;font-size:15px;overflow-wrap:anywhere}
  .referral-code-field summary{cursor:pointer;color:var(--accent-2);font-size:13px;padding:8px 0}
  .referral-code-field[open] summary{margin-bottom:10px}
  .field{ margin-bottom:16px; }
  label{ display:block; font-size:13px; font-weight:500; color:var(--muted); margin:0 0 7px; }
  input:not([type=checkbox]), select{
    width:100%; height:46px; background:var(--field);
    border:1px solid var(--border); border-radius:11px; color:var(--text);
    font-size:15px; padding:0 14px; font-family:inherit;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
    appearance:none; -webkit-appearance:none;
  }
  input::placeholder{ color:#6b7091; }
  input:not([type=checkbox]):hover, select:hover{ border-color:var(--border-2); }
  input:not([type=checkbox]):focus, select:focus{
    outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(99,102,241,.22); background:#12151f;
  }
  select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b90b0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
  }
  .hint{ font-size:12px; color:var(--muted); line-height:1.5; margin-top:7px; }
  .hint strong{ color:var(--text); font-weight:600; }

  .check-row{
    display:flex; align-items:flex-start; gap:11px; margin:4px 0 2px;
    font-size:13px; font-weight:400; color:var(--muted); line-height:1.5; cursor:pointer;
  }
  .check-row input{
    width:18px; height:18px; margin:1px 0 0; flex:0 0 auto; accent-color:var(--accent);
    border-radius:5px; cursor:pointer;
  }

  button.submit{
    width:100%; margin-top:22px; height:48px; background:var(--la-button-gradient); color:#fff;
    border:none; border-radius:12px; font-size:15px; font-weight:600; font-family:inherit;
    letter-spacing:-.01em; cursor:pointer;
    transition:filter .15s ease, transform .06s ease;
  }
  button.submit:hover{ filter:brightness(1.07); }
  button.submit:active{ transform:scale(.988); }
  button.submit:disabled{ opacity:.75; cursor:default; }
  /* Pending state: the button keeps its size and gains a spinner, so the form
     doesn't shift and it never looks like nothing happened. */
  .btn-spin{
    width:15px; height:15px; border-radius:50%; flex:none;
    border:2px solid rgba(255,255,255,.32); border-top-color:#fff;
    animation:btnSpin .65s linear infinite;
  }
  @keyframes btnSpin{ to{ transform:rotate(360deg); } }
  button.submit{ display:flex; align-items:center; justify-content:center; gap:9px; }
  @media (prefers-reduced-motion:reduce){
    .btn-spin{ animation:none; border-top-color:rgba(255,255,255,.7); }
  }

  .msg{ font-size:13px; line-height:1.45; border-radius:11px; padding:11px 13px; margin-bottom:16px; }
  .msg.err{ background:rgba(226,75,74,.12); color:#ffa8a6; border:1px solid rgba(226,75,74,.28); }
  .msg.info{ background:rgba(34,197,94,.11); color:#8fefad; border:1px solid rgba(34,197,94,.28); }

  .alt{ text-align:center; font-size:13.5px; color:var(--muted); margin-top:20px; }
  .alt + .alt{ margin-top:9px; }
  .alt a{ color:var(--accent-2); text-decoration:none; font-weight:500; }
  .alt a:hover{ text-decoration:underline; }

  /* Google's branding guidelines: their mark on a white (or dark-grey) button,
     unmodified, with "Continue with Google" as the label. Don't restyle the G. */
  /* Google's own button, rendered in place. It used to sit off-screen with our
     button forwarding clicks to it — but a forwarded click is not a trusted
     gesture, so Google's popup was blocked every time. Their button has to be
     the thing you actually click, so we clip its corners to match the card
     instead of redrawing it. */
  .g-host{
    width:320px; max-width:100%; margin:0 auto;
    border-radius:12px; overflow:hidden;
    display:flex; justify-content:center;
  }
  /* Laid out but invisible until GSI has drawn its button: display:none would
     give the button no box, and "has it rendered?" is answered by its width.
     If the script is blocked we remove the block entirely, so a dead control
     and an orphaned "or" divider never reach the card. */
  #google-block{ opacity:0; pointer-events:none; transition:opacity .18s ease; }
  #google-block.ready{ opacity:1; pointer-events:auto; }

  /* Turnstile keeps a hidden holder div in here even when nothing is drawn, so
     :not(:empty) always matched and left a gap for everyone. The iframe only
     exists once a challenge is actually shown, so key the spacing off that. */
  .cf-turnstile:has(iframe){ margin-bottom:16px; }
  .or-divider{
    display:flex; align-items:center; gap:12px;
    margin:18px 0; color:var(--muted); font-size:12px;
  }
  .or-divider::before, .or-divider::after{
    content:''; flex:1; height:1px; background:var(--border);
  }
  .readonly-email{
    display:flex; align-items:center; gap:9px;
    background:var(--field); border:1px solid var(--border); border-radius:10px;
    padding:11px 13px; font-size:14px; color:var(--text);
  }

  a.brand,a.brand:hover,a.brand:focus,a.brand:active {text-decoration:none;color:inherit}
  a:focus-visible,button:focus-visible {outline:3px solid #d2c5ff;outline-offset:4px}
  [hidden] {display:none!important}
  #auth-turnstile {margin-top:12px;max-width:100%;}
  .auth-check-status {font-size:13px;line-height:1.5;color:#c7bedc;margin:12px 0 0}
  #auth-check-retry {display:inline-block;background:transparent;border:0;color:#c1afff;font:inherit;cursor:pointer;padding:10px 0;min-height:44px;text-decoration:underline}
  body:has(.login-card) {padding:40px 20px;background:radial-gradient(ellipse at 50% 0,#6e51b414,transparent 55%),#0d0f16}
  .login-card {width:424px;padding:34px 32px 28px;border:1px solid #ffffff12;border-radius:24px;background:linear-gradient(150deg,#1c1d28,#171922);box-shadow:0 20px 65px #0002}
  .login-card .brand {justify-content:center;gap:9px;width:fit-content;margin:0 auto 27px}
  .login-card h1 {text-align:center;font-size:30px;line-height:1.15;font-weight:600;letter-spacing:-.045em;margin:0 0 10px}
  .login-card .sub {text-align:center;margin:0 0 29px;font-size:14px;line-height:1.5;color:#aaa8ba}
  .login-card .field {margin-bottom:18px}
  .login-card label {color:#ccc9d7;margin-bottom:8px}
  .label-row {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
  .login-card .label-row label {margin:0}
  .label-row a {font-size:12px;line-height:24px;color:#c1afff;text-decoration:none}
  .label-row a:hover {text-decoration:underline}
  .login-card input:not([type=checkbox]) {height:52px;font-size:16px;border-radius:12px;background:#10121b}
  .password-wrap {position:relative}
  .login-card .password-wrap input {padding-right:68px}
  .toggle {position:absolute;right:5px;top:4px;height:44px;min-width:55px;padding:0 10px;border:0;background:transparent;color:#c1afff;font:inherit;font-size:12px;font-weight:500;border-radius:8px;cursor:pointer}
  .toggle:hover {background:#ffffff06}
  .login-card button.submit {height:50px;margin-top:24px;background:#6850c5;border:1px solid #b6a4ff40;box-shadow:inset 0 1px 0 #ffffff15,0 4px 12px #0002}
  .login-card button.submit:hover {background:#735bd0;filter:none;border-color:#c4b3ff70}
  .login-card button.submit:active {background:#5c43b4;transform:translateY(1px)}
  .login-card .alt {margin:25px 0 0;padding-top:23px;border-top:1px solid #ffffff0d;color:#aaa8ba;font-size:13px;line-height:1.7}
  .login-card .alt a {color:#c1afff;display:inline-block}
  @media(max-width:480px){body:has(.login-card){padding:24px 16px}.login-card{padding:29px 23px 25px;border-radius:21px}.login-card h1{font-size:28px}.login-card .brand{margin-bottom:24px}.login-card .sub{margin-bottom:25px}}
  @media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

.affiliate-auth-label{text-align:center;color:#c2aff7;font-size:11px;letter-spacing:.16em;margin:0 0 14px}.signup-card h1{line-height:1.2}