/* The task pages: /buy, /cancel, /p (the personal pay page) and their done/failed pages. On top of base.css. */
.app-main { max-width:34rem; margin:0 auto; padding:8px var(--gutter) 0; display:grid; gap:16px; }
.app-main h1 { font-size:clamp(28px,6vw,34px); line-height:1.15; margin:4px 0 4px; letter-spacing:-.01em; }
[lang=en] .app-main h1 { font-family:var(--serif); letter-spacing:-.02em; }
.app-main h2 { font-size:19px; line-height:1.3; margin:8px 0 0; }
.app-main p { margin:0; }
.box { background:var(--card); border:1px solid var(--line); border-radius:var(--r-l); padding:20px 22px; display:grid; gap:10px; }
.box > h2 { margin:0 0 2px; }
.price { font-size:24px; font-weight:700; line-height:1.3; }
.cancel { font-weight:600; }
.muted, .hint { color:var(--muted); font-size:14.5px; }
.err { background:var(--card); border:2px solid var(--accent-text); border-radius:var(--r-m); padding:12px 16px; font-weight:600; }

.f { display:grid; gap:6px; }
label { font-weight:600; font-size:15.5px; }
input, textarea { font:inherit; font-size:17px; width:100%; padding:12px 14px; border:1.5px solid var(--line-2); border-radius:var(--r-s); background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s; }
input:hover, textarea:hover { border-color:var(--muted); }
input:focus-visible, textarea:focus-visible { outline:none; border-color:var(--accent-text); box-shadow:0 0 0 3px var(--accent-soft); }
[dir=rtl] input[dir=ltr] { text-align:right; }
textarea { resize:vertical; min-height:96px; }

.tick { display:flex; gap:12px; align-items:flex-start; font-weight:400; font-size:16.5px; line-height:1.5; background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); padding:14px 16px; cursor:pointer; }
.tick input { width:22px; height:22px; flex:none; margin:2px 0 0; padding:0; accent-color:var(--accent-text); }

.ways { display:grid; gap:10px; }
.btn { display:block; width:100%; text-align:center; text-decoration:none; font:700 19px/1.2 var(--sans); padding:16px; border:0; border-radius:var(--r-m); background:var(--accent); color:#fff; cursor:pointer; margin:0; transition:background .15s, transform .15s; }
.btn:hover { background:var(--accent-text); }
.btn.alt { background:var(--ink); }
.btn.alt:hover { background:#000; }
.btn:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
.btn.alt:focus-visible { outline-color:var(--accent-text); }
.btn + .btn { margin-top:2px; }
.app .site-footer { margin-top:56px; }