.hero {
    margin: var(--ui-space-3) 0 var(--ui-space-5);
    padding: var(--ui-space-5) var(--ui-space-4);
    border: 1px solid var(--ui-card-border, var(--line));
    border-radius: var(--ui-card-radius, var(--ui-radius-lg));
    background: var(--ui-tint-positive-subtle, var(--card));
}

.hero h1 { font-size: 2rem; }

.hero-search {
    display: flex;
    gap: var(--ui-space-2);
    max-width: min(100%, 44rem);
    margin: var(--ui-space-3) 0;
}

.hero-search input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--ui-control-height);
    padding: 0 var(--ui-space-3);
    border: 1px solid var(--line);
    border-radius: var(--ui-control-radius, var(--ui-radius-md));
    background: var(--ui-input-fill, var(--card));
    color: var(--ink);
    font: inherit;
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--ui-space-3);
    margin: 0 0 var(--ui-space-3);
    padding: 0;
    list-style: none;
}

.tile {
    display: grid;
    gap: var(--ui-space-1);
    height: 100%;
    padding: var(--ui-space-3);
    border: 1px solid var(--line);
    border-radius: var(--ui-radius-md);
    color: var(--ink);
    text-decoration: none;
}

.tile:hover { border-color: var(--green); }
.tile-accent { border-color: var(--ui-tint-positive-border, var(--green)); background: var(--ui-tint-positive-subtle, transparent); }

.two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ui-space-4);
}

/* Wide windows: the introduction sits left, the search and the fund count right. */
@media (min-width: 1200px) {
    .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--ui-space-6); align-items: center; padding: var(--ui-space-6); }
    .hero > h1, .hero > .lead { grid-column: 1; }
    .hero > .hero-search, .hero > .muted { grid-column: 2; }
    .hero > h1 { grid-row: 1; margin-bottom: 0; }
    .hero > .lead { grid-row: 2; margin-bottom: 0; }
    .hero > .hero-search { grid-row: 1; max-width: none; margin: 0; }
    .hero > .muted { grid-row: 2; margin: var(--ui-space-2) 0 0; }
}

@media (max-width: 800px) {
    .hero { padding: var(--ui-space-4) var(--ui-space-3); }
    .hero h1 { font-size: 1.5rem; }
    .two-col { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

.hero-popular { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); margin: var(--ui-space-2) 0 0; }
.hero-popular .chip.has-tone { border-color: color-mix(in srgb, var(--tone) 55%, var(--line)); background: color-mix(in srgb, var(--tone) 16%, var(--card)); }