:root { --bg: #f3f7f9; --surface: #ffffff; --border: #d3e0e6; --text: #0b2230; --text-2: #3f5967; --brand: #077a75; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #07131a; --surface: #0f2230; --border: #234255; --text: #e8f3f7; --text-2: #bcd2dc; --brand: #2fd4c8; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.25rem; padding: 1.5rem 1rem; background: var(--bg); color: var(--text);
  font: 1rem/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.card {
  width: 100%; max-width: 36rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 1rem; padding: clamp(1.5rem, 5vw, 2.5rem);
}
.brand { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.5rem; font-weight: 800; font-size: 1.25rem; color: var(--brand); }
.brand span { color: var(--text); }
.brand img { border-radius: 0.6rem; }
h1 { margin: 0 0 0.75rem; font-size: clamp(2rem, 8vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; }
.lead { margin: 0 0 1.25rem; font-size: 1.1rem; color: var(--text-2); }
.points { margin: 0 0 1.5rem; padding-left: 1.2rem; color: var(--text-2); }
.points li + li { margin-top: 0.4rem; }
.points li::marker { color: var(--brand); }
.note { margin: 0; padding-top: 1rem; border-top: 1px solid var(--border); font-weight: 600; color: var(--brand); }
footer { max-width: 36rem; text-align: center; font-size: 0.85rem; color: var(--text-2); }