/* =====================================================================
   p-app.css · app.html and app-privacy.html · prefix .p-app-
   Loaded after a.css, motion.css and inner.css. Tokens come from a.css.
   ===================================================================== */

/* ---------- app.html: hero (warm band .app from a.css; phones from a.css/motion.css) ---------- */
.p-app-dl{margin-top:var(--s4)}
.p-app-dl .assure{margin-top:var(--s3)}
.p-app-visual::before{display:none}  /* no bronze frame behind the phones */
.p-app-visual{isolation:isolate}  /* keeps the .phones backing panel (z-index:-1) above the warm band when motion.css gives .phones no stacking context (reduced motion) */
.p-app-note{margin-top:var(--s4);text-align:center}
@media (max-width:960px){.p-app-visual{margin-inline:auto;width:100%}}
/* narrow two-column hero: the four facts sit in a tidy 2 x 2 instead of 3 + 1 */
@media (min-width:961px) and (max-width:1180px){
  .p-app-dl .assure{display:grid;grid-template-columns:repeat(2,max-content);gap:8px 28px}
}
@media (max-width:720px){
  .p-app-dl .get-qr,.p-app-dl .get-txt p{display:none}  /* a QR code cannot be scanned from the phone that shows it, and nobody points their camera at their own screen: the badge is the way in */
  .p-app-dl .get{padding:0;background:none;border:0}  /* the badge alone: a tinted box around one image would look half empty */
  .p-app-dl .assure{flex-direction:row;flex-wrap:wrap;gap:8px 20px}
}

/* ---------- app.html: sections ---------- */
.p-app-clients .head{margin-bottom:var(--s6)}
@media (max-width:720px){.p-app-clients .head{margin-bottom:var(--s4)}}

.p-app-partners{background:var(--navy);color:rgba(255,255,255,.85)}
.p-app-partners h2,.p-app-partners h3{color:#fff}
.p-app-partners .lead{color:rgba(255,255,255,.85)}
.p-app-partners .link-arrow{margin-top:var(--s2);color:#fff;text-decoration:underline;text-decoration-color:var(--cream);text-underline-offset:4px}
.p-app-partners .link-arrow:hover{color:var(--cream)}
.p-app-pgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:start}
.p-app-pgrid .head{margin-bottom:0}
.p-app-plist li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-top:1px solid rgba(226,197,161,.28)}
.p-app-plist li:first-child{border-top:0;padding-top:0}
.p-app-plist .ico{width:48px;height:48px;display:grid;place-items:center;border:1.5px solid var(--cream);border-radius:50%;color:var(--cream)}
.p-app-plist .ico .i{width:22px;height:22px}
.p-app-plist h3{font-size:1.125rem;line-height:1.3}
.p-app-plist p{margin-top:4px;font-size:1rem;line-height:1.55;color:rgba(255,255,255,.82)}

.p-app-agrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:start}
.p-app-agrid .head{margin-bottom:0}
.p-app-agrid-main{display:grid;gap:var(--s4);justify-items:start;min-width:0}
.p-app-agrid-main .callout{width:100%;max-width:34rem}

@media (max-width:900px){
  .p-app-pgrid,.p-app-agrid{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
}
@media (max-width:720px){
  .p-app-plist li{grid-template-columns:40px minmax(0,1fr);gap:var(--s2);padding:var(--s2) 0}
  .p-app-plist .ico{width:40px;height:40px}
}

/* ---------- app-privacy.html: legal tables ----------
   a.css fixes the layout (table-layout:fixed) and sizes the first row, so the first column width is set on the header cell. */
.p-app-legal .table-card{margin-top:var(--s3)}
.p-app-t2 thead th:first-child{width:34%}
.p-app-t3 thead th:first-child{width:30%}
.p-app-t3 thead th:last-child{width:38%}
.p-app-tlong thead th:first-child{width:56%}
.p-app-tlong tbody th{font-weight:400;color:var(--soft)}  /* long sentences: still the row header, but not in bold */