/* ---------------------------------------------------------------------------
   Phone rendering of the VAGPULSE app home screen.

   Built from the app's real palette and real screen content (App.tsx: the same
   module chips, the same "TALKING TO ENGINE" card, the same six tiles) so the
   site shows what the app actually looks like rather than a decorative
   invention. The values shown are the demo car - an Audi Q7 3.0 TFSI - which is
   exactly what a visitor sees if they tap "Try the demo" in the app.
--------------------------------------------------------------------------- */
.vp-phone {
  --p-bg: #1e2733;
  --p-card: #28333f;
  --p-line: #3a4757;
  --p-txt: #eef4fb;
  --p-dim: #a6b2bf;
  --p-accent: #3d78bd;
  --p-green: #3bd17e;
  --p-tune: #ee7a2e;

  width: 288px;
  max-width: 100%;
  border-radius: 34px;
  padding: 9px;
  background: linear-gradient(160deg, #10161e, #05080c);
  box-shadow: 0 34px 70px -28px #000, 0 0 0 1px rgba(255, 255, 255, .07);
  flex: 0 0 auto;
}
.vp-screen {
  background: var(--p-bg);
  border-radius: 26px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.35;
  color: var(--p-txt);
}
.vp-statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 15px 3px; font-size: 9.5px; color: var(--p-dim);
}
.vp-appbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 14px 10px; border-bottom: 1px solid var(--p-line);
}
.vp-logo { font-weight: 800; letter-spacing: .06em; font-size: 12px; }
.vp-logo span { color: var(--p-accent); }
.vp-pill {
  font-size: 8.5px; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--p-green); color: var(--p-green); letter-spacing: .04em;
}
.vp-body { padding: 12px 14px 16px; }
.vp-h1 { font-size: 17px; font-weight: 800; margin: 0 0 2px; }
.vp-sub { color: var(--p-dim); font-size: 10px; margin: 0 0 10px; }

