/* Download: start-line hero, then the two products apart. The app on paper (web card + phones), the game on
   ink (Windows PC and browser cards, the Windows install rail), then what you need and the link between the two. */
.dl-hero .phero__bg img { object-position: center 55%; }
.dl-hero__phone { position: relative; justify-self: center; align-self: end; }
.dl-hero__phone .phone { transform: rotate(4deg); }
.dl-float { left: -56px; bottom: 16%; }
@media (max-width: 999px) { .dl-hero__phone { display: none; } }

/* the app: a white card, copy on the left, three real screens on the right */
.dl-prod { display: grid; gap: clamp(30px, 4vw, 60px); padding: clamp(26px, 3.4vw, 52px); border-radius: var(--r-lg); position: relative; overflow: hidden; isolation: isolate; }
.dl-prod--app { background: var(--white); color: var(--on-paper); border: 1px solid var(--paper-line); }
.dl-prod--app::before { content: ""; position: absolute; width: 720px; height: 720px; right: -240px; top: -300px; background: radial-gradient(closest-side, rgba(255, 46, 120, .12), transparent); z-index: -1; }
@media (min-width: 1000px) { .dl-prod { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; } }
.dl-prod__copy { display: grid; gap: 22px; justify-items: start; }
.dl-prod__top { display: flex; align-items: center; gap: 16px; }
.dl-prod__title { font-size: clamp(56px, 7vw, 112px); font-weight: 700; letter-spacing: -.055em; line-height: .86; font-variation-settings: "wdth" 86; }
.dl-prod__phones { display: flex; justify-content: center; align-items: flex-end; }
.dl-prod__phones .phone:first-child { transform: rotate(-7deg) translate(34px, 22px); }
.dl-prod__phones .phone:nth-child(2) { z-index: 2; }
.dl-prod__phones .phone:last-child { transform: rotate(6deg) translate(-34px, 28px); }
@media (max-width: 600px) { .dl-prod__phones .phone:first-child, .dl-prod__phones .phone:last-child { display: none; } }
.dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dl-list li { display: flex; gap: 12px; color: var(--mute); font-size: 15.5px; }
.dl-list li::before { content: ""; width: 14px; height: 2px; margin-top: .8em; background: var(--lime); transform: skewX(var(--skew)); flex: none; }
.s-ink .dl-list li::before { background: var(--ride); }

