body { font-family: Arial, Helvetica, sans-serif; line-height: 1.6; margin: 0; color: #111; }
    header, main, footer { max-width: 980px; margin: 0 auto; padding: 18px; }
    .badge { display: inline-block; padding: 6px 10px; border: 1px solid #ddd; border-radius: 999px; margin-right: 8px; font-size: 14px; }
    .hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; align-items: center; }
    .hero img { width: 100%; height: auto; border: 1px solid #eee; border-radius: 12px; background: #fafafa; }
    .cta { display: inline-block; margin-top: 10px; padding: 10px 14px; border-radius: 10px; border: 1px solid #111; text-decoration: none; color: #111; }
    .cta:hover { opacity: 0.85; }
    h1, h2, h3 { line-height: 1.25; }
    h2 { margin-top: 34px; }
    table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
    th { background: #f6f6f6; }
    .note { font-size: 14px; color: #444; }
    .toc { background: #fafafa; border: 1px solid #eee; padding: 14px; border-radius: 12px; }
    .toc a { color: #111; text-decoration: none; }
    .toc a:hover { text-decoration: underline; }
    .faq details { border: 1px solid #eee; border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: #fff; }
    .faq summary { cursor: pointer; font-weight: 700; }
    footer { border-top: 1px solid #eee; margin-top: 30px; padding-top: 18px; }
    @media (max-width: 860px) {
      .hero { grid-template-columns: 1fr; }
    }