:root {
  color-scheme: light;
  --ink: #2d2a38;
  --muted: #686474;
  --paper: #fffaf1;
  --surface: #ffffff;
  --accent: #7357c7;
  --accent-strong: #5538ad;
  --line: #e7dfd2;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
main { width: min(820px, calc(100% - 40px)); margin: auto; padding: 56px 0; }
h1, h2 { line-height: 1.15; letter-spacing: -.025em; }
h1 { max-width: 760px; margin: 14px 0 20px; font-size: clamp(2.75rem, 9vw, 5.4rem); }
h2 { margin-top: 42px; font-size: 1.55rem; }
.eyebrow { color: var(--accent-strong); font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.lead { max-width: 700px; color: var(--muted); font-size: 1.28rem; }
.hero { margin-top: 34px; padding: clamp(24px, 6vw, 42px); border-radius: 28px; background: linear-gradient(140deg, #6547ba, #9575df); color: #fff; }
.hero h2 { margin: 0 0 10px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.card, .notice { padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.card h2 { margin: 0 0 8px; font-size: 1.2rem; }
.notice { border-left: 5px solid var(--accent); }
ul { padding-left: 1.25em; }
li { margin: .45rem 0; }
a { color: var(--accent-strong); font-weight: 650; }
footer { margin-top: 54px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
@media (max-width: 680px) { main { padding-top: 38px; } .grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }