/* The sign-up popup (signup.js). It is the newsletter band in a dialog: it carries .sub and
   sits directly in body, so the band's colours, inputs, tick box and red button apply as is.
   Here only what the dialog alone needs. Rules: iCloud engineering/business-logic/mailing-list.html. */
dialog.signup{position:fixed;inset:0;margin:auto;width:calc(100% - 32px);max-width:560px;max-height:calc(100dvh - 32px);overflow:auto;border:0;border-radius:4px;padding:48px 40px 40px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
dialog.signup::backdrop{background:rgba(18,14,12,.62)}
dialog.signup[open]{animation:signup-in .22s ease-out}
@keyframes signup-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.signup .signup-copy{margin:0 0 28px}
.signup .signup-copy .tag{margin:0 0 12px}
.signup h2{margin:0 0 14px;font-size:44px;line-height:1.02;font-weight:300;letter-spacing:-.02em;text-wrap:balance}
.signup h2 em{font-style:italic;font-weight:800;color:var(--acc)}
.signup .signup-copy p:not(.tag){margin:0;font-size:17px;line-height:1.55}
.signup .signup-form{flex-basis:auto}
.signup .in-name,.signup .in-email{flex:1 1 100%}
.signup .btn-band{width:100%}
.signup-x{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1.5px solid var(--inv-ink);background:transparent;color:var(--inv-ink);cursor:pointer;transition:transform .15s}
.signup-x:hover{transform:rotate(90deg)}
.signup-done h2{margin:8px 0 0;font-size:44px;line-height:1.02;font-weight:300;letter-spacing:-.02em}
.signup-done h2 em{font-style:italic;font-weight:800;color:var(--acc)}
.band-row>.signup-done{flex-basis:620px}
.signup-done:focus{outline:none}
:is(body,main)>.sub .signup-done{padding:0}
/* The black tape: every error, nudge or bounce. On the dark band it turns to cream, as the app's tape does in Noir. */
.tape{align-self:flex-start;margin:4px 0 0;padding:5px 12px 6px;background:var(--ink);color:var(--bg);border-radius:2px;font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;box-shadow:0 2px 6px rgba(0,0,0,.25);transform:rotate(-1deg);animation:signup-tape .25s ease-out}
:is(body,main)>.sub .tape{background:var(--inv-ink);color:var(--inv-bg)}
/* In the band the tape floats under the tick box, so the band doesn't re-centre and jump when it shows (Harlem, 27 Oct 2026) */
:is(body,main)>.sub .band-form{position:relative}
:is(body,main)>.sub .band-form>.tape{position:absolute;left:0;top:calc(100% + 12px);margin:0}
@media(max-width:900px){:is(body,main)>.sub .band-form{margin-bottom:24px}}
.tape[hidden],.band-form[hidden],.signup-done[hidden]{display:none}
@keyframes signup-tape{from{transform:rotate(-1deg) translateX(-8px);opacity:0}to{transform:rotate(-1deg) translateX(0);opacity:1}}
.is-sending .btn-band{opacity:.6;cursor:progress}
.grecaptcha-badge{visibility:hidden}
/* Phones (Harlem, 27 Oct 2026): a taller popup with room to breathe, most of it between the close button and the headline */
@media(max-width:600px){
  dialog.signup{padding:124px 24px 48px;min-height:min(700px,calc(100dvh - 32px))}
  dialog.signup[open]{display:flex;flex-direction:column}
  dialog.signup .signup-copy{margin-top:auto}
  dialog.signup .signup-body{margin-bottom:auto}
  .signup .signup-copy{margin:0 0 36px}
  .signup-x{top:20px;right:20px}
  .signup h2{font-size:clamp(40px,12vw,50px)}
  .signup .signup-copy p:not(.tag){font-size:18.5px}
}
@media(max-width:600px) and (max-height:720px){dialog.signup{padding-top:92px}}
@media(max-width:600px) and (max-height:600px){dialog.signup{padding-top:84px;min-height:0}.signup .signup-copy{margin-bottom:28px}}
@media(prefers-reduced-motion:reduce){dialog.signup[open],.tape{animation:none}.signup-x:hover{transform:none}}