/* home-media.css — recommendation-media homepage (pilot). Scoped to .hm-* classes only. */
:root{--hm-ink:#17251E;--hm-ink-2:#263A2C;--hm-text:#1E1E1F;--hm-muted:#5A615D;--hm-line:#E3E6E2;--hm-tint:#F5F6F2;--hm-accent:#FFD815;--hm-good:#007600;--hm-radius:14px}
.hm-section{padding-top:72px;padding-bottom:72px}
.hm-section--tint{background:var(--hm-tint)}
.hm-head{max-width:760px;margin:0 0 32px}
.hm-head h2{font-size:clamp(26px,3vw,36px);line-height:1.15;margin:0 0 10px;color:var(--hm-text);font-weight:700;letter-spacing:-.01em}
.hm-head p{margin:0;color:var(--hm-muted);font-size:16px;line-height:1.55}
.hm-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;max-width:none}
.hm-eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px!important;font-weight:700;color:var(--hm-ink-2)!important;margin:0 0 10px!important}

/* hero */
.hm-hero{position:relative;min-height:560px;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--hm-ink)}
.hm-hero__media{position:absolute;inset:0}
.hm-hero__media img{width:100%;height:100%;object-fit:cover;display:block}
.hm-hero__media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,24,19,.88) 0%,rgba(14,24,19,.62) 48%,rgba(14,24,19,.15) 100%),linear-gradient(0deg,rgba(14,24,19,.55),rgba(14,24,19,0) 45%)}
.hm-hero__inner{position:relative;z-index:1;width:100%;padding-top:96px;padding-bottom:64px}
.hm-hero h1{font-size:clamp(34px,5vw,58px);line-height:1.05;letter-spacing:-.02em;margin:0 0 18px;max-width:780px;color:#fff;font-weight:700}
.hm-hero__lead{font-size:clamp(16px,1.6vw,19px);line-height:1.55;max-width:640px;margin:0 0 28px;color:rgba(255,255,255,.9)}
.hm-hero__proof{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin:0 0 18px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff}
.hm-dot{width:8px;height:8px;border-radius:50%;background:#5BD38A;box-shadow:0 0 0 3px rgba(91,211,138,.25)}
.hm-chips{display:flex;flex-wrap:wrap;gap:10px}
.hm-chip{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:#fff;color:var(--hm-ink);font-weight:700;font-size:15px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.hm-chip:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.hm-chip--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}

/* top picks */
.hm-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.hm-pick{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--hm-line);border-radius:var(--hm-radius);overflow:hidden;transition:box-shadow .2s,transform .2s}
.hm-pick:hover{box-shadow:0 14px 34px rgba(23,37,30,.10);transform:translateY(-2px)}
.hm-pick__use{position:absolute;top:14px;left:14px;z-index:1;margin:0;padding:5px 11px;border-radius:999px;background:var(--hm-ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em}
.hm-pick__media{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:#fff;padding:44px 24px 12px;border-bottom:1px solid var(--hm-line)}
.hm-pick__media .product-media{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.hm-pick__media img{max-width:100%;max-height:100%;object-fit:contain}
.hm-pick__body{display:flex;flex-direction:column;gap:14px;padding:18px 20px 20px;flex:1}
.hm-pick h3{margin:0;font-size:18px;line-height:1.3;font-weight:700}
.hm-pick h3 a{color:var(--hm-text);text-decoration:none}
.hm-pick h3 a:hover{text-decoration:underline}
.hm-score{display:flex;align-items:center;gap:12px}
.hm-score__value{display:flex;align-items:center;justify-content:center;min-width:54px;height:54px;border-radius:12px;background:var(--hm-ink);color:#fff;font-size:22px;font-weight:800}
.hm-score__meta{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--hm-muted)}
.hm-score__label{font-weight:700;color:var(--hm-text);font-size:15px}
.hm-stars{display:inline-flex;gap:2px}
.hm-star{width:13px;height:13px;display:inline-block;background:#dcdcdc;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.hm-star--full{background:#F5A623}
.hm-star--half{background:linear-gradient(90deg,#F5A623 50%,#dcdcdc 50%)}
.hm-cta{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 16px;border-radius:8px;background:var(--hm-accent);color:#111;font-weight:800;text-decoration:none;font-size:15px;transition:filter .15s}
.hm-cta:hover{filter:brightness(.95)}
.hm-more{text-align:center;font-size:14px;font-weight:600;color:var(--hm-ink-2)}

/* quick table */
.hm-table-wrap{overflow-x:auto;border:1px solid var(--hm-line);border-radius:var(--hm-radius);background:#fff}
.hm-table{width:100%;border-collapse:collapse;min-width:640px;font-size:15px}
.hm-table th,.hm-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--hm-line);vertical-align:middle}
.hm-table thead th{background:var(--hm-ink);color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.hm-table tbody tr:last-child th,.hm-table tbody tr:last-child td{border-bottom:0}
.hm-table tbody th{font-weight:700}
.hm-table a{font-weight:700;color:var(--hm-ink-2)}

/* all comparisons */
.hm-comps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.hm-comp{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--hm-line);border-radius:var(--hm-radius);text-decoration:none;color:var(--hm-text);background:#fff;transition:border-color .2s,box-shadow .2s}
.hm-comp:hover{border-color:var(--hm-ink-2);box-shadow:0 10px 26px rgba(23,37,30,.08)}
.hm-comp h3{margin:0;font-size:19px;line-height:1.3}
.hm-comp p{margin:0;color:var(--hm-muted);font-size:15px;line-height:1.55}
.hm-comp__count{align-self:flex-start;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:#E9F5EE;color:#245C3B}
.hm-comp__go{margin-top:auto;font-weight:700;color:var(--hm-ink-2)}

/* how to choose */
.hm-choose{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.hm-choose__media{border-radius:var(--hm-radius);overflow:hidden;aspect-ratio:3/2}
.hm-choose__media img{width:100%;height:100%;object-fit:cover;display:block}
.hm-choose__body h2{font-size:clamp(26px,3vw,36px);line-height:1.15;margin:0 0 14px}
.hm-choose__body p{color:var(--hm-muted);line-height:1.6;margin:0 0 14px}
.hm-answer{padding:14px 18px;border-left:4px solid var(--hm-good);background:#FAFDF9;border-radius:0 8px 8px 0;color:var(--hm-text)!important;font-weight:600}
.hm-choose__actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 10px}
.hm-btn{display:inline-flex;align-items:center;padding:12px 20px;border-radius:999px;background:var(--hm-ink);color:#fff;font-weight:700;text-decoration:none;font-size:15px}
.hm-btn--ghost{background:transparent;color:var(--hm-ink);border:1px solid var(--hm-ink)}
.hm-note{font-size:14px}

.hm-criteria{counter-reset:hm;list-style:none;margin:6px 0 4px;padding:0;display:grid;gap:10px}
.hm-criteria li{counter-increment:hm;position:relative;padding:10px 14px 10px 46px;border:1px solid var(--hm-line);border-radius:10px;font-weight:600;color:var(--hm-text);line-height:1.4}
.hm-criteria li:before{content:counter(hm);position:absolute;left:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:#E9F5EE;color:#245C3B;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
/* guides */
.hm-guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hm-guides .article-card{margin:0}
.hm-guides .article-card__media{border-radius:12px;overflow:hidden;aspect-ratio:3/2}
.hm-guides .article-card__media img{width:100%;height:100%;object-fit:cover}
.hm-guides h3{font-size:17px;line-height:1.35;margin:12px 0 0}

/* method */
.hm-method{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.hm-method h2{font-size:clamp(26px,3vw,36px);line-height:1.15;margin:0 0 14px}
.hm-method p{color:var(--hm-muted);line-height:1.6}
.hm-method__list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.hm-method__list li{padding:16px 18px 16px 48px;background:#fff;border:1px solid var(--hm-line);border-radius:12px;position:relative;line-height:1.5;font-size:15px}
.hm-method__list li:before{content:"✓";position:absolute;left:16px;top:15px;width:22px;height:22px;border-radius:50%;background:var(--hm-ink);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:800}
.hm-method__links{display:flex;flex-wrap:wrap;gap:18px;margin:18px 0 0}
.hm-method__links a{font-weight:700;color:var(--hm-ink-2)}

/* faq */
.hm-faq{max-width:860px;display:grid;gap:10px}
.hm-faq__item{border:1px solid var(--hm-line);border-radius:12px;padding:0 20px;background:#fff}
.hm-faq__item summary{cursor:pointer;list-style:none;padding:18px 28px 18px 0;font-weight:700;font-size:17px;position:relative}
.hm-faq__item summary::-webkit-details-marker{display:none}
.hm-faq__item summary:after{content:"+";position:absolute;right:0;top:14px;font-size:22px;color:var(--hm-ink-2)}
.hm-faq__item[open] summary:after{content:"−"}
.hm-faq__item p{margin:0 0 18px;color:var(--hm-muted);line-height:1.6}
.hm-faq__item a{font-weight:700;color:var(--hm-ink-2)}

@media (max-width:989px){
.hm-choose,.hm-method{grid-template-columns:1fr;gap:28px}
.hm-guides{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
.hm-section{padding-top:48px;padding-bottom:48px}
.hm-hero{min-height:0}
.hm-hero__inner{padding-top:72px;padding-bottom:40px}
.hm-hero__media:after{background:linear-gradient(0deg,rgba(14,24,19,.92) 0%,rgba(14,24,19,.7) 60%,rgba(14,24,19,.45) 100%)}
.hm-chips{flex-direction:column;align-items:stretch}
.hm-chip{justify-content:space-between}
.hm-guides{grid-template-columns:1fr}
.hm-head--row{flex-direction:column;align-items:flex-start}
.hm-table{min-width:0}
.hm-table th,.hm-table td{padding:12px 12px;font-size:14px}
.hm-col-reviews{display:none}
}

/* v2: hero single CTA, home ranking, comparison cards with image, slider */
.hm-hero{min-height:480px}
.hm-hero__cta{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;background:var(--hm-accent);color:#111;font-weight:800;font-size:16px;text-decoration:none;transition:filter .15s,transform .15s}
.hm-hero__cta:hover{filter:brightness(.95);transform:translateY(-1px)}
.hm-ranking{padding-top:24px}
.hm-ranking .comparison-ranking__heading a{color:inherit;text-decoration:none}
.hm-ranking .comparison-ranking__heading a:hover{text-decoration:underline}
.hm-ranking .hm-eyebrow{margin-bottom:6px!important}
.hm-ranking__more{text-align:center;margin:28px 0 8px}
.hm-comps{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.hm-comp{flex-direction:row;align-items:center;gap:20px;padding:18px}
.hm-comp__media{flex:0 0 120px;height:120px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:10px}
.hm-comp__media .product-media{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.hm-comp__media img{max-width:100%;max-height:100%;object-fit:contain}
.hm-comp__body{display:flex;flex-direction:column;gap:8px;min-width:0}
.hm-comp__top{margin:0;font-size:14px;color:var(--hm-muted)}
.hm-slider__nav{display:flex;gap:8px}
.hm-slider__btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--hm-line);background:#fff;color:var(--hm-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s}
.hm-slider__btn:hover{border-color:var(--hm-ink)}
.hm-slider{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 16px;scrollbar-width:thin}
.hm-slide{scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--hm-line);border-radius:var(--hm-radius);background:#fff;min-width:0}
.hm-slide__media{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#fff}
.hm-slide__media .product-media{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.hm-slide__media img{max-width:100%;max-height:100%;object-fit:contain}
.hm-slide__use{margin:0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.hm-slide__use a{color:#245C3B;text-decoration:none}
.hm-slide h3{margin:0;font-size:16px;line-height:1.35;min-height:2.7em}
.hm-slide h3 a{color:var(--hm-text);text-decoration:none}
@media (max-width:989px){.hm-slider{grid-auto-columns:calc((100% - 20px)/2.2)}}
@media (max-width:640px){.hm-hero{min-height:0}.hm-hero__cta{width:100%;justify-content:center}.hm-slider{grid-auto-columns:78%}.hm-comps{grid-template-columns:1fr}.hm-comp__media{flex-basis:88px;height:88px}.hm-slider__nav{display:none}.hm-ranking{padding-top:8px}}

/* v3 (Elias 01/10): taller hero, no lavender band above the home ranking */
.hm-hero{min-height:min(640px,max(540px,62vh))}
.hm-hero__inner{padding-top:110px;padding-bottom:72px}
section.comparison-ranking.hm-ranking header.comparison-ranking__header{background:transparent!important;padding:44px 0 4px!important}
.hm-ranking{padding-top:0}
@media (max-width:640px){.hm-hero{min-height:440px}.hm-hero__inner{padding-top:84px;padding-bottom:40px}section.comparison-ranking.hm-ranking header.comparison-ranking__header{padding:28px 0 0!important}}