:root{
      --ink:#14213a;
      --muted:#8b9abb;
      --blue:#1677ff;
      --blue-deep:#0867ef;
      --blue-pale:#f4f8ff;
      --line:#e5edf8;
      --red:#e2092f;
      --red-pale:#fff9fa;
      --red-line:#ffe0e4;
      --green:#00a25a;
      --green-pale:#f3fff8;
      --shadow:0 20px 60px rgba(32,98,180,.055);
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:#fff;color:var(--ink)}
    body{
      min-height:100vh;
      overflow-x:hidden;
      font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      position:relative;
    }

    .page{
      position:relative;
      min-height:100vh;
      isolation:isolate;
      overflow:hidden;
      background:
        radial-gradient(circle at 50% 34%, rgba(71,143,255,.025), transparent 34%),
        linear-gradient(#fff,#fff);
    }

    .orb{
      position:absolute;
      border-radius:50%;
      z-index:-2;
      pointer-events:none;
      filter:blur(.1px);
    }
    .orb.left{
      width:360px;height:360px;
      left:-180px;top:130px;
      background:radial-gradient(circle at 72% 46%, rgba(99,166,255,.13), rgba(99,166,255,.055) 42%, rgba(99,166,255,0) 73%);
    }
    .orb.right{
      width:430px;height:430px;
      right:-235px;top:415px;
      background:radial-gradient(circle at 26% 46%, rgba(99,166,255,.13), rgba(99,166,255,.05) 45%, rgba(99,166,255,0) 74%);
    }

    .dots{position:absolute;display:grid;grid-template-columns:repeat(5,4px);gap:13px;opacity:.72;z-index:-1;pointer-events:none}
    .dots span{width:4px;height:4px;border-radius:50%;background:#97c5ff;display:block}
    .dots.left{left:35px;top:440px}
    .dots.right{right:83px;top:194px}

    .shell{width:min(980px,calc(100% - 48px));margin:0 auto}

    header{
      height:108px;
      display:flex;align-items:center;justify-content:space-between;
      padding-top:4px;
    }
    .logo{
      text-decoration:none;
      font-size:34px;
      line-height:1;
      font-weight:800;
      letter-spacing:-1.9px;
      color:var(--ink);
    }
    .logo .blue{color:#2782ff}

    .kofi{
      height:48px;
      display:inline-flex;align-items:center;gap:10px;
      padding:0 18px;
      border-radius:999px;
      border:1px solid #cfe2fb;
      background:linear-gradient(180deg,#fbfdff 0%,#f4f8ff 100%);
      color:#315787;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 20px rgba(30,105,205,.06);
      text-decoration:none;
      font-weight:600;
      font-size:16px;
      letter-spacing:-.15px;
      transition:transform .15s ease,box-shadow .15s ease;
    }
    .kofi:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 9px 24px rgba(30,105,205,.10)}
    .kofi-icon{width:29px;height:29px;display:block;flex:0 0 auto}

    main{padding-top:14px;text-align:center}
    .bell-wrap{
      width:132px;height:132px;border-radius:50%;
      display:grid;place-items:center;
      margin:0 auto 31px;
      background:radial-gradient(circle at 50% 42%,#fbfdff 0%,#f3f8ff 62%,#eef6ff 100%);
      box-shadow:inset 0 0 28px rgba(66,137,255,.06);
    }
    .bell-wrap svg{width:74px;height:74px;filter:drop-shadow(0 7px 12px rgba(30,117,255,.16))}

    .eyebrow{
      margin:0 0 16px;
      font-size:14px;
      font-weight:700;
      letter-spacing:7px;
      color:#64799c;
      text-transform:uppercase;
    }
    h1{
      margin:0 auto;
      max-width:760px;
      font-size:67px;
      line-height:1.01;
      font-weight:800;
      letter-spacing:-4.3px;
      color:#15213a;
    }
    .sub{
      max-width:700px;
      margin:25px auto 40px;
      color:#8b9abb;
      font-size:25px;
      line-height:1.55;
      font-weight:400;
      letter-spacing:-.7px;
    }

    .status{
      width:min(840px,100%);
      margin:0 auto 37px;
      min-height:132px;
      border-radius:19px;
      border:1px solid var(--red-line);
      background:linear-gradient(180deg,#fffafb 0%,#fff6f7 100%);
      box-shadow:0 14px 38px rgba(212,49,80,.025);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:34px;
      text-align:left;
      padding:20px 34px;
    }
    .status-icon{
      width:90px;height:90px;border-radius:50%;flex:0 0 auto;
      display:grid;place-items:center;
      background:radial-gradient(circle at 35% 32%,#ffe8eb 0%,#ffd9df 68%,#ffd3da 100%);
    }
    .status-icon svg{width:43px;height:43px}
    .status-title{
      margin:0 0 4px;
      color:#d93450;
      font-size:27px;
      font-weight:750;
      letter-spacing:-.9px;
    }
    .status-copy{margin:0;color:#d06a7b;font-size:19px;font-weight:450;letter-spacing:-.2px}

    .signup-card{
      width:min(875px,100%);
      margin:0 auto 57px;
      border:1px solid #e3ebf6;
      border-radius:18px;
      background:rgba(255,255,255,.92);
      box-shadow:var(--shadow);
      padding:31px 33px 27px;
    }
    .form-row{display:grid;grid-template-columns:1fr 215px;gap:14px;align-items:center}
    .email-box{
      height:70px;
      border:1px solid #dce5f1;
      border-radius:13px;
      display:flex;align-items:center;gap:16px;
      padding:0 22px;
      background:#fff;
      box-shadow:inset 0 1px 0 rgba(16,60,120,.015);
    }
    .email-box svg{width:27px;height:27px;flex:0 0 auto;color:#7a8ead}
    .email-box input{
      width:100%;height:100%;border:0;outline:0;background:transparent;
      font:inherit;color:#405273;font-size:19px;font-weight:400;
      letter-spacing:-.2px;
    }
    .email-box input::placeholder{color:#9aaac4;opacity:1}
    .notify-btn{
      height:70px;
      border:0;border-radius:13px;
      display:flex;align-items:center;justify-content:center;gap:14px;
      background:linear-gradient(135deg,#2b83ff 0%,#0868ef 70%,#0864e8 100%);
      color:#fff;font:inherit;font-size:20px;font-weight:700;
      cursor:pointer;
      box-shadow:0 12px 24px rgba(8,104,239,.22),inset 0 1px 0 rgba(255,255,255,.24);
      transition:transform .15s ease,box-shadow .15s ease;
    }
    .notify-btn:hover{transform:translateY(-1px);box-shadow:0 15px 28px rgba(8,104,239,.26),inset 0 1px 0 rgba(255,255,255,.24)}
    .notify-btn svg{width:25px;height:25px}

    .microcopy{
      margin:23px 0 0;
      display:flex;justify-content:center;align-items:center;gap:14px;
      color:#7184a4;font-size:15.5px;font-weight:500;letter-spacing:-.1px;
    }
    .microcopy .dot{width:5px;height:5px;border-radius:50%;background:#1781ff}

    .features{
      width:min(920px,100%);
      margin:0 auto 78px;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:70px;
    }
    .feature{text-align:center}
    .feature-icon{
      width:92px;height:92px;border-radius:50%;margin:0 auto 17px;
      display:grid;place-items:center;
    }
    .feature-icon svg{width:46px;height:46px}
    .feature-icon.blue{background:radial-gradient(circle at 35% 30%,#f8fbff 0%,#f0f6ff 70%,#edf4ff 100%)}
    .feature-icon.green{background:radial-gradient(circle at 35% 30%,#f7fffb 0%,#eefaf4 70%,#ebf8f1 100%)}
    .feature-icon.red{background:radial-gradient(circle at 35% 30%,#fffafb 0%,#fff1f3 70%,#ffedf0 100%)}
    .feature h2{margin:0 0 12px;font-size:21px;line-height:1.1;font-weight:780;letter-spacing:-.7px;color:#18243b}
    .feature p{margin:0 auto;max-width:235px;color:#91a0be;font-size:16.5px;line-height:1.65;letter-spacing:-.2px}

    footer{
      width:min(940px,100%);
      margin:0 auto;
      border-top:1px solid #e7edf6;
      padding:29px 0 46px;
      text-align:center;
    }
    .disclaimer{margin:0;color:#98a6bf;font-size:14.5px;letter-spacing:-.15px}
    .copyright{margin:27px 0 0;color:#a0adc3;font-size:14.5px;letter-spacing:-.15px}

    .form-message{height:0;overflow:hidden;font-size:13px;color:#61789d;transition:height .2s ease,margin .2s ease}
    .form-message.show{height:auto;margin-top:12px}

    /* Responsive sizing: CSS adapts automatically to the viewport, no device sniffing needed. */
    @media (max-width: 820px){
      .shell{width:min(100% - 32px,680px)}
      header{height:82px}
      .logo{font-size:27px}
      .kofi{height:41px;padding:0 14px;font-size:13.5px;gap:8px}
      .kofi-icon{width:24px;height:24px}
      main{padding-top:8px}
      .bell-wrap{width:108px;height:108px;margin-bottom:22px}
      .bell-wrap svg{width:62px;height:62px}
      .eyebrow{font-size:11.5px;letter-spacing:5.2px;margin-bottom:13px}
      h1{font-size:clamp(40px,7.2vw,48px);letter-spacing:-2.8px;max-width:590px}
      .sub{font-size:clamp(18px,3vw,20px);max-width:560px;margin:19px auto 29px}
      .status{min-height:112px;gap:22px;padding:17px 22px;margin-bottom:25px}
      .status-icon{width:74px;height:74px}
      .status-icon svg{width:36px;height:36px}
      .status-title{font-size:22px}.status-copy{font-size:16px}
      .signup-card{padding:23px 23px 21px;margin-bottom:40px}
      .form-row{grid-template-columns:1fr 176px}
      .email-box,.notify-btn{height:61px}
      .notify-btn{font-size:17.5px}
      .microcopy{font-size:13.5px;gap:10px;margin-top:18px}
      .features{gap:24px;margin-bottom:54px}
      .feature-icon{width:78px;height:78px}.feature-icon svg{width:39px;height:39px}
      .feature h2{font-size:18.5px}.feature p{font-size:14.5px;max-width:205px}
      footer{padding-top:24px}
      .dots.right{right:35px}.dots.left{left:25px}
    }

    @media (max-width: 600px){
      .page{overflow:hidden;background:#fff}
      .shell{width:calc(100% - 24px)}
      header{height:70px}
      .logo{font-size:clamp(21px,6.2vw,25px);letter-spacing:-1.2px}
      .kofi{height:36px;padding:0 10px;font-size:clamp(10.5px,3.1vw,12.5px);gap:6px;white-space:nowrap}
      .logo,.kofi{transform:translateY(-12px)}
      .kofi-icon{width:21px;height:21px}
      main{padding-top:2px}
      .bell-wrap{width:88px;height:88px;margin-bottom:15px}
      .bell-wrap svg{width:51px;height:51px}
      .eyebrow{font-size:9.5px;letter-spacing:4.2px;margin-bottom:10px}
      h1{font-size:clamp(31px,9.1vw,37px);letter-spacing:-2.2px;line-height:1.04;max-width:430px}
      .sub{font-size:clamp(15px,4.4vw,17px);line-height:1.45;margin:14px auto 20px;max-width:410px}
      .desktop-break{display:none}
      .status{min-height:auto;gap:13px;padding:15px 14px;border-radius:15px;margin-bottom:16px;justify-content:flex-start}
      .status-icon{width:58px;height:58px}.status-icon svg{width:29px;height:29px}
      .status-title{font-size:clamp(16px,4.9vw,18px);letter-spacing:-.4px;line-height:1.12;margin-bottom:4px}
      .status-copy{font-size:clamp(12.5px,3.8vw,14px);line-height:1.28}
      .signup-card{padding:14px;border-radius:15px;margin-bottom:31px}
      .form-row{grid-template-columns:1fr;gap:10px}
      .email-box,.notify-btn{height:54px}
      .email-box{padding:0 15px;gap:13px}
      .email-box input{font-size:clamp(14px,4vw,16px)}
      .email-box svg{width:21px;height:21px}
      .notify-btn{font-size:16px;gap:10px}
      .notify-btn svg{width:22px;height:22px}
      .microcopy{flex-wrap:wrap;gap:6px 9px;font-size:11.5px;line-height:1.25;margin-top:13px}
      .features{grid-template-columns:1fr;gap:28px;margin-bottom:34px}
      .feature-icon{width:68px;height:68px;margin-bottom:11px}
      .feature-icon svg{width:35px;height:35px}
      .feature h2{font-size:18px;margin-bottom:6px}
      .feature p{font-size:14px;max-width:280px;line-height:1.45}
      footer{padding:18px 8px 24px}
      .disclaimer,.copyright{font-size:11.5px}
      .copyright{margin-top:15px}
      .orb.left{width:250px;height:250px;left:-150px;top:105px}
      .orb.right{width:300px;height:300px;right:-190px;top:430px}
      .dots.left{top:365px;left:14px;gap:10px}
      .dots.right{top:135px;right:18px;gap:10px}
      .dots{grid-template-columns:repeat(5,3px)}
      .dots span{width:3px;height:3px}
    }

    @media (max-width: 390px){
      .shell{width:calc(100% - 20px)}
      header{height:64px}
      .logo{font-size:21px}
      .kofi{height:34px;padding:0 9px;font-size:10.5px}
      .logo,.kofi{transform:translateY(-12px)}
      .kofi-icon{width:20px;height:20px}
      .bell-wrap{width:82px;height:82px;margin-bottom:13px}
      .bell-wrap svg{width:48px;height:48px}
      .eyebrow{font-size:9px;letter-spacing:3.8px;margin-bottom:9px}
      h1{font-size:30px;letter-spacing:-1.9px}
      .sub{font-size:14.5px;margin:12px auto 18px}
      .status{padding:13px 12px;gap:11px;margin-bottom:14px}
      .status-icon{width:54px;height:54px}
      .status-icon svg{width:27px;height:27px}
      .status-title{font-size:15.5px}
      .status-copy{font-size:12.5px}
      .signup-card{padding:12px;margin-bottom:28px}
      .email-box,.notify-btn{height:50px}
      .email-box input{font-size:14px}
      .notify-btn{font-size:15.5px}
      .microcopy{font-size:10.8px;margin-top:11px}
    }

.notify-btn:disabled {
  opacity: .72;
  cursor: wait;
  transform: none;
}

/* Functional-only helpers; closed-state design remains unchanged. */
.hp-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.status[data-open="true"] {
  border-color: #ccefdc;
  background: linear-gradient(180deg, #f8fff9 0%, #effbf4 100%);
  box-shadow: 0 14px 38px rgba(0, 162, 90, .025);
}
.status[data-open="true"] .status-icon {
  background: radial-gradient(circle at 35% 32%, #e5fff0 0%, #d5f7e4 68%, #ccf2dd 100%);
}
.status[data-open="true"] .status-title { color: #00894c; }
.status[data-open="true"] .status-copy { color: #4f8f70; }

/* Shown only when anti-bot verification is required. It has no effect on normal layout. */
.turnstile-container {
  display: none;
  width: min(100%, 340px);
  margin: 14px auto 0;
  min-height: 0;
}
.turnstile-container.show {
  display: block;
}

/* While registrations are open, the server remains authoritative and signup is paused. */
.signup-card[data-registration-open="true"] .email-box {
  background: #f8fbff;
  border-color: #dce6f3;
}
.signup-card[data-registration-open="true"] .email-box input {
  color: #7f91b8;
  cursor: not-allowed;
}
.signup-card[data-registration-open="true"] .notify-btn {
  cursor: not-allowed;
  opacity: 1;
  background: #f1f4f8;
  color: #7d8ca6;
  border: 1px solid #dde5ef;
  box-shadow: none;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.15px;
}
.signup-card[data-registration-open="true"] .notify-btn svg {
  display: none;
}
.signup-card[data-registration-open="true"] .microcopy {
  color: #6f83a8;
}

@media (max-width: 600px) {
  .signup-card[data-registration-open="true"] .notify-btn {
    font-size: 14px;
  }
}

/* Prevent a false CLOSED flash before /api/status resolves. Layout space is preserved. */
.status[data-status-ready="false"],
.signup-card[data-status-ready="false"] {
  visibility: hidden;
  opacity: 0;
}
.status[data-status-ready="true"],
.signup-card[data-status-ready="true"] {
  visibility: visible;
  opacity: 1;
  transition: opacity 120ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .status[data-status-ready="true"],
  .signup-card[data-status-ready="true"] {
    transition: none;
  }
}