/* Standalone styles for the step-up check page, matching the product. */
:root {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #203a36;
  background: #f4f6f1;
  font-synthesis: none;
  color-scheme: light dark;
}
* { box-sizing: border-box; }
body { margin: 0; }
.shell { max-width: 640px; margin: auto; padding: 48px 24px; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.8px; color: #60786c; margin: 0; }
h1 { font-size: 40px; font-weight: 500; letter-spacing: -1.8px; margin: 10px 0 24px; }
h2 { font-size: 17px; margin: 0 0 8px; }
p, li { line-height: 1.6; }
.card {
  background: #fff;
  border: 1px solid #dfe5dc;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 18px #203a3604;
}
.widget { min-height: 70px; margin: 16px 0 8px; }
.status { font-weight: 600; margin: 8px 0; }
.status:focus { outline: none; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
button {
  cursor: pointer;
  border: 0;
  background: #225a4b;
  color: white;
  border-radius: 9px;
  padding: 12px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}
button.secondary { background: #e9eee8; color: #274b40; }
button[hidden] { display: none; }
button:focus-visible, a:focus-visible { outline: 3px solid #c88a38; outline-offset: 3px; }
a { color: #225a4b; text-decoration: underline; }
.notes { margin-top: 24px; color: #4f6359; font-size: 14px; }
.notes ul { padding-left: 20px; margin: 0; }
@media (max-width: 480px) {
  .shell { padding: 32px 16px; }
  h1 { font-size: 32px; letter-spacing: -1.2px; }
  .card { padding: 20px; }
}
@media (prefers-color-scheme: dark) {
  :root { color: #e6efe9; background: #121a17; }
  .eyebrow { color: #bccbc2; }
  .card { background: #1a2420; border-color: #2c3a34; }
  .notes { color: #a3b5aa; }
  button { background: #7fc8ab; color: #0f1f19; }
  button.secondary { background: #1a2420; color: #e6efe9; border: 1px solid #7d978a; }
  a { color: #7fc8ab; }
}