:root {
  --dl-navy: #071321;
  --dl-navy-2: #0e2338;
  --dl-panel: #132c43;
  --dl-cream: #f3f0e9;
  --dl-white: #f7fafc;
  --dl-ink: #142b3d;
  --dl-muted: #647b8b;
  --dl-cyan: #65d6e3;
  --dl-teal: #128b95;
  --dl-purple: #9b5de5;
  --dl-amber: #f6bd60;
  --dl-green: #55c781;
  --dl-line: #d7dee3;
  --dl-shadow: 0 24px 70px rgba(7, 19, 33, .16);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 88px; }
body { margin: 0; overflow-x: hidden; background: var(--dl-cream); color: var(--dl-ink); font-family: Aptos, "Segoe UI", Arial, sans-serif; }

.download-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: .8rem clamp(1rem, 4vw, 3.5rem);
  background: rgba(7, 19, 33, .96);
  box-shadow: 0 10px 32px rgba(7, 19, 33, .3);
  backdrop-filter: blur(18px);
}
.download-header nav { margin-left: auto; }
.download-header .current { color: var(--dl-cyan); }
#sd-download-account {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: clamp(.5rem, 2vw, 1.5rem);
  padding-left: clamp(.5rem, 2vw, 1.5rem);
  border-left: 1px solid rgba(255, 255, 255, .22);
  color: #d8e4eb;
  font-size: .78rem;
  white-space: nowrap;
}
.sd-account-actions { display: flex; gap: .45rem; }
.sd-account-button {
  min-height: 38px;
  padding: .45rem .8rem;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 999px;
  background: transparent;
  color: var(--dl-white);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.sd-account-button.primary { border-color: var(--dl-cyan); background: var(--dl-cyan); color: var(--dl-navy); }
.sd-account-button:disabled { opacity: .62; cursor: wait; }

.download-hero {
  position: relative;
  min-height: min(790px, calc(100vh - 70px));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--dl-navy);
  color: var(--dl-white);
}
.download-hero-image,
.download-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.download-hero-image { object-fit: cover; object-position: center; }
.download-hero-shade {
  background:
    linear-gradient(90deg, rgba(7, 19, 33, .99) 0%, rgba(7, 19, 33, .94) 33%, rgba(7, 19, 33, .45) 68%, rgba(7, 19, 33, .18) 100%),
    linear-gradient(0deg, rgba(7, 19, 33, .45), transparent 38%);
}
.download-hero-copy {
  position: relative;
  z-index: 2;
  width: min(760px, 88%);
  padding: 7rem 0 6rem clamp(1.2rem, 6vw, 6rem);
}
.download-hero h1 {
  margin: 0;
  max-width: 720px;
  font-size: clamp(4.2rem, 9vw, 8.4rem);
  line-height: .84;
  letter-spacing: -.07em;
}
.download-hero .hero-lede {
  max-width: 650px;
  margin: 1.8rem 0 0;
  color: #d8e4eb;
  font-size: clamp(1.08rem, 1.8vw, 1.4rem);
  line-height: 1.5;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.release-line { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2rem; }
.release-line span {
  padding: .42rem .7rem;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(7, 19, 33, .42);
  color: #c9d8e2;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.download-hero .image-disclosure { bottom: 1rem; }

.path-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #29455b;
  color: var(--dl-white);
}
.path-strip div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 1rem;
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem);
  background: var(--dl-navy-2);
}
.path-strip span { grid-row: 1 / 3; color: var(--dl-cyan); font-size: 2.6rem; font-weight: 900; line-height: 1; }
.path-strip strong { font-size: 1.05rem; }
.path-strip small { color: #aebfca; line-height: 1.35; }

.download-content { width: min(1360px, 100%); margin: 0 auto; }
.download-content > .sd-access-note {
  margin: 1.2rem clamp(1rem, 6vw, 6rem) 0;
  border: 1px solid rgba(18, 139, 149, .26);
  box-shadow: 0 10px 26px rgba(7, 19, 33, .06);
}
.primary-downloads,
.guided-setup,
.other-downloads { padding: clamp(4.5rem, 8vw, 8rem) clamp(1.2rem, 6vw, 6rem); }
.primary-downloads { position: relative; overflow: hidden; background: radial-gradient(circle at 94% 8%, rgba(101, 214, 227, .2), transparent 24%), var(--dl-cream); }
.primary-downloads::before { position: absolute; top: 5rem; right: -5rem; width: 220px; height: 220px; border: 44px solid rgba(18, 139, 149, .08); border-radius: 50%; content: ""; }
.section-heading { max-width: 840px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading h2,
.haptic-experience h2,
.install-notes h2 {
  margin: 0;
  font-size: clamp(2.6rem, 5vw, 5.4rem);
  line-height: .94;
  letter-spacing: -.05em;
}
.section-heading > p:last-child { max-width: 760px; color: var(--dl-muted); font-size: 1.12rem; line-height: 1.55; }

.download-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.2rem; }
.download-grid > div { display: flex; }
.download-card {
  position: relative;
  display: flex;
  min-height: 350px;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--dl-line);
  border-top: 7px solid var(--dl-teal);
  background: #fff;
  box-shadow: var(--dl-shadow);
}
.download-card::after {
  position: absolute;
  right: -60px;
  bottom: -90px;
  width: 230px;
  height: 230px;
  border: 42px solid rgba(101, 214, 227, .12);
  border-radius: 50%;
  content: "";
}
.download-card.featured { min-height: 350px; background: linear-gradient(150deg, #fff 0%, #eef8fa 100%); }
.download-card.cyan-card { border-top-color: var(--dl-cyan); }
.download-card.purple-card { border-top-color: var(--dl-purple); background: linear-gradient(150deg, #fff 0%, #f5effc 100%); }
.download-card.purple-card::after { border-color: rgba(155, 93, 229, .12); }
.download-card.amber-card { border-top-color: var(--dl-amber); }
.download-card.green-card { border-top-color: var(--dl-green); }
.card-topline { display: flex; justify-content: space-between; gap: 1rem; color: var(--dl-teal); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.card-topline .platform { max-width: 75%; }
.card-topline .version { color: var(--dl-muted); white-space: nowrap; }
.download-card h3 { position: relative; z-index: 1; margin: 1.6rem 0 .7rem; max-width: 520px; font-size: clamp(1.65rem, 2.4vw, 2.5rem); line-height: 1; letter-spacing: -.035em; }
.download-card .what { position: relative; z-index: 1; max-width: 570px; margin: 0 0 2rem; color: var(--dl-muted); font-size: 1rem; line-height: 1.5; }
.download-button {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(100%, 340px);
  min-height: 54px;
  margin-top: auto;
  padding: .75rem .8rem .75rem 1.15rem;
  border-radius: 999px;
  background: var(--dl-navy);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  transition: transform .15s ease, background .15s ease;
}
.download-button b { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--dl-cyan); color: var(--dl-navy); font-size: 1.2rem; }
.purple-card .download-button b { background: var(--dl-purple); color: #fff; }
.download-button:hover,
.download-button:focus-visible { transform: translateY(-2px); background: #123552; }
.file-meta { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 1rem; margin: 1rem 0 0; color: var(--dl-muted); font-size: .76rem; }
.file-meta span:first-child { min-width: 0; overflow-wrap: anywhere; }
.file-meta span:last-child { flex-shrink: 0; font-weight: 800; }
code { padding: .1rem .35rem; border-radius: 5px; background: #e8edf0; font: .82rem ui-monospace, Consolas, monospace; }
.primary-grid > div { min-width: 0; }
.test-note { margin-top: 1.2rem; padding: 1.1rem 1.3rem; border-left: 6px solid var(--dl-cyan); background: #fff; color: #4d6070; box-shadow: 0 8px 24px rgba(7, 19, 33, .06); }
.test-note strong { color: var(--dl-ink); }

.haptic-experience {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .85fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
  padding: clamp(5rem, 9vw, 9rem) clamp(1.2rem, 6vw, 6rem);
  background: radial-gradient(circle at 86% 22%, rgba(155, 93, 229, .17), transparent 30%), var(--dl-navy);
  color: var(--dl-white);
}
.haptic-copy > p:not(.eyebrow) { max-width: 720px; color: #b9ccd7; font-size: 1.08rem; line-height: 1.6; }
.capability-list { display: grid; gap: .75rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.capability-list li { display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: 0 1rem; padding: 1rem; border: 1px solid #29455b; background: rgba(14, 35, 56, .72); }
.capability-list small { grid-column: 2; color: #9fb4c1; }
.capability-dot { grid-row: 1 / 3; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 18px currentColor; }
.capability-dot.cyan { background: var(--dl-cyan); color: var(--dl-cyan); }
.capability-dot.purple { background: var(--dl-purple); color: var(--dl-purple); }
.capability-dot.amber { background: var(--dl-amber); color: var(--dl-amber); }
.zone-visual {
  position: relative;
  min-height: 570px;
  overflow: hidden;
  border: 1px solid #29455b;
  background: radial-gradient(circle at 50% 42%, #17445c 0, #0b2133 42%, #071321 75%);
  box-shadow: var(--dl-shadow);
}
.zone {
  position: absolute;
  left: 50%;
  display: grid;
  width: min(360px, 72%);
  height: 180px;
  transform: translateX(-50%);
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 42px 42px 28px 28px;
  background: rgba(7, 19, 33, .84);
}
.zone::before,
.zone::after { position: absolute; border: 1px solid currentColor; border-radius: inherit; content: ""; opacity: .5; }
.zone::before { inset: 18px; }
.zone::after { inset: 38px; opacity: .28; }
.zone.rear { top: 75px; color: var(--dl-purple); box-shadow: 0 0 54px rgba(155, 93, 229, .23); }
.zone.front { bottom: 90px; color: var(--dl-cyan); box-shadow: 0 0 54px rgba(101, 214, 227, .23); }
.zone span { position: relative; z-index: 2; font-size: .72rem; font-weight: 900; letter-spacing: .16em; }
.zone b { position: absolute; z-index: 2; right: 1.3rem; bottom: .9rem; font-size: 2.8rem; opacity: .3; }
.zone-path { position: absolute; top: 252px; left: 50%; display: flex; gap: 12px; transform: translateX(-50%); }
.zone-path i { width: 9px; height: 9px; border-radius: 50%; background: var(--dl-cyan); box-shadow: 0 0 12px var(--dl-cyan); animation: zone-pulse 1.25s ease-in-out infinite alternate; }
.zone-path i:nth-child(2) { animation-delay: .12s; }
.zone-path i:nth-child(3) { background: var(--dl-white); animation-delay: .24s; }
.zone-path i:nth-child(4) { background: var(--dl-purple); animation-delay: .36s; }
.zone-path i:nth-child(5) { background: var(--dl-purple); animation-delay: .48s; }
.zone-visual > p { position: absolute; right: 1rem; bottom: .75rem; margin: 0; color: #89a2b2; font-size: .7rem; font-weight: 900; letter-spacing: .14em; }
@keyframes zone-pulse { from { transform: translateY(-7px); opacity: .45; } to { transform: translateY(7px); opacity: 1; } }

.guided-setup { background: linear-gradient(135deg, #e8e3da 0%, #f5f2ec 55%, #e5f2f3 100%); }
.setup-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 3rem 0 0;
  padding: 0;
  background: #c8c4bc;
  list-style: none;
  box-shadow: var(--dl-shadow);
}
.setup-grid li { min-height: 280px; padding: 1.4rem; background: #fff; }
.setup-grid li > span { color: var(--dl-teal); font-size: 2.5rem; font-weight: 900; line-height: 1; }
.setup-grid strong { display: block; margin-top: 3rem; font-size: 1.2rem; line-height: 1.15; }
.setup-grid p { color: var(--dl-muted); font-size: .88rem; line-height: 1.5; }
.expected-sequence { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.expected-sequence div { padding: 1.25rem; border-top: 6px solid var(--dl-cyan); background: var(--dl-navy); color: #fff; }
.expected-sequence div:nth-child(2) { border-color: var(--dl-purple); }
.expected-sequence div:nth-child(3) { border-color: var(--dl-amber); }
.expected-sequence .stop-state { border-color: var(--dl-green); }
.expected-sequence span { color: var(--dl-cyan); font-size: .74rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.expected-sequence div:nth-child(2) span { color: #c9a7f3; }
.expected-sequence div:nth-child(3) span { color: var(--dl-amber); }
.expected-sequence .stop-state span { color: var(--dl-green); }
.expected-sequence strong { display: block; margin-top: .65rem; }
.expected-sequence p { margin: .25rem 0 0; color: #aebfca; font-size: .82rem; }

.other-downloads { background: var(--dl-white); }
.secondary-grid .download-card { min-height: 370px; box-shadow: 0 14px 44px rgba(7, 19, 33, .1); }

.install-notes,
.wizard-callout {
  display: grid;
  grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1.2rem, 6vw, 6rem);
  background: var(--dl-navy-2);
  color: var(--dl-white);
}
.wizard-callout > p { max-width: 760px; margin: 0; color: #c0d0d9; font-size: 1.08rem; line-height: 1.7; }
.wizard-callout h2 { margin: 0; font-size: clamp(2.6rem, 5vw, 5.4rem); line-height: .94; letter-spacing: -.05em; }
.note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.note-grid article { padding: 1.25rem; border: 1px solid #29455b; background: var(--dl-navy); }
.note-grid strong { color: var(--dl-cyan); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.note-grid p { margin: .45rem 0 0; color: #afc1cc; font-size: .88rem; line-height: 1.5; }
.technical-details { grid-column: 1 / -1; padding: 1.1rem 1.25rem; border: 1px solid #355268; background: rgba(7, 19, 33, .65); }
.technical-details summary { cursor: pointer; color: var(--dl-cyan); font-weight: 900; }
.technical-details a { color: var(--dl-cyan); }
.technical-details table { width: 100%; margin-top: 1rem; border-collapse: collapse; table-layout: fixed; }
.technical-details th,
.technical-details td { padding: .75rem; border-bottom: 1px solid #29455b; text-align: left; overflow-wrap: anywhere; }
.technical-details code { color: var(--dl-ink); white-space: normal; word-break: break-all; }
.foot { margin: 0; padding: 1rem clamp(1.2rem, 6vw, 6rem) 2.5rem; background: var(--dl-navy-2); color: #8ca4b3; font-size: .75rem; }
.download-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding: 1.4rem clamp(1.2rem, 5vw, 4.5rem); background: #040b12; color: #8da2b1; font-size: .75rem; }
.download-footer a { color: #fff; }
.download-footer > span { text-align: center; }

@media (max-width: 1050px) {
  .download-header nav a:not(.current) { display: none; }
  .download-header .brand span { display: none; }
  .download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .haptic-experience,
  .install-notes,
  .wizard-callout { grid-template-columns: 1fr; }
  .setup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expected-sequence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zone-visual { min-height: 520px; }
  .download-card.featured { min-height: 400px; }
}

@media (max-width: 720px) {
  .download-header { align-items: flex-start; flex-wrap: wrap; gap: .5rem; }
  .download-header nav { display: none; }
  #sd-download-account { width: 100%; margin: 0; padding: .65rem 0 0; border-top: 1px solid rgba(255, 255, 255, .18); border-left: 0; justify-content: space-between; white-space: normal; }
  .sd-account-actions { flex-shrink: 0; }
  .download-hero { min-height: 700px; align-items: flex-end; }
  .download-hero-image { height: 360px; object-position: 68% center; }
  .download-hero-shade { background: linear-gradient(180deg, rgba(7, 19, 33, .15) 0, rgba(7, 19, 33, .78) 42%, var(--dl-navy) 58%); }
  .download-hero-copy { width: 100%; padding: 25rem 1.2rem 5rem; }
  .download-hero h1 { font-size: clamp(3.8rem, 19vw, 6rem); }
  .download-hero .image-disclosure { top: 335px; right: 1rem; bottom: auto; left: 1rem; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .path-strip { grid-template-columns: 1fr; }
  .path-strip div { padding: 1.1rem 1.2rem; }
  .primary-downloads,
  .guided-setup,
  .other-downloads,
  .haptic-experience,
  .install-notes,
  .wizard-callout { padding: 4rem 1.2rem; }
  .download-content > .sd-access-note { margin-inline: 1.2rem; }
  .download-card,
  .download-card.featured { min-height: 0; }
  .download-grid { grid-template-columns: 1fr; }
  .download-card h3 { margin-top: 1.7rem; }
  .setup-grid,
  .expected-sequence,
  .note-grid { grid-template-columns: 1fr; }
  .setup-grid li { min-height: 0; }
  .setup-grid strong { margin-top: 1.5rem; }
  .zone-visual { min-height: 470px; }
  .zone { height: 145px; }
  .zone.rear { top: 65px; }
  .zone.front { bottom: 80px; }
  .zone-path { top: 218px; }
  .file-meta { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .download-footer { grid-template-columns: 1fr; text-align: center; }
  .download-footer .footer-brand { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .zone-path i { animation: none; }
  *, *::before, *::after { transition: none !important; }
}