/* =========================================================================
   Lantern — the download page.

   Loaded on top of lantern.css, which already carries the palette, the glass
   cards, the pill button and the footer. Only what is new to this page lives
   here, so the two pages cannot drift apart.
   ========================================================================= */

.dl-hero { max-width: 760px; padding-top: 18px; }

.eyebrow {
  margin: 0 0 6px;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--flame); opacity: .85;
}

/* --------------------------------------------------------------- the phone
   A suggestion of a handset rather than a render of one: a rounded frame, a
   warm screen and the flame from the landing page sitting in it. Decorative,
   so it is hidden from assistive tech in the markup. */

.device {
  position: relative;
  width: 132px; height: 236px;
  margin: 0 auto 30px;
}

.device-frame {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  padding: 7px;
  border-radius: 26px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(165deg, #241c15 0%, #130f0b 60%);
  box-shadow:
    0 30px 60px -30px rgba(0, 0, 0, .95),
    0 1px 0 rgba(255, 226, 184, .10) inset;
}

.device-screen {
  width: 100%; height: 100%;
  border-radius: 20px;
  background:
    radial-gradient(90px 70px at 50% 30%, rgba(217, 181, 108, .18) 0%, transparent 70%),
    linear-gradient(180deg, #16110c 0%, #0c0906 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  overflow: hidden;
}

/* The same breathing flame as the landing page, scaled down. */
.device-flame {
  width: 34px; height: 34px;
  display: grid; place-items: center; position: relative;
}
.device-flame::before {
  content: ""; position: absolute; inset: -16px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 181, 108, .30) 0%, transparent 65%);
  animation: glow 5.5s ease-in-out infinite;
}
.device-flame span {
  width: 17px; height: 17px;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 50% 62%, #fff4dc 0%, var(--flame) 45%, var(--flame-deep) 100%);
  box-shadow: 0 0 18px rgba(217, 181, 108, .6);
  animation: flicker 5.5s ease-in-out infinite;
}

.device-word {
  font-family: var(--serif);
  font-size: 11px; letter-spacing: .3em;
  color: var(--cream-dim);
}

/* Three stand-ins for content, so the screen does not read as empty. */
.device-bars { display: grid; gap: 5px; width: 62px; }
.device-bars i {
  display: block; height: 4px; border-radius: 3px;
  background: rgba(255, 226, 184, .12);
}
.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(217, 181, 108, .16) 0%, transparent 68%);
  filter: blur(6px);
  z-index: 0;
}

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

.specs { max-width: 1040px; margin: 54px auto 0; padding: 0 20px; }

.spec-grid {
  margin: 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}

.spec {
  padding: 22px 24px;
  background: rgba(23, 19, 15, .72);
}
.spec dt {
  margin: 0 0 6px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream-faint);
}
.spec dd {
  margin: 0;
  font-family: var(--serif); font-size: 19px; color: var(--cream);
}
.spec .muted { font-family: var(--sans); font-size: 13px; color: var(--cream-dim); }

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

.steps {
  max-width: 1040px; margin: 0; padding: 0;
  list-style: none;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  align-items: start;
}

.step { position: relative; padding-top: 30px; }

/* The numeral sits half out of the card, like a drop cap on a page. */
.step-n {
  position: absolute; top: -16px; left: 22px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--serif); font-size: 17px; color: #1a1206;
  background: linear-gradient(180deg, var(--flame-soft) 0%, var(--flame) 60%, var(--flame-deep) 100%);
  box-shadow: 0 10px 24px -12px rgba(217, 181, 108, .9);
}

.step h3 {
  font-family: var(--serif); font-weight: 500; font-size: 17px;
  margin: 0 0 8px; color: var(--cream);
}
.step p { margin: 0; color: var(--cream-dim); font-size: 14.5px; }
.step b { color: var(--cream); font-weight: 600; }

/* ----------------------------------------------------------------- verify */

.verify .hash {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(10, 8, 6, .6);
}
.verify code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.5;
  color: var(--flame-soft);
  word-break: break-all;
  flex: 1 1 320px;
}

.copy {
  flex: 0 0 auto;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--cream-dim);
  font: inherit; font-size: 12.5px;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.copy:hover { color: var(--cream); border-color: var(--flame); }
.copy.done { color: var(--ok); border-color: var(--ok); }

.hash-how { font-size: 13px; color: var(--cream-faint); line-height: 2; }
.hash-how code {
  font-size: 12px; color: var(--cream-dim);
  padding: 3px 8px; border-radius: 7px;
  background: rgba(255, 226, 184, .05);
}

/* ------------------------------------------------------------- why panels */

.dl-panels { margin-top: 70px; }
.dl-panels ul { margin: 0; padding-left: 18px; color: var(--cream-dim); font-size: 14.5px; }
.dl-panels li { margin-bottom: 7px; }
.dl-panels li:last-child { margin-bottom: 0; }
.dl-panels b { color: var(--cream); font-weight: 600; }
.dl-panels a { color: var(--flame); }

/* ------------------------------------------------------------------ phone */

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