/* The download page is the last step before someone becomes a user, so it gets
   the homepage's care: the app on the studio desk beside one clear Mac
   download, the other platforms as quiet options, then the trial in three
   pictured steps. Colours come from the theme. */
.dl-hero { padding: 150px 0 90px; }
.dl-hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.es-download-page h1 { max-width: 560px; font: 500 clamp(42px, 4.1vw, 58px)/1.04 var(--serif); letter-spacing: -.028em; color: var(--ink); text-wrap: balance; }
.dl-lede { max-width: 470px; margin-top: 20px; font-size: 19px; line-height: 1.55; color: var(--ink-2); }

.es-os-grid { margin: 40px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.dl-mac { order: -2; flex-basis: 100%; margin-bottom: 2px; }
.dl-primary { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 30px 0 24px; border-radius: 14px; background: var(--ink); color: #fff; font: 600 17px/1 var(--sans); letter-spacing: -.01em; box-shadow: 0 14px 30px rgba(16, 35, 34, .22); transition: background .2s, transform .2s var(--ease), box-shadow .3s var(--ease); }
.dl-primary[href]:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: 0 18px 36px rgba(16, 35, 34, .26); }
.dl-primary[href]:active { transform: scale(.985); }
.dl-glyph { width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--dl-arrow) center / contain no-repeat; mask: var(--dl-arrow) center / contain no-repeat; }
.dl-primary[aria-disabled='true'] { background: none; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); cursor: default; }
.dl-primary[aria-disabled='true'] .dl-glyph { display: none; }
.dl-detail { display: flex; gap: 8px; margin-top: 14px; font-size: 14px; color: var(--muted); }
.dl-detail span:empty { display: none; }
.dl-detail span + span:not(:empty)::before { content: "·"; margin-right: 8px; }
/* Windows and Linux: one quiet line under the Mac download, the same size and
   grey as the line above it. An available build is the only coloured word. */
.dl-other { display: flex; align-items: baseline; gap: 6px; font-size: 14px; color: var(--muted); }
.dl-other + .dl-other::before { content: "·"; margin-right: 2px; }
/* An available build moves to the front, so the dot moves to the one after it. */
.es-os-grid:has(.dl-secondary[href]) .dl-other:has(.dl-secondary[href])::before { content: none; }
.es-os-grid:has(.dl-secondary[href]) .dl-other:not(:has(.dl-secondary[href]))::before { content: "·"; margin-right: 2px; }
.dl-other:has(.dl-secondary[href]) { order: -1; }
.dl-secondary { display: inline-flex; align-items: baseline; gap: 5px; color: var(--muted); }
.dl-secondary [data-platform-status] { text-transform: lowercase; }
.dl-secondary[href] { gap: 6px; color: var(--teal); font-weight: 600; }
.dl-secondary[href] .dl-os { display: none; }
.dl-secondary[href] [data-platform-status] { text-transform: none; }
.dl-secondary[href]::after { content: ""; width: 12px; height: 12px; align-self: center; background: currentColor; -webkit-mask: var(--dl-arrow) center / contain no-repeat; mask: var(--dl-arrow) center / contain no-repeat; transition: transform .25s var(--ease); }
.dl-secondary[href]:hover { color: var(--ink); }
.dl-secondary[href]:hover::after { transform: translateY(2px); }
.dl-other-detail:empty { display: none; }
.dl-other-detail::before { content: "("; } .dl-other-detail::after { content: ")"; }

.es-download-page .es-download-status { margin-top: 18px; max-width: 470px; color: var(--muted); font-size: 14.5px; }
.es-download-status a { color: var(--teal); text-decoration: underline; }
.es-download-retry { margin-top: 8px; min-height: 40px; padding: 0; border: 0; background: none; font: 600 14.5px/1 var(--sans); color: var(--teal); cursor: pointer; }
.es-download-retry:hover { color: var(--ink); }
.es-download-page #download-fallback { margin-top: 12px; }
.es-download-page [hidden] { display: none !important; }

.dl-shot { margin: 0; }
.dl-shot .es-frame { --x0: 450; --y0: 330; --cw: 780; --ch: 540; border-radius: 24px; box-shadow: 0 40px 90px rgba(16, 35, 34, .2), 0 0 0 1px rgb(16 35 34 / .06); }

.dl-promises { list-style: none; margin: 110px auto 0; padding: 30px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 1px solid var(--line); }
.dl-promises li { display: flex; flex-direction: column; gap: 6px; }
.dl-promises strong { font: 500 22px/1.2 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.dl-promises span { font-size: 15px; line-height: 1.55; color: var(--ink-2); }

.es-download-trial { padding: 120px 0 130px; background: var(--card); }
.dl-trial-head { max-width: 680px; }
.es-download-trial h2 { font: 500 clamp(36px, 4vw, 56px)/1.04 var(--serif); letter-spacing: -.022em; }
.es-download-trial-intro { margin-top: 20px !important; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.es-download-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 56px 0 44px; padding: 0; }
.es-download-steps li { display: flex; flex-direction: column; }
.es-download-steps .dl-step-art { margin: 0 0 26px; aspect-ratio: 1536 / 900; overflow: hidden; border-radius: 18px; background: var(--paper-2); box-shadow: 0 0 0 1px var(--line), 0 20px 44px rgba(16, 35, 34, .1); }
.dl-step-art > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.es-download-steps li:hover .dl-step-art > img { transform: scale(1.04); }
.es-download-steps h3 { font: 500 24px/1.15 var(--serif); letter-spacing: -.015em; }
.dl-crop-dusk { --x0: 380; --y0: 170; --cw: 900; --ch: 527; }
.es-download-steps li:hover .dl-step-art .es-frame { transform: scale(1.03); }
.dl-step-art .es-frame { transition: transform 1s var(--ease); }
.es-download-steps p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.es-download-trial-limit { max-width: 840px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.7; color: var(--muted); }

.es-download-page { --dl-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v9M4 8l4 4 4-4M3 14h10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) {
  .dl-hero-copy > * { animation: dl-rise .9s var(--ease) both; }
  .dl-hero-copy > :nth-child(2) { animation-delay: .06s; }
  .dl-hero-copy > :nth-child(3) { animation-delay: .12s; }
  .dl-hero-copy > :nth-child(n + 4) { animation-delay: .18s; }
  .dl-shot { animation: dl-shot 1.3s var(--ease) .15s both; }
  @keyframes dl-rise { from { opacity: 0; transform: translateY(18px); } }
  @keyframes dl-shot { from { opacity: 0; transform: translateY(40px) scale(.97); } }
}

@media (max-width: 960px) {
  .dl-hero-grid { grid-template-columns: 1fr; }
  .dl-shot { order: -1; margin-top: -10px; }
  .es-download-steps { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 700px) {
  .dl-hero { padding: 100px 0 60px; }
  .es-os-grid { grid-template-columns: 1fr; }
  .dl-primary { width: 100%; justify-content: center; }
  .dl-promises { grid-template-columns: 1fr; gap: 22px; margin-top: 56px; }
  .es-download-trial { padding: 80px 0 90px; }
}