/* Página de download. A base (cores, botões, cabeçalho e rodapé) vem de /site/site.css. */

.intro { padding-block: 64px 48px; text-align: center; }
.intro-title { font-size: clamp(44px, 6vw, 72px); }
.intro-lead { margin: 22px auto 0; max-width: 580px; }
.intro-note { margin: 20px 0 0; font-size: 14px; color: var(--muted); }

.detected { margin: 48px auto 0; max-width: 760px; display: flex; flex-wrap: wrap; align-items: center; gap: 32px; padding: 44px 40px; border-radius: 32px; background: var(--surface); border: 1px solid var(--line); text-align: left; }
.detected-icon { flex: none; width: 108px; height: 108px; border-radius: 28px; background: var(--mint-tint); color: var(--mint); display: flex; align-items: center; justify-content: center; }
.detected-icon svg { width: 56px; height: 56px; }
.detected-copy { flex: 1 1 260px; min-width: 0; }
.detected-copy .eyebrow { font-size: 13px; }
.detected-copy h2 { margin: 8px 0 0; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
.detected-meta { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.detected-button { flex: 1 1 100%; }

.platforms-section { padding-block: 48px 96px; }
.section-title { margin: 0 0 28px; font-size: 36px; font-weight: 800; letter-spacing: -0.03em; }
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.platform { display: flex; flex-direction: column; gap: 18px; padding: 30px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.platform.detected-platform { border: 2px solid var(--mint); }
.platform-head { display: flex; align-items: center; gap: 14px; }
.platform-icon { width: 36px; height: 36px; flex: none; color: var(--text); }
.platform h3 { margin: 0; font-size: 22px; }
.platform p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.platform-badge { margin-left: auto; display: none; text-transform: uppercase; }
.detected-platform .platform-badge { display: inline-block; }
.detected-platform .btn { background: var(--mint); border-color: transparent; color: var(--mint-ink); }
.detected-platform .btn:hover { background: var(--mint-hover); }
.release-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; color: var(--muted); font-size: 14px; }
.release-line p { margin: 0; }
.link-button { padding: 4px 0; border: 0; background: none; color: var(--mint); font-weight: 600; }

.band { background: var(--band); }
.steps { list-style: none; margin: 0 auto; padding-block: 88px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; }
.step-number { font-size: 56px; font-weight: 800; letter-spacing: -0.03em; color: var(--mint); }
.steps h3 { margin: 8px 0 0; font-size: 22px; }
.steps p { margin: 8px 0 0; color: var(--body); font-size: 16px; line-height: 1.6; }

.faq { max-width: 860px; padding-block: 96px 120px; }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; font-size: 18px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--mint); font-weight: 700; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0 0 22px; color: var(--body); font-size: 16px; line-height: 1.6; }

.footer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-block: 32px; color: var(--muted); font-size: 14px; }
.footer-bar .logo { font-size: 18px; }
.footer-bar .logo img { width: 28px; height: 28px; }
.language-picker.inline { flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.spacer { flex: 1 1 auto; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--text); }
.share { display: flex; align-items: center; gap: 12px; }
.share a { color: var(--soft); }
.share .btn { min-height: 40px; font-size: 14px; }
.share .btn svg { width: 16px; height: 16px; }

@media (max-width: 720px) {
  .detected { padding: 28px 22px; gap: 20px; }
  .detected-icon { width: 72px; height: 72px; border-radius: 20px; }
  .detected-icon svg { width: 38px; height: 38px; }
  .steps { padding-block: 64px; }
  .spacer { display: none; }
}

/* Alternativa .exe sob o botão da Microsoft Store: discreta, em texto. */
.exe-alternative { color: var(--muted); font-size: 14px; line-height: 1.5; }
.exe-alternative .exe-line { margin: 0; }
.exe-line a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.exe-line a:hover { color: var(--mint); }
.exe-line a[aria-disabled] { color: var(--muted); text-decoration: none; cursor: default; }
.exe-alternative details { margin-top: 8px; }
.exe-alternative summary { cursor: pointer; width: fit-content; }
.exe-alternative summary:hover { color: var(--text); }
.exe-alternative details p { margin: 10px 0 0; }
.exe-alternative ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }