:root{
      --blue:#3157d6;
      --blue2:#39b7ff;
      --navy:#071d49;
      --ink:#17243f;
      --muted:#607089;
      --line:#dbe9f7;
      --gold:#ffc928;
      --green:#20b857;
      --red:#ff4655;
      --display:'Plus Jakarta Sans',Manrope,system-ui,sans-serif;
      --body:Manrope,system-ui,sans-serif;
      --shadow:0 28px 78px rgba(7,63,143,.14);
      --soft:0 12px 30px rgba(7,63,143,.075);
    }

    *{box-sizing:border-box}
    html,body{min-height:100%;margin:0}
    body{
      font-family:var(--body);
      color:var(--ink);
      background:
        radial-gradient(circle at 18% 18%,rgba(49,87,214,.10),transparent 30%),
        radial-gradient(circle at 82% 20%,rgba(255,201,40,.14),transparent 25%),
        radial-gradient(circle at 50% 92%,rgba(57,183,255,.16),transparent 34%),
        linear-gradient(135deg,#f8fdff 0%,#eef9ff 48%,#dff4ff 100%);
      -webkit-font-smoothing:antialiased;
      overflow:auto;
    }
    a{text-decoration:none;color:inherit}
    button,input{font-family:inherit}
    button{border:0;cursor:pointer;background:none}
    button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid rgba(49,87,214,.22);outline-offset:3px}

    .page{
      min-height:100svh;
      display:grid;
      place-items:center;
      padding:10px 14px;
      position:relative;
      overflow:hidden;
    }

    .decor-item{
      position:absolute;
      pointer-events:none;
      z-index:1;
    }

    .decor-plus{
      width:70px;
      height:70px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(32,184,87,.07);
      border:1px solid rgba(32,184,87,.10);
      color:rgba(32,184,87,.26);
      font-family:var(--display);
      font-size:21px;
      font-weight:950;
      box-shadow:0 14px 30px rgba(32,184,87,.05);
    }

    .decor-gift,
    .decor-trophy{
      display:grid;
      place-items:center;
      border-radius:24px;
      box-shadow:0 14px 30px rgba(7,63,143,.04);
    }

    .decor-gift{
      width:86px;
      height:86px;
      background:rgba(255,201,40,.055);
      border:1px solid rgba(255,201,40,.10);
      color:rgba(236,159,12,.22);
    }

    .decor-trophy{
      width:82px;
      height:82px;
      background:rgba(49,87,214,.055);
      border:1px solid rgba(49,87,214,.10);
      color:rgba(7,29,73,.24);
    }

    .decor-gift svg,.decor-trophy svg{
      width:42px;
      height:42px;
      stroke:currentColor;
      stroke-width:2.1;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
    }

    .plus-1{left:6%;top:10%;transform:rotate(-10deg)}
    .plus-2{left:12%;top:33%;transform:rotate(8deg)}
    .plus-3{left:18%;bottom:14%;transform:rotate(-6deg)}
    .plus-4{right:12%;top:12%;transform:rotate(9deg)}
    .plus-5{right:7%;top:35%;transform:rotate(-7deg)}
    .plus-6{right:15%;bottom:15%;transform:rotate(6deg)}
    .plus-7{left:48%;bottom:8%;transform:translateX(-50%) rotate(-4deg)}

    .gift-1{left:25%;top:14%;transform:rotate(-8deg)}
    .gift-2{right:22%;top:24%;transform:rotate(7deg)}
    .gift-3{left:8%;bottom:26%;transform:rotate(9deg)}
    .gift-4{right:24%;bottom:11%;transform:rotate(-10deg)}

    .trophy-2{right:32%;bottom:21%;transform:rotate(6deg)}

    .auth-card{
      width:min(629px,100%);
      background:rgba(255,255,255,.97);
      border:1px solid rgba(7,119,217,.14);
      border-radius:28px;
      box-shadow:var(--shadow);
      padding:15px 24px 14px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      position:relative;
      overflow:hidden;
      z-index:2;
    }
    .auth-card:before{
      content:"";
      position:absolute;
      inset:0 0 auto;
      height:5px;
      background:linear-gradient(90deg,var(--blue),var(--blue2));
    }

    .auth-logo{
      display:flex;
      justify-content:center;
      align-items:center;
      margin:0 auto 8px;
    }
    .auth-logo img{
      height:66px;
      width:auto;
      max-width:330px;
      object-fit:contain;
    }

    .form-head{
      text-align:center;
      margin-bottom:8px;
      min-height:0;
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
    }
    .form-head h1{
      margin:0 0 10px;
      font-family:var(--display);
      color:var(--navy);
      font-size:30px;
      line-height:1;
      letter-spacing:-1.1px;
      font-weight:800;
    }
    .form-head p{
      margin:0 auto 17px;
      max-width:560px;
      color:#566b86;
      font-size:13px;
      font-weight:600;
      line-height:1.25;
      min-height:0;
    }

    .form-zone{min-height:204px}
    .field{display:grid;gap:4px}
    .field label{font-size:11.5px;font-weight:900;color:#243856}
    .input-wrap{
      height:40px;
      border:1.5px solid #d8e6f4;
      background:#fff;
      border-radius:15px;
      display:flex;
      align-items:center;
      padding:0 14px 0 14px;
      box-shadow:0 8px 20px rgba(7,63,143,.035);
      position:relative;
    }
    .input-wrap:focus-within{border-color:#93cbff;box-shadow:0 0 0 4px rgba(20,121,246,.10)}
    .input-wrap input{
      width:100%;
      height:100%;
      border:0;
      outline:0;
      background:transparent;
      color:var(--ink);
      font-size:14px;
      font-weight:700;
      padding-right:38px;
    }
    .password-toggle{
      position:absolute;
      right:8px;
      top:50%;
      transform:translateY(-50%);
      width:32px;
      height:32px;
      border-radius:11px;
      display:grid;
      place-items:center;
      color:#607089;
    }
    .password-toggle:hover{background:#f1f7ff;color:var(--blue)}
    .password-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

    .primary{
      width:100%;
      height:42px;
      min-height:42px;
      border-radius:15px;
      background:linear-gradient(135deg,#071d49,#3157d6);
      color:#fff;
      font-weight:950;
      font-size:14px;
      box-shadow:0 16px 30px rgba(7,63,143,.20);
      margin-top:2px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .primary:hover{transform:translateY(-1px)}

    .status{
      min-height:16px;
      text-align:center;
      color:#607089;
      font-size:11.5px;
      font-weight:800;
      margin-top:5px;
    }
    .status.error{color:#c93643}
    .status.success{color:#16964a}

    .signup-link-panel{
      margin:10px 0 0;
      padding:7px 10px;
      border:1px solid #d8e7f7;
      border-radius:14px;
      background:linear-gradient(135deg,#f7fbff,#fff);
      text-align:center;
      box-shadow:0 6px 16px rgba(7,63,143,.04);
    }
    .signup-link-panel a{display:inline-flex;color:var(--blue);font-size:12px;font-weight:900}

    .smallprint{
      text-align:center;
      margin:10px 0 0;
      color:#7f8fa8;
      font-size:9.8px;
      font-weight:600;
      line-height:1.25;
    }
    .smallprint a{color:var(--blue);font-weight:900}

    .tester-note{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      max-width:100%;
      min-height:34px;
      border-radius:999px;
      background:#fff;
      border:1.5px solid #3157d6;
      color:#3157d6;
      padding:6px 13px;
      font-size:13.2px;
      font-weight:650;
      line-height:1.25;
      letter-spacing:-.1px;
      white-space:nowrap;
      margin:0 auto 12px;
      box-shadow:0 8px 18px rgba(49,87,214,.08);
    }

    .create-form-zone,
    .create-form{min-height:0}
    .create-form{display:grid;gap:14px;align-content:start}
    .form-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      align-items:start;
    }

    .password-row{
      grid-template-columns:1fr 1fr;
      gap:12px;
      align-items:start;
    }

    .helper{color:#71819c;font-size:10.7px;font-weight:700;line-height:1.15;margin-top:-2px}
    .primary.loading{opacity:.78;pointer-events:none}
    .spinner{
      width:17px;
      height:17px;
      border-radius:50%;
      border:2px solid rgba(255,255,255,.35);
      border-top-color:#fff;
      display:none;
      margin-right:8px;
      animation:spin .8s linear infinite;
    }
    .primary.loading .spinner{display:inline-block}
    @keyframes spin{to{transform:rotate(360deg)}}

    @media(max-width:620px){
      .page{padding:10px 12px;place-items:start center;overflow:auto}
      .decor-item{display:none}
      .auth-card{border-radius:26px;padding:15px 15px 13px;margin-top:0}
      .auth-logo img{height:63px}
      .tester-note{
        white-space:normal;
        width:100%;
        border-radius:14px;
        text-align:center;
        font-size:12.6px;
        line-height:1.15;
      }
      .form-head h1{font-size:27px;margin-bottom:10px}
      .form-row,.password-row{grid-template-columns:1fr;gap:12px}
      .input-wrap,.primary{height:40px;min-height:40px}
    }


    /* Requested: email address field 50% width on desktop */
    .email-field{
      width:50%;
    }

    @media(max-width:620px){
      .email-field{
        width:100%;
      }
    }

    @media(max-height:700px) and (min-width:621px){
      .page{padding:8px 14px}
      .auth-card{padding:13px 24px 12px;border-radius:26px}
      .auth-logo{margin-bottom:6px}
      .auth-logo img{height:60px}
      .form-head{margin-bottom:10px}
      .form-head h1{font-size:27px;margin-bottom:10px}
      .form-head p{font-size:12px;margin-top:0}
      .tester-note{margin-bottom:17px;min-height:31px;font-size:12.6px}
      .create-form{gap:12px}
      .form-row{gap:15px}
      .input-wrap,.primary{height:38px;min-height:38px}
      .status{margin-top:4px}
      .signup-link-panel{padding:6px 10px;margin-top:10px}
      .smallprint{margin-top:10px}
    }

/* Page section */

.starter-note{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:34px;border-radius:999px;background:#eefcf4;border:1.5px solid #bfead0;color:#167b4f;padding:7px 14px;font-size:12.8px;font-weight:850;line-height:1.25;text-align:center;margin:0 auto 10px;box-shadow:0 8px 18px rgba(32,184,87,.07)}
  .starter-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:2px 0 11px}
  .starter-detail{min-width:0;min-height:74px;padding:10px 9px;border-radius:14px;background:linear-gradient(180deg,#fff,#f5faff);border:1px solid #d9e8f7;box-shadow:0 7px 18px rgba(7,63,143,.045);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center}
  .starter-detail-icon{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#eafbf2;color:#168b52;font-size:12px;font-weight:950;margin-bottom:6px}
  .starter-detail strong{display:block;color:#193354;font-size:10.5px;line-height:1.18;font-weight:900}
  .starter-detail small{display:block;color:#667994;font-size:9.2px;line-height:1.25;font-weight:650;margin-top:3px}
  .plan-intent{display:none;margin:-2px 0 9px;padding:8px 11px;border-radius:12px;background:#fff8df;border:1px solid #f6df91;color:#6c5511;font-size:10.5px;line-height:1.35;font-weight:750;text-align:center}
  .plan-intent.visible{display:block}
  .privacy-note{margin:8px 0 0;color:#667994;font-size:10.3px;line-height:1.35;font-weight:650;text-align:center}
  .privacy-note b{color:#334b6b}
  @media(max-width:620px){.starter-note{width:100%;border-radius:14px}.starter-details{grid-template-columns:1fr;gap:7px}.starter-detail{min-height:58px;display:grid;grid-template-columns:28px 1fr;column-gap:9px;text-align:left;align-items:center;padding:8px 10px}.starter-detail-icon{grid-row:1/3;margin:0}.starter-detail strong,.starter-detail small{text-align:left}.auth-card{margin-bottom:12px}}

  .confirmation-panel{display:none;text-align:center;padding:4px 4px 2px}
  .confirmation-panel.show{display:block}
  .confirmation-icon{width:66px;height:66px;margin:2px auto 13px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,#eaf4ff,#f7fbff);border:1px solid #cfe2ff;color:var(--blue);box-shadow:0 14px 30px rgba(49,87,214,.12)}
  .confirmation-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .confirmation-panel h2{margin:0;font-family:var(--display);color:var(--navy);font-size:27px;line-height:1.05;letter-spacing:-.8px}
  .confirmation-lead{margin:10px auto 8px;max-width:480px;color:#526984;font-size:13.5px;line-height:1.48;font-weight:650}
  .confirmation-email{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:38px;margin:3px auto 11px;padding:8px 14px;border-radius:999px;background:#eef5ff;border:1px solid #cfe2ff;color:#183a70;font-size:13px;font-weight:900;overflow-wrap:anywhere}
  .confirmation-value{max-width:500px;margin:0 auto 14px;color:#5f718b;font-size:12px;line-height:1.45;font-weight:650}
  .confirmation-value b{color:var(--navy)}
  .confirmation-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  .confirmation-actions .primary{margin:0}
  .secondary-action{width:100%;height:42px;border-radius:15px;border:1px solid #cfe0f2;background:#fff;color:var(--blue);font-size:13px;font-weight:900;box-shadow:0 8px 18px rgba(7,63,143,.055)}
  .secondary-action:hover{background:#f7fbff}
  .resend-status{min-height:18px;margin-top:9px;color:#607089;font-size:11.5px;line-height:1.4;font-weight:800}
  .resend-status.success{color:#168b52}.resend-status.error{color:#c93643}
  .confirmation-help{margin:4px 0 0;color:#7b8ca2;font-size:10.5px;line-height:1.4;font-weight:650}
  .confirmation-panel[hidden]{display:none!important}
  @media(max-width:620px){.confirmation-actions{grid-template-columns:1fr}.confirmation-panel h2{font-size:25px}.confirmation-email{border-radius:14px;width:100%}}