/* Design tokens from 04_UI_UX_DESIGN_SYSTEM.md.
   Base styles target a 360px portrait viewport. Desktop is an enhancement via
   min-width queries, never the other way round. */
:root {
  --color-ink: #0B1F33;
  --color-primary: #1D4ED8;
  --color-surface: #FFFFFF;
  --color-canvas: #F5F7FA;
  --color-muted: #475569;
  --color-border: #CBD5E1;
  --color-success: #047857;
  --color-warning: #92400E;
  --color-danger: #B91C1C;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --touch-target: 44px;
  --radius-control: 8px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;          /* 16px minimum stops iOS zooming on focus */
  line-height: 1.5;
  color: var(--color-ink);
  background: var(--color-canvas);
  /* Never let the page itself scroll sideways on a 320px screen. */
  overflow-x: hidden;
}

main { padding: var(--space-4); max-width: 72rem; margin: 0 auto; }

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.site-header nav { display: flex; align-items: center; gap: var(--space-3); }
.brand { font-weight: 700; color: var(--color-ink); text-decoration: none; }

a { color: var(--color-primary); }

/* Every interactive target is at least 44x44 CSS px. */
.btn, a.btn, button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch-target); min-width: var(--touch-target);
  padding: 0 var(--space-4); border-radius: var(--radius-control);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-ink); font: inherit; text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-control); padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.muted { color: var(--color-muted); }
.plan-price { font-size: 24px; font-weight: 700; }
.note {
  border-left: 4px solid var(--color-warning); background: #FFFBEB;
  padding: var(--space-3); border-radius: var(--radius-control);
}
.site-footer {
  padding: var(--space-6) var(--space-4); border-top: 1px solid var(--color-border);
  color: var(--color-muted); font-size: 14px;
}

/* Cards become a grid only when there is room for one. */
@media (min-width: 768px) {
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .grid .card { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}