/* THE APP page (pages/01_the-app.php): text + screenshots side by side, the edition marks, the notes
   (the phone frame, the sticker and the paper sheet are in site.css: also used by block_app_shots() on other pages) */
.appRow {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 44px; align-items: center;}
.appRow.flip {grid-template-columns: auto minmax(0, 1fr);}
.appRow.flip .appText {order: 2;}
.appText h2 {margin-top: 0;}
.appText .ticks {margin-top: 14px;}
.edition {display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; padding: 2px 9px; border-radius: 999px; margin: 0 6px 10px 0; border: 1px solid var(--line); background: #fff; color: var(--brand-dark); vertical-align: middle;}
.edition.pro {background: var(--accent); border-color: var(--accent-dark); color: #2a2600;}
.edition.ent {background: var(--brand-dark); border-color: var(--brand-dark); color: #fff;}
.sealPair {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px; align-items: center; margin-top: 30px;}
.appNote {margin-top: 34px; padding: 14px 18px; border-radius: 12px; background: var(--brand-soft); border: 1px solid var(--line); font-size: 0.95rem; color: #3c4533;}
.appWarn {margin: 30px auto 0; padding: 14px 18px; border-radius: 12px; background: #fff8e1; border: 1px solid #e8c95a; font-size: 0.95rem; color: #3c4533; line-height: 1.55;}
.appIntro {padding-bottom: 0;}
@media (max-width: 900px) {
	.appRow, .appRow.flip, .sealPair {grid-template-columns: 1fr; gap: 26px;}
	.appRow.flip .appText {order: 0;}
}