/* 等候名单胶囊：首屏与末屏共用。
   收起：一枚深色药丸按钮（.capsule__open，叠在胶囊位置上）。
   展开：下面那条浅色胶囊（.waitlist__row）从按钮宽度 --cw 长到满宽；胶囊里的深色底（::before）从铺满整条
        收缩成右端的「加入」按钮——看起来就是按钮自己让出位置、长成了输入框。
   收起时面板只是不可见（visibility），仍占着位置，展开不会把下面的内容往下推。 */
.capsule { --h: 52px; --cw: 200px; --sw: 88px; position: relative; width: min(440px, 100%); min-height: var(--h); margin: 0 auto; text-align: center; scroll-margin-top: 96px; }

.capsule__open { position: absolute; z-index: 2; left: 50%; top: 0; height: var(--h); display: inline-flex; align-items: center; gap: 10px; padding: 0 22px 0 26px; border: 0; border-radius: var(--r-full);
  background: var(--ink); color: #F6F4EF; font-size: 15px; font-weight: 560; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; transform: translateX(-50%);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 10px 24px -12px rgba(20,18,15,.55), 0 2px 4px rgba(20,18,15,.1);
  transition: opacity 260ms var(--ease-out) 120ms, transform 520ms var(--ease-spring), box-shadow 300ms var(--ease-out); }
.capsule__open svg { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 420ms var(--ease-spring); }
@media (hover: hover) and (pointer: fine) {
  .capsule__open:hover { transform: translateX(-50%) translateY(-1.5px); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 16px 30px -14px rgba(20,18,15,.55), 0 3px 6px rgba(20,18,15,.12); }
  .capsule__open:hover svg { transform: translateX(3px); }
}
.capsule__open:active { transform: translateX(-50%) scale(.97); transition-duration: 140ms; }
.capsule.is-open .capsule__open { opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease-out); }
.capsule__open:disabled { cursor: wait; }

.capsule__panel[hidden] { display: block; visibility: hidden; }
.capsule__panel { position: relative; z-index: 1; }
.waitlist { position: relative; width: 100%; text-align: left; }

.waitlist__row { position: relative; isolation: isolate; display: flex; align-items: center; width: 100%; height: var(--h); margin: 0 auto; padding: 5px; border-radius: var(--r-full);
  background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-1);
  transition: width 460ms var(--ease-out), background-color 360ms var(--ease-out), box-shadow 240ms var(--ease-out); }
/* 深色底：收起时铺满整条（和按钮一模一样），展开时缩成右端的提交按钮 */
.waitlist__row::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-full); background: var(--ink);
  clip-path: inset(0 0 0 0 round 999px); transition: clip-path 460ms var(--ease-out), background-color 160ms, opacity 300ms; }
.capsule:not(.is-open) .waitlist__row { width: var(--cw); }
.capsule.is-open .waitlist__row::before { clip-path: inset(5px 5px 5px calc(100% - var(--sw) - 5px) round 999px); }
.waitlist__row:has(button:hover)::before { background: #33323a; }
.waitlist__row:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px rgba(61,99,221,.1), var(--shadow-1); }
.waitlist__row.is-highlighted { outline: 2px solid rgba(61,99,221,.65); outline-offset: 3px; }

/* iOS 输入框字号小于 16px 会自动放大页面，所以保持 16px */
.waitlist__row input { min-width: 0; flex: 1; width: 0; height: 100%; padding: 0 14px 0 17px; border: 0; border-radius: var(--r-full); background: transparent; color: var(--text-1); font: inherit; font-size: 16px; outline: none;
  opacity: 0; transition: opacity 200ms var(--ease-out); }
.waitlist__row input::placeholder { color: var(--text-3); opacity: 1; }
.waitlist__row button { flex: none; width: var(--sw); height: 100%; padding: 0 12px; border: 0; border-radius: var(--r-full); background: transparent; color: #fff; font-size: 14px; font-weight: 560; white-space: nowrap; cursor: pointer;
  opacity: 0; transform: translateX(-6px); transition: opacity 200ms var(--ease-out), transform 360ms var(--ease-out); }
.capsule.is-open .waitlist__row input { opacity: 1; transition-delay: 160ms; }
.capsule.is-open .waitlist__row button { opacity: 1; transform: none; transition-delay: 220ms; }
.waitlist__row button:disabled { cursor: wait; opacity: .7; }

.waitlist__note, .waitlist__hint { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--text-3); text-align: center; opacity: 0; transition: opacity 260ms var(--ease-out); }
.capsule.is-open .waitlist__note { opacity: 1; transition-delay: 200ms; }
.waitlist__note a, .foot__privacy { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.waitlist__hint { display: none; }
.waitlist__status { margin-top: 6px; font-size: 12.5px; line-height: 1.6; text-align: center; color: var(--text-2); }
.waitlist__status:empty { margin: 0; }
.waitlist__status[data-state='error'] { color: #98513c; }
.waitlist__challenge { display: flex; justify-content: center; }
.waitlist__challenge:not(:empty) { margin-top: 10px; }
.waitlist__trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* 成功：胶囊转成浅绿，深色底退掉，里面换成一行确认；一颗签名弹珠落下、弹一下 */
.capsule__done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; margin: 0;
  color: #1F6B55; font-size: 14.5px; font-weight: 540; line-height: 1.25; text-align: center; pointer-events: none; opacity: 0; transition: opacity 300ms var(--ease-out); }
.capsule__marble { --s: 15px; position: relative; flex: none; }
.capsule__marble > i { background: linear-gradient(135deg, #F6B48C, #DC8DB8 45%, #6E98E6); }
.capsule.is-done .waitlist__row { background: #EEF6F1; box-shadow: inset 0 0 0 1px rgba(39,119,97,.25), var(--shadow-1); }
.capsule.is-done .waitlist__row::before { opacity: 0; }
.capsule.is-done .waitlist__row input, .capsule.is-done .waitlist__row button { opacity: 0; pointer-events: none; transition-delay: 0ms; }
.capsule.is-done .capsule__done { opacity: 1; visibility: visible; transition-delay: 160ms; }
/* 确认文案能接收焦点（成功后焦点从表单交到这里）：不画默认框，整条胶囊换成绿色的聚焦环 */
.capsule__done { visibility: hidden; outline: none; }
.capsule.is-done .waitlist__row:focus-within { box-shadow: inset 0 0 0 1.5px rgba(39,119,97,.45), 0 0 0 4px rgba(39,119,97,.12), var(--shadow-1); }
.capsule.is-done .capsule__marble { animation: marble-drop 900ms var(--ease-bounce) 160ms both; }
@keyframes marble-drop { from { transform: translateY(-16px) scale(.6); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
.capsule.is-done .waitlist__note { display: none; }
.capsule.is-done .waitlist__hint { display: block; opacity: 1; }
/* 成功时状态行只给读屏用：视觉上胶囊里那句已经说了 */
.capsule.is-done .waitlist__status { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 380px) {
  .capsule { --sw: 72px; }
  .waitlist__row input { padding-left: 14px; }
  .capsule__done { font-size: 13.5px; padding: 0 14px; }
}