:root {
  --canvas:#FAFBFC; --card:#FFFFFF; --ink:#242D33; --soft:#4B5D69; --dim:#53636E;
  --line:#DEE4E8; --action:#25485E; --action-ink:#FFFFFF; --accent-surface:#EAF2F7;
  --radius:18px;
}
* { box-sizing: border-box; }
html, body { margin:0; background:var(--canvas); color:var(--ink);
  font-family:"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"PingFang SC",system-ui,sans-serif;
  font-size:15px; line-height:1.6; }
a { color: var(--action); text-decoration: underline; text-underline-offset: 3px; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }
header.site { border-bottom:1px solid var(--line); background:rgba(250,251,252,.92); position:sticky; top:0; backdrop-filter: blur(8px); }
header.site .wrap { display:flex; align-items:center; gap:16px; height:64px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; text-decoration:none; color:var(--ink); }
.brand-mark { width:28px; height:28px; border-radius:50%; background:var(--action); color:var(--action-ink);
  display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.brand-mark img { width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit; }
nav { margin-left:auto; display:flex; gap:18px; font-size:13px; }
nav a { text-decoration:none; color:var(--soft); }
nav a:hover { color:var(--ink); }
main { padding: 56px 0 72px; }
h1 { font-size:38px; line-height:1.15; letter-spacing:-.8px; margin:0 0 14px; font-weight:600; }
h2 { font-size:21px; margin:36px 0 10px; font-weight:600; }
h3 { font-size:16px; margin:22px 0 6px; }
p, li { color: var(--soft); }
.lede { font-size:17px; max-width: 620px; }
.actions { display:flex; gap:12px; margin:28px 0 8px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 22px;
  border-radius:999px; background:var(--action); color:var(--action-ink); text-decoration:none; font-weight:500; }
.btn.secondary { background:transparent; color:var(--ink); box-shadow: inset 0 0 0 1.5px #526F82; }
.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:28px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.card h3 { margin-top:0; }
.price { font-size:30px; font-weight:500; margin:6px 0; color:var(--ink); }
.muted { color:var(--dim); font-size:13px; }
.notice { background:var(--accent-surface); border-radius:14px; padding:14px 16px; font-size:13px; color:var(--soft); }
.legal h1 { font-size:30px; } .legal h2 { font-size:18px; } .legal p, .legal li { font-size:14px; }
footer.site { border-top:1px solid var(--line); padding:24px 0; font-size:12px; color:var(--dim); }
footer.site .wrap { display:flex; gap:16px; flex-wrap:wrap; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; background:#F0F3F5; padding:2px 5px; border-radius:5px; }
