:root {
    --bg: #f6f4ef;
    --ink: #17171a;
    --muted: #5d5d66;
    --line: #dcd8ce;
    --card: #ffffff;
    --accent: #3b3bd6;
    --accent-ink: #ffffff;
    --gap: 24px;
    --pad: 32px;
    --radius: 14px;
    --max: 1040px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #111114; --ink: #f1f0ec; --muted: #a3a3ad; --line: #2c2c33;
      --card: #1a1a1f; --accent: #8c8cff; --accent-ink: #111114;
    }
  }
  * { box-sizing: border-box; margin: 0; }
  body { background: var(--bg); color: var(--ink); font: 400 17px/1.6 Inter, system-ui, sans-serif; }
  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
  section { padding: 72px 0; border-top: 1px solid var(--line); }
  header { padding: 24px 0; }
  header .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--gap); }
  .logo { font: 600 20px/1 Fraunces, Georgia, serif; }
  .tag { font-size: 14px; color: var(--muted); }
  h1, h2 { font-family: Fraunces, Georgia, serif; font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; }
  h1 { font-size: clamp(38px, 6vw, 64px); max-width: 15ch; }
  h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: var(--gap); }
  h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
  p { max-width: 62ch; }
  .lead { font-size: 20px; color: var(--muted); margin-top: var(--gap); }
  .muted { color: var(--muted); }
  .btn { display: inline-block; margin-top: 32px; padding: 14px 24px; border-radius: 999px;
         background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; }
  .btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
  .grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); }
  .price { font: 600 40px/1 Fraunces, Georgia, serif; margin: 16px 0 4px; }
  .price span { font: 400 16px Inter, sans-serif; color: var(--muted); }
  ul.ticks { list-style: none; padding: 0; margin-top: 16px; }
  ul.ticks li { padding: 6px 0 6px 26px; position: relative; }
  ul.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
  ol.steps { padding-left: 22px; }
  ol.steps li { padding: 6px 0; max-width: 62ch; }
  .note { margin-top: var(--gap); font-size: 15px; color: var(--muted); }
  .stats { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: var(--gap); }
  .stat b { display: block; font: 600 32px/1.1 Fraunces, Georgia, serif; }
  footer { padding: 40px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
  a { color: inherit; }
  @media (max-width: 600px) { :root { --pad: 16px; } section { padding: 56px 0; } }
textarea { width: 100%; min-height: 120px; padding: 16px; font: inherit; color: var(--ink); background: var(--card);
           border: 1px solid var(--line); border-radius: var(--radius); resize: vertical; }
textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button.btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.result li { padding: 6px 0; }
.result .bad { color: #c2410c; }