* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
       margin: 0; color: #222; line-height: 1.6; background: #fafafa; }
nav { background: #1a1a2e; padding: 0.9rem 1.5rem; display: flex; gap: 1.5rem; align-items: center; }
nav a { color: #ddd; text-decoration: none; }
nav a:hover { color: #fff; }
nav .brand { font-weight: bold; font-size: 1.2rem; color: #fff; margin-right: auto; }
nav .cta { background: #4f8cff; color: #fff !important; padding: 0.4rem 1rem;
           border-radius: 6px; font-weight: bold; }
.lang-switch { margin-left: 0.5rem; font-size: 0.9rem; }
.lang-switch a { color: #999; padding: 0.2rem 0.4rem; }
.lang-switch a.active { color: #fff; font-weight: bold; }
.note { background: #fff8e6; border-left: 4px solid #e8a838; padding: 0.9rem 1.1rem;
        border-radius: 0 8px 8px 0; color: #555; }
table.compare { width: 100%; border-collapse: collapse; margin: 1.5rem 0;
                background: #fff; border-radius: 10px; overflow: hidden;
                font-size: 0.95rem; }
table.compare th, table.compare td { text-align: left; padding: 0.7rem 0.8rem;
                border-bottom: 1px solid #eee; vertical-align: top; }
table.compare thead th { background: #1a1a2e; color: #fff; }
table.compare thead th.muse-col { background: #4f8cff; }
table.compare tbody tr:last-child td { border-bottom: none; }
table.compare tbody tr:nth-child(even) { background: #f7f9fc; }
table.compare td:first-child { white-space: nowrap; }
main { max-width: 760px; margin: 2rem auto; padding: 0 1.5rem 3rem; }
h1 { font-size: 2rem; margin-bottom: 0.25rem; }
h2 { margin-top: 2rem; color: #1a1a2e; }
.lede { font-size: 1.15rem; color: #555; }
.cards { display: grid; gap: 1rem; margin-top: 2rem; }
.card { background: #fff; border: 1px solid #e3e3e3; border-radius: 10px;
        padding: 1.25rem 1.5rem; text-decoration: none; color: inherit;
        transition: box-shadow 0.15s; display: block; }
.card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.card h2 { margin: 0 0 0.4rem; }
.card p { margin: 0; color: #555; }
.card.highlight { border-color: #4f8cff; background: #f0f5ff; }
.exercises li { margin-bottom: 0.75rem; }
.invite-box { background: #1a1a2e; border-radius: 10px; padding: 1.5rem;
              text-align: center; margin: 1rem 0; }
.invite-box code { font-size: 2rem; letter-spacing: 0.15em; color: #7dffb0;
                   font-weight: bold; }
.invite-poster { display: block; width: 100%; max-width: 520px; margin: 1.5rem auto;
                 border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.12); }
.redeem-demo { display: block; width: 100%; max-width: 780px; margin: 1.5rem auto;
               border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.10); }
.hint { color: #777; font-size: 0.95rem; }
.button { display: inline-block; background: #4f8cff; color: #fff !important;
          padding: 0.7rem 1.6rem; border-radius: 8px; text-decoration: none;
          font-weight: bold; margin-top: 1rem; }
footer { text-align: center; color: #999; font-size: 0.85rem; padding: 2rem; }