/* Hidden means hidden, whatever display a class gives it (V17.37: the gift card box showed on every payment form). */
[hidden] { display: none !important; }
/* Shared look for both screens: Atkinson Hyperlegible, warm neutrals, one teal accent. */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-weight: 400;
  src: url('../fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-weight: 700;
  src: url('../fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
}
:root {
  --ground: #FBFAF8;
  --panel: #FFFFFF;
  --wall: #ECE8E1;
  --ink: #1E1E1C;
  --ink-2: #5A5852;
  --ink-3: #6E6B64;
  --line: #E3DFD8;
  --line-2: #C9C5BD;
  --accent: #1F5F5B;
  --accent-dark: #174845;
  --accent-soft: #EEF4F3;
  --danger: #A33A2C;
  --radius: 14px;
  font-family: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  color: var(--ink);
  background: var(--ground);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 64px; padding: 0 32px; border-radius: var(--radius); border: 0;
  background: var(--accent); color: #fff; font-size: 22px; font-weight: 700; text-decoration: none;
}
.btn:hover { background: var(--accent-dark); }
.btn:disabled { background: #9BB3B1; cursor: not-allowed; }
.btn2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 64px; padding: 0 28px; border-radius: var(--radius);
  border: 2px solid var(--line-2); background: var(--panel); font-size: 20px; font-weight: 700;
}
.btn2:hover { border-color: #8A867E; }
.btn-sm { min-height: 48px; font-size: 16px; padding: 0 18px; border-radius: 12px; }
.label { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.sample-badge {
  padding: 2px 8px; border-radius: 999px; background: #FFF1D6; color: #7A4B00;
  font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
}