:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f2933;
  background: #f8fafb;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f8fafb; }
.page-shell { max-width: 1240px; margin: 0 auto; padding: 48px 32px 64px; }
.page-header { max-width: 720px; margin-bottom: 28px; }
.eyebrow { margin: 0 0 8px; color: #5b6470; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; color: #17212b; font-size: clamp(28px, 4vw, 42px); line-height: 1.1; letter-spacing: -.02em; }
.intro { margin: 14px 0 0; color: #5d6873; font-size: 16px; line-height: 1.55; }
.comparison-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.activity-card { --card-bg: #fff; --card-border: #d4dbe0; --card-accent: #52616d; --icon-bg: #e8edf0; --icon-color: #52616d; min-height: 300px; padding: 22px; border: 1px solid var(--card-border); border-radius: 18px; background: var(--card-bg); box-shadow: 0 8px 22px rgba(30, 42, 53, .06); display: flex; flex-direction: column; }
.card-topline { display: flex; align-items: center; gap: 10px; color: var(--card-accent); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.card-icon { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 10px; background: var(--icon-bg); color: var(--icon-color); font-size: 18px; font-weight: 800; }
h2 { margin: 20px 0 10px; color: #1d2730; font-size: 20px; line-height: 1.2; }
.activity-card p { margin: 0; color: #4f5c67; font-size: 14px; line-height: 1.5; }
.setting-row { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 24px; color: #27333d; font-size: 14px; font-weight: 700; }
.check { width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 6px; background: var(--card-accent); color: #fff; font-size: 13px; }
small { margin-top: 16px; color: var(--card-accent); font-size: 12px; font-weight: 700; }
.variant-blue { --card-bg: #eef6fb; --card-border: #b9d4e5; --card-accent: #2d668b; --icon-bg: #d9ebf5; --icon-color: #2d668b; }
.variant-sage { --card-bg: #eef8f0; --card-border: #bfdcc5; --card-accent: #3c704a; --icon-bg: #dcefe0; --icon-color: #3c704a; }
.variant-sand { --card-bg: #fff8eb; --card-border: #ead3a8; --card-accent: #8b642e; --icon-bg: #f8e8c7; --icon-color: #8b642e; }
.variant-rose { --card-bg: #fff1f2; --card-border: #e6bcc1; --card-accent: #8d4f58; --icon-bg: #f6dfe1; --icon-color: #8d4f58; }
.variant-slate { --card-bg: #f1f4f5; --card-border: #cbd4d9; --card-accent: #52616d; --icon-bg: #e1e7ea; --icon-color: #52616d; }
.variant-primary-dark { --card-bg: #e5f6d8; --card-border: #c2e4a9; --card-accent: #3d7225; --icon-bg: #d2edbd; --icon-color: #3d7225; }
.variant-secondary-dark { --card-bg: #edf2e8; --card-border: #d4ddcc; --card-accent: #59664f; --icon-bg: #e0e8da; --icon-color: #59664f; }
.variant-tertiary-dark { --card-bg: #e2f4f4; --card-border: #b9dddd; --card-accent: #267173; --icon-bg: #d0ebeb; --icon-color: #267173; }
.variant-primary-purple { --card-bg: #eee6ff; --card-border: #d9c8fa; --card-accent: #5e4a91; --icon-bg: #e1d4fb; --icon-color: #5e4a91; }
.variant-tertiary-purple { --card-bg: #fce8fb; --card-border: #efc8ee; --card-accent: #8a4f8d; --icon-bg: #f5d9f3; --icon-color: #8a4f8d; }
@media (max-width: 980px) { .comparison-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .page-shell { padding: 32px 18px 48px; } .comparison-grid { grid-template-columns: 1fr; } .activity-card { min-height: 260px; } }