/* /download: a stable home for store availability and launch notifications. */
.dl-hero { padding-block: var(--space-8) var(--section-space); }
.dl-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); align-items: center; gap: var(--space-8); }
.dl-hero__title { font-size: clamp(4rem, 8vw, 7.5rem); letter-spacing: var(--tracking-display); line-height: 1; }
.dl-hero__lede { max-width: 470px; margin-top: var(--space-6); font-size: var(--text-xl); }
.dl-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.dl-hero__note { max-width: 38ch; margin-top: var(--space-4); font-size: var(--text-md); }
.dl-preview__caption { margin-bottom: var(--space-4); font-size: var(--text-md); }
.dl-window__tool { flex: none; opacity: 0.6; }
.dl-window__pinned { flex: none; border-radius: 6px; outline: 2px solid var(--black); outline-offset: 2px; }
.dl-window__page { display: flex; justify-content: center; padding: 10px 14px 28px; background: var(--black-03); }
.dl-window .popup { width: 100%; max-width: 380px; }
.dl-browsers__list { display: grid; gap: var(--space-8); }
.dl-browser { display: grid; grid-template-columns: 1fr 1.15fr auto; align-items: center; gap: var(--space-7); }
.dl-browser__name { display: flex; align-items: center; gap: var(--space-4); }
.dl-browser h3 { font-size: var(--text-2xl); letter-spacing: var(--tracking-heading); line-height: var(--leading-snug); }
.dl-browser p { max-width: 42ch; color: var(--white); }
.dl-browser .dl-browser__status { margin-bottom: var(--space-2); font-size: var(--text-xl); font-weight: var(--weight-bold); }
.dl-browsers__note { margin-top: var(--space-8); color: var(--white); }
.dl-notify__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.dl-notify__copy .section-lede { margin-top: var(--space-6); }
.dl-notify__copy > p:last-child { margin-top: var(--space-5); }
.dl-form { display: grid; gap: var(--space-3); padding: var(--space-7); background: var(--surface-sunken); }
.dl-form > label:not(:first-child) { margin-top: var(--space-4); }
.dl-form input[type="email"] { width: 100%; min-width: 0; min-height: 56px; border: 1px solid var(--black-12); border-radius: 0; padding: var(--space-4); background: var(--white); color: var(--black); font: inherit; }
.dl-form__browsers { display: grid; gap: var(--space-3); min-width: 0; margin: var(--space-4) 0 0; padding: 0; border: 0; }
.dl-form__browsers legend { padding: 0 0 var(--space-3); }
.dl-form__browser { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; padding: var(--space-4); background: var(--white); cursor: pointer; }
.dl-form__browser:has(input:checked) { outline: 2px solid var(--black); outline-offset: -2px; }
.dl-form__browser input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--black); }
.dl-form__browser strong { font-size: var(--text-md); }
.dl-form__browser small { display: block; font-size: var(--text-md); }
.dl-form__consent { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.dl-form__consent input { flex: none; width: 22px; height: 22px; margin: 3px 0; accent-color: var(--black); }
.dl-form a { text-decoration: underline; text-underline-offset: 3px; }
.dl-form .button { margin-top: var(--space-4); }
.dl-form .button:disabled { opacity: 0.65; cursor: wait; }
.dl-form__status:empty { display: none; }
.dl-form__status { margin-top: var(--space-3); font-weight: var(--weight-semibold); }
.dl-form__note { font-size: var(--text-md); overflow-wrap: anywhere; }
.dl-form__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.dl-look { background: var(--surface-sunken); }
.dl-look__images { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.dl-look__images img { width: 100%; height: auto; }
.dl-look__images figcaption { margin-top: var(--space-4); font-size: var(--text-lg); }
.section.dl-phone { padding-top: var(--section-space); }
.dl-phone__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: var(--space-8); }
.dl-phone__send { margin-top: var(--space-7); }
.dl-phone__photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.dl-phone .section-lede { margin-top: var(--space-5); }
.dl-phone__url { font-size: clamp(1.5rem, 2.5vw, 2.25rem); overflow-wrap: anywhere; font-weight: var(--weight-bold); letter-spacing: var(--tracking-heading); line-height: 1.05; }
.dl-phone__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.dl-phone__status { min-height: 1.55em; margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-md); }
.dl-footer { padding-block: var(--space-7); background: var(--black); color: var(--white); }
.dl-footer .container { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); }
.dl-footer .brand { filter: invert(1); }
.dl-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.download :is(a, button, input, select):focus-visible, .dl-footer a:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .dl-reveal.is-visible { animation: dl-arrive 900ms var(--ease) both; }
  .dl-reveal:nth-child(2) { animation-delay: 70ms; }
  .dl-reveal:nth-child(3) { animation-delay: 140ms; }
  @keyframes dl-arrive { from { transform: translateY(20px); } to { transform: translateY(0); } }
}
@media (max-width: 1100px) {
  .dl-browser { grid-template-columns: 1fr 1.2fr; }
  .dl-browser .button { grid-column: 2; justify-self: start; }
}
@media (max-width: 900px) {
  .dl-hero__inner, .dl-notify__inner, .dl-phone__inner { grid-template-columns: 1fr; }
  .dl-hero__title { font-size: clamp(4rem, 12vw, 6rem); }
  .dl-hero__lede { max-width: 36ch; }
  .dl-preview { max-width: 580px; width: 100%; margin-inline: auto; }
  .dl-browser { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .dl-browsers .section-head, .dl-look .section-head { display: grid; grid-template-columns: 1fr; }
  .dl-form { padding: var(--space-6); }
}
@media (max-width: 600px) {
  .dl-hero { padding-top: var(--space-6); }
  .dl-hero__actions .button { flex: 1 1 100%; }
  .dl-window__page { padding-inline: 8px; }
  .dl-browser, .dl-look__images { grid-template-columns: 1fr; }
  .dl-browser .button { grid-column: auto; }
  .dl-browser__name { gap: var(--space-3); }
  .dl-browser h3 { font-size: var(--text-xl); }
  .dl-form { padding: var(--space-5); }
  .dl-footer .container { align-items: flex-start; flex-direction: column; }
}