/* ==========================================================
   DOWNLOAD PAGE — loaded after style.css
   Reuses the shared tokens, header, footer and .btn styles from
   style.css and adds only what this page needs. Colour, radius and
   easing all come from the same :root tokens as the converter, so the
   two pages read as one product.
========================================================== */

/* style.css locks the converter to a single non-scrolling screen
   (`html,body{height:100%;overflow:hidden}`). A content page has to
   scroll, so that lock is released here rather than being weakened at
   the source — the converter still depends on it. */
html, body.download-page{
  height:auto;
  min-height:100%;
  overflow:visible;
}
body.download-page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  background:var(--white);
}

/* The header bar is deliberately IDENTICAL to the converter's — same
   markup, same max-width, same items (logo, feature nav, download CTA,
   language pill). Do not narrow it to match the content column below and
   do not drop items from it. */

.dl-main{
  flex:1;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(20px, 4vw, 48px);
  padding-left:max(clamp(20px, 4vw, 48px), env(safe-area-inset-left));
  padding-right:max(clamp(20px, 4vw, 48px), env(safe-area-inset-right));
}

/* ==========================================================
   HERO
========================================================== */
.dl-hero{
  text-align:center;
  padding:clamp(44px, 8vw, 84px) 0 clamp(36px, 6vw, 60px);
}
.dl-eyebrow{
  font-size:clamp(13px, 1.6vw, 15px);
  color:var(--muted);
  margin-bottom:clamp(12px, 2vw, 18px);
}
.dl-title{
  font-size:clamp(32px, 6.4vw, 60px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
}

/* ==========================================================
   三步驟
========================================================== */
/* minmax(0, 1fr), never a bare 1fr: a grid track's default minimum is
   `auto`, i.e. its content's min-content width. The artwork below is
   deliberately wider than its card (that's the bleed) and deliberately
   un-shrinkable, so a bare 1fr lets it push the whole column — and the
   page — wider than the viewport. Measured: 358px cards inside a 320px
   window before this was pinned to 0. */
.dl-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(24px, 3.4vw, 40px);
}
.dl-step{ text-align:center; min-width:0; }

.dl-step-num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px; height:26px;
  margin:0 auto clamp(16px, 2.4vw, 22px);
  border-radius:50%;
  background:var(--ink);
  color:var(--white);
  font-size:13px;
  font-weight:600;
  line-height:1;
}

/* The artwork is scaled past the card's edges on purpose and cropped by
   this box — that bleed is what stops each panel reading as a small
   drawing floating in a large empty frame.

   `container-type: inline-size` makes the card itself the sizing basis
   for everything inside it (the cqw units below). Viewport units can't
   do this job: the same card is ~344px wide in the 3-up desktop layout
   and up to 460px wide stacked on a phone, so anything sized against the
   viewport is wrong in one of the two — which is exactly how the 320px
   overflow above got in. */
.dl-step-card{
  position:relative;
  container-type:inline-size;
  aspect-ratio:3 / 2;
  border-radius:var(--radius-card);
  background:var(--surface);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.dl-step-caption{
  margin-top:clamp(16px, 2.4vw, 22px);
  font-size:clamp(13.5px, 1.6vw, 15px);
  line-height:1.6;
  color:var(--ink);
}
.dl-step-caption strong{ font-weight:600; }

/* ---------- step artwork ---------- */
/* Real screenshots (1.webp/2.webp/3.webp), not drawn — object-fit:cover
   fills the card exactly like the old hand-drawn bleed did, cropping the
   image's own 800x520 (~3.08:2) down to the card's 3:2. */
.dl-step-art{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ==========================================================
   重新下載
========================================================== */
.dl-retry{
  text-align:center;
  padding:clamp(32px, 5vw, 52px) 0 clamp(40px, 7vw, 72px);
  font-size:14px;
  color:var(--muted);
}
.dl-retry a{
  color:var(--ink);
  font-weight:600;
  text-underline-offset:3px;
}

/* ==========================================================
   系統需求
========================================================== */
.dl-section{
  padding:clamp(40px, 7vw, 68px) 0;
  border-top:1px solid var(--line);
}
.dl-h2{
  text-align:center;
  font-size:clamp(20px, 3.2vw, 28px);
  font-weight:600;
  letter-spacing:-.005em;
  margin-bottom:clamp(24px, 4vw, 40px);
}
.dl-req{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:520px;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  overflow:hidden;
}
.dl-req li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:15px 20px;
  font-size:14px;
}
.dl-req li + li{ border-top:1px solid var(--line); }
.dl-req-key{ color:var(--muted); flex-shrink:0; }
.dl-req-val{ color:var(--ink); text-align:right; }

/* ==========================================================
   RESPONSIVE
========================================================== */
@media (max-width:900px){
  /* Three cards side by side get too narrow for the artwork to read;
     stack them and cap the column so it doesn't stretch. No artwork
     sizes need overriding here — everything inside a card is measured
     against the card itself (cqw), so it follows automatically. */
  .dl-steps{
    grid-template-columns:minmax(0, 1fr);
    max-width:460px;
    margin:0 auto;
    gap:clamp(34px, 6vw, 48px);
  }
}

@media (max-width:640px){
  .dl-req li{ padding:13px 16px; font-size:13.5px; }
}