/* ==========================================================================
   /owners/ — store-owner landing page
   Lives beside the page rather than in /styles.css so the owner page can be
   iterated on during the outreach pilot without touching the shared site
   stylesheet. Everything here builds on the tokens and the .legal layout
   defined in /styles.css, so it must load after it.
   ========================================================================== */

.owners-hero__lede { margin-top: 20px; }
.owners-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* .legal__section gives every ul/ol an indent and a decimal marker; the
   tick list and the numbered steps draw their own markers, so drop both. */
.legal__section .ticks { margin-top: 18px; padding-left: 0; gap: 12px; }

.legal__section .steps {
  list-style: none; padding-left: 0; gap: 0; margin-top: 18px;
  counter-reset: step;
}
.legal__section .steps li {
  position: relative; counter-increment: step;
  padding: 18px 0 18px 48px; border-top: 1px solid var(--ink-12);
}
.legal__section .steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 21px;
  font-family: var(--f-mono); font-size: 13px; font-weight: 700; color: var(--mustard-dark);
}
.legal__section .steps h3 { margin-top: 0; }
.legal__section .steps p { margin-top: 6px; color: var(--ink-70); }

/* The legal pages butt the first item straight up against the section
   heading; with a list of questions that reads cramped, so give it air. */
#faq .legal__item:first-of-type { margin-top: 18px; }

/* App Store / Google Play cards. Owners often open our email on a computer,
   so each card pairs the store badge with a QR code they can scan with the
   phone the app is going on. */
.apps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin-top: 22px;
}
.app-card {
  margin: 0; padding: 24px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  background: var(--paper); border: 1px solid var(--ink-12); border-radius: var(--r-md);
  text-align: center;
}
/* 168px keeps every module a whole-ish number of pixels for both codes and
   stayed decodable in testing; smaller sizes start to blur on 1x screens. */
.app-card__qr { width: 168px; height: 168px; border-radius: var(--r-sm); }
.app-card__badge { display: inline-flex; transition: transform .18s var(--ease); }
.app-card__badge:hover { transform: translateY(-2px); }
.app-card__badge img { height: 48px; width: auto; border-radius: var(--r-sm); }
.app-card figcaption { font-size: 14px; color: var(--ink-50); }

/* On a phone you can't scan your own screen, so the codes are just noise:
   collapse each card to a single row of badge + device line. One column,
   because two badges side by side overflow a 320px-wide screen. */
@media (max-width: 560px) {
  .app-card__qr, .apps__scan-hint { display: none; }
  .apps { grid-template-columns: 1fr; gap: 12px; }
  .app-card { flex-direction: row; justify-content: space-between; gap: 12px; padding: 14px 16px; text-align: left; }
  .app-card__badge img { height: 44px; }
}