/* ============================================================
   Download page - Figma frame 6157:2050
   "Download — High Fidelity v1 (Desktop 1440)"
   ============================================================ */

/* ---------- 01 Hero (6163:2415) ---------- */
.dl-hero__inner{display:flex;align-items:center;gap:var(--space-8)}
.dl-hero__copy{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5)}
.dl-hero__lead{font-size:18px;line-height:28px;color:var(--gray-600)}
.dl-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);padding-top:var(--space-2)}
.dl-hero__detected{display:flex;align-items:center;gap:var(--space-2);font-size:14px;line-height:20px;color:var(--gray-500)}
.dl-hero__tick{width:18px;height:18px;flex:none;display:flex;align-items:center;justify-content:center}
.dl-hero__tick img{width:auto;height:auto}
.dl-hero__visual{flex:none;width:560px}
.dl-hero__visual img{width:100%;height:auto}

/* ---------- 02 Three ways to use ezee (6171:2712) ---------- */
.dl-ways__head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.dl-ways__label{color:var(--primary-700)}
.dl-ways__lead{max-width:720px;font-size:16px;line-height:26px;color:var(--gray-600)}

.dl-ways{display:flex;align-items:stretch;gap:var(--space-5);margin-top:var(--space-7)}
.dl-way{background:var(--white);border:1px solid var(--gray-100);border-radius:20px} /* Figma: raw 20px radius, raw #d0d3d9 stroke */
.dl-way--main{flex:none;width:588px;display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:40px; /* raw 20/40 in Figma */
  border:2px solid var(--brand);box-shadow:var(--shadow-raised)}
.dl-ways__side{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-5)}
/* Figma fixes each side card at 160px (half of the 344px column), so its 96px content
   eats 1px of the 32px padding top and bottom - hence 31px here. */
.dl-way--row{flex:1;display:flex;align-items:center;gap:var(--space-4);padding:31px var(--space-6)}
.dl-way__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4)}
.dl-way__head{display:flex;align-items:center;gap:10px}
.dl-way__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.dl-way__title--sm{gap:var(--space-2)}
.dl-way__text{font-size:16px;line-height:26px;color:var(--gray-600)}
.dl-way__text--sm{font-size:14px;line-height:20px}
.dl-way__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.dl-way__note{font-size:14px;line-height:20px;color:var(--gray-500)}
.dl-way--row .btn{flex:none}

/* Web/Icon Tile sizes used here: 56 (radius/lg, 26px icon) and 40 (radius/md, 20px icon) */
.dl-tile{border-radius:var(--radius-md)}
.dl-tile--lg{width:56px;height:56px;border-radius:var(--radius-lg)}
.dl-tile--lg img{max-width:none;max-height:none}

/* "Available" pill - Figma Success/success-50 + success-700 (not in the shared tokens) */
.dl-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-pill);
  background:#e7f8f0;color:#0d824b;font-size:12px;line-height:16px;white-space:nowrap}

/* ---------- 04 What your device needs (6165:2670) ---------- */
.dl-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:40px} /* raw 40px gap in Figma */
.dl-spec{display:flex;flex-direction:column;gap:20px;padding-top:var(--space-5);border-top:1px solid var(--primary-100)} /* raw 20px gap */
.dl-spec__list{display:flex;flex-direction:column;gap:20px;margin:0}
.dl-spec__item{display:flex;flex-direction:column;gap:2px}
.dl-spec__item dt{font-size:12px;line-height:16px;color:var(--gray-500)}
.dl-spec__item dd{margin:0;font-size:14px;line-height:20px;font-weight:500;color:var(--gray-900)}

/* ---------- 05 Help (6165:2706) ---------- */
.dl-help{padding-block:80px} /* raw 80px in Figma */
.dl-help__card{display:flex;align-items:center;gap:40px;padding:40px; /* raw 40px in Figma */
  background:var(--primary-50);border:1px solid var(--primary-100);border-radius:20px}
.dl-help__icon{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center}
.dl-help__icon img{width:auto;height:auto}
.dl-help__copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.dl-help__text{font-size:14px;line-height:20px;color:var(--primary-800)}
.dl-help__actions{flex:none;display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* ============================================================
   Responsive - same content, re-flowed
   ============================================================ */
@media (max-width:1100px){
  .dl-hero__inner{flex-direction:column;align-items:flex-start;gap:var(--space-7)}
  .dl-hero__copy{flex:none;width:100%}
  .dl-hero__visual{width:min(560px,100%)}
  .dl-ways{flex-direction:column}
  .dl-way--main{width:auto}
  .dl-help__card{flex-wrap:wrap;gap:var(--space-5)}
  .dl-help__copy{flex:1 1 360px}
  .dl-help__actions{flex-basis:100%}
}

@media (max-width:640px){
  .dl-hero__detected{align-items:flex-start}
  .dl-hero__tick{margin-top:1px}
  .dl-hero__actions .btn,.dl-help__actions .btn{flex:1 1 auto}
  .dl-way--main{padding:var(--space-5)}
  .dl-way--row{flex-direction:column;align-items:flex-start;padding:var(--space-5)}
  .dl-specs{grid-template-columns:1fr}
  .dl-help{padding-block:var(--section-y)}
  .dl-help__card{flex-direction:column;align-items:flex-start;padding:var(--space-5)}
  .dl-help__copy{flex:none}
}