/* =========================================================================
   Sakhi — the download page. Loaded on top of ../sakhi.css (palette, cards,
   buttons, footer); only what is new to this page lives here.
   ========================================================================= */

.dl-hero { max-width: 760px; margin: 0 auto; padding: 18px 20px 0; text-align: center; }
.dl-hero .lede { margin-left: auto; margin-right: auto; }
.dl-hero .fineprint { margin-left: auto; margin-right: auto; }

.dl-actions { display: grid; gap: 14px; justify-items: center; }

/* ---------------------------------------------------------- the handset */

.device { position: relative; width: 138px; height: 246px; margin: 0 auto 30px; }
.device-frame {
  position: relative; z-index: 1; width: 100%; height: 100%;
  padding: 7px; border-radius: 28px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(165deg, #3a2130 0%, #170b12 60%);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 179, 209, .10) inset;
}
.device-screen {
  width: 100%; height: 100%; border-radius: 22px;
  background: radial-gradient(90px 80px at 50% 32%, rgba(255, 111, 174, .25) 0%, transparent 70%), linear-gradient(180deg, #24121c 0%, #12080d 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.device-word { font-weight: 900; font-size: 22px; letter-spacing: -.02em; color: var(--cream); }
.device-bars { display: grid; gap: 5px; width: 62px; }
.device-bars i { display: block; height: 4px; border-radius: 3px; background: rgba(255, 179, 209, .16); }
.device-bars i:nth-child(2) { width: 78%; }
.device-bars i:nth-child(3) { width: 52%; }
.device-glow {
  position: absolute; inset: -40px -30px -50px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 111, 174, .20) 0%, transparent 68%);
  filter: blur(6px); z-index: 0;
}

/* --------------------------------------------------------- device status */

.status { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 14px; color: var(--cream-faint); }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cream-faint); flex: 0 0 auto; }
.status[data-state="up"] { color: var(--cream-dim); }
.status[data-state="up"] .dot { background: var(--teal); box-shadow: 0 0 0 4px rgba(111, 227, 208, .14); }
.status[data-state="down"] .dot { background: var(--pink-deep); }

/* ------------------------------------------------------------------ specs */

.specs-wrap { margin-top: 56px; }
.spec-grid {
  margin: 0; padding: 0; display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line);
}
.spec { padding: 22px 24px; background: rgba(26, 15, 21, .85); }
.spec dt { margin: 0 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-faint); }
.spec dd { margin: 0; font-size: 22px; font-weight: 800; color: var(--cream); }
.spec .muted { display: block; font-size: 14px; font-weight: 400; color: var(--cream-dim); }

/* ------------------------------------------------------------------ steps */

.steps {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: start;
}
.step { position: relative; padding-top: 34px; }
.step-n {
  position: absolute; top: -17px; left: 22px; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 50%;
  font-weight: 900; font-size: 18px; color: #3b0020;
  background: linear-gradient(180deg, var(--pink-soft) 0%, var(--pink) 60%, var(--pink-deep) 100%);
  box-shadow: 0 10px 24px -12px rgba(255, 111, 174, .9);
}
.step h3 { font-size: 20px; text-transform: none; }
.step p { margin: 0; color: var(--cream-dim); font-size: 15.5px; }
.step b { color: var(--cream); }

.card p b { color: var(--cream); }

@media (max-width: 560px) {
  .device { width: 116px; height: 206px; }
  .spec { padding: 18px 20px; }
}