.sm {
    --sm-green: #7fc945;
    --sm-ink: #163328;
    --sm-mute: #5b6b63;
    --sm-line: rgba(22, 51, 40, .1);
    background:
        radial-gradient(1000px 380px at 100% 0, rgba(127, 201, 69, .1), transparent 55%),
        #f4f7f2;
    min-height: 70vh;
    padding-bottom: 4rem;
}

.sm-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #123326 0%, #1c4a36 46%, #2a6a28 100%);
    padding: 2.1rem 0 2.8rem;
}

.sm-hero__glow {
    position: absolute;
    inset: auto -10% -50% 40%;
    height: 260px;
    background: radial-gradient(circle, rgba(142, 213, 87, .4), transparent 70%);
    pointer-events: none;
}

.sm-hero__inner { position: relative; z-index: 1; }

.sm-crumbs {
    display: flex;
    gap: .4rem;
    align-items: center;
    font-size: .82rem;
    opacity: .82;
    margin-bottom: .85rem;
}
.sm-crumbs a { color: #fff; text-decoration: none; }
.sm-crumbs a:hover { text-decoration: underline; }

.sm-kicker {
    margin: 0 0 .35rem;
    font-size: .72rem;
    letter-spacing: .12em;
    font-weight: 800;
    color: #d7f5b8;
    text-transform: uppercase;
}

.sm-hero h1 {
    margin: 0 0 .55rem;
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    font-weight: 900;
}

.sm-lead {
    max-width: 42rem;
    margin: 0 0 1.15rem;
    line-height: 1.85;
    color: rgba(255,255,255,.86);
}

.sm-hero__actions { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: 1.35rem; }

.sm-btn {
    display: inline-flex;
    align-items: center;
    background: #8ed557;
    color: #14301f;
    font-weight: 800;
    text-decoration: none;
    border-radius: 999px;
    padding: .55rem 1.05rem;
}
.sm-btn--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.28);
}

.sm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: .7rem;
    max-width: 720px;
}
.sm-stats div {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: .7rem .8rem;
}
.sm-stats b { display: block; font-size: 1.2rem; font-weight: 900; }
.sm-stats span { font-size: .75rem; opacity: .8; }

.sm-body { padding-top: 1.6rem; }

.sm-search {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: #fff;
    border: 1px solid var(--sm-line);
    border-radius: 14px;
    padding: .7rem .9rem;
    margin-bottom: 1.25rem;
    color: var(--sm-mute);
}
.sm-search input {
    border: 0;
    outline: 0;
    width: 100%;
    background: transparent;
    font: inherit;
    color: var(--sm-ink);
}

.sm-block {
    background: #fff;
    border: 1px solid var(--sm-line);
    border-radius: 18px;
    padding: 1.1rem 1.15rem 1.2rem;
    margin-bottom: 1rem;
}
.sm-block.is-empty { display: none; }
.sm-block header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: .85rem;
}
.sm-block h2 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--sm-ink);
}
.sm-block header span { color: var(--sm-mute); font-size: .8rem; font-weight: 700; }

.sm-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .35rem .7rem;
}
.sm-grid--wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sm-grid a {
    display: block;
    color: #1f4d36;
    text-decoration: none;
    padding: .38rem .15rem;
    border-radius: 8px;
    line-height: 1.55;
}
.sm-grid a:hover { color: #147a32; background: #f3faeb; }

.sm-empty { margin: 0; color: var(--sm-mute); }
.sm-more {
    display: inline-block;
    margin-top: .85rem;
    font-weight: 800;
    color: #2a7a38;
    text-decoration: none;
}

.sm-note {
    background: #edf8e4;
    border: 1px solid #d5ecc0;
    border-radius: 16px;
    padding: 1rem 1.1rem;
    color: #2b4a32;
}
.sm-note strong { display: block; margin-bottom: .35rem; }
.sm-note p { margin: 0; line-height: 1.8; }
.sm-note code {
    background: #fff;
    border-radius: 6px;
    padding: .05rem .35rem;
    font-size: .85em;
}
.sm-note a { color: #1f6b2c; font-weight: 800; }

@media (max-width: 640px) {
    .sm-grid, .sm-grid--wide { grid-template-columns: 1fr; }
}