/* ==========================================================================
   faq.css: the Questions and answers page only (site/faq.html).
   Sandbox build, Sept 27, 2026. Tokens only: every colour is a var(--…)
   from site.css, so Night and Day both work. No colour literals here.
   ========================================================================== */

/* ---- Live screens: site.css base "iframe{max-width:100%}" caps the 360 px
   frame to the phone's width before it is scaled, so the screen draws too
   small. Undo the cap here (reported to the site.css owner). ------------- */
.device-screen > iframe{max-width:none}

/* ---- Hero: copy left, the driver phone right (desktop only) ------------- */
.faq-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px, 5vw, 72px);align-items:center}
.faq-hero .lead{max-width:620px}
.faq-hero-visual{display:flex;flex-direction:column;align-items:center}
/* A definite width, so the live screen measures its real size even before the lazy poster loads */
.faq-hero-visual .device{width:100%;max-width:276px}
.faq-hero-visual .device-note{margin-top:18px;max-width:360px;text-align:center}
@media (max-width: 1020px){
  .faq-hero-grid{grid-template-columns:1fr}
  .faq-hero-visual{display:none}   /* on phones and tablets, get to the answers */
}

/* ---- Short answers strip: stays 2 x 2 on phones ------------------------- */
.faq-proof .proof-item p{max-width:260px}
@media (max-width: 460px){
  .faq-proof.proof{grid-template-columns:repeat(2, minmax(0,1fr))}
  .faq-proof .proof-item,.faq-proof .proof-item:nth-child(n){padding:18px 16px;box-shadow:none}
  .faq-proof .proof-item:nth-child(1){box-shadow:inset -1px 0 0 var(--line-hair), inset 0 -1px 0 var(--line-hair)}
  .faq-proof .proof-item:nth-child(2){box-shadow:inset 0 -1px 0 var(--line-hair)}
  .faq-proof .proof-item:nth-child(3){box-shadow:inset -1px 0 0 var(--line-hair)}
  .faq-proof .proof-item .gauge{font-size:2.5rem}
}

/* ---- Body: jump list left (sticky on desktop), questions right ---------- */
@media (min-width: 1021px){ .faq-layout{grid-template-columns:230px minmax(0,1fr)} }
.faq-main{min-width:0;max-width:800px}
.faq-toc ol{margin-top:12px}
.faq-toc a{display:flex;align-items:center;gap:10px}
.faq-toc a .ic{width:18px;height:18px;color:var(--ink-3)}
.faq-toc a:hover .ic{color:var(--accent)}
.faq-ask{margin-top:28px;padding:20px}
.faq-ask .h4{font-family:var(--font-display);font-size:1.1rem;font-weight:800;line-height:1.3}
.faq-ask .contact-list{margin-top:14px;font-size:var(--fs-small)}
@media (max-width: 1020px){
  .faq-toc ol{display:flex;flex-wrap:wrap;gap:8px}
  .faq-toc a{min-height:44px;padding:8px 16px 8px 12px;border-radius:var(--r-pill);color:var(--ink-strong);
    background:var(--surface-2);box-shadow:var(--sh-1), inset 0 0 0 1px var(--line-strong)}
  .faq-ask{display:none}           /* the closing call to action covers it */
}

/* ---- Groups ------------------------------------------------------------- */
.faq-group{scroll-margin-top:calc(var(--nav-h) + 20px)}
.faq-group-head{display:flex;align-items:center;gap:16px}
.faq-group-head h2{font-size:clamp(1.4rem, 1.2rem + .8vw, 1.8rem)}
.faq-group-intro{margin:12px 0 20px;max-width:660px}
.faq-cites{margin:-6px 0 20px}
.faq-group .disclaimer{margin-top:16px}
.faq-group .disclaimer a{color:var(--accent)}
.faq details{scroll-margin-top:calc(var(--nav-h) + 20px)}
.faq .faq-a a{font-weight:600}

/* An answer with a picture beside it: text left, small phone right */
.faq-a-split{display:grid;grid-template-columns:minmax(0,1fr) 224px;gap:28px;align-items:start}
.faq-a-visual{display:flex;flex-direction:column;align-items:center;gap:14px;width:224px}
.faq-a-visual .device{width:100%}
.faq-a-visual .device-note{text-align:center}
/* One device note per page: on desktop the hero phone carries it, so the
   answer's copy hides; at 1020 px and below the hero phone is hidden and
   this note is the only one left. */
@media (min-width: 1021px){ .faq-a-visual .device-note{display:none} }
@media (max-width: 640px){
  .faq-a-split{grid-template-columns:1fr}
  .faq-a-visual{margin:4px auto 0}
}

/* The sample record: the app's wallet-pass receipt, inside an open answer */
.faq-receipt.receipt{margin-top:18px;max-width:440px;padding:22px 22px 18px}
.faq-receipt .receipt-head{padding-bottom:14px}
.faq-receipt .receipt-head b{display:block;font-family:var(--font-display);font-size:1.05rem;line-height:1.2}
.faq-receipt .receipt-row{padding:10px 0;font-size:var(--fs-meta)}
.faq-receipt .receipt-perf{margin:4px -22px}
.faq-receipt .receipt-perf::before{left:22px;right:22px}
.faq-receipt .receipt-perf > i::before,.faq-receipt .receipt-perf > i::after{background:var(--surface-2)}
.faq-receipt .receipt-foot{margin-top:6px}
.faq-receipt .receipt-row > .go-text{display:inline-flex;align-items:center;gap:6px;color:var(--go)}
.faq-receipt .go-text .ic{width:16px;height:16px;stroke-width:2.6}