/* Reference proportions with the outer frame reduced 8% in height.
       Every decorative layer is a CSS gradient or shadow. */
    .ex-signup { container-type: inline-size; width: 100%; position: relative; margin: 0; }
    .ex-shell {
      --radius: 3.8685cqw;
      position: relative; height: 15.8375cqw; min-height: 71.76px;
      border-radius: var(--radius); isolation: isolate;
    }
    /* Dim only the decorative rim; preserve the glass, input, and button. */
    .ex-rim {
      --rim-low: .637;
      --rim-high: 1.303302;
      position: absolute; inset: 0; border-radius: inherit;
      pointer-events: none; filter: brightness(calc(var(--rim-low) + (var(--rim-high) - var(--rim-low)) * var(--phone-light, 0)));
      transition: filter .65s ease-in-out;
      background:
        radial-gradient(ellipse at 29% 0%, #fff 0%, #fff0 15%),
        linear-gradient(180deg, #7e8488 0%, #f0f0f0 1.1%, #50585d 12%, #dde0e1 34%, #71777b 54%, #f4f5f5 88%, #a2a9ad 100%);
      box-shadow: 0 0 .19cqw #e0e5e6b8, 0 0 .65cqw #b2bec29a, 0 0 1.65cqw #b5bec34d;
    }
    .ex-signup.has-value .ex-rim { --rim-low: .8281; --rim-high: 1.6942926; }

    .ex-rim::before {
      content: ""; position: absolute; inset: .29cqw; border-radius: calc(var(--radius) - .29cqw);
      background: #020405;
      box-shadow: inset 0 0 .16cqw #000;
    }
    .ex-metal {
      position: absolute; inset: .5803cqw; border-radius: calc(var(--radius) - .5803cqw);
      background:
        radial-gradient(ellipse 10% 12% at 28% 0%, #fff 0%, #fff4 30%, transparent 100%),
        radial-gradient(ellipse 10% 12% at 28% 100%, #fff 0%, #fff8 20%, transparent 100%),
        linear-gradient(90deg, #eef2f4, #77848b 1%, #252c30 5%, #7b8386 20%, #c0c7ca 28%, #5b6469 49%, #353c40 74%, #b4bbbf 97%, #edf0f1),
        linear-gradient(#b6bfc3, #262e33, #e7edef);
      box-shadow: 0 0 .13cqw #fff9;
    }
    .ex-throat {
      position: absolute; inset: .8124cqw; border-radius: calc(var(--radius) - .8124cqw);
      background: #010203;
      box-shadow: 0 0 .12cqw .06cqw #000, inset 0 0 .16cqw #9fadb344;
    }
    .ex-glass {
      position: absolute; inset: 1.354cqw; border-radius: calc(var(--radius) - 1.354cqw);
      background:
        radial-gradient(ellipse 52% 76% at 43% -7%, #8994a138, transparent 100%),
        radial-gradient(ellipse 46% 55% at 54% 112%, #899eb936, transparent 100%),
        radial-gradient(ellipse 55% 42% at 82% 115%, #41515a24, transparent 100%),
        linear-gradient(115deg, #060709, #08090a 49%, #020506 75%, #050a0d);
      box-shadow: inset 0 .12cqw .2cqw #85949a55, inset 0 -.12cqw .22cqw #8ea2ac4d, inset .12cqw 0 .2cqw #73858e40, inset -.12cqw 0 .2cqw #657e8844;
    }
    .ex-glint {
      pointer-events: none; position: absolute; left: 22%; width: 14%; height: 1.0cqw; top: -.24cqw;
      background: radial-gradient(ellipse, #fff 0%, #ffffff99 10%, #c3dae426 40%, transparent 72%);
    }
    .ex-glint--bottom { top: auto; bottom: -.27cqw; left: 23%; }
    .ex-content {
      position: absolute; inset: 0; display: flex; align-items: center; gap: 3.8cqw;
      padding: 0 4.2553cqw 0 5.029cqw;
    }
    .ex-input {
      position: relative; display: block; width: 0; min-width: 0; flex: 1;
      padding: 0; margin: 0; border: 0; border-radius: 0; outline: 0;
      background: transparent; color: #a6a6a6; caret-color: #b9c1c5;
      font: 700 max(16px, 4.5455cqw)/1.2 Arial, Helvetica, sans-serif;
      letter-spacing: -.105cqw; -webkit-appearance: none; appearance: none;
      transform: translateY(-.1934cqw);
    }
    .ex-input::placeholder { color: #8e9091; opacity: 1; font-weight: 400; letter-spacing: .16cqw; font-size: .86em; }
    .ex-input:-webkit-autofill { -webkit-text-fill-color: #a6a6a6; transition: background-color 999999s; }
    .ex-button {
      position: relative; flex: 0 0 34.4294cqw; height: 9.6712cqw; min-height: 44px;
      margin: 0; padding: 0; border: 0; border-radius: 2.1277cqw;
      transform: translateY(-.4836cqw);
      appearance: none; cursor: pointer; isolation: isolate;
      display: inline-flex; align-items: center; justify-content: center; gap: 1.16cqw;
      transition: transform 120ms ease-out, filter 180ms ease-out, box-shadow 180ms ease-out;
      background:
        radial-gradient(ellipse 12% 10% at 20% 0%, #fff, #fff0 100%),
        radial-gradient(ellipse 14% 10% at 20% 100%, #fff, #fff0 100%),
        linear-gradient(90deg, #d2e0e6, #4c6874 1%, #c5d4da 2%, #313e44 4%, #7e939d 14%, #e4edf0 20%, #566c77 35%, #617783 80%, #a7bac3 98%, #e4eff4),
        linear-gradient(#d2e3ec, #1d2b33 30%, #637885);
      box-shadow: 0 0 0 .1934cqw #010304, 0 0 0 .29cqw #6e7b8166, 0 .19cqw .4cqw #000;
    }
    .ex-button[hidden] { display: none; }
    .ex-button::before {
      content: ""; position: absolute; inset: .7737cqw; border-radius: 1.354cqw;
      background:
        radial-gradient(ellipse 80% 22% at 50% 0%, #7498aa1f, transparent 100%),
        linear-gradient(180deg, #14212a, #010608 35%, #020608 70%, #09131a);
      box-shadow: 0 0 0 .1934cqw #030708, 0 0 0 .29cqw #879fa9, 0 0 0 .4836cqw #030809, inset 0 .1cqw .3cqw #92b3c04d, inset 0 -.1cqw .3cqw #92b3c033;
      z-index: -1;
    }
    .ex-button::after {
      content: ""; position: absolute; inset: -.35cqw 66% -.4cqw 8%; pointer-events: none;
      background: radial-gradient(ellipse 30% 4% at 50% 6%, #fff, #e3f7ff66 32%, transparent 100%), radial-gradient(ellipse 30% 4% at 50% 94%, #fff, #e3f7ff66 32%, transparent 100%);
    }
    .ex-button span {
      color: #f7f7f7; font: 700 max(12px, 3.8685cqw)/1 Arial, Helvetica, sans-serif;
      letter-spacing: .18cqw; white-space: nowrap; display: inline-block; transform: translateY(.1934cqw);
    }
    .ex-drop { display: block; width: 1.8966cqw; height: 3.8685cqw; flex: none; transform: translateX(-.58cqw); filter: drop-shadow(0 0 .4cqw #e1f4ff55); }
    .ex-button:hover::before { filter: brightness(1.15); }
    .ex-button:hover { box-shadow: 0 0 0 .1934cqw #010304, 0 0 0 .29cqw #8da9b744, 0 0 1.2cqw #c4e9ff1a; }
    .ex-button:active {
      transform: translateY(calc(-.4836cqw + 1px)) scale(.965);
      filter: brightness(1.35);
      box-shadow: 0 0 0 .1934cqw #e3f6ff3c, 0 0 1.6cqw #d7f0ff4d, 0 0 3.5cqw #b5e4ff2b;
    }
    .ex-button.is-pressed { animation: ex-press 650ms cubic-bezier(.2,.7,.25,1); }
    .ex-button:active .ex-drop {
      filter: brightness(1.35) drop-shadow(0 0 .55cqw #f3fbffdd) drop-shadow(0 0 1.3cqw #bde7ff99);
    }
    .ex-button.is-pressed .ex-drop { animation: ex-tear-glow 650ms ease-out; }
    @keyframes ex-tear-glow {
      0%, 20% { filter: brightness(1.4) drop-shadow(0 0 .55cqw #f3fbffee) drop-shadow(0 0 1.4cqw #bde7ffaa); }
      55% { filter: brightness(1.15) drop-shadow(0 0 .75cqw #f3fbff88) drop-shadow(0 0 1.6cqw #bde7ff44); }
      100% { filter: drop-shadow(0 0 .4cqw #e1f4ff55); }
    }
    @keyframes ex-press {
      0% { transform: translateY(calc(-.4836cqw + 1px)) scale(.965); filter: brightness(1.45); box-shadow: 0 0 0 .19cqw #e3f6ff4d, 0 0 1.6cqw #d7f0ff5e, 0 0 3.5cqw #b5e4ff33; }
      35% { transform: translateY(-.4836cqw) scale(1.018); filter: brightness(1.2); box-shadow: 0 0 .5cqw #e3f6ff44, 0 0 2cqw #d7f0ff3c, 0 0 4cqw #b5e4ff1a; }
      100% { transform: translateY(-.4836cqw) scale(1); filter: brightness(1); box-shadow: 0 0 0 .1934cqw #010304, 0 0 0 .29cqw #6e7b8166, 0 .19cqw .4cqw #000; }
    }
    .ex-button:focus-visible { outline: 2px solid #e2f7ff; outline-offset: 4px; }
    .ex-shell:has(.ex-input:focus-visible) { outline: 1px solid #717c7e66; outline-offset: 3px; }
    .ex-notes { min-height: 72px; margin-top: 14px; padding: 0 4.2553% 0 5.029%; }
    .ex-privacy { margin: 0; color: #92979a; font: 400 11px/1.6 Arial, sans-serif; letter-spacing: .04em; }
    .ex-privacy[hidden] { display: none; }
    .ex-status { margin: 8px 0 0; color: #b7bfc2; font: 14px/1.5 Arial, sans-serif; }
    .ex-status:empty { display: none; }
    .ex-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
    @media (max-width: 420px) {
      .ex-shell { --radius: 17px; }
      .ex-content { padding-inline: 17px 13px; gap: 10px; }
      .ex-button { flex-basis: 112px; border-radius: 9px; gap: 5px; }
      .ex-button::before { border-radius: 6px; }
      .ex-button span { font-size: 12px; letter-spacing: .4px; }
      .ex-drop { width: 7.844px; height: 16px; }
      .ex-input { font-size: 16px; letter-spacing: -.25px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ex-rim { transition: none; }
      .ex-button { transition: none; }
      .ex-button.is-pressed { animation: none; }
      .ex-button.is-pressed .ex-drop { animation: none; }
      .ex-button:active { transform: translateY(-.4836cqw); }
    }
  
.ex-signup .ex-notes { position: absolute; top: 100%; left: 0; width: 100%; margin-top: 7px; text-align: center; }
.ex-signup .ex-privacy { margin: 0; font-size: 2.4cqw; line-height: 1.15; letter-spacing: 0; }
.ex-signup .ex-status { position: static; margin: 0; font-size: 9px; line-height: 1.15; }
.ex-input::placeholder { color: #a0a3a4; }

@media (max-width: 640px) {
  .ex-signup .ex-notes { margin-top: 6px; }
  .ex-signup .ex-privacy { line-height: 1.05; }
}

/* Keep the animated chrome on a separate layer from editable text. */
.ex-rim { z-index: 0; transform: translateZ(0); backface-visibility: hidden; }
.ex-glass { z-index: 1; pointer-events: none; }
.ex-content { z-index: 2; transform: translateZ(0); }
.ex-input { transform: none; top: -.1934cqw; }
.ex-button span { transform: none; position: relative; top: .1934cqw; }
.site.is-ready .ex-signup { animation-fill-mode: backwards; }

.ex-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; }
.ex-privacy a { color: inherit; }
.ex-button:disabled { cursor: wait; }
.ex-signup .ex-notes { min-height: 0; padding: 0; }

.ex-signup.is-name-step .ex-input::placeholder { font-size: 3cqw; letter-spacing: 0; }
.ex-signup.is-name-step .ex-button { flex-basis: 39cqw; }
.ex-signup.is-name-step .ex-button span { font-size: max(11px, 3.2cqw); letter-spacing: .05cqw; }
.ex-input[hidden] { display: none; }
.ex-confirmation { width: 100%; margin: 0; text-align: center; color: #f7f7f7; font: 400 max(14px, 3.6cqw)/1.3 Arial, Helvetica, sans-serif; animation: ex-confirm 500ms ease-out both; }
@keyframes ex-confirm { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ex-confirmation { animation: none; } }