/* /download/ — the QR card beside the hero, the install steps, the requirements. */
/* The hero's media column is sized for a photograph: a fixed height with the gold
   rule along its bottom edge. Here it holds a card, so it takes the card's height
   and the rule moves onto the card, where it reads as part of it. */
.download-page .page-hero-media{height:auto;border-bottom:0;overflow:visible}
.download-qr{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:28px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-bottom:7px solid var(--gold);padding:32px}
.download-qr svg{display:block;width:100%;height:auto}
.download-qr p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.download-qr strong{display:block;color:var(--ink);font-size:20px;letter-spacing:-.03em;margin-bottom:8px}
/* The hero styles every paragraph in its copy column at 19px; this one is a label. */
.page-hero-copy>.download-meta{margin:22px 0 0;max-width:none;font:700 10px/1.6 var(--font-geist-mono),monospace;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.download-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.download-steps li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:#ffffff42;padding:28px}
.download-steps span{font:700 9px/1 var(--font-geist-mono),monospace;letter-spacing:.08em;
  color:var(--green)}
.download-steps h3{font-size:22px;letter-spacing:-.04em;line-height:1.1;margin:22px 0 10px}
.download-steps p{color:var(--muted);font-size:13px;line-height:1.55;margin:0}
.mobile-workflow{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);
  border-left:1px solid var(--line)}
.mobile-workflow article{position:relative;min-height:360px;padding:30px;background:#ffffff42;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.workflow-label{display:flex;align-items:center;justify-content:space-between;gap:18px}
.workflow-label strong{font:750 32px/1 var(--font-geist-mono),monospace;color:var(--paper-2)}
.workflow-label span,.platform-heading>span{font:750 9px/1 var(--font-geist-mono),monospace;
  letter-spacing:.1em;color:var(--green)}
.mobile-workflow h3,.platform-grid h3{font-size:28px;letter-spacing:-.045em;line-height:1.05;
  margin:52px 0 14px}
.mobile-workflow p,.platform-grid p{color:var(--muted);font-size:13px;line-height:1.65;margin:0}
.mobile-workflow ul{display:flex;flex-wrap:wrap;gap:7px;margin:28px 0 0;padding:20px 0 0;
  border-top:1px solid var(--line);list-style:none}
.mobile-workflow li{padding:7px 9px;border:1px solid #00603936;background:#0060390b;color:var(--green);
  font:700 8px/1.2 var(--font-geist-mono),monospace;letter-spacing:.04em;text-transform:uppercase}
.mobile-safety-band{display:grid;grid-template-columns:.72fr 1.28fr;gap:64px;margin-top:14px;
  padding:42px;background:var(--ink-2);color:var(--white)}
.mobile-safety-band>div>span{color:var(--gold);font:750 9px/1 var(--font-geist-mono),monospace;
  letter-spacing:.1em}
.mobile-safety-band h3{max-width:340px;margin:24px 0 0;font-size:34px;line-height:1.03;
  letter-spacing:-.045em}
.mobile-safety-band ul{margin:0;padding:0;border-top:1px solid #ffffff2e;list-style:none}
.mobile-safety-band li{display:grid;grid-template-columns:minmax(130px,.45fr) 1fr;gap:24px;
  padding:15px 0;border-bottom:1px solid #ffffff2e}
.mobile-safety-band li strong{font-size:12px}
.mobile-safety-band li span{color:#b8c6bc;font-size:12px;line-height:1.5}
.validation-status{display:grid;grid-template-columns:minmax(190px,.45fr) 1fr;gap:28px;align-items:center;
  margin-top:14px;padding:18px 20px;border:1px solid var(--line);background:#ffffff52}
.validation-status>span{display:flex;align-items:center;gap:10px;color:#8a6418;
  font:750 9px/1.2 var(--font-geist-mono),monospace;letter-spacing:.08em}
.validation-status i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px #b89a5526}
.validation-status p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.validation-status p strong,.platform-next strong{color:var(--ink)}
.platform-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);
  border-left:1px solid var(--line)}
.platform-grid article{padding:32px;background:#ffffff42;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.platform-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.platform-heading strong{border:1px solid currentColor;border-radius:999px;padding:6px 9px;
  font:700 9px/1 var(--font-geist-mono),monospace;letter-spacing:.06em}
.status-live{color:var(--green)}
.status-pending{color:#8a6418}
.platform-grid .platform-next{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.download-needs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.download-needs li{display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:24px;
  padding:18px 0;border-bottom:1px solid var(--line)}
.download-needs strong{font-size:14px}
.download-needs span{color:var(--muted);font-size:13px;line-height:1.55}
@media(max-width:1000px){
  .download-steps{grid-template-columns:repeat(2,1fr)}
  .mobile-safety-band{grid-template-columns:1fr;gap:32px}
}
/* Already on a phone: the code has nothing to do. */
@media(max-width:900px){
  .download-page .page-hero-media{display:none}
  .mobile-workflow{grid-template-columns:1fr}
  .mobile-workflow article{min-height:0}
}
@media(max-width:640px){
  .download-steps{grid-template-columns:1fr}
  .platform-grid{grid-template-columns:1fr}
  .mobile-safety-band{padding:30px 24px}
  .mobile-safety-band li,.validation-status{grid-template-columns:1fr;gap:7px}
  .download-needs li{grid-template-columns:1fr;gap:6px}
}