/* Static promotion beside the introduction, without narrowing the trip table. */
body[data-tool="mileage-log-template-generator"] .hero > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  column-gap: 40px;
}
body[data-tool="mileage-log-template-generator"] .hero > .wrap > :not(.ml-app-card) { grid-column: 1; }
.ml-app-card { grid-column: 2; grid-row: 2 / span 4; align-self: center; position: static; padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); }
.ml-app-card h2 { margin: 0 0 10px; font-size: 21px; line-height: 1.35; font-weight: 600; letter-spacing: normal; text-transform: none; }
.ml-app-card p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.ml-app-qr { display: block; width: 160px; margin: 0 auto 16px; background: #fff; border-radius: 12px; overflow: hidden; }
.ml-app-qr img { display: block; width: 160px; height: 160px; }
.ml-app-card .ml-app-button { display: block; padding: 12px 14px; border-radius: 8px; background: var(--accent); color: var(--bg); text-align: center; font-size: 14px; font-weight: 600; text-decoration: none; }
.ml-app-card a:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; }
@media (max-width: 980px) {
  body[data-tool="mileage-log-template-generator"] .hero > .wrap { display: block; }
  .ml-app-card { margin-top: 24px; max-width: 500px; }
}
@media (max-width: 600px) {
  .ml-app-qr, .ml-app-scan { display: none; }
  .ml-app-card { padding: 18px; }
}
@media print { .ml-app-card { display: none !important; } }