.learning-home { max-width: 1280px; margin: 0 auto; }
.learning-home__hero { padding: 24px 0 48px; }
.learning-home h1 { max-width: 25ch; font-size: 1.75rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.025em; word-break: keep-all; }
.learning-home__summary { max-width: 65ch; margin-top: 12px; color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.75; word-break: keep-all; }
.learning-home__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.learning-home__compare-link { display: inline-flex; min-height: 44px; align-items: center; color: var(--color-text-muted); font-size: 0.875rem; }
.learning-home__section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.learning-home__section-heading h2 { font-size: 1rem; font-weight: 500; }
.learning-home__section-heading p { color: var(--color-text-muted); font-size: 0.8125rem; }
.learning-home__path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.learning-path-card { display: grid; grid-template-areas: "copy" "demo" "action"; grid-template-rows: auto 1fr auto; gap: 16px; min-width: 0; align-content: start; }
.learning-path-card__copy { grid-area: copy; }
.learning-path-card h2 { font-size: 1rem; font-weight: 500; }
.learning-path-card__copy > p { max-width: 60ch; margin-top: 8px; color: var(--color-text-muted); word-break: keep-all; }
.learning-path-card__insight { font-size: 0.8125rem; }
.learning-path-card__action { grid-area: action; width: fit-content; }
.home-demo { display: grid; grid-area: demo; min-height: 160px; background: var(--color-surface-muted); padding: 20px; }
.home-demo--flex { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-demo--flex .home-demo__item { width: 64px; flex: 0 1 64px; }
.home-demo--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
.home-demo__item { display: grid; min-width: 0; min-height: 48px; place-items: center; font-size: 1rem; font-weight: 500; }
.home-demo__item--1 { background: var(--color-item-one); color: var(--color-item-one-ink); }
.home-demo__item--2 { background: var(--color-item-two); color: var(--color-item-two-ink); }
.home-demo__item--3 { background: var(--color-item-three); color: var(--color-item-three-ink); }
.home-demo__item--4 { background: var(--color-item-four); color: var(--color-item-four-ink); }
.learning-home__tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
.home-tool { display: grid; grid-template-rows: auto 1fr; gap: 8px; min-height: 88px; padding: 8px 0; color: var(--color-text); text-decoration: none; }
.home-tool strong { font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.home-tool span { max-width: 38ch; color: var(--color-text-muted); font-size: 0.8125rem; }
@media (max-width: 820px) { .learning-home__hero { padding: 16px 0 40px; } .learning-home__path-grid, .learning-home__tools { gap: 24px; } }
@media (max-width: 650px) { .learning-home__path-grid, .learning-home__tools { grid-template-columns: 1fr; } .learning-home h1 { font-size: 1.625rem; } .learning-home__path-grid { gap: 32px; } .learning-home__tools { gap: 8px; margin-top: 32px; } }