/* "Email me the download link" component (phones and tablets). Shared by the homepage hero and /download.
   Markup is built by assets/js/dl-email.js inside <div class="dl-email" data-dl-email data-src="..."> (the page may put a
   <p class="dl-email-help"> inside it). The component is hidden everywhere except under html.is-mobile-dl.is-dl-form-ready.
   is-mobile-dl is set by the inline snippet in <head> and by base.js (phones and tablets). is-dl-form-ready is added by dl-email.js
   after it builds the form, so if the script fails the normal "Download for Mac" button and install steps stay visible. */

.dl-email { display: none; width: 100%; max-width: 440px; margin: 0 auto; text-align: left; }
.is-mobile-dl.is-dl-form-ready .dl-email { display: block; }

/* Hide the primary download button where the form replaces it (pages mark it with data-dl-swap). */
.is-mobile-dl.is-dl-form-ready [data-dl-swap] { display: none !important; }

/* pill field with the dark button inside it */
.dl-email-form {
  position: relative; display: flex; align-items: center; gap: 8px; height: 60px; padding: 6px; border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(11,28,33,.1), 0 14px 28px -16px rgba(11,28,33,.4);
  transition: box-shadow .15s ease;
}
.dl-email-form:focus-within { box-shadow: 0 0 0 2px var(--blue), 0 14px 28px -16px rgba(11,28,33,.4); }
.dl-email-input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 4px 0 18px; border: 0; background: transparent; border-radius: 999px;
  font: 400 17px 'Outfit', sans-serif; letter-spacing: -.005em; color: var(--text); outline: none;
  -webkit-appearance: none; appearance: none;
}
.dl-email-input::placeholder { color: var(--text-3); opacity: 1; }
.dl-email-btn {
  flex: none; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--anchor); color: #fff; cursor: pointer;
  font: 500 16px 'Outfit', sans-serif; letter-spacing: -.005em; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
  transition: background .15s ease, transform .08s ease, opacity .15s ease;
}
.dl-email-btn:hover { background: #1A2F36; }
.dl-email-btn:active { transform: translateY(1px); }
.dl-email-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dl-email-btn:disabled { opacity: .65; cursor: default; transform: none; }

/* visually hidden label (the placeholder is not a label) */
.dl-email-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* off-screen honeypot (name="hp_zx"); never visible, never focusable */
.dl-email-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.dl-email-help { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-2); text-align: center; text-wrap: pretty; }
.dl-email-help b { font-weight: 600; color: var(--text); }

/* live region: error text, or the success message that replaces the form */
.dl-email-msg { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); text-align: center; text-wrap: pretty; }
/* The empty live region stays in the accessibility tree (no display:none); with no text and no margin it takes no space. */
.dl-email-msg:focus { outline: none; }
.dl-email-msg.is-error { margin-top: 12px; color: #B3261E; font-weight: 500; }
.dl-email.is-sent .dl-email-msg {
  margin: 0; padding: 18px 22px; border-radius: 24px; background: var(--surface); color: var(--text);
  font-size: 17px; font-weight: 500; line-height: 1.45; letter-spacing: -.01em;
  box-shadow: 0 0 0 1px rgba(11,28,33,.08), 0 14px 28px -16px rgba(11,28,33,.35);
}
.dl-email.is-sent .dl-email-form, .dl-email.is-sent .dl-email-help { display: none; }

@media (max-width: 400px) {
  .dl-email-btn { padding: 0 18px; }
  .dl-email-input { padding-left: 16px; }
}