.dl-page { width: min(100% - 3rem, 61.25rem); margin: 0 auto; padding: 2.375rem 0 4rem; color: #334155; }
.dl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.375rem; }
.dl-eyebrow { margin: 0 0 .4375rem; color: #0369a1; font-size: .75rem; font-weight: 700; }
.dl-head h1 { margin: 0; color: #0f172a; font-size: 1.75rem; line-height: 1.25; font-weight: 700; }
.dl-lead { max-width: 38.75rem; margin: .5625rem 0 0; color: #64748b; font-size: .875rem; line-height: 1.7; }
.dl-current { flex: none; border: 1px solid #e2e8f0; border-radius: .5rem; padding: .5625rem .75rem; background: #fff; color: #64748b; font-size: .75rem; line-height: 1.5; }
.dl-current span, .dl-current strong { display: block; }
.dl-current strong { color: #0f172a; }
.dl-segments { width: max-content; max-width: 100%; display: flex; gap: .1875rem; padding: .25rem; margin-bottom: 1.125rem; overflow-x: auto; border-radius: .5rem; background: #e2e8f0; }
.dl-segments button { min-width: 5.125rem; height: 2.125rem; padding: 0 .875rem; border: 0; border-radius: .375rem; background: transparent; color: #475569; cursor: pointer; white-space: nowrap; }
.dl-segments button[aria-pressed="true"] { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(15,23,42,.12); font-weight: 600; }
.dl-list { display: grid; gap: .875rem; }
.dl-platform { display: grid; grid-template-columns: 11.75rem minmax(0,1fr); min-height: 15.625rem; overflow: hidden; border: 1px solid #e2e8f0; border-radius: .5rem; background: #fff; }
.dl-platform[hidden], .dl-overlay[hidden] { display: none; }
.dl-side { padding: 1.375rem; border-right: 1px solid #e2e8f0; }
.dl-android { background: #ecfdf5; }
.dl-ios { background: #f0f9ff; }
.dl-mp { background: #f0fdf4; }
.dl-mark { width: 2.875rem; height: 2.875rem; display: grid; place-items: center; border: 1px solid currentColor; border-radius: .5rem; background: rgba(255,255,255,.68); font-size: 1.0625rem; font-weight: 800; }
.dl-android .dl-mark { color: #047857; }
.dl-ios .dl-mark { color: #0369a1; }
.dl-mp .dl-mark { color: #15803d; }
.dl-side h2 { margin: 1rem 0 .3125rem; color: #0f172a; font-size: 1.125rem; font-weight: 700; }
.dl-side p { margin: 0; color: #64748b; font-size: .8125rem; line-height: 1.55; }
.dl-status { display: inline-flex; align-items: center; gap: .375rem; margin-top: 1rem; color: #334155; font-size: .75rem; font-weight: 600; }
.dl-status::before { content: ""; width: .4375rem; height: .4375rem; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.13); }
.dl-body { min-width: 0; padding: 1.375rem 1.5rem; }
.dl-title { margin: 0; color: #0f172a; font-size: 1.0625rem; font-weight: 650; }
.dl-copy { margin: .375rem 0 0; color: #64748b; font-size: .8125rem; line-height: 1.65; }
.dl-facts { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 1.125rem 0; }
.dl-facts > div { min-width: 7.5rem; }
.dl-facts span { display: block; margin-bottom: .1875rem; color: #94a3b8; font-size: .6875rem; }
.dl-facts strong { color: #334155; font-size: .8125rem; font-weight: 600; }
.dl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5625rem; margin-top: 1.125rem; }
.dl-btn { min-height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 0 .875rem; border: 1px solid transparent; border-radius: .4375rem; cursor: pointer; text-decoration: none; font-size: .8125rem; font-weight: 650; }
.dl-btn svg { width: 1rem; height: 1rem; }
.dl-primary { color: #fff; background: #0f172a; }
.dl-primary:hover { color: #fff; background: #1e293b; }
.dl-secondary { color: #334155; background: #fff; border-color: #cbd5e1; }
.dl-secondary:hover { color: #0f172a; background: var(--kb-bg); }
.dl-btn:disabled { cursor: not-allowed; opacity: .55; }
.dl-error { margin: .75rem 0 0; color: #b91c1c; font-size: .8125rem; }
.dl-steps { margin: 1.125rem 0; display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }
.dl-steps > div { min-width: 0; padding: .125rem .625rem; border-left: 2px solid #cbd5e1; }
.dl-steps b, .dl-steps span { display: block; font-size: .75rem; line-height: 1.45; }
.dl-steps b { margin-bottom: .1875rem; color: #0f172a; }
.dl-steps span { color: #64748b; }
.dl-qr-row { display: grid; grid-template-columns: 8.5rem minmax(0,1fr); gap: 1.25rem; align-items: center; margin-top: 1rem; }
.dl-qr-row img { width: 8.5rem; height: 8.5rem; object-fit: contain; border: 1px solid #e2e8f0; border-radius: .5rem; background: #fff; }
.dl-qr-row p { margin: 0 0 .75rem; color: #64748b; font-size: .8125rem; line-height: 1.65; }
.dl-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1.25rem; background: rgba(15,23,42,.48); }
.dl-dialog { width: min(100%,26.875rem); padding: 1.25rem; border: 1px solid #e2e8f0; border-radius: .5rem; background: #fff; box-shadow: 0 10px 28px rgba(15,23,42,.12); }
.dl-dialog-head { display: flex; align-items: center; gap: .75rem; }
.dl-dialog-head h3 { margin: 0; color: #0f172a; font-size: 1.0625rem; font-weight: 650; }
.dl-icon-btn { width: 1.875rem; height: 1.875rem; display: grid; place-items: center; margin-left: auto; border: 1px solid #e2e8f0; border-radius: .375rem; background: #fff; color: #64748b; cursor: pointer; }
.dl-dialog > p { margin: .75rem 0; color: #64748b; font-size: .8125rem; line-height: 1.65; }
.dl-dialog-facts { margin: .875rem 0 1.125rem; overflow: hidden; border: 1px solid #e2e8f0; border-radius: .4375rem; }
.dl-dialog-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .5625rem .6875rem; border-bottom: 1px solid #e2e8f0; font-size: .75rem; }
.dl-dialog-facts div:last-child { border-bottom: 0; }
.dl-dialog-facts span { color: #94a3b8; }
.dl-dialog-facts strong { min-width: 0; color: #334155; text-align: right; overflow-wrap: anywhere; }
.dl-dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.dl-qr-dialog { width: min(100%,22.5rem); text-align: center; }
.dl-qr-dialog img { width: 15rem; height: 15rem; max-width: 100%; object-fit: contain; }

@media (max-width: 767px) {
  .dl-page { width: min(100% - 1.5rem,32.5rem); padding: 1.5rem 0 2.625rem; }
  .dl-head { display: block; margin-bottom: 1.125rem; }
  .dl-head h1 { font-size: 1.5rem; }
  .dl-lead { font-size: .8125rem; }
  .dl-current { display: inline-block; width: 100%; margin-top: .875rem; }
  .dl-segments { width: 100%; }
  .dl-segments button { min-width: 4.875rem; flex: 1; padding: 0 .625rem; }
  .dl-platform { grid-template-columns: 1fr; }
  .dl-side { min-height: auto; display: grid; grid-template-columns: 2.875rem minmax(0,1fr); column-gap: .8125rem; align-items: center; padding: 1.125rem; border-right: 0; border-bottom: 1px solid #e2e8f0; }
  .dl-side h2 { margin: 0 0 .1875rem; }
  .dl-side p, .dl-side .dl-status { grid-column: 2; }
  .dl-side .dl-status { margin-top: .5625rem; }
  .dl-body { padding: 1.125rem; }
  .dl-actions { align-items: stretch; }
  .dl-actions .dl-btn, #dlAndroidButton { width: 100%; }
  .dl-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
  .dl-facts > div { min-width: 0; }
  .dl-steps { grid-template-columns: 1fr; gap: .6875rem; }
  .dl-qr-row { grid-template-columns: 1fr; }
  .dl-qr-row img { width: 10.25rem; height: 10.25rem; }
  .dl-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
}