/* BIEPE - download page */

.hero__inner--split { display: grid !important; gap: 3.5rem; align-items: center; padding-block: 6rem 5rem; min-block-size: 0; @media (width >= 1024px) { grid-template-columns: 1fr 1fr; padding-block: 6rem; } }
.dl__back { margin-block-end: 2rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: var(--weight-semibold); color: rgb(255 255 255 / 0.8); &:hover { color: var(--white); } & .ico { --ico-size: 1rem; } }
.dl__stores { margin-block-start: 2.25rem; display: flex; flex-direction: column; gap: 1rem; @media (width >= 640px) { flex-direction: row; flex-wrap: wrap; } }
.dl__store { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border: var(--border-width) solid rgb(255 255 255 / 0.25); background: var(--color-dark); color: var(--white); transition: background var(--duration) var(--ease); &:hover { background: rgb(25 34 42 / 0.9); } & .ico { --ico-size: 1.75rem; } }
.dl__store-text { display: block; text-align: start; line-height: 1.25; }
.dl__store-small { display: block; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: rgb(255 255 255 / 0.65); }
.dl__store-name { display: block; font-size: 1.125rem; font-weight: var(--weight-semibold); }
.dl__checks { margin: 2.25rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; color: rgb(255 255 255 / 0.8); }
.dl__check { display: flex; align-items: center; gap: 0.5rem; & .ico { --ico-size: 1rem; } }
.dl__shot { position: relative; margin-inline: auto; max-inline-size: 34rem; & img { inline-size: 100%; block-size: auto; display: block; filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)); } }
.download-platforms-section { --sec-bg: var(--color-bg); --sec-fg: var(--color-text); --sec-muted: var(--color-text-muted); --kicker: var(--color-primary); --sec-py: 5rem; --sec-py-lg: 6rem;
  background: var(--sec-bg); color: var(--sec-fg); padding-block: var(--sec-py); @media (width >= 1024px) { padding-block: var(--sec-py-lg); } }
.dl__devices { margin-block-start: 2.5rem; display: grid; border-inline-start: var(--border-width) solid var(--color-border); border-block-start: var(--border-width) solid var(--color-border); @media (width >= 640px) { grid-template-columns: repeat(3, 1fr); } & > :nth-child(3n+2) { animation-range: entry 8% entry 48%; } & > :nth-child(3n+3) { animation-range: entry 16% entry 56%; } }
.dl__device { padding: 1.5rem; background: var(--white); border-block-end: var(--border-width) solid var(--color-border); border-inline-end: var(--border-width) solid var(--color-border); & .ico { --ico-size: 1.5rem; color: var(--color-primary); } @supports (animation-timeline: view()) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; } @media (prefers-reduced-motion: reduce) { animation: none; } }
.dl__device-title { margin: 1.5rem 0 0; font-weight: var(--weight-semibold); font-size: 1rem; line-height: 1.5rem; letter-spacing: 0; }
.dl__device-text { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.5rem; color: var(--color-text-muted); }
.frame { border: var(--border-width) solid var(--color-border); background: var(--frame-bg, var(--white)); padding: var(--frame-pad, 0.75rem); box-shadow: var(--frame-shadow, none); & img { inline-size: 100%; block-size: auto; display: block; } @supports (animation-timeline: view()) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; } @media (prefers-reduced-motion: reduce) { animation: none; } }