.vp-chips { display: flex; gap: 6px; overflow: hidden; margin-bottom: 11px; }
.vp-chip {
  flex: 0 0 auto; font-size: 9px; padding: 5px 9px; border-radius: 999px;
  border: 1px solid var(--p-line); color: var(--p-dim); white-space: nowrap;
}
.vp-chip.on { background: var(--p-accent); border-color: var(--p-accent); color: #fff; font-weight: 700; }

.vp-ident {
  border: 1px solid var(--p-green); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 12px; background: rgba(59, 209, 126, .06);
}
.vp-ident-h { color: var(--p-green); font-size: 8.5px; font-weight: 800; letter-spacing: .08em; }
.vp-ident-v { font-size: 15px; font-weight: 800; margin-top: 3px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.vp-ident-s { color: var(--p-dim); font-size: 9.5px; }
.vp-proto {
  display: inline-block; margin-top: 6px; font-size: 8px; letter-spacing: .08em;
  color: var(--p-dim); border: 1px solid var(--p-line); border-radius: 5px; padding: 2px 6px;
}

.vp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vp-tile {
  background: var(--p-card); border: 1px solid var(--p-line);
  border-radius: 11px; padding: 9px 10px; min-height: 46px;
}
.vp-tile b { display: block; font-size: 10.5px; font-weight: 700; }
.vp-tile i { display: block; font-style: normal; color: var(--p-dim); font-size: 8.5px; margin-top: 2px; }
.vp-tile.tune { border-color: rgba(238, 122, 46, .5); }
.vp-tile.tune b { color: var(--p-tune); }

.vp-caption {
  text-align: center; color: var(--faint, #8296aa);
  font-size: .78rem; margin-top: .75rem;
}

/* side-by-side layout used on the app page and the homepage band */
.vp-shotrow {
  display: flex; gap: 2.4rem; align-items: center; flex-wrap: wrap;
  justify-content: center;
}
.vp-shotrow .vp-copy { flex: 1 1 320px; min-width: 280px; }

@media (max-width: 560px) {
  .vp-phone { width: 262px; }
}

/* ---------------------------------------------------------------------------
   Download band on /app.

   A sideloaded APK asks more of a visitor than a store link does, so the band
   carries the three steps and the checksum rather than a lone button: the
   "allow installs from your browser" prompt is where people stall, and being
   told it is coming is the difference between installing and giving up.
--------------------------------------------------------------------------- */
.dlband {
  max-width: 1040px;
  margin: 0 auto 3.4rem;
  padding: 1.9rem 2rem 1.6rem;
  border: 1px solid var(--bg3);
  border-radius: 16px;
  background:
    /* A hint of brand colour, not a blue panel: at .13 the wash competed with
       the download button sitting on top of it. */
    radial-gradient(120% 140% at 0% 0%, rgba(32, 128, 255, .05), transparent 58%),
    var(--bg2);
}
.dlband-in {
  display: flex; gap: 2rem; align-items: center;
  flex-wrap: wrap; justify-content: space-between;
}
.dlband-copy { flex: 1 1 340px; min-width: 280px; }
.dlband-copy h2 { margin: 0 0 .5rem; }
.dlband-copy p { margin: 0 0 .6rem; }
.dlnote { color: var(--dim); font-size: .93rem; }

.dlband-act { flex: 0 0 auto; text-align: center; }
.dlband-act .dlbtn { font-size: 1.05rem; padding: .95rem 1.9rem; white-space: nowrap; }
.dlmeta { margin-top: .55rem; color: var(--faint); font-size: .82rem; }

.dlsteps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
  margin-top: 1.7rem; padding-top: 1.5rem; border-top: 1px solid var(--bg3);
}
.dlstep { display: flex; gap: .7rem; align-items: flex-start; }
.dlstep span {
  flex: 0 0 auto; width: 1.55rem; height: 1.55rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: .82rem; font-weight: 700;
}
.dlstep p { margin: 0; font-size: .9rem; color: var(--dim); line-height: 1.5; }

.dlverify {
  margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--bg3);
  color: var(--faint); font-size: .8rem; line-height: 1.7;
}
.dlverify code {
  /* A 64-character hash must never push the page sideways on a phone. */
  display: inline-block; max-width: 100%; overflow-x: auto;
  word-break: break-all; font-size: .74rem; color: var(--dim);
}

@media (max-width: 720px) {
  .dlband { padding: 1.5rem 1.2rem; }
  .dlsteps { grid-template-columns: 1fr; gap: .85rem; }
  .dlband-act, .dlband-act .dlbtn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Feature-card icons on /app.

   Colour here is information, not decoration: it reuses the meanings the app
   itself already uses on screen, so amber reads as "something is wrong",
   green as "live and connected", orange as the tuning path and blue as
   identity. Four icons in one accent would have said nothing at all.
--------------------------------------------------------------------------- */
.pcard .pic {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  margin-bottom: .85rem;
  border-radius: 13px;
  border: 1px solid var(--ic-line, var(--bg3));
  background: var(--ic-bg, var(--bg3));
  color: var(--ic-fg, var(--accent));
  transition: transform .18s ease, box-shadow .18s ease;
}
.pcard:hover .pic {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px var(--ic-fg, var(--accent));
}

.pic-fault { --ic-fg:#e8b04b; --ic-bg:rgba(232,176,75,.14); --ic-line:rgba(232,176,75,.34); }
.pic-live  { --ic-fg:#3bd17e; --ic-bg:rgba(59,209,126,.14); --ic-line:rgba(59,209,126,.34); }
.pic-log   { --ic-fg:#ee7a2e; --ic-bg:rgba(238,122,46,.14); --ic-line:rgba(238,122,46,.34); }
.pic-id    { --ic-fg:#2080ff; --ic-bg:rgba(32,128,255,.14); --ic-line:rgba(32,128,255,.34); }

@media (prefers-reduced-motion: reduce) {
  .pcard .pic, .pcard:hover .pic { transition: none; transform: none; }
}

/* ── the "what this log captured" screen, as shown on /app ──────────────── */
.vp-phone-sm { width: 268px; }
.vp-cov { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.vp-cov li {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 10px; color: var(--p-txt);
}
.vp-cov i { font-style: normal; color: var(--p-green); font-weight: 800; }
.vp-cov em {
  margin-left: auto; font-style: normal; color: var(--p-dim);
  font-family: ui-monospace, Consolas, monospace; font-size: 8.5px;
}
.vp-covok {
  margin: 9px 0 0; font-size: 9.5px; line-height: 1.4;
  color: var(--p-green);
}
.sb-shot { display: flex; justify-content: center; flex: 0 0 auto; }
@media (max-width: 560px) { .vp-phone-sm { width: 250px; } }