/* Downloads page */
.page-downloads main { background: #e8e9ed; }
.dl-hero { background: linear-gradient(rgba(0, 92, 230, .85), rgba(31, 0, 117, .9)), url("/assets/img/downloads/bg.webp") center / cover; color: #fff; padding-block: clamp(50px, 7vw, 100px); }
.dl-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.dl-hero h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem); font-weight: 700; line-height: 1.1; }
.dl-hero h1 span { color: var(--cyan); }
.dl-lead { margin-top: 16px; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); opacity: .95; max-width: 32.5rem; }
.dl-box { margin-top: 26px; background: #fff; color: var(--ink); border-radius: var(--radius); padding: 20px; box-shadow: 0 16px 36px rgba(0, 0, 40, .3); max-width: 35rem; }
.dl-step > p { margin-bottom: 12px; color: var(--text); }
.dl-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.dl-prefix { display: grid; place-items: center; padding: 0 14px; border-radius: 12px; background: #eef4ff; color: var(--navy); font-weight: 600; }
.dl-row .field { flex: 1 1 180px; height: 52px; padding: 0 16px; font-size: 1.1rem; border-radius: 12px; }
.dl-row .btn { height: 52px; border-radius: 12px; }
.dl-row .btn:disabled { opacity: .55; cursor: not-allowed; }
.dl-otp { display: flex; gap: 10px; }
.dl-otp input { width: 52px; height: 52px; text-align: center; font-size: 1.4rem; font-weight: 600; border: 1px solid var(--blue); border-radius: 12px; }
.dl-otp input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(0, 140, 255, .2); }
.dl-link { background: none; border: 0; color: var(--blue); text-decoration: underline; cursor: pointer; font: inherit; }
.dl-done { display: flex; gap: 12px; align-items: center; color: #19882c; }
.dl-done p { color: var(--ink); }
.dl-done a { color: var(--blue); }
.dl-status { min-height: 1.3em; margin-top: 10px; font-size: .95rem; }
.dl-status.is-error { color: #d32f2f; }
.dl-status.is-ok { color: #19882c; }
.dl-note { display: flex; gap: 6px; align-items: center; margin-top: 14px; font-size: .88rem; opacity: .85; }
.dl-hero-media img { width: 100%; max-width: 38.75rem; margin-inline: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35)); }

.dl-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.dl-app { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 20px; }
.dl-app img { width: 110px; height: auto; }
.dl-app h3 { font-size: 1.25rem; color: var(--navy); }
.dl-app p { margin-top: 6px; color: var(--text); line-height: 1.45; }
.dl-app-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.dl-app-actions .btn { padding: 8px 14px; font-size: 1rem; }
.dl-support img { max-width: min(100%, 35rem); margin-inline: auto; }

@media (max-width: 960px) {
  .dl-hero-grid { grid-template-columns: 1fr; }
  .dl-hero-media { order: -1; max-width: 28.75rem; margin-inline: auto; }
  .dl-apps { grid-template-columns: 1fr; max-width: 35rem; margin-inline: auto; }
}
@media (max-width: 420px) {
  .dl-otp input { width: 46px; height: 48px; }
  .dl-row .btn { flex: 1 1 100%; }
}