/* ============================================================
   Pages — layout composition + responsive behavior
   ============================================================ */

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--s-6);
  align-items: start;
}
.aside-card {
  position: sticky;
  top: calc(var(--header-h) + var(--s-6));
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* ---------- Tablet ---------- */
@media (max-width: 920px) {
  .two-col { grid-template-columns: 1fr; }
  .aside-card { position: static; }
  .panel { padding: var(--s-6); }
  .trust-grid { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: 1fr; }
  .summary__amount { font-size: 30px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 620px) {
  :root { --header-h: 64px; }
  .container { padding: 0 var(--s-4); }
  .brand__subtitle { display: none; }
  .timer-pill__label { display: none; }

  .method-grid { grid-template-columns: 1fr; }

  .amount-field { padding: var(--s-5); }
  .amount-field__symbol { font-size: 34px; }
  .amount-field__input { font-size: 38px; }

  .summary { flex-direction: column; align-items: stretch; text-align: left; }
  .summary .btn { width: 100%; }

  .stepper { flex-wrap: wrap; }
  .step-line { display: none; }

  .action-bar { flex-direction: column-reverse; }
  .action-bar .btn { width: 100%; }

  .detail-row { flex-direction: column; align-items: flex-start; }
  .copy-btn { align-self: stretch; justify-content: center; }

  .app-footer__top { flex-direction: column; }
  .modal { padding: var(--s-6); }
}