/* =====================================================================
   /download  (post-CTA page). Loaded after base.css, which supplies the tokens, the logo and the base reset.
   Everything here is prefixed .dl-. Values match docs/design-system.md (homepage), including the quote card (.vb-q),
   the logo strip (9.7) and the hero wallpaper card.
   ===================================================================== */

:root {
  --dl-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --dl-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --dl-gut: 32px;
}

body.dl {
  background: var(--page);
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}

/* ---------- header: logo only ---------- */
.dl-head { flex: none; padding: 14px var(--dl-gut) 0; width: 100%; max-width: 1304px; margin: 0 auto; }
.dl-head .logo { display: inline-flex; margin-left: -8px; }

/* ---------- layout ---------- */
.dl-main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 8px var(--dl-gut) 32px; }
.dl-grid {
  width: 100%; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); column-gap: clamp(40px, 5vw, 72px); align-items: center;
}
.dl-left, .dl-right { min-width: 0; }

/* ---------- left column ---------- */
.dl-h1 {
  margin: 0 0 clamp(26px, 2.6vw, 34px); font-size: clamp(36px, 3.8vw, 54px); line-height: 1.06; font-weight: 600; letter-spacing: -.035em;
  color: var(--text); text-wrap: balance;
}
.dl-h1 em { font-family: var(--dl-serif); font-style: italic; font-weight: 500; letter-spacing: -.02em; font-size: 1.05em; }

.dl-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dl-steps li {
  display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 14px 24px 14px 16px; border-radius: 999px; background: var(--surface);
  box-shadow: 0 0 0 1px rgba(11,28,33,.06), 0 24px 48px -30px rgba(11,28,33,.34);
  font-size: 18px; line-height: 1.3; letter-spacing: -.005em; color: var(--text-2);
}
.dl-steps b, .dl-line b { font-weight: 600; color: var(--text); }
.dl-n {
  flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--anchor); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font: 600 15px/1 'Outfit', sans-serif;
}

