/* pages: download. The download hero, the three ways in, SmartScreen and
   checksums, updating, requirements and building from source. */

.dl-hero { padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }
.dl-panel {
  display: grid; gap: 1.1rem; padding: clamp(1.2rem, 1rem + 1vw, 1.7rem); border-radius: 20px; max-width: 620px;
  border: 1px solid rgba(255, 122, 92, .35);
  background: radial-gradient(90% 140% at 0% 0%, rgba(255, 122, 92, .14), transparent 60%), rgba(13, 28, 29, .78);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 80px -30px rgba(255, 122, 92, .35);
}
.dl-panel .btn.primary.big { width: 100%; white-space: normal; justify-content: flex-start; min-height: 68px; font-size: 1.15rem; }
.dl-panel .btn.primary.big .meta { margin-left: auto; }
.dl-file { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font: 500 .76rem/1.4 var(--f-mono); color: var(--text-3); }
.dl-file b { color: var(--text-2); font-weight: 600; }
.dl-alt { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; padding-top: 1rem; border-top: 1px solid var(--line); }
.dl-alt .link-arrow { font-size: .95rem; }
.dl-facts { display: flex; flex-wrap: wrap; gap: .5rem; }

/* three ways in */
.paths { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .paths { grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; } .paths .path.main { grid-row: span 2; } }
.path { position: relative; display: grid; gap: 1rem; align-content: start; padding: clamp(1.3rem, 1rem + 1.2vw, 2rem); border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(36, 80, 75, .3), rgba(13, 28, 29, .7)); }
.path.main { border-color: rgba(255, 122, 92, .4); background: radial-gradient(80% 60% at 100% 0%, rgba(255, 122, 92, .12), transparent 70%), linear-gradient(180deg, rgba(36, 80, 75, .32), rgba(13, 28, 29, .75)); }
.path .tag { justify-self: start; }
.path h3 { font: 700 var(--step-2)/1.05 var(--f-pixel); }
.path > p { color: var(--text-2); }
.path .crab { position: absolute; right: 1.2rem; top: 1rem; width: 84px; }
.path .crab svg { width: 100%; height: auto; }
.path .num-list { margin-top: .3rem; }
.path .terminal { margin-top: .2rem; }
.path .note { font-size: .92rem; color: var(--text-3); }
.path .note code { color: var(--foam); }

/* first run: the four choices */
.first-run { border-radius: 18px; border: 1px solid var(--line-2); background: rgba(10, 22, 23, .9); overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9); }
.first-run .bar { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); font: 600 .74rem/1 var(--f-mono); color: var(--text-3); }
.first-run .bar .mark { width: 30px; height: 20px; }
.first-run .body { padding: 1.2rem; display: grid; gap: .6rem; }
.first-run .q { font: 700 1.25rem/1.2 var(--f-pixel); margin-bottom: .4rem; }
.choice { display: grid; grid-template-columns: 22px 1fr; gap: .8rem; align-items: start; padding: .9rem 1rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(19, 40, 39, .5); }
.choice i { width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--text-3); }
.choice.on { border-color: rgba(127, 214, 194, .55); background: rgba(63, 184, 163, .1); }
.choice.on i { border-color: var(--glass); box-shadow: inset 0 0 0 4px rgba(10, 22, 23, .9); background: var(--glass); }
.choice b { display: block; }
.choice span { display: block; color: var(--text-2); font-size: .92rem; margin-top: .15rem; }

/* SmartScreen, drawn */
.smartscreen {
  position: relative; max-width: 470px; justify-self: center; width: 100%; padding: 1.6rem 1.6rem 1.2rem; border-radius: 4px;
  background: #1a5fa8; color: #fff; font-family: 'Segoe UI', var(--f-body); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
}
.smartscreen .t { font-size: 1.7rem; font-weight: 300; line-height: 1.15; }
.smartscreen p { margin-top: 1rem; font-size: .92rem; color: rgba(255, 255, 255, .92); }
.smartscreen dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; margin: 1.1rem 0 0; font-size: .9rem; }
.smartscreen dt { color: #fff; }
.smartscreen dd { margin: 0; }
.smartscreen .acts { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 2.2rem; }
.smartscreen .acts span { min-width: 110px; padding: .45rem 1rem; text-align: center; font-size: .9rem; border: 2px solid rgba(255, 255, 255, .7); }
.smartscreen .acts .run { position: relative; border-color: var(--sun); box-shadow: 0 0 0 4px rgba(255, 209, 102, .35); }
.smartscreen .pointer { position: absolute; right: 150px; bottom: -34px; font: 700 .95rem/1 var(--f-pixel); color: var(--sun); white-space: nowrap; }
.smartscreen .pointer::before { content: '↑ '; }
@media (prefers-reduced-motion: no-preference) { .smartscreen .acts .run { animation: nudge 2.2s ease-in-out infinite; } }
@keyframes nudge { 50% { box-shadow: 0 0 0 8px rgba(255, 209, 102, .15); } }

.verify { display: grid; gap: 2rem; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .verify { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } }

/* updating */
.updates { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.updates .card h3 { display: flex; gap: .7rem; align-items: center; font: 700 var(--step-1)/1.1 var(--f-pixel); }
.updates .card ul { margin-top: 1rem; }

.reqs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.req { padding: 1.3rem; border-radius: 14px; border: 1px solid var(--line); background: rgba(19, 40, 39, .45); }
.req .k { font: 600 .68rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.req b { display: block; margin-top: .6rem; font: 700 var(--step-2)/1 var(--f-pixel); color: var(--paper); }
.req span { display: block; margin-top: .5rem; color: var(--text-2); font-size: .93rem; }
.req.claude b { color: var(--coral-hi); }
.path .terminal pre { white-space: pre-wrap; overflow-wrap: anywhere; }