.waitlist-page { margin-inline: 30px; border-inline: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: clamp(120px, 16vh, 180px) clamp(24px, 5vw, 80px) 100px; display: grid; grid-template-columns: 1fr minmax(360px, 480px); gap: clamp(40px, 7vw, 110px); align-items: start; background: radial-gradient(ellipse at 50% 0, rgb(255 255 255 / 4%), transparent 65%); min-height: 85vh; }
.waitlist-intro { position: sticky; top: 140px; padding-top: 30px; }
.waitlist-eyebrow { display: flex; align-items: center; gap: 10px; color: #a4a4a4; font-size: 11px; font-weight: 500; letter-spacing: .1em; margin: 0 0 32px; }
.waitlist-eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: #d4d4d4; box-shadow: 0 0 12px rgb(255 255 255 / 25%); }
.waitlist-intro h1 { font-size: clamp(32px, 3.6vw, 58px); font-weight: 500; line-height: 1.12; letter-spacing: -.045em; margin: 0; }
/* Author copy as complete meaning units. Preserve two lines at normal sizes;
   allow wrapping at enlarged text sizes instead of clipping or shrinking text. */
.waitlist-intro h1 > span, .waitlist-description > span { display: block; }
.waitlist-description { margin: 28px 0 0; color: #a8a8a8; font-size: 16px; line-height: 1.75; }
.waitlist-stage { max-width: 330px; color: #929292; font-size: 13px; line-height: 1.7; margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--border); }
.waitlist-card { background: linear-gradient(145deg, #141414, #0b0b0b 60%); border: 1px solid #292929; border-radius: 20px; padding: 32px; box-shadow: 0 24px 80px rgb(0 0 0 / 16%); }
.waitlist-step { font-size: 10px; color: #929292; letter-spacing: .08em; }
.waitlist-card h2 { font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: -.025em; margin: 12px 0 30px; }
.waitlist-field > label, .waitlist-interests legend { display: block; font-size: 13px; font-weight: 500; margin-bottom: 10px; }
.waitlist-field > input { display: block; width: 100%; height: 48px; padding: 0 14px; background: #090909; border: 1px solid #353535; border-radius: 9px; color: #f5f5f5; font: inherit; font-size: 16px; transition: border-color 150ms; }
.waitlist-field > input::placeholder { color: #929292; }
.waitlist-field > input:hover { border-color: #555; }
.waitlist-field > input[aria-invalid="true"] { border-color: #fca5a5; }
.waitlist-field-error { color: #fca5a5; margin-top: 8px; font-size: 12px; }
.waitlist-interests { padding: 0; border: 0; margin: 26px 0 0; min-width: 0; }
.waitlist-interests legend > span { margin-left: 6px; color: #929292; font-size: 11px; font-weight: 400; }
.waitlist-options { display: grid; gap: 8px; }
.waitlist-options > label { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border: 1px solid #2a2a2a; border-radius: 9px; cursor: pointer; background: #101010; transition: border-color 150ms, background 150ms; }
.waitlist-options > label:hover { border-color: #555; background: #171717; }
.waitlist-options > label:has(input:checked) { border-color: #777; background: #1a1a1a; }
.waitlist-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.waitlist-options strong { display: block; font-size: 13px; line-height: 1.4; font-weight: 500; }
.waitlist-options small { display: block; margin-top: 4px; color: #a0a0a0; font-size: 11px; line-height: 1.5; }
.waitlist-check { display: grid; place-items: center; width: 16px; height: 16px; flex-shrink: 0; border: 1px solid #555; border-radius: 4px; }
input:checked ~ .waitlist-check { background: #eee; border-color: #eee; }
input:checked ~ .waitlist-check::after { content: ''; width: 8px; height: 4px; border-left: 1.5px solid #111; border-bottom: 1.5px solid #111; transform: translateY(-1px) rotate(-45deg); }
.waitlist-honey { display: none; }
.waitlist-consent { color: #999; font-size: 11px; line-height: 1.65; margin: 24px 0 18px; }
.waitlist-submit { display: flex; width: 100%; align-items: center; justify-content: center; gap: 12px; height: 48px; border: 1px solid #f5f5f5; border-radius: 999px; background: #f5f5f5; color: #111; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 150ms; }
.waitlist-submit:hover { background: #dedede; }
.waitlist-submit:disabled { opacity: .6; cursor: wait; }
.waitlist-status { color: #fca5a5; font-size: 12px; line-height: 1.6; margin-top: 12px; }
.waitlist-status:empty { display: none; }
.waitlist-page input:focus-visible, .waitlist-page button:focus-visible, .waitlist-page a:focus-visible, .waitlist-options > label:has(input:focus-visible) { outline: 2px solid #eee; outline-offset: 4px; }
.waitlist-success { padding: 16px 0 24px; }
.waitlist-success:focus { outline: none; }
.waitlist-success-mark { --success-accent: #008f51; display: block; flex: 0 0 1em; width: 1em; height: 1em; transform-origin: center; }
.waitlist-success-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.waitlist-success-disc { fill: var(--success-accent); }
.waitlist-success-tick { stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* One damped spring after confirmed success; the copy never waits on motion. */
:is(.waitlist-page, .waitlist-modal[open]) .waitlist-success:not([hidden]) .waitlist-success-mark { animation: waitlist-success-spring 1300ms 100ms backwards; }
:is(.waitlist-page, .waitlist-modal[open]) .waitlist-success:not([hidden]) .waitlist-success-tick { animation: waitlist-tick-draw 600ms cubic-bezier(.4, 0, .2, 1) 440ms backwards; }
@keyframes waitlist-success-spring {
  0% { transform: translateY(10px) scale(.35) rotate(-12deg); opacity: 0; animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  32% { transform: translateY(-3px) scale(1.16) rotate(5deg); opacity: 1; animation-timing-function: ease-in-out; }
  52% { transform: translateY(1px) scale(.94) rotate(-2deg); animation-timing-function: ease-in-out; }
  70% { transform: translateY(-1px) scale(1.045) rotate(1deg); animation-timing-function: ease-in-out; }
  86% { transform: translateY(0) scale(.987) rotate(0); animation-timing-function: ease-in-out; }
  100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}
@keyframes waitlist-tick-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.waitlist-success h3 { display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%; font-size: 27px; line-height: 1.25; letter-spacing: -.03em; font-weight: 500; margin: 0 0 20px; }
.waitlist-success-heading > span:first-child { min-width: 0; }
.waitlist-success p { color: #aaa; font-size: 15px; line-height: 1.7; }
.waitlist-success-description > span { display: block; }
.waitlist-success .waitlist-success-contact { margin-top: 22px; font-size: 13px; color: #929292; }
.waitlist-success-contact a { color: #d4d4d4; text-underline-offset: 4px; }
.waitlist-success-contact a:hover { color: #fff; text-decoration: underline; }
.waitlist-success > a { display: inline-flex; gap: 12px; align-items: center; margin-top: 28px; font-size: 13px; border-bottom: 1px solid #666; padding-bottom: 6px; }
.waitlist-page [hidden] { display: none !important; }
.waitlist-page input, .waitlist-success { scroll-margin-top: 100px; }
@media (min-width: 1600px) { .waitlist-page { padding-inline: max(80px, calc((100vw - 1200px) / 2)); } }
@media (max-width: 1023px) { .waitlist-page { grid-template-columns: 1fr; max-width: none; gap: 44px; padding: 120px 32px 64px; } .waitlist-intro { position: static; padding-top: 0; } .waitlist-intro h1 { font-size: clamp(32px, 6vw, 50px); } .waitlist-card { max-width: 540px; width: 100%; } .waitlist-stage { margin-top: 24px; } }
@media (max-width: 600px) { .waitlist-page { margin-inline: 16px; padding: 116px 20px 48px; gap: 32px; } .waitlist-eyebrow { margin-bottom: 26px; } .waitlist-intro h1 { font-size: clamp(29px, 8.3vw, 44px); } .waitlist-description { font-size: 14px; margin-top: 22px; } .waitlist-card { padding: 22px 18px; border-radius: 16px; } .waitlist-interests legend { font-size: 12px; } }
@media (max-width: 520px) { .waitlist-success h3 { font-size: 22px; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .waitlist-page * { transition: none !important; } .waitlist-success-mark, .waitlist-success-mark * { animation: none !important; } }