.dl-line { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.dl-steps + .dl-line { margin-top: 26px; }
.dl-line + .dl-line { margin-top: 14px; }
.dl-again { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.dl-again:hover { color: var(--blue); }

/* Phones and tablets (html.is-mobile-dl, set in <head>, plus html.is-dl-form-ready, added by dl-email.js once the form is built): Scrubbr is a desktop app, so the left column asks for an email instead of
   showing the install steps. .dl-d = desktop-only, .dl-m = phone/tablet-only. The form itself is assets/css/dl-email.css. */
.dl-m { display: none; }
.is-mobile-dl.is-dl-form-ready .dl-d { display: none !important; }
.is-mobile-dl.is-dl-form-ready span.dl-m { display: inline; }
.is-mobile-dl.is-dl-form-ready p.dl-m { display: block; }
/* Platform: html.is-win-dl (set in <head> from the user agent, or by ?os=windows) shows the Windows steps and the Windows installer;
   everyone else, and visitors without JS, gets the Mac versions. .dl-os-mac / .dl-os-win mark the two sets. */
.is-win-dl .dl-os-mac, html:not(.is-win-dl) .dl-os-win { display: none !important; }
.dl-note { font-size: 14.5px; line-height: 1.45; }
.dl-alt { font-size: 14.5px; line-height: 1.45; }
.dl-alt a { color: var(--text-2); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.2px; }
.dl-alt a:hover { color: var(--text); }
.dl-left .dl-email { margin: 24px 0 0; }
.dl-left .dl-email-msg { text-align: left; }

/* quote card: same look as .vb-q on the homepage, laid out horizontally */
.dl-q {
  margin: 30px 0 0; display: flex; align-items: flex-start; gap: 16px; padding: 22px 26px 22px 22px; border-radius: 20px; background: var(--surface);
  box-shadow: 0 0 0 1px rgba(11,28,33,.05), 0 18px 40px -30px rgba(11,28,33,.3);
}
.dl-q > img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.dl-q-body { min-width: 0; }
.dl-q blockquote { margin: 0; font-size: 17px; line-height: 1.45; letter-spacing: -.012em; font-weight: 500; color: var(--text); text-wrap: pretty; }
.dl-q blockquote p { margin: 0; }
.dl-q figcaption { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.dl-q .nm { font-weight: 600; font-size: 15.5px; }
.dl-q .rl { font-size: 13.5px; color: var(--text-2); line-height: 1.35; }

/* ---------- right column: stage ---------- */
.dl-stage {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; background: #D6F4FE;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 30px 60px -40px rgba(11,28,33,.35);
  container-type: inline-size; aspect-ratio: 600 / 500; width: 100%;
}
.dl-wall, .dl-grain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; display: block; }
.dl-grain { z-index: -1; opacity: .16; mix-blend-mode: soft-light; }

/* The scene is drawn at 600 x 500 and scaled to the stage width (same trick as the homepage hero: --s = stage width / 600). */
.dl-scene {
  --s: tan(atan2(100cqw, 600px));
  position: absolute; left: 0; top: 0; width: 600px; height: 500px; transform-origin: 0 0; transform: scale(var(--s));
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}
@supports not ((transform: scale(tan(atan2(1px, 1px)))) and (width: 1cqw)) {
  .dl-scene { --s: .95; }
  @media (max-width: 1000px) { .dl-scene { --s: 1; } }
  @media (max-width: 700px) { .dl-scene { --s: .8; } }
  @media (max-width: 520px) { .dl-scene { --s: .6; } }
  @media (max-width: 400px) { .dl-scene { --s: .5; } }
}

/* browser window: bleeds off the left and bottom edges of the stage */
.dl-br {
  position: absolute; left: -30px; top: 54px; width: 470px; height: 470px; border-radius: 22px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(11,28,33,.08), 0 32px 60px -24px rgba(11,28,33,.5), 0 8px 18px -10px rgba(11,28,33,.25);
}
.dl-tb { position: relative; height: 52px; background: #F7FAF8; border-bottom: 1px solid rgba(11,28,33,.07); color: #2C3E44; }
.dl-addr {
  position: absolute; left: 52px; top: 9px; width: 212px; height: 34px; border-radius: 999px; background: rgba(11,28,33,.05);
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  font: 400 11.5px/1 var(--dl-mono); color: var(--text-2); white-space: nowrap;
}
.dl-addr img { width: 16px; height: 16px; flex: none; }
.dl-addr .dl-ic { margin-left: auto; flex: none; }
.dl-tbi { position: absolute; top: 8px; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.dl-dl { left: 300px; }
.dl-plus { left: 344px; }
.dl-tabs { left: 388px; }
.dl-pg { position: relative; height: 100%; }
.dl-sk { position: absolute; left: 0; height: 52px; border-radius: 999px; }
.dl-sk-a { top: 98px; width: 330px; background: #EEF1F0; }
.dl-sk-b { top: 180px; width: 250px; background: rgba(0,108,224,.18); }

/* file chip */
.dl-chip {
  position: absolute; left: 232px; top: 112px; width: 236px; height: 66px; border-radius: 16px; background: #fff;
  display: flex; align-items: center; gap: 14px; padding: 0 20px 0 18px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--text);
  box-shadow: 0 0 0 1px rgba(11,28,33,.06), 0 18px 34px -16px rgba(11,28,33,.4);
  opacity: 0; pointer-events: none;
}
.dl-chip svg { flex: none; }

/* Mac-style window (the disk image) */
.dl-mac {
  position: absolute; left: 138px; top: 196px; width: 420px; height: 270px; border-radius: 14px; background: #FCFDFC; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(11,28,33,.08), 0 32px 60px -24px rgba(11,28,33,.5), 0 8px 18px -10px rgba(11,28,33,.25);
}
.dl-mac-bar { position: relative; height: 38px; background: #EEF0EF; border-bottom: 1px solid rgba(11,28,33,.07); display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.dl-mac-bar i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.dl-mac-bar .r { background: #FF5F57; } .dl-mac-bar .y { background: #FEBC2E; } .dl-mac-bar .g { background: #28C840; }
.dl-mac-t { position: absolute; left: 0; right: 0; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--text-2); pointer-events: none; }
.dl-mac-body { position: relative; height: 232px; }
.dl-fi { position: absolute; top: 36px; width: 112px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dl-fi-app { left: 46px; z-index: 2; }
.dl-fi-fold { left: 252px; }
.dl-lbl { font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.2; }
/* app icon: the Scrubbr mark on the same white-to-grey squircle tile as the dock icons */
.dl-tile {
  display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; border-radius: 22.5%;
  background: linear-gradient(#fff, #F1F1F1); box-shadow: 0 0 0 1px rgba(11,28,33,.07), 0 10px 18px -10px rgba(11,28,33,.4);
}
.dl-tile img { width: 64%; height: 64%; display: block; }
.dl-folder { position: relative; display: block; width: 104px; height: 84px; }
.dl-folder svg { display: block; filter: drop-shadow(0 8px 8px rgba(11,28,33,.16)); }
.dl-check {
  position: absolute; right: -8px; top: -10px; width: 34px; height: 34px; border-radius: 50%; background: var(--mint);
  display: none; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #FCFDFC, 0 6px 12px -6px rgba(11,28,33,.5);
}

/* Windows-style installer window ("Scrubbr Setup"): flat title bar with minimise, maximise and close glyphs at the right. Original drawing.
   The base styles are the finished state ("Scrubbr is installed", Finish), which reduced motion keeps. */
.dl-win {
  position: absolute; left: 138px; top: 196px; width: 420px; height: 270px; border-radius: 8px; background: #fff; overflow: hidden; color: #1B2B31;
  box-shadow: 0 0 0 1px rgba(11,28,33,.12), 0 32px 60px -24px rgba(11,28,33,.5), 0 8px 18px -10px rgba(11,28,33,.25);
}
.dl-win-bar { position: relative; height: 36px; background: #F3F5F4; display: flex; align-items: center; gap: 8px; padding: 0 0 0 12px; }
.dl-win-bar img { width: 16px; height: 16px; flex: none; display: block; }
.dl-win-t { font-size: 12.5px; font-weight: 400; color: #1B2B31; }
.dl-win-ctl { margin-left: auto; display: flex; height: 100%; }
.dl-win-ctl i { width: 46px; height: 100%; display: flex; align-items: center; justify-content: center; color: #1B2B31; }
.dl-win-body { position: relative; height: 178px; }
.dl-win-ic { position: absolute; left: 30px; top: 30px; width: 72px; height: 72px; display: block; }
.dl-win-ic .dl-tile { width: 72px; height: 72px; }
.dl-win-ok {
  position: absolute; right: -8px; top: -8px; width: 30px; height: 30px; border-radius: 50%; background: var(--mint);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #fff, 0 6px 12px -6px rgba(11,28,33,.5);
}
.dl-win-main { position: absolute; left: 124px; top: 30px; width: 272px; }
.dl-win-st { display: flex; flex-direction: column; gap: 6px; }
.dl-win-st b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; color: #0B1C21; }
.dl-win-st span { font-size: 12.5px; line-height: 1.35; color: var(--text-2); }
.dl-win-ing { display: none; }
.dl-win-prog { position: absolute; left: 0; top: 78px; width: 100%; height: 10px; border-radius: 5px; background: #E3E8E6; overflow: hidden; }
.dl-win-prog i { display: block; width: 100%; height: 100%; border-radius: 5px; background: var(--blue); transform-origin: 0 50%; }
.dl-win-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: #F3F5F4; border-top: 1px solid rgba(11,28,33,.07); }
.dl-win-btn {
  position: absolute; right: 16px; top: 12px; width: 92px; height: 32px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 500;
}
.dl-win-fin { background: var(--blue); color: #fff; }
.dl-win-cancel { display: none; background: #fff; color: #1B2B31; box-shadow: 0 0 0 1px rgba(11,28,33,.18); }

/* cursor: translate() values are the pointer tip in scene pixels */
.dl-cur { position: absolute; left: -3px; top: -2px; z-index: 9; display: none; filter: drop-shadow(0 3px 3px rgba(11,28,33,.3)); pointer-events: none; }

/* ---------- logos under the stage ---------- */
.dl-logos { margin-top: clamp(30px, 3.4vw, 44px); text-align: center; }
.dl-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 30px;
  font: 500 12px/1.3 var(--dl-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2);
}
.dl-eyebrow::before, .dl-eyebrow::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); flex: none; }
.dl-lset { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 28px; }
.dl-lset li { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; height: 34px; }
.dl-lset img { height: 24px; width: auto; max-width: 100%; object-fit: contain; opacity: .78; filter: grayscale(.2); }
.dl-lset img.lg-wide { height: 20px; }
.dl-lset img.lg-tall { height: 32px; }

/* ---------- legal line ---------- */
.dl-legal { flex: none; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 0 var(--dl-gut) 24px; font-size: 13.5px; color: var(--text-2); }
.dl-legal a { color: var(--text-2); }
.dl-legal a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   Animation: one 10 s loop. Percentages below are the 4 beats.
     0-24%   beat 1  cursor glides to the download icon, which lights up (--blue)
     25-50%  beat 2  file chip drops, cursor moves to it and double-clicks (41%, 46%)
     50-62%  beat 3  Scrubbr window opens, cursor grabs the Scrubbr icon (60%)
     62-82%  beat 3/4 icon is dragged onto Applications, shrinks into it, folder bumps, green check pops (80%)
     82-96%  hold, then everything fades and the loop restarts
   Without motion preference (reduced) none of this runs: base styles above are the still end of beat 3.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .dl-cur { display: block; animation: dl-cur 10s linear infinite; }
  .dl-dl { animation: dl-btn 10s linear infinite; }
  .dl-chip { animation: dl-chip 10s linear infinite; }
  .dl-mac { opacity: 0; animation: dl-mac 10s linear infinite; }
  .dl-fi-app .dl-tile { animation: dl-tile 10s linear infinite; }
  .dl-fi-app .dl-lbl { animation: dl-lbl 10s linear infinite; }
  .dl-folder { animation: dl-fold 10s linear infinite; transform-origin: 50% 80%; }
  .dl-check { display: flex; opacity: 0; transform: scale(0); animation: dl-check 10s linear infinite; }

  /* Windows: same cursor path and chip as above until beat 3, then the installer runs and Finish is pressed. */
  .is-win-dl .dl-cur { animation-name: dl-cur-win; }
  .dl-win { opacity: 0; animation: dl-mac 10s linear infinite; }
  .dl-win-prog i { animation: dl-prog 10s linear infinite; }
  .dl-win-ing { display: flex; animation: dl-win-ing 10s linear infinite; }
  .dl-win-done { position: absolute; left: 0; top: 0; width: 100%; animation: dl-win-done 10s linear infinite; }
  .dl-win-ok { opacity: 0; transform: scale(0); animation: dl-win-ok 10s linear infinite; }
  .dl-win-cancel { display: flex; animation: dl-win-cancel 10s linear infinite; }
  .dl-win-fin { animation: dl-win-fin 10s linear infinite; }
}

@keyframes dl-cur {
  0%   { opacity: 0; transform: translate(400px, 270px) scale(1); animation-timing-function: ease; }
  4%   { opacity: 1; transform: translate(400px, 270px) scale(1); animation-timing-function: cubic-bezier(.45,.05,.25,1); }
  18%  { opacity: 1; transform: translate(286px, 79px) scale(1); }
  21%  { transform: translate(286px, 79px) scale(1); animation-timing-function: ease-out; }
  22%  { transform: translate(286px, 79px) scale(.82); animation-timing-function: ease-out; }
  24%  { transform: translate(286px, 79px) scale(1); animation-timing-function: cubic-bezier(.45,.05,.25,1); }
  25%  { transform: translate(286px, 79px) scale(1); animation-timing-function: cubic-bezier(.45,.05,.25,1); }
  37%  { transform: translate(384px, 148px) scale(1); }
  40%  { transform: translate(384px, 148px) scale(1); animation-timing-function: ease-out; }
  41%  { transform: translate(384px, 148px) scale(.82); }
  42.5%{ transform: translate(384px, 148px) scale(1); }
  45%  { transform: translate(384px, 148px) scale(1); animation-timing-function: ease-out; }
  46%  { transform: translate(384px, 148px) scale(.82); }
  47.5%{ transform: translate(384px, 148px) scale(1); }
  52%  { transform: translate(384px, 148px) scale(1); animation-timing-function: cubic-bezier(.45,.05,.25,1); }
  59%  { transform: translate(244px, 322px) scale(1); animation-timing-function: ease-out; }
  60%  { transform: translate(244px, 322px) scale(.84); animation-timing-function: ease-out; }
  61.5%{ transform: translate(244px, 322px) scale(.92); animation-timing-function: cubic-bezier(.5,.05,.3,1); }
  75%  { transform: translate(450px, 318px) scale(.92); animation-timing-function: ease-out; }
  76.5%{ transform: translate(450px, 318px) scale(1); }
  82%  { transform: translate(450px, 318px) scale(1); animation-timing-function: cubic-bezier(.4,0,.3,1); }
  90%  { opacity: 1; transform: translate(520px, 420px) scale(1); }
  94%  { opacity: 0; transform: translate(520px, 420px) scale(1); }
  100% { opacity: 0; transform: translate(400px, 270px) scale(1); }
}

@keyframes dl-cur-win {
  0%   { opacity: 0; transform: translate(400px, 270px) scale(1); animation-timing-function: ease; }
  4%   { opacity: 1; transform: translate(400px, 270px) scale(1); animation-timing-function: cubic-bezier(.45,.05,.25,1); }
  18%  { opacity: 1; transform: translate(286px, 79px) scale(1); }
  21%  { transform: translate(286px, 79px) scale(1); animation-timing-function: ease-out; }
  22%  { transform: translate(286px, 79px) scale(.82); animation-timing-function: ease-out; }
  24%  { transform: translate(286px, 79px) scale(1); animation-timing-function: cubic-bezier(.45,.05,.25,1); }
  25%  { transform: translate(286px, 79px) scale(1); animation-timing-function: cubic-bezier(.45,.05,.25,1); }
  37%  { transform: translate(384px, 148px) scale(1); }
  40%  { transform: translate(384px, 148px) scale(1); animation-timing-function: ease-out; }
  41%  { transform: translate(384px, 148px) scale(.82); }
  42.5%{ transform: translate(384px, 148px) scale(1); }
  45%  { transform: translate(384px, 148px) scale(1); animation-timing-function: ease-out; }
  46%  { transform: translate(384px, 148px) scale(.82); }
  47.5%{ transform: translate(384px, 148px) scale(1); }
  72%  { transform: translate(384px, 148px) scale(1); animation-timing-function: cubic-bezier(.45,.05,.25,1); }
  77%  { transform: translate(492px, 436px) scale(1); animation-timing-function: ease-out; }
  78%  { transform: translate(492px, 436px) scale(1); animation-timing-function: ease-out; }
  79%  { transform: translate(492px, 436px) scale(.82); }
  80.5%{ transform: translate(492px, 436px) scale(1); }
  84%  { opacity: 1; transform: translate(492px, 436px) scale(1); animation-timing-function: cubic-bezier(.4,0,.3,1); }
  91%  { opacity: 1; transform: translate(540px, 462px) scale(1); }
  94%  { opacity: 0; transform: translate(540px, 462px) scale(1); }
  100% { opacity: 0; transform: translate(400px, 270px) scale(1); }
}

/* Windows installer: bar fills 57-72%, "Installing" gives way to "Scrubbr is installed" and Finish at 72%, Finish is pressed at 79%. The cursor waits away from the button while it installs (it would sit on Cancel), then glides to Finish at 72-77%. */
@keyframes dl-prog {
  0%, 57% { transform: scaleX(0); }
  62%     { transform: scaleX(.34); }
  64%     { transform: scaleX(.38); }
  69%     { transform: scaleX(.8); }
  72%, 100% { transform: scaleX(1); }
}
@keyframes dl-win-ing {
  0%, 71.5% { opacity: 1; }
  72.5%, 100% { opacity: 0; }
}
@keyframes dl-win-done {
  0%, 72% { opacity: 0; }
  73.5%, 100% { opacity: 1; }
}
@keyframes dl-win-ok {
  0%, 72.5% { opacity: 0; transform: scale(0); animation-timing-function: cubic-bezier(.2,1.8,.4,1); }
  75%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes dl-win-cancel {
  0%, 71.5% { opacity: 1; }
  72.5%, 100% { opacity: 0; }
}
@keyframes dl-win-fin {
  0%, 72% { opacity: 0; transform: scale(1); background: var(--blue); }
  73.5% { opacity: 1; transform: scale(1); background: var(--blue); }
  78.9% { opacity: 1; transform: scale(1); background: var(--blue); }
  79% { opacity: 1; transform: scale(.94); background: #0057B8; }
  80.5%, 100% { opacity: 1; transform: scale(1); background: var(--blue); }
}

@keyframes dl-btn {
  0%, 21%  { background: transparent; color: #2C3E44; transform: scale(1); }
  22%      { background: var(--blue); color: #fff; transform: scale(.9); animation-timing-function: cubic-bezier(.3,1.6,.5,1); }
  24%      { background: var(--blue); color: #fff; transform: scale(1); }
  36%      { background: var(--blue); color: #fff; transform: scale(1); }
  42%, 100%{ background: transparent; color: #2C3E44; transform: scale(1); }
}

@keyframes dl-chip {
  0%, 25%  { opacity: 0; transform: translateY(-20px) scale(.92); animation-timing-function: cubic-bezier(.2,.9,.3,1.25); }
  31%      { opacity: 1; transform: translateY(0) scale(1); }
  40%      { opacity: 1; transform: translateY(0) scale(1); }
  41%      { transform: scale(.96); }
  42.5%    { transform: scale(1); }
  45%      { transform: scale(1); }
  46%      { transform: scale(.96); }
  47.5%    { opacity: 1; transform: scale(1); }
  52%      { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; }
  58%, 100%{ opacity: 0; transform: translateY(8px) scale(.97); }
}

@keyframes dl-mac {
  0%, 49%  { opacity: 0; transform: translateY(16px) scale(.95); animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  56%      { opacity: 1; transform: translateY(0) scale(1); }
  92%      { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; }
  96%, 100%{ opacity: 0; transform: translateY(0) scale(.98); }
}

@keyframes dl-tile {
  0%, 59%  { transform: translate(0, 0) scale(1); opacity: 1; box-shadow: 0 0 0 1px rgba(11,28,33,.07), 0 10px 18px -10px rgba(11,28,33,.4); animation-timing-function: ease-out; }
  61.5%    { transform: translate(0, 0) scale(1.06); opacity: 1; animation-timing-function: cubic-bezier(.5,.05,.3,1); }
  75%      { transform: translate(206px, -4px) scale(1.06); opacity: 1; animation-timing-function: cubic-bezier(.5,0,.6,1); }
  80%      { transform: translate(206px, 2px) scale(.34); opacity: 0; }
  97%      { transform: translate(0, 0) scale(1); opacity: 0; }
  99%, 100%{ transform: translate(0, 0) scale(1); opacity: 1; }
}

@keyframes dl-lbl {
  0%, 60%  { opacity: 1; }
  62%      { opacity: .35; }
  79%      { opacity: .35; }
  81%, 97% { opacity: 0; }
  99%, 100%{ opacity: 1; }
}

@keyframes dl-fold {
  0%, 76%  { transform: scale(1); animation-timing-function: ease-out; }
  80%      { transform: scale(1.08); animation-timing-function: ease-in-out; }
  85%, 100%{ transform: scale(1); }
}

@keyframes dl-check {
  0%, 78%  { opacity: 0; transform: scale(0); animation-timing-function: cubic-bezier(.2,1.8,.4,1); }
  83%      { opacity: 1; transform: scale(1); }
  95%      { opacity: 1; transform: scale(1); }
  97%, 100%{ opacity: 0; transform: scale(0); }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .dl-main { align-items: flex-start; padding-top: 16px; }
  .dl-grid { grid-template-columns: minmax(0, 1fr); row-gap: 44px; max-width: 640px; }
}

@media (max-width: 700px) {
  :root { --dl-gut: 16px; }
  .dl-head .logo { font-size: 20px; margin-left: -6px; }
  .dl-h1 { font-size: clamp(32px, 9.4vw, 40px); }
  .dl-steps li { font-size: 16.5px; min-height: 58px; padding: 10px 18px 10px 12px; gap: 14px; }
  .dl-n { width: 32px; height: 32px; font-size: 14px; }
  .dl-line { font-size: 16.5px; }
  .dl-q { padding: 18px 18px 18px 16px; gap: 14px; }
  .dl-q > img { width: 48px; height: 48px; }
  .dl-stage { border-radius: 22px; }
  .dl-eyebrow { font-size: 11px; letter-spacing: .1em; gap: 8px; margin-bottom: 24px; }
  .dl-lset { gap: 14px; }
  .dl-lset li { height: 26px; }
  .dl-lset img { height: 16px; }
  .dl-lset img.lg-wide { height: 13px; }
  .dl-lset img.lg-tall { height: 24px; }
}