
.morph-preview{margin:20px auto 0;width:min(390px,100%);--pill:280px;--orb:48px;--gap:16px}
.morph-filter{position:absolute;width:0;height:0;overflow:hidden}
.morph-stage{position:relative;isolation:isolate;height:54px;width:260px;margin:auto;transition:width 550ms cubic-bezier(.22,1,.36,1)}
.morph-shapes{position:absolute;inset:-12px;filter:url(#cta-goo);pointer-events:none;z-index:-1}
.morph-pill{position:absolute;left:12px;top:12px;height:54px;width:260px;border-radius:999px;background:#fff;transition:width 550ms cubic-bezier(.22,1,.36,1)}
.morph-orb{position:absolute;right:12px;top:15px;width:48px;height:48px;border-radius:50%;background:#fff;transform:translateX(-65px) scale(.5);opacity:0;transition:transform 550ms cubic-bezier(.22,1,.36,1),opacity 180ms ease}
.morph-trigger,.morph-success{position:absolute;inset:0;width:100%;height:54px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;background:transparent;color:#111;font-size:15px;font-weight:500;padding:0 18px;transition:transform 150ms ease}
.morph-preview svg:not(.morph-filter){width:20px;height:20px;flex:0 0 20px}
.morph-trigger:hover{transform:scale(1.025)}.morph-trigger:active,.morph-success:active{transform:scale(.97)}
.morph-form{position:absolute;inset:0;display:flex;align-items:center;gap:var(--gap);opacity:0;transition:opacity 180ms ease 120ms}
.morph-email{display:flex;align-items:center;gap:10px;width:var(--pill);padding:0 16px;height:54px;color:#555;min-width:0}
.morph-email input{width:100%;min-width:0;border:0;outline:0;background:none;color:#111;font-size:15px;padding:0;height:44px;box-shadow:none}
.morph-email input::placeholder{color:#8c8c8c}.morph-email:focus-within{outline:2px solid #f8b414;outline-offset:3px;border-radius:999px}
.morph-submit{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;padding:0;border:0;border-radius:50%;color:#111;background:transparent;transition:transform 150ms ease}
.morph-submit:hover{transform:scale(1.08)}.morph-submit:active{transform:scale(.94)}
.morph-preview[data-state="open"] .morph-stage{width:calc(var(--pill) + var(--gap) + var(--orb))}
.morph-preview[data-state="open"] .morph-pill{width:var(--pill)}
.morph-preview[data-state="open"] .morph-orb{transform:translateX(0) scale(1);opacity:1}
.morph-preview[data-state="open"] .morph-form{opacity:1}
.morph-preview [hidden]{display:none!important}.morph-note{font-size:10px;color:var(--soft);margin:13px 0 0;line-height:1.5}
.morph-preview button:focus-visible{outline:2px solid #f8b414;outline-offset:4px}
@media(max-width:420px){.morph-preview{--pill:calc(100vw - 112px);--gap:12px}.morph-stage,.morph-pill{width:230px}.morph-preview{max-width:100%}.morph-email input{font-size:16px}}
@media(prefers-reduced-motion:reduce){.morph-preview *{transition:none!important;transform:none!important}.morph-shapes{filter:none}}
.morph-email input:focus-visible{outline:none;box-shadow:none}

/* Match the hero action's proportions and warm glass material. */
.morph-preview{--pill:250px;--orb:46px;--gap:12px;margin-top:16px}
.morph-stage{height:46px;width:218px}
.morph-pill{height:46px;width:218px;background:linear-gradient(135deg,#40351c,#26251d 48%,#302a19);border:1px solid #f8b41470;box-shadow:inset 0 1px 0 #ffffff35}
.morph-orb{top:12px;width:46px;height:46px;background:#302a1b;border:1px solid #ffffff30}
.morph-trigger,.morph-success{height:46px;padding:12px 22px;color:#fff5d9;font-size:14px;line-height:20px;gap:10px}
.morph-preview svg:not(.morph-filter){width:18px;height:18px;flex-basis:18px}
.morph-email{height:46px;padding:0 15px;color:#c4c4bc}.morph-email input{height:44px;color:#f5f5f5;font-size:14px}.morph-email input::placeholder{color:#aaa99f}
.morph-submit{width:46px;height:46px;flex-basis:46px;color:#fff5d9}
.morph-email:focus-within,.morph-email input:focus,.morph-email input:focus-visible,.morph-preview button:focus,.morph-preview button:focus-visible{outline:none;box-shadow:none}
/* Keyboard focus uses a neutral edge, without a second outline. */
.morph-preview:has(:focus-visible) .morph-pill{border-color:#ffffff80}
.morph-note{margin-top:10px}
@media(max-width:560px){.morph-preview{--orb:44px;--pill:min(250px,calc(100vw - 112px))}.morph-stage,.morph-pill{width:202px;height:44px}.morph-trigger,.morph-success,.morph-email{height:44px}.morph-trigger,.morph-success{font-size:12px;padding:11px 16px}.morph-submit,.morph-orb{width:44px;height:44px;flex-basis:44px}.morph-email input{font-size:16px}}
/* Secondary glass appearance, shared glow, and reversible 550ms movement. */
.morph-pill{background:linear-gradient(110deg,#171818 5%,#232524 100%);border-color:#ffffff24;box-shadow:inset 0 1px 0 #ffffff14,0 2px 6px #0003}
.morph-orb{background:linear-gradient(110deg,#171818,#232524);border-color:#ffffff24;transition:transform 550ms cubic-bezier(.22,1,.36,1),opacity 550ms cubic-bezier(.22,1,.36,1)}
.morph-trigger,.morph-success,.morph-submit{color:#f5f5f5}
.morph-trigger{opacity:1;transition:opacity 200ms ease 150ms,transform 150ms ease}
.morph-preview[data-state="open"] .morph-trigger{opacity:0;pointer-events:none;transition-delay:0ms}
.morph-form{transition:opacity 200ms ease;pointer-events:none}
.morph-preview[data-state="open"] .morph-form{pointer-events:auto;transition-delay:150ms}
.morph-trigger::before,.morph-success::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(95px circle at var(--morph-x,50%) var(--morph-y,50%),#ffe3a0,#f8b414 35%,transparent);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;opacity:0;pointer-events:none;transition:opacity 250ms ease}
.morph-trigger:hover::before,.morph-success:hover::before{opacity:1}
.morph-trigger:hover,.morph-success:hover{box-shadow:0 0 18px #f8b41412;transform:none}
.morph-submit:hover{box-shadow:0 0 16px #f8b41425}
@media(prefers-reduced-motion:reduce){.morph-preview *,.morph-preview *::before{transition:none!important}}
/* Keep surface colors out of the alpha-amplifying goo filter. */
.morph-shapes{filter:none}
.morph-pill,.morph-orb{background:linear-gradient(110deg,#181818 5%,#242424 100%);border-color:#ffffff24;box-shadow:inset 0 1px 0 #ffffff14,0 2px 6px #0003}
/* Waitlist is also a secondary action: neutral white edge light. */
.morph-trigger::before,.morph-success::before{background:radial-gradient(95px circle at var(--morph-x,50%) var(--morph-y,50%),#fff,#e8e8e8 35%,transparent)}
.morph-trigger:hover,.morph-success:hover{box-shadow:0 0 18px #ffffff12}
.morph-submit:hover{box-shadow:0 0 16px #ffffff25}

/* The sole hero action keeps its material/motion; fit the longer label on one line. */
.morph-single-cta{margin-top:28px}
.morph-single-cta .morph-stage,.morph-single-cta .morph-pill{width:260px}
.morph-single-cta .morph-trigger span{white-space:nowrap}
@media(max-width:560px){.morph-single-cta .morph-stage,.morph-single-cta .morph-pill{width:232px}}
