/* Visual language shared by the app and public HTML pages. */
:root {
  color-scheme: dark;
  --ui-bg: #08090b;
  --ui-surface: #111216;
  --ui-surface-hover: #191b21;
  --ui-text: #f3f2ed;
  --ui-muted: #a9adb8;
  --ui-line: #303239;
  --ui-blue: #3157ff;
  --ui-link: #b3c2ff;
  --ui-radius: 16px;
  --font-sans: "Manrope", Arial, sans-serif;
  --font-editorial: "Cormorant Garamond", Georgia, serif;
  --page-gutter: clamp(20px, 4vw, 64px);
  --content-measure: 1320px;
}
::selection { color: white; background: #3157ff; }
:focus-visible { outline: 2px solid #b3c2ff; outline-offset: 4px; }
.plan-grid { gap: 16px; }
.plan-card { border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); padding: 28px 24px; gap: 14px; box-shadow: none; }
.plan-card h2, .plan-card h3 { font-family: var(--font-editorial); font-size: 36px; font-weight: 500; line-height: 1.1; letter-spacing: 0; }
.plan-card .plan-price { font-size: clamp(28px, 2.6vw, 38px); letter-spacing: 0; font-weight: 600; }
.plan-card .plan-babe { color: var(--ui-text); border-color: var(--ui-line); }
.plan-babe strong { letter-spacing: 0; }
.plan-card.is-selected { border-color: #879eff; background: #131a2c; box-shadow: inset 0 3px var(--ui-blue); }
.plan-action, .plan-select { border-color: #525660; border-radius: 10px; min-height: 48px; font-size: 14px; }
.plan-action:hover, .plan-select:hover { background: #20232b; border-color: #879eff; }
.plan-select:has(input:checked) { background: var(--ui-blue); }
.plan-card .plan-description, .plan-card li, .plan-price span { color: var(--ui-muted); font-size: 13px; }
.plan-current { background: #1f315d; color: #d6e0ff; }
@media (max-width: 700px) { .plan-card { padding: 24px; } }