/* Homepage "latest guides" section — shared structure, brand-bespoke skin.
   Reuses .article-card/.article-grid (content-pages.css) and the
   data-home-reveal scroll-reveal system (home-v2.css/home.js); this file
   only adds section-level layout and the two brands' visual differentiation. */

.home-guides{padding:112px 0}
.home-guides__lead{margin:14px 0 0;color:#5e6b66;font-size:15px;line-height:1.7;max-width:640px}
.home-guides__grid{margin-top:8px}
@media(max-width:900px){.home-guides{padding:78px 0}}

/* Both *-home-refresh.css files style every <p> inside .home-section-heading
   as a pill-shaped eyebrow badge (display:inline-flex;width:max-content),
   meant for a short one-line kicker. .home-guides__heading reuses
   .home-section-heading for layout consistency but adds a second, longer
   lead paragraph — so it must be explicitly reset back to normal block
   flow, or the pill rule's width:max-content pushes it wider than the
   viewport on narrow screens (caught via live mobile-viewport testing). */
.home-guides__lead{display:block!important;width:auto!important;padding:0!important;border-radius:0!important;background:none!important}

/* HUT — the site's own asymmetric-radius card motif (already applied
   globally to .article-card via content-pages.css) plus Noto Serif Display
   headings, echoing hut-care/hut-welcome's warm, editorial tone. */
.hut-home-guides{background:#fff}
.hut-home-guides .home-guides__heading p{color:#9d7b20}
.hut-home-guides .home-guides__lead{color:#686761!important}
.hut-home-guides .article-card h3{font:600 22px 'Noto Serif Display',serif;letter-spacing:-.01em;margin:10px 0 12px}
.hut-home-guides .article-card__meta{letter-spacing:.09em}
.hut-home-guides .article-card:hover{border-color:#f4b000;box-shadow:0 16px 45px rgba(16,20,24,.1)}

/* SCC — the search-card/solution-grid motif: sharp corners, a top accent
   border in --accent, and Manrope headings. */
.scc-home-guides{background:#f7f9f6}
.scc-home-guides .home-guides__lead{color:#53605b!important}
.scc-home-guides .article-card{border-radius:4px;border-top:4px solid var(--accent);transition:transform .22s,box-shadow .22s}
.scc-home-guides .article-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(6,44,33,.1);border-top-color:var(--accent)}
.scc-home-guides .article-card h3{font:750 22px 'Manrope',sans-serif;letter-spacing:-.02em;margin:10px 0 12px}

/* Staggered reveal — additive transition-delay only; the base opacity/
   transform transition already comes from .has-home-reveal in home-v2.css,
   so prefers-reduced-motion (which sets transition:none there) still wins. */
.has-home-reveal .home-guides__card:nth-child(1){transition-delay:0ms}
.has-home-reveal .home-guides__card:nth-child(2){transition-delay:60ms}
.has-home-reveal .home-guides__card:nth-child(3){transition-delay:120ms}
.has-home-reveal .home-guides__card:nth-child(4){transition-delay:180ms}
.has-home-reveal .home-guides__card:nth-child(5){transition-delay:240ms}
.has-home-reveal .home-guides__card:nth-child(6){transition-delay:300ms}

@media(max-width:650px){.home-guides{padding:60px 0}.home-guides__heading{display:block}.home-guides__heading>a{margin-top:20px}}