.features .intro .subtitle      { max-width: 600px; }
.features-grid + .features-grid { margin-top: var(--section-gap); }
.features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24);
                 align-items: center; }
.features-main { background: var(--gradient-warm);
                 border-radius: var(--radius-xl);
                 padding: var(--space-6); display: flex;
                 box-sizing: border-box; }
.features-main > .quiz,
.features-main > .prof-chart { background: var(--color-background);
                               border: 1px solid var(--color-border);
                               /* outer radius-xl (40) − padding space-6 (24) → 16 */
                               border-radius: var(--radius-md);
                               box-shadow: var(--shadow-elevated);
                               padding: var(--space-6); box-sizing: border-box; }
.features-side { display: flex; flex-direction: column;
                 gap: var(--space-12); align-items: flex-start; }
.features-side .intro { flex: 0 0 auto; }
.features-list { list-style: none; padding: 0; margin: 0;
                 display: flex; flex-direction: column; gap: var(--space-4);
                 align-self: stretch; }
.features-list li       { display: flex; align-items: center; gap: var(--space-4); }
.features-list li > svg { flex-shrink: 0; width: 16px; height: 16px;
                          color: var(--color-primary); }

@media (max-width: 1024px) {
  .features-grid { gap: var(--space-16); }
}

@media (max-width: 768px) {
  .features-grid                { grid-template-columns: 1fr; }
  .features-grid .features-side { order: 0; }
  .features-grid .features-main { order: 1; }
}