/* ScanVeer landing — desktop download QR codes.
   Own file on purpose: css/index.css is under active edit elsewhere, and this needs to be
   mergeable without a conflict. Injected markup comes from js/landing-qr.js. */

.qr-row{
  margin-top:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.qr-lead{
  margin:0;
  font-size:13.5px;
  font-weight:600;
  color:#aab3a8;
  letter-spacing:.1px;
}

.qr-cards{
  display:flex;
  /* Boss 2026-08-10: 14px put both codes in one camera frame and phones locked onto the
     wrong store. Wide separation so aiming at one keeps the other out of the frame. */
  gap:36px;
  flex-wrap:wrap;
}

.qr-card{
  display:flex;
  align-items:center;
  gap:13px;
  padding:12px 16px 12px 12px;
  background:#11181d;
  border:1px solid rgba(255,255,255,.09);
  border-radius:15px;
  text-decoration:none;
  color:#fff;
  transition:transform .15s, border-color .15s;
}
.qr-card:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.2); }
/* Keyboard users get the same affordance as the mouse — the row is a link, so it must show
   where focus is rather than relying on the hover state alone. */
.qr-card:focus-visible{ outline:2px solid var(--g1,#34d399); outline-offset:3px; }

/* White plate behind the code. A QR needs a light quiet zone to scan reliably, and the card
   sits on a near-black panel — rendering the code straight onto that would look tidy and
   fail to scan, which is the one thing this feature must not do. */
.qr-img{
  display:block;
  width:104px;
  height:104px;
  border-radius:9px;
  background:#fff;
  padding:10px;   /* generous quiet zone — scanners find one code faster and ignore the neighbour */
  box-sizing:content-box;
}

.qr-txt{ display:flex; flex-direction:column; line-height:1.25; }
.qr-txt b{ font-size:15px; font-weight:800; letter-spacing:-.2px; }
.qr-txt small{ font-size:11.5px; color:#aab3a8; font-weight:600; margin-top:3px; }

/* Once a QR is on screen the store badges are the secondary path, not the primary one.
   De-emphasised, never hidden: on a desktop they still open a readable store page, and
   hiding them would remove something that already worked. */
.badges-desktop{ opacity:.72; }
.badges-desktop:hover{ opacity:1; }

/* Download section: one code on each side of the phone mockup (Boss 2026-08-10 — codes
   sitting together put both in one camera frame and phones opened the wrong store).
   The .dl-visual is already a centered flex row; the cards become its flanks. */
.dl-visual-qr{ gap:30px; }
.dl-visual-qr .qr-card{
  flex-direction:column;
  text-align:center;
  gap:10px;
  padding:14px;
  z-index:2;
  flex-shrink:0;
}
.dl-visual-qr .qr-txt{ align-items:center; }

/* The floating chips sit at z-3 — parked in the far corners so they can never cover a
   code's pixels (a chip over a QR is an unscannable QR). */
.dl-visual-qr .dl-chip-score{ top:0; left:0; }
.dl-visual-qr .dl-chip-scan{ bottom:0; right:0; }

/* A narrow desktop window: let the flanks wrap under the phone rather than crush it. */
@media (max-width:900px){
  .dl-visual-qr{ flex-wrap:wrap; }
}

/* Hero: same split, tighter geometry — the hero visual column is ~510px at full page
   width, so the codes go 88px and the device narrows to 250px so all three genuinely
   fit side by side instead of overflowing into the headline copy. */
.hero-visual-qr{ gap:clamp(14px,1.6vw,23px); align-items:center; }
.hero-visual-qr .qr-card{
  flex-direction:column;
  text-align:center;
  gap:9px;
  padding:12px;
  z-index:3;
  flex-shrink:0;
  max-width:128px;   /* the label wraps; wider cards push the flank into the headline copy */
}
.hero-visual-qr .qr-txt{ align-items:center; }
.hero-visual-qr .qr-img{ width:84px; height:84px; }
.hero-visual-qr .device{ width:240px; }
/* Hero chips park in the corners, above the cards, never on a code. */
.hero-visual-qr .fcard.one{ top:0; left:0; z-index:4; }
.hero-visual-qr .fcard.two{ bottom:0; right:0; z-index:4; }
/* Below 1080px the column is too narrow for three across. Go VERTICAL instead of
   wrapping into chaos: [QR] over [phone] over [QR] — the phone stays in the middle
   and the codes stay a full phone apart. */
@media (max-width:1080px){
  .hero-visual-qr{ flex-direction:column; gap:26px; }
}

/* A narrow window on a laptop is still a desktop — stack rather than overflow. */
@media (max-width:560px){
  .qr-cards{ flex-direction:column; }
  .qr-card{ width:100%; box-sizing:border-box; }
}

/* Motion hook (Cursor brief 2026-08-10): the split QR flanks fade in just after the
   phone's entrance — opacity/transform only, no bounce. Layout/sizes untouched. */
.dl-visual-qr .qr-card, .hero-visual-qr .qr-card{ animation:qrIn .6s ease-out .5s both; }
@keyframes qrIn{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

@media (prefers-reduced-motion:reduce){
  .qr-card{ transition:none; animation:none; }
  .qr-card:hover{ transform:none; }
}