:root { --fg:#1c1f23; --muted:#6b7280; --line:#e5e7eb; --bg:#f7f7f8; --accent:#1f4fd1; --err:#b42318; --errbg:#fef3f2; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--fg); background:var(--bg); line-height:1.5; }
a { color: var(--accent); }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:14px 24px; background:#fff; border-bottom:1px solid var(--line); }
.topbar nav { display:flex; gap:16px; align-items:center; }
.brand { font-weight:700; text-decoration:none; color:var(--fg); font-size:1.1rem; }
.container { max-width: 960px; margin: 0 auto; padding: 24px; }
.footer { text-align:center; color:var(--muted); padding:24px; font-size:.9rem; }
.hero { padding: 32px 0; }
.hero h1 { font-size: 2rem; margin: 0 0 12px; }
.lead { font-size: 1.1rem; max-width: 640px; }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:20px; margin-bottom:20px; }
.narrow { max-width: 420px; margin: 24px auto; }
.plans { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px; }
.plan { text-align:center; }
.price { font-size:2rem; font-weight:700; margin:8px 0 16px; }
.price span { font-size:1rem; color:var(--muted); font-weight:400; }
.plan-buttons { display:flex; flex-wrap:wrap; gap:10px; }
.btn { display:inline-block; background:var(--accent); color:#fff; border:0; border-radius:6px; padding:10px 16px; text-decoration:none; font:inherit; cursor:pointer; }
.btn.small { padding:6px 10px; font-size:.9rem; }
.btn.secondary { background:#fff; color:var(--fg); border:1px solid var(--line); }
.linklike { background:none; border:0; color:var(--accent); cursor:pointer; font:inherit; padding:0; }
form.inline { display:inline; }
label { display:block; margin-bottom:12px; font-size:.95rem; }
input[type=text], input[type=email], input[type=password] { display:block; width:100%; margin-top:4px; padding:9px 10px; border:1px solid var(--line); border-radius:6px; font:inherit; }
.error-box { background:var(--errbg); color:var(--err); border:1px solid #fecdca; border-radius:6px; padding:12px 14px; margin-bottom:16px; }
.notice { background:#eff4ff; border:1px solid #c7d7fe; border-radius:6px; padding:12px 14px; margin-bottom:16px; }
.muted { color:var(--muted); }
table { width:100%; border-collapse:collapse; margin-bottom:16px; }
th, td { text-align:left; padding:8px; border-bottom:1px solid var(--line); vertical-align:top; }
td.actions { white-space:nowrap; }
.brief { border-top:1px solid var(--line); padding:12px 0; }
.brief-body { white-space:pre-wrap; margin-top:6px; }
.steps li { margin-bottom:6px; }