.hero { padding: 18px 0 8px; }
.hero h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); letter-spacing: -0.03em; margin: 6px 0 8px; }
.kicker { margin: 0; color: var(--accent); font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .06em; }
.tiles.home { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
@media (min-width: 560px) { .tiles.home { grid-template-columns: 1fr 1fr; } .tiles.home .tile:first-child { grid-column: 1 / -1; } }
.tiles.home .tile { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; padding: 18px; transition: transform .15s, border-color .15s; }
.tiles.home .tile:hover { transform: translateY(-2px); }
.tiles.home .tile-emoji { font-size: 2rem; }
.tiles.home .tile strong { font-size: 1.15rem; }
.tiles.home .tile .muted { flex-basis: 100%; }
.tile.done { background: var(--tint); }
.streak { flex-basis: 100%; font-size: .85rem; font-weight: 600; color: var(--close); }