/* app platforms: a real screen on top of each card */
.dl-thumb { place-items: start center; background: linear-gradient(160deg, #ffe1ec, #f3f6f2 70%); padding-top: 18px; }
.dl-thumb img { border-radius: 18px 18px 0 0; box-shadow: 0 20px 40px -18px rgba(7, 9, 11, .45); }
.dl-desk { background: linear-gradient(160deg, #1b2027, #0b0e12); display: grid; place-items: start center; padding: 18px 18px 0; }
.dl-desk__row { display: flex; gap: 8px; width: 100%; height: 100%; padding: 8px 8px 0; border-radius: 12px 12px 0 0; background: #2a3038; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); overflow: hidden; }
.dl-desk__row img { flex: 1; min-width: 0; width: 33%; height: auto; object-fit: cover; object-position: top; border-radius: 6px 6px 0 0; align-self: flex-start; }
.card:hover .dl-desk img { transform: none; }
.dl-next { margin-top: 18px; }
.dl-next .h-2 { font-size: clamp(34px, 3vw, 48px); }
.dl-next .note { font-size: 13.5px; }
.dl-store { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); }
.dl-next .feat { align-content: stretch; grid-template-rows: auto auto auto 1fr; }
.dl-next .feat > p:not(.note) { align-self: start; }

/* the game: two ways to play */
.dl-ride { display: grid; gap: 18px; }
@media (min-width: 1000px) { .dl-ride { grid-template-columns: 1fr 1fr; } }
.dl-play { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-lg); border: 1px solid var(--ink-line); background: var(--ink-2); overflow: hidden; }
.dl-play--pc { border-color: rgba(255, 46, 120, .45); box-shadow: 0 40px 90px -60px rgba(255, 46, 120, .6); }
.dl-play__img { margin: 0; position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.dl-play__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.dl-play:hover .dl-play__img img { transform: scale(1.04); }
.dl-play__img figcaption { position: absolute; left: 16px; bottom: 16px; }
.dl-play__copy { display: grid; gap: 18px; justify-items: start; align-content: start; padding: clamp(24px, 3vw, 40px); }
.dl-play__copy > p { color: var(--mute); }
.dl-play .actions { margin-top: 6px; }
.dl-play__img--pc { display: grid; place-items: center; padding: 7% 9% 9%; }
.dl-play__bg { position: absolute; inset: 0; opacity: .55; filter: blur(2px) saturate(.9); }
.dl-play__img--pc::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 9, 11, .1), rgba(7, 9, 11, .6)); z-index: 0; }
.dl-pcscreen { display: block; position: relative; z-index: 1; width: 100%; transition: transform 1.2s var(--ease); }
.dl-pcscreen img { width: 100%; height: auto; }
.dl-play:hover .dl-pcscreen { transform: translateY(-4px); }
.dl-play:hover .dl-pcscreen img { transform: none; }
.dl-play__img--pc figcaption { z-index: 2; }
.dl-play__phone { position: absolute; right: 7%; bottom: 7%; width: min(120px, 21%); border-radius: 22px; padding: 5px; transform: rotate(6deg); z-index: 1; }
.dl-play__phone .phone__screen { display: block; border-radius: 18px; }
.dl-play__phone img { transform: none !important; }

/* a few of the 36 roads */
.dl-roads { display: grid; gap: 14px; margin-top: 18px; }
.dl-roads .frame { margin: 0; aspect-ratio: 16 / 10; border: 1px solid var(--ink-line); }
@media (min-width: 900px) { .dl-roads { grid-template-columns: 1.6fr 1fr 1fr; } .dl-roads .frame { aspect-ratio: auto; height: clamp(220px, 22vw, 340px); } }

/* Windows install steps */
.dl-install { margin-top: clamp(60px, 10vh, 110px); display: grid; gap: clamp(32px, 5vh, 52px); }
.dl-install__head { display: grid; gap: 18px; justify-items: start; }
.dl-install .h-2 { font-size: clamp(30px, 3vw, 48px); }
.dl-rail .rail__step { gap: 12px; }
.dl-rail .rail__step p { max-width: 32ch; }

/* what you need */
.need { border-top: 1px solid var(--line); }
.need__row { display: grid; grid-template-columns: 64px 170px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--line); }
.need__row p { color: var(--mute); margin-top: 8px; max-width: 64ch; }
.need__row .chip { justify-self: start; }
.need__row:first-child .idx { color: var(--lime-ink); }
@media (max-width: 700px) { .need__row { grid-template-columns: 44px minmax(0, 1fr); gap: 12px 14px; padding: 24px 0; } .need__row > div { grid-column: 2; } .need__row .idx { grid-row: span 2; } }

/* the link between the two products */
.dl-link { margin-top: clamp(40px, 7vh, 72px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--paper-line); }
.dl-link .phone { width: min(150px, 34vw); border-radius: 26px; padding: 6px; }
.dl-link .phone .phone__screen { border-radius: 21px; }
.dl-link .h-3 { max-width: 36ch; }
@media (max-width: 560px) { .dl-link { grid-template-columns: 1fr; justify-items: center; text-align: center; } .dl-link .stack { justify-items: center; } }

/* closing band */
.band .btn--line { border-color: rgba(255, 255, 255, .55); color: #fff; }
.band .eyebrow::before { background: #fff; }
@media (max-width: 560px) { .dl-play__phone { display: none; } }