/* Download page: one app window, split into computer / mobile */
.win { overflow: hidden; }
.win__bar { position: relative; display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 9%, var(--bg-2)), color-mix(in srgb, var(--text) 4%, var(--bg-2))); border-bottom: 1px solid var(--line); }
.win__dots { display: flex; gap: 7px; }
.win__dots i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 -1px 0 rgb(0 0 0 / .25); }
.win__dots i:nth-child(2) { background: #febc2e; }
.win__dots i:nth-child(3) { background: #28c840; }
.win__title { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 13.5px;
  color: color-mix(in srgb, var(--text) 80%, var(--muted)); white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.win__title img { width: 20px; height: 20px; }
.win__ctrl { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.win__ctrl i { width: 12px; height: 12px; border: 1.5px solid var(--muted); border-radius: 3px; opacity: .6; }
.win__ctrl i:first-child { height: 0; border-width: 0 0 1.5px; border-radius: 0; }
.win__hero { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; padding: 28px 30px; border-bottom: 1px solid var(--line);
  background: radial-gradient(600px 220px at 15% 0%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 70%),
    radial-gradient(500px 220px at 100% 100%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 70%); }
.win__logo { width: 170px; filter: drop-shadow(0 14px 24px rgb(0 0 0 / .5)); }
.anim .win__logo { animation: float 6s ease-in-out infinite; }
.win__cols { display: grid; grid-template-columns: 1fr 1fr; }
.win__sec { padding: 24px 26px; }
.win__sec + .win__sec { border-left: 1px solid var(--line); }
.win__sechead { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.win__sechead b { display: block; font-family: var(--font-head); font-size: 19px; line-height: 1.2; }
.win__sechead small { color: var(--muted); font-size: 12.5px; letter-spacing: .06em; }
.win__secicon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--grad);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 6px 16px -6px color-mix(in srgb, var(--primary) 70%, transparent); }
.win__secicon .i { width: 21px; height: 21px; }
.os-list { display: grid; gap: 12px; margin-top: 16px; }
.os-list--grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.os-card { --os: var(--primary); position: relative; display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r);
  background: linear-gradient(120deg, color-mix(in srgb, var(--os) 10%, transparent), color-mix(in srgb, var(--bg) 40%, transparent) 60%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--os) 26%, transparent); transition: transform .25s var(--ease), box-shadow .25s; }
.os-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--os) 60%, transparent), 0 14px 26px -16px color-mix(in srgb, var(--os) 80%, transparent); }
.os-card__logo { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 15px; color: var(--os);
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--os) 30%, transparent), color-mix(in srgb, var(--os) 8%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--os) 40%, transparent), inset 0 1px 0 rgb(255 255 255 / .12); transition: transform .4s var(--ease); }
.os-card:hover .os-card__logo { transform: rotate(-8deg) scale(1.06); }
.os-card__logo svg { width: 30px; height: 30px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--os) 45%, transparent)); }
.os-card__body { min-width: 0; }
.os-card__body b { display: block; font-family: var(--font-head); font-size: 17px; }
.os-card__body span { display: block; font-size: 13.5px; color: var(--muted); }
.os-card__body small { display: inline-block; margin-top: 3px; font-size: 12px; color: color-mix(in srgb, var(--os) 70%, var(--text)); }
.os-card__btn { --b: linear-gradient(115deg, color-mix(in srgb, var(--os) 80%, #fff), color-mix(in srgb, var(--os) 70%, var(--secondary)));
  --d: color-mix(in srgb, var(--os) 40%, #05030a); --glow: color-mix(in srgb, var(--os) 50%, transparent); color: #0b0614; text-shadow: none; }
.os-card__soon { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--muted); padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.os-card.is-soon { opacity: .72; }
.os-card__here { position: absolute; top: -10px; right: 14px; display: none; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px;
  font-family: var(--font-head); font-size: 11.5px; font-weight: 700; color: #2a1404; background: var(--grad-gold); box-shadow: 0 4px 12px -4px var(--accent); }
.os-card__here .i { width: 13px; height: 13px; stroke-width: 3; }
.os-card.is-here { box-shadow: inset 0 0 0 2px var(--accent), 0 16px 30px -18px var(--accent); }
.os-card.is-here .os-card__here { display: inline-flex; }
.win__req { margin-top: 14px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--soft); }
.win__req summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
.win__req .prose { margin-top: 8px; }
.win__extra { padding: 22px 26px; border-top: 1px solid var(--line); }
.win__steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 45%, transparent); }
.win__step { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.win__step + .win__step { border-left: 1px solid var(--line); }
.win__stepn { font-family: var(--font-head); font-weight: 700; font-size: 26px; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--text) 30%, transparent); }
.win__stepi { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--primary-soft); color: var(--accent); }
.win__step b { display: block; font-family: var(--font-head); font-size: 14.5px; }
.win__step small { color: var(--muted); font-size: 12.5px; line-height: 1.4; display: block; }
@media (max-width: 900px) {
  .win__cols, .win__steps { grid-template-columns: 1fr; }
  .win__sec + .win__sec, .win__step + .win__step { border-left: 0; border-top: 1px solid var(--line); }
  .win__hero { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 22px 18px; }
  .win__hero .row { justify-content: center; }
  .win__logo { width: 140px; }
  .win__ctrl { display: none; }
  .win__title { position: static; transform: none; max-width: none; }
}
@media (max-width: 520px) {
  .os-card { grid-template-columns: 46px 1fr; }
  .os-card__logo { width: 46px; height: 46px; }
  .os-card__btn, .os-card__soon { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
  .win__sec { padding: 18px 16px; }
}