/* ========================================================
   SunCo Learn Hub v2 Stylesheet
   Covers: Hub, Directory, Glossary, Guide, Comparison
   Mobile first, responsive breakpoints at 640px and 960px
   ======================================================== */

:root {
    --slh-green: #395903;
    --slh-lime: #99B207;
    --slh-gold: #f8b12d;
    --slh-dark: #1a1a1a;
    --slh-body: #4a4a4a;
    --slh-caption: #5c5c5c;
    --slh-border: #dcdfe3;
    --slh-bg: #f5f7f5;
    --slh-white: #ffffff;
    --slh-blue: #2563eb;
    --slh-focus: #2563eb;
    --slh-radius: 10px;
    --slh-max: 1100px;
}

/* ---- Reset & Base ---- */
.slh-wrap { max-width: var(--slh-max); width: 100%; margin: 0 auto; padding: 0 16px 60px; color: var(--slh-body); font-size: 16px; line-height: 1.6; box-sizing: border-box; }
.slh-wrap *, .slh-wrap *::before, .slh-wrap *::after { box-sizing: border-box; }
.slh-wrap h1, .slh-wrap h2, .slh-wrap h3 { color: var(--slh-dark); line-height: 1.25; margin: 0 0 12px; }
.slh-wrap h1 { font-size: 28px; font-weight: 800; }
.slh-wrap h2 { font-size: 20px; font-weight: 700; }
.slh-wrap h3 { font-size: 16px; font-weight: 700; }
.slh-wrap p { margin: 0 0 16px; }
.slh-wrap a { color: var(--slh-green); text-decoration: none; }
.slh-wrap a:hover { text-decoration: none; }
.slh-wrap img { max-width: 100%; height: auto; border-radius: 8px; }
.slh-wrap button { font-family: inherit; }
.slh-wrap ul, .slh-wrap ol { list-style: none; margin: 0; padding: 0; }
.slh-wrap dl, .slh-wrap dt, .slh-wrap dd { margin: 0; padding: 0; }
.slh-wrap table { border-spacing: 0; border-collapse: collapse; }
.slh-wrap figure { margin: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.slh-wrap :focus-visible { outline: 2px solid var(--slh-focus); outline-offset: 2px; }

/* GeneratePress container overrides: kill all spacing above our content */
.inside-article:has(.slh-wrap) { padding-top: 0 !important; margin-top: 0 !important; }
.entry-content:has(.slh-wrap) { padding-top: 0 !important; margin-top: 0 !important; }
article:has(.slh-wrap) { padding-top: 0 !important; }
.inside-article .entry-content .slh-wrap { margin-top: 0; }
.generate-columns-container:has(.slh-wrap) { padding-top: 0 !important; }

@media (min-width: 960px) { .slh-wrap h1 { font-size: 32px; } }

/* ---- Breadcrumb ---- */
.slh-crumb { margin-bottom: 20px; font-size: 13px; }
.slh-wrap .slh-crumb ol,
.slh-crumb ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; list-style-type: none; margin: 0; padding: 0; align-items: center; }
.slh-wrap .slh-crumb ol li,
.slh-crumb ol li { display: flex; align-items: center; gap: 4px; list-style: none; list-style-type: none; margin: 0; padding: 0; }
.slh-crumb li::before { content: '/' !important; color: var(--slh-border); font-size: 13px; font-weight: 400; counter-increment: none; }
.slh-crumb li:first-child::before { content: none !important; display: none; }
.slh-crumb a { color: var(--slh-green); text-decoration: none; }
.slh-crumb [aria-current] { color: var(--slh-dark); font-weight: 600; word-break: break-word; }

/* ---- Badges ---- */
.slh-badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.slh-badge { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; border: 1px solid transparent; white-space: nowrap; }
.slh-badge--gold { color: #92400e; background: #fef3c740; border-color: #f8b12d30; }
a.slh-badge--gold { text-decoration: none; color: #92400e; cursor: pointer; }
a.slh-badge--gold:hover { background: #fef3c780; text-decoration: none; }
a.slh-badge { text-decoration: none; cursor: pointer; }
a.slh-badge:hover { opacity: 0.85; text-decoration: none; }
.slh-badge--blue { color: var(--slh-blue); background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.15); }

/* ---- Hub Hero v2.8.2 (green + route cards + trust, ADA white text) ---- */
.slh-hero { background: var(--slh-green); padding: 44px 24px 36px; margin-bottom: 0; color: #fff; position: relative; }
.slh-hero-trust { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.slh-hero-trust-item { font-size: 12px; color: rgba(255,255,255,0.8); display: flex; align-items: center; gap: 6px; }
.slh-hero-trust-dot { width: 6px; height: 6px; border-radius: 50%; background: #99B207; flex-shrink: 0; }
.slh-hero h1 { color: #fff; font-size: 24px; line-height: 1.2; margin-bottom: 8px; letter-spacing: -0.01em; text-align: left; }
.slh-hero-sub { color: rgba(255,255,255,0.85); font-size: 14px; max-width: 520px; line-height: 1.55; margin: 0 0 24px; text-align: left; }
.slh-hero-routes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.slh-hero-card { display: block; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 14px 16px; text-decoration: none; color: #fff; transition: background 0.15s, border-color 0.15s; }
.slh-hero-card:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); text-decoration: none; color: #fff; }
.slh-hero-card-title { display: block; font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 3px; }
.slh-hero-card-desc { display: block; font-size: 11px; color: rgba(255,255,255,0.7); line-height: 1.35; }
.slh-hero-accent { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: #99B207; }
@media (min-width: 640px) { .slh-hero { padding: 52px 40px 42px; } .slh-hero h1 { font-size: 28px; } .slh-hero-sub { font-size: 15px; } }
.slh-container { max-width: var(--slh-max); margin: 0 auto; padding: 0 16px; }
.slh-search-wrap { position: relative; max-width: 480px; }
.slh-search-input { width: 100%; padding: 12px 16px 12px 40px; border-radius: var(--slh-radius); border: 1px solid var(--slh-border); font-size: 14px; outline: none; color: var(--slh-dark); background: var(--slh-white); font-family: inherit; }
.slh-search-input:focus { border-color: var(--slh-green); }
.slh-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--slh-caption); pointer-events: none; }
.slh-search-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--slh-white); border: 1px solid var(--slh-border); border-radius: 8px; margin-top: 4px; max-height: 320px; overflow-y: auto; z-index: 50; display: none; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.slh-search-results.active { display: block; }
.slh-search-results a { display: block; padding: 12px 16px; border-bottom: 1px solid var(--slh-border); color: var(--slh-dark); text-decoration: none; }
.slh-search-results a:hover { background: var(--slh-bg); }
.slh-search-results .slh-sr-title { font-weight: 700; font-size: 14px; }
.slh-search-results .slh-sr-def { font-size: 13px; color: var(--slh-caption); margin-top: 2px; }
.slh-search-results .slh-sr-meta { font-size: 11px; color: var(--slh-caption); margin-top: 4px; }

/* ---- Hub Sections ---- */
.slh-section, .slh-section-alt { padding: 32px 0; }
.slh-section-alt { background: var(--slh-bg); margin: 0 -16px; padding: 32px 16px; border-radius: var(--slh-radius); }
.slh-h2 { font-size: 20px; font-weight: 700; color: var(--slh-dark); margin-bottom: 8px; }
.slh-sub { font-size: 14px; color: var(--slh-body); margin-bottom: 20px; }

/* ---- Subject Grid ---- */
.slh-subject-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .slh-subject-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .slh-subject-grid { grid-template-columns: repeat(3, 1fr); } }
.slh-subject-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--slh-white); border: 1px solid var(--slh-border); border-radius: var(--slh-radius); text-decoration: none; color: inherit; transition: all 0.15s; }
.slh-subject-card:hover { border-color: rgba(57,89,3,0.4); box-shadow: 0 2px 8px rgba(0,0,0,0.06); text-decoration: none; }
.slh-subject-icon-wrap { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.slh-subject-name { display: block; font-weight: 700; font-size: 14px; color: var(--slh-dark); }
.slh-subject-count { display: block; font-size: 12px; color: var(--slh-caption); }

/* ---- Entry Grid (recent) ---- */
.slh-entry-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .slh-entry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .slh-entry-grid { grid-template-columns: repeat(3, 1fr); } }
.slh-entry-card { display: flex; flex-direction: column; padding: 20px; background: var(--slh-white); border: 1px solid var(--slh-border); border-radius: var(--slh-radius); text-decoration: none; color: inherit; transition: all 0.15s; }
.slh-entry-card:hover { border-color: rgba(57,89,3,0.4); box-shadow: 0 2px 8px rgba(0,0,0,0.06); text-decoration: none; }
.slh-entry-title { font-weight: 700; font-size: 16px; color: var(--slh-dark); margin-bottom: 6px; }
.slh-entry-def { font-size: 13px; color: var(--slh-body); line-height: 1.5; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.slh-entry-type { font-size: 12px; color: var(--slh-caption); margin-top: 10px; font-weight: 500; }

/* ---- About ---- */
.slh-about { padding: 24px 0; margin-top: 32px; }
.slh-about-inner { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
@media (min-width: 640px) { .slh-about-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.slh-about p { font-size: 14px; color: var(--slh-body); max-width: 560px; margin: 0; }
.slh-about-links { display: flex; gap: 10px; }
.slh-btn { display: inline-flex; padding: 12px 24px; background: var(--slh-green); color: #fff; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; }
.slh-btn:hover { opacity: 0.9; text-decoration: none; color: #fff; }
.slh-btn-outline { display: inline-flex; padding: 12px 24px; border: 1.5px solid var(--slh-green); color: var(--slh-green); border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; }
.slh-btn-outline:hover { background: var(--slh-green); color: #fff; text-decoration: none; }

/* ============== DIRECTORY ============== */
.slh-dir-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
.slh-dir-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.slh-dir-desc { font-size: 15px; color: var(--slh-body); margin: 0; max-width: 600px; }
.slh-dir-count { font-size: 14px; font-weight: 600; margin: 4px 0 0; }

.slh-dir-cat-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 36px; }
@media (min-width: 640px) { .slh-dir-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .slh-dir-cat-grid { grid-template-columns: repeat(3, 1fr); } }
.slh-dir-cat-card { padding: 16px; background: var(--slh-white); border: 1px solid var(--slh-border); border-radius: var(--slh-radius); }
.slh-dir-cat-card h3 { font-size: 15px; margin: 0 0 2px; }
.slh-dir-cat-count { font-size: 13px; color: var(--slh-caption); margin: 0 0 8px; }
.slh-dir-cat-preview { display: flex; flex-wrap: wrap; gap: 4px; }
.slh-dir-cat-preview span { font-size: 11px; color: var(--slh-body); background: var(--slh-bg); padding: 2px 8px; border-radius: 4px; border: 1px solid var(--slh-border); }

.slh-dir-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.slh-dir-filters { display: flex; gap: 4px; }
.slh-filter-btn { padding: 5px 12px; border-radius: 6px; border: 1px solid var(--slh-border); background: var(--slh-white); color: var(--slh-body); font-size: 12px; font-weight: 600; cursor: pointer; text-transform: capitalize; transition: 0.15s; }
.slh-filter-btn.active { border-color: var(--slh-green); background: rgba(57,89,3,0.06); color: var(--slh-green); }

.slh-dir-search { width: 100%; padding: 11px 16px; border-radius: 8px; border: 1px solid var(--slh-border); font-size: 14px; outline: none; background: var(--slh-white); color: var(--slh-dark); margin-bottom: 14px; }
.slh-dir-search:focus { border-color: var(--slh-green); }

.slh-alpha-bar { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 16px; }
.slh-alpha-btn { width: 30px; height: 30px; border-radius: 6px; border: none; font-size: 12px; font-weight: 500; cursor: pointer; background: transparent; color: var(--slh-dark); transition: 0.1s; }
.slh-alpha-btn.disabled { color: #ccc; cursor: default; }
.slh-alpha-btn.active { background: var(--slh-green); color: #fff; font-weight: 700; }
.slh-alpha-clear { padding: 4px 10px; border-radius: 6px; border: none; font-size: 11px; font-weight: 600; color: var(--slh-caption); background: var(--slh-bg); cursor: pointer; margin-left: 6px; }
@media (max-width: 639px) { .slh-alpha-btn { width: 28px; height: 28px; } }

.slh-dir-showing { font-size: 13px; color: var(--slh-caption); margin-bottom: 12px; }
.slh-dir-showing strong { color: var(--slh-dark); }

.slh-dir-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--slh-border); background: var(--slh-white); text-decoration: none; color: inherit; transition: background 0.1s; }
.slh-dir-item:first-child { border-top: 1px solid var(--slh-border); }
.slh-dir-item:hover { background: var(--slh-bg); text-decoration: none; }
.slh-dir-item--comp { border-left: 3px solid var(--slh-blue); }
.slh-dir-item-main { flex: 1; min-width: 0; }
.slh-dir-item-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.slh-dir-item-head h3 { font-size: 16px; font-weight: 700; margin: 0; }
.slh-dir-item-def { font-size: 13px; color: var(--slh-body); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slh-dir-item-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.slh-dir-item-guides { font-size: 11px; color: var(--slh-caption); background: var(--slh-bg); padding: 3px 8px; border-radius: 4px; border: 1px solid var(--slh-border); white-space: nowrap; }
.slh-dir-item-arrow { color: var(--slh-green); flex-shrink: 0; }
@media (max-width: 639px) { .slh-dir-item { padding: 14px 16px; } .slh-dir-item-head h3 { font-size: 15px; } }

/* ============== GLOSSARY / TOPIC HUB ============== */
.slh-glossary-layout { display: flex; flex-direction: column; gap: 24px; overflow: hidden; }
@media (min-width: 960px) { .slh-glossary-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; } }
.slh-glossary-main { padding-bottom: 48px; min-width: 0; overflow-wrap: break-word; }

.slh-glossary-title { margin-bottom: 4px; }
.slh-sci-name { font-size: 14px; color: var(--slh-caption); font-style: italic; margin: 0 0 20px; }

.slh-answer-capsule { border-radius: var(--slh-radius); padding: 18px 20px; margin-bottom: 24px; border: 1px solid transparent; }
.slh-answer-capsule--blue { background: rgba(37,99,235,0.04); border-color: rgba(37,99,235,0.1); }
.slh-answer-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.slh-answer-capsule p { font-size: 15px; color: var(--slh-dark); line-height: 1.7; margin: 0; font-weight: 500; }

.slh-id-images { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 28px; }
@media (min-width: 640px) { .slh-id-images { grid-template-columns: repeat(2, 1fr); } }
.slh-id-images figure { margin: 0; }
.slh-id-images figcaption { font-size: 12px; color: var(--slh-caption); margin-top: 6px; text-align: center; }

.slh-entry-content { margin-bottom: 24px; }
.slh-entry-content h2 { margin-top: 32px; }
.slh-entry-content p { color: var(--slh-body); line-height: 1.8; }

/* Commonly confused table */
.slh-table-wrap { overflow-x: auto; margin-bottom: 24px; position: relative; }
.slh-table-wrap::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.7)); pointer-events: none; opacity: 0; transition: opacity 0.2s; }
@media (max-width: 639px) { .slh-table-wrap::after { opacity: 1; } }
.slh-table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 400px; }
.slh-table-wrap thead { background: var(--slh-bg); }
.slh-table-wrap th, .slh-table-wrap td { padding: 10px 14px; text-align: left; }
.slh-table-wrap th { font-weight: 700; color: var(--slh-dark); }
.slh-table-wrap td { color: var(--slh-body); }
.slh-table-wrap tbody tr { border-top: 1px solid var(--slh-border); }
.slh-table-name { font-weight: 600; color: var(--slh-green); }

/* Comparison promotions */
.slh-comp-promo { background: rgba(37,99,235,0.03); border: 1px solid rgba(37,99,235,0.1); border-radius: 12px; padding: 20px; margin-bottom: 28px; }
.slh-comp-promo h2 { margin-bottom: 4px; }
.slh-comp-promo-desc { font-size: 13px; color: var(--slh-body); margin: 0 0 14px; }
.slh-comp-promo-card { display: flex; align-items: center; padding: 12px 14px; background: var(--slh-white); border-radius: 8px; border: 1px solid rgba(37,99,235,0.12); margin-bottom: 8px; text-decoration: none; color: inherit; transition: border-color 0.15s; }
.slh-comp-promo-card:hover { border-color: rgba(37,99,235,0.35); text-decoration: none; }
.slh-comp-promo-inner { flex: 1; }
.slh-comp-promo-inner strong { font-size: 14px; color: var(--slh-dark); display: block; margin-bottom: 2px; }
.slh-comp-promo-inner p { font-size: 13px; color: var(--slh-body); margin: 0; }
.slh-comp-promo-card svg { flex-shrink: 0; margin-left: 12px; color: var(--slh-blue); }

/* Regional notes */
.slh-region-note { padding: 14px 18px; border-left: 3px solid var(--slh-gold); background: #fefcf3; border-radius: 0 8px 8px 0; margin-bottom: 12px; font-size: 14px; color: var(--slh-body); }
.slh-region-note strong { color: #3F3E08; }

/* FAQ */
.slh-faq { margin-top: 28px; margin-bottom: 28px; }
.slh-faq h2 { margin-bottom: 8px; }
.slh-faq-item { border-bottom: 1px solid var(--slh-border); padding: 16px 0; }
.slh-faq-item:last-child { border-bottom: none; }
.slh-faq-q { font-weight: 600; font-size: 15px; color: var(--slh-dark); margin: 0 0 6px; line-height: 1.4; }
.slh-faq-a p { font-size: 14px; color: var(--slh-body); line-height: 1.7; margin: 0; }

/* Guide cards */
.slh-guide-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .slh-guide-grid { grid-template-columns: repeat(2, 1fr); } }
.slh-guide-card { display: flex; flex-direction: column; padding: 16px; background: var(--slh-white); border: 1px solid var(--slh-border); border-radius: var(--slh-radius); text-decoration: none; color: inherit; transition: all 0.15s; }
.slh-guide-card:hover { border-color: rgba(57,89,3,0.4); box-shadow: 0 2px 8px rgba(0,0,0,0.06); text-decoration: none; }
.slh-guide-card-type { font-size: 12px; color: var(--slh-caption); font-weight: 500; margin-bottom: 4px; }
.slh-guide-card strong { font-size: 15px; color: var(--slh-dark); }
.slh-guide-card-link { font-size: 12px; color: var(--slh-green); margin-top: 6px; font-weight: 600; }

/* Related topics */
.slh-related { margin-top: 32px; padding: 20px; background: var(--slh-bg); border-radius: var(--slh-radius); border: 1px solid var(--slh-border); }
.slh-related h2 { font-size: 16px; margin-bottom: 12px; }
.slh-related-list { display: flex; flex-direction: column; gap: 8px; }
.slh-related-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--slh-white); border-radius: 8px; border: 1px solid var(--slh-border); text-decoration: none; color: inherit; transition: border-color 0.15s; }
.slh-related-item:hover { border-color: rgba(57,89,3,0.3); text-decoration: none; }
.slh-related-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.slh-related-text { flex: 1; }
.slh-related-text strong { font-size: 14px; color: var(--slh-dark); }

/* Sidebar */
.slh-glossary-sidebar { order: 2; }
@media (min-width: 960px) { .slh-glossary-sidebar { order: unset; } }
.slh-sidebar-sticky { position: static; }
@media (min-width: 960px) { .slh-sidebar-sticky { position: sticky; top: 24px; } }

.slh-facts-box { background: var(--slh-white); border: 1px solid var(--slh-border); border-radius: var(--slh-radius); padding: 18px; margin-bottom: 14px; }
.slh-facts-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.slh-facts-list { margin: 0; }
.slh-fact-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--slh-border); font-size: 14px; }
.slh-fact-row dt { color: var(--slh-caption); font-weight: 500; }
.slh-fact-row dd { color: var(--slh-dark); font-weight: 600; text-align: right; max-width: 55%; margin: 0; }

/* CTAs */
.slh-cta-stack { display: flex; flex-direction: column; gap: 10px; }
.slh-cta-stack--guide { margin-top: 28px; max-width: 680px; }
.slh-cta { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--slh-radius); text-decoration: none; color: inherit; transition: box-shadow 0.15s; }
.slh-cta:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); text-decoration: none; }
.slh-cta--primary { border: 2px solid var(--slh-green); background: var(--slh-white); }
.slh-cta--secondary { border: 1px solid var(--slh-border); background: var(--slh-white); }
.slh-cta-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.slh-cta--primary .slh-cta-icon { background: rgba(57,89,3,0.08); color: var(--slh-green); }
.slh-cta--secondary .slh-cta-icon { background: var(--slh-bg); color: var(--slh-caption); }
.slh-cta-text { flex: 1; min-width: 0; }
.slh-cta-text strong { display: block; font-size: 14px; color: var(--slh-dark); }
.slh-cta-text span { display: block; font-size: 12px; color: var(--slh-caption); margin-top: 1px; }
.slh-cta svg:last-child { flex-shrink: 0; color: var(--slh-green); }

.slh-service-cta { padding: 14px 18px; border-radius: var(--slh-radius); background: var(--slh-bg); border: 1px solid var(--slh-border); text-align: center; }
.slh-service-cta p { font-size: 13px; color: var(--slh-caption); margin: 0 0 4px; }
.slh-service-cta a { font-size: 14px; font-weight: 700; color: var(--slh-green); text-decoration: none; }
.slh-service-cta a:hover { text-decoration: none; }

/* ============== GUIDE ============== */
/* Layout: sidebar + main */
.slh-guide-layout { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 960px) { .slh-guide-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; } }

.slh-guide-title { margin-bottom: 8px; }
.slh-guide-intro { font-size: 14px; color: var(--slh-body); margin: 0 0 24px; max-width: 640px; }
.slh-guide-main { min-width: 0; }

/* Sidebar */
.slh-guide-sidebar { display: none; }
@media (min-width: 960px) { .slh-guide-sidebar { display: block; } }
.slh-guide-sidebar-inner { position: sticky; top: 24px; }

.slh-guide-back { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--slh-green); text-decoration: none; margin-bottom: 14px; }
.slh-guide-back:hover { text-decoration: none; }

.slh-guide-sidebar-label { font-size: 11px; color: var(--slh-caption); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin: 0 0 3px; }
.slh-guide-sidebar-counter { font-size: 12px; color: var(--slh-caption); margin: 0 0 10px; }

.slh-guide-sidebar-progress { height: 3px; background: var(--slh-border); border-radius: 2px; margin-bottom: 14px; overflow: hidden; }
.slh-guide-sidebar-progress-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }

.slh-guide-sidebar-series { display: flex; flex-direction: column; gap: 2px; margin-bottom: 0; }
.slh-guide-sidebar-item { display: flex; align-items: flex-start; gap: 10px; padding: 7px 9px; border-radius: 6px; text-decoration: none; color: inherit; border: 1px solid transparent; }
.slh-guide-sidebar-item:hover { background: var(--slh-bg); text-decoration: none; }
.slh-guide-sidebar-item--active { font-weight: 500; }
.slh-guide-sidebar-num { width: 22px; height: 22px; border-radius: 50%; background: var(--slh-bg); border: 1px solid var(--slh-border); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: var(--slh-caption); flex-shrink: 0; margin-top: 1px; }
.slh-guide-sidebar-item--active .slh-guide-sidebar-num { border: none; }
.slh-guide-sidebar-name { font-size: 13px; color: var(--slh-caption); line-height: 1.4; }
.slh-guide-sidebar-item--active .slh-guide-sidebar-name { font-weight: 600; }

.slh-guide-sidebar-related { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--slh-border); }
.slh-guide-sidebar-related-link { display: block; font-size: 12px; color: var(--slh-green); text-decoration: none; padding: 4px 0; }
.slh-guide-sidebar-related-link:hover { text-decoration: none; }

.slh-guide-sidebar-cta { display: block; margin-top: 14px; padding: 12px; border-radius: 8px; text-decoration: none; color: inherit; border: 1px solid var(--slh-border); }
.slh-guide-sidebar-cta:hover { text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.slh-guide-sidebar-cta-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.slh-guide-sidebar-cta-desc { font-size: 11px; color: var(--slh-caption); margin: 0; }

/* Mobile compact nav (hidden on desktop) */
.slh-guide-mobile-nav { margin-bottom: 20px; }
@media (min-width: 960px) { .slh-guide-mobile-nav { display: none; } }
.slh-guide-mobile-back { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--slh-green); text-decoration: none; font-weight: 500; margin-bottom: 8px; }
.slh-guide-mobile-back:hover { text-decoration: none; }
.slh-guide-mobile-pills { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.slh-guide-mobile-pill { white-space: nowrap; font-size: 12px; padding: 5px 10px; border-radius: 16px; border: 1px solid var(--slh-border); color: var(--slh-caption); text-decoration: none; background: var(--slh-white); flex-shrink: 0; }
.slh-guide-mobile-pill--active { font-weight: 600; }

/* Mobile CTAs and related (hidden on desktop) */
.slh-guide-mobile-ctas { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 960px) { .slh-guide-mobile-ctas { display: none; } }
.slh-guide-mobile-related { margin-top: 28px; }
@media (min-width: 960px) { .slh-guide-mobile-related { display: none; } }
.slh-guide-mobile-related h2 { font-size: 18px; margin-bottom: 12px; }

/* Steps */
.slh-steps { margin-bottom: 24px; }
.slh-step { display: flex; gap: 16px; margin-bottom: 16px; padding: 20px; background: var(--slh-bg); border-radius: var(--slh-radius); border: 1px solid var(--slh-border); }
@media (max-width: 639px) { .slh-step { gap: 12px; padding: 16px; } }
.slh-step-num { min-width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.slh-step-content { flex: 1; }
.slh-step-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.slh-step-title { font-weight: 700; font-size: 16px; color: var(--slh-dark); }
@media (max-width: 639px) { .slh-step-title { font-size: 15px; } }
.slh-step-content p { font-size: 14px; line-height: 1.7; color: var(--slh-body); margin: 0; }

/* Series nav (keep as fallback) */
.slh-series-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--slh-border); }
.slh-series-nav a { color: var(--slh-green); font-weight: 600; font-size: 14px; text-decoration: none; }
.slh-series-nav a:hover { text-decoration: none; }

/* ============== COMPARISON ============== */
.slh-comparison-title { margin-bottom: 8px; }

.slh-comp-entities { display: grid; gap: 16px; margin-bottom: 28px; }
.slh-comp-entities--2 { grid-template-columns: 1fr; }
.slh-comp-entities--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .slh-comp-entities--2 { grid-template-columns: repeat(2, 1fr); }
    .slh-comp-entities--3 { grid-template-columns: repeat(3, 1fr); }
}

.slh-comp-entity { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px; border-radius: var(--slh-radius); border: 1px solid var(--slh-border); background: var(--slh-white); text-decoration: none; color: inherit; transition: border-color 0.15s; }
.slh-comp-entity:hover { border-color: rgba(57,89,3,0.4); text-decoration: none; }
.slh-comp-entity-img { border-radius: 8px; width: 100%; height: 150px; object-fit: cover; }
.slh-comp-entity-placeholder { width: 100%; height: 150px; border-radius: 8px; background: linear-gradient(145deg, #e8ede4, #f0f4ec); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--slh-caption); }
.slh-comp-entity-name { font-size: 16px; font-weight: 700; color: var(--slh-green); margin-top: 10px; text-decoration: none; }
.slh-comp-entity-sci { font-size: 13px; color: var(--slh-caption); font-style: italic; }
.slh-comp-entity-link { font-size: 12px; color: var(--slh-green); margin-top: 6px; font-weight: 600; }

.slh-comp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.slh-comp-table thead { background: var(--slh-bg); }
.slh-comp-table th, .slh-comp-table td { padding: 10px 14px; }
.slh-comp-table thead th { font-weight: 700; color: var(--slh-dark); text-align: center; }
.slh-comp-table thead th:first-child { text-align: left; width: 30%; }
.slh-comp-table tbody th { font-weight: 600; color: var(--slh-dark); text-align: left; }
.slh-comp-table tbody td { text-align: center; color: var(--slh-body); }
.slh-comp-table tbody tr { border-top: 1px solid var(--slh-border); }

.slh-comp-backlinks { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 640px) {
    .slh-comp-backlinks.slh-comp-entities--2 { grid-template-columns: repeat(2, 1fr); }
    .slh-comp-backlinks.slh-comp-entities--3 { grid-template-columns: repeat(3, 1fr); }
}
.slh-comp-backlink { display: block; padding: 18px; border-radius: var(--slh-radius); border: 1px solid var(--slh-border); text-decoration: none; color: inherit; transition: border-color 0.15s; }
.slh-comp-backlink:hover { border-color: rgba(57,89,3,0.4); text-decoration: none; }
.slh-comp-backlink-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.slh-comp-backlink strong { font-size: 16px; color: var(--slh-dark); }

/* ---- Map & Calendar placeholders ---- */
.slh-map-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.slh-state-select { padding: 10px 14px; border: 1px solid var(--slh-border); border-radius: 8px; font-size: 14px; color: var(--slh-dark); background: var(--slh-white); }
.slh-map-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .slh-map-grid { grid-template-columns: 2fr 1fr; } }
.slh-map-svg svg { width: 100%; height: auto; }
.slh-map-legend { margin-top: 12px; display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--slh-caption); }
.slh-map-clear { font-size: 13px; color: var(--slh-caption); cursor: pointer; background: none; border: none; text-decoration: underline; }

/* ---- Calendar Timeline (v2.8) ---- */
.slh-cal-empty { text-align: center; padding: 32px; background: var(--slh-bg); border-radius: var(--slh-radius); border: 1px solid var(--slh-border); }
.slh-cal-empty-title { font-size: 15px; font-weight: 600; color: var(--slh-dark); margin: 0 0 4px; }
.slh-cal-empty-sub { font-size: 13px; color: var(--slh-caption); margin: 0; }
.slh-tl-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; margin-bottom: 2px; }
.slh-tl-mo { font-size: 11px; font-weight: 600; text-align: center; padding: 6px 0; color: var(--slh-caption); border-bottom: 2px solid transparent; }
.slh-tl-mo--now { color: var(--slh-green); border-bottom-color: var(--slh-green); }
.slh-tl-mo--past { color: #b0b0b0; }
.slh-tl-tasks { display: grid; gap: 0; }
.slh-tl-row { display: grid; grid-template-columns: 200px 1fr; align-items: center; border-bottom: 1px solid var(--slh-border); min-height: 38px; text-decoration: none; color: inherit; transition: background 0.12s; }
.slh-tl-row:hover { background: rgba(57,89,3,0.03); text-decoration: none; }
.slh-tl-label { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 0; overflow: hidden; }
.slh-tl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.slh-tl-name { font-size: 12px; color: var(--slh-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slh-tl-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; }
.slh-tl-cell { padding: 4px 1px; }
.slh-tl-fill { height: 22px; border-radius: 3px; }
@media (max-width: 639px) {
    .slh-tl-months { display: none; }
    .slh-tl-row { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
    .slh-tl-label { padding: 0 0 2px; }
    .slh-tl-bars { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .slh-tl-fill { height: 16px; }
}
@media (min-width: 640px) and (max-width: 959px) {
    .slh-tl-row { grid-template-columns: 160px 1fr; }
    .slh-tl-name { font-size: 11px; }
}

/* ---- Directory Topic Filter (v2.8) ---- */
.slh-topic-section { margin-bottom: 20px; }
.slh-topic-section-label { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--slh-caption); margin-bottom: 10px; }
.slh-topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.slh-topic-card { display: block; background: var(--slh-bg); border-radius: var(--slh-radius); padding: 14px 16px; cursor: pointer; border: 1.5px solid transparent; transition: border-color 0.15s, background 0.15s; text-decoration: none; color: inherit; }
.slh-topic-card:hover { border-color: var(--slh-border); text-decoration: none; }
.slh-topic-card.slh-topic-active { border-color: var(--slh-green); background: rgba(57,89,3,0.04); }
.slh-topic-card strong { display: block; font-size: 14px; font-weight: 600; color: var(--slh-dark); margin-bottom: 3px; }
.slh-topic-card p { font-size: 12px; color: var(--slh-body); margin: 0 0 6px; line-height: 1.45; }
.slh-topic-card-count { font-size: 11px; font-weight: 500; color: var(--slh-green); }
.slh-topic-filter-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--slh-border); margin-bottom: 8px; }
.slh-topic-filter-bar span { font-size: 13px; color: var(--slh-caption); }
.slh-topic-filter-bar strong { font-weight: 600; color: var(--slh-dark); }
.slh-topic-clear { font-size: 12px; color: var(--slh-green); cursor: pointer; background: none; border: none; padding: 4px 8px; font-family: inherit; display: none; }
.slh-topic-clear.slh-topic-clear--visible { display: inline; }
@media (max-width: 639px) {
    .slh-topic-grid { grid-template-columns: 1fr; }
}
@media (min-width: 640px) and (max-width: 959px) {
    .slh-topic-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Problem Diagnoser ---- */
.slh-diag { background: var(--slh-white); border: 1px solid var(--slh-border); border-radius: var(--slh-radius); padding: 28px; text-align: center; max-width: 560px; margin: 0 auto; }
.slh-diag-progress { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.slh-diag-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--slh-border); }
.slh-diag-dot.done { background: var(--slh-green); }
.slh-diag-dot.active { background: var(--slh-green); box-shadow: 0 0 0 3px rgba(57,89,3,0.2); }
.slh-diag-step { font-size: 12px; color: var(--slh-caption); margin-bottom: 8px; }
.slh-diag-q { font-size: 18px; font-weight: 700; color: var(--slh-dark); margin-bottom: 20px; }
.slh-diag-options { display: flex; flex-direction: column; gap: 8px; max-width: 400px; margin: 0 auto; }
.slh-diag-opt { padding: 14px 20px; border: 1px solid var(--slh-border); border-radius: 8px; background: var(--slh-white); cursor: pointer; font-size: 14px; color: var(--slh-dark); font-weight: 500; text-align: left; transition: all 0.15s; font-family: inherit; }
.slh-diag-opt:hover { border-color: var(--slh-green); background: rgba(57,89,3,0.04); }
.slh-diag-back { margin-top: 16px; background: none; border: none; color: var(--slh-caption); cursor: pointer; font-size: 13px; font-family: inherit; text-decoration: underline; }
.slh-diag-result { background: var(--slh-white); border: 1px solid var(--slh-border); border-radius: var(--slh-radius); padding: 32px; text-align: center; max-width: 560px; margin: 0 auto; }
.slh-diag-result-icon { margin-bottom: 16px; }
.slh-diag-result h3 { font-size: 22px; font-weight: 700; color: var(--slh-dark); margin-bottom: 8px; }
.slh-diag-result p { font-size: 15px; color: var(--slh-body); line-height: 1.7; margin-bottom: 20px; }
.slh-diag-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.slh-diag-restart { margin-top: 16px; background: none; border: none; color: var(--slh-caption); cursor: pointer; font-size: 13px; font-family: inherit; text-decoration: underline; }

/* ============================================
   MOBILE AND QA FIXES (v2.2)
   ============================================ */

/* Prevent horizontal overflow globally */
html, body { overflow-x: hidden; max-width: 100vw; }
.slh-wrap { overflow-x: hidden; }
.slh-wrap { padding-bottom: 48px; }

/* Reduce top spacing between nav and content */
.slh-wrap { padding-top: 36px; }
.slh-wrap .slh-crumb:first-child { margin-top: 0; padding-top: 0; }
.site-content .slh-wrap, .inside-article .slh-wrap, .entry-content .slh-wrap { margin-top: 0 !important; }

/* Commonly Confused cross-links */
.slh-table-name a { color: var(--slh-green); text-decoration: none; }
.slh-table-name a:hover { color: #2d4702; }

/* Empty sections auto-hide */
.slh-comp-promo:empty, .slh-related:empty, .slh-id-images:empty { display: none; }

/* Breadcrumb overflow */
.slh-crumb { overflow-x: hidden; word-wrap: break-word; }

/* Quick Facts: remove last row separator */
.slh-fact-row:last-child { border-bottom: none !important; padding-bottom: 0; }

/* Quick Facts: mobile/desktop toggle */
.slh-facts-mobile-only { display: block; }
.slh-facts-desktop-only { display: none; }
@media (min-width: 960px) {
    .slh-facts-mobile-only { display: none; }
    .slh-facts-desktop-only { display: block; }
}

/* Directory category cards: clickable styling */
.slh-dir-cat-card { cursor: pointer; text-align: left; background: var(--slh-white); border: 1px solid var(--slh-border); font-family: inherit; width: 100%; transition: all 0.15s; }
.slh-dir-cat-card:hover { border-color: var(--slh-green); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.slh-dir-cat-card.active { border-color: var(--slh-green); background: rgba(57,89,3,0.03); box-shadow: 0 0 0 2px rgba(57,89,3,0.12); }

/* ---- Mobile: 639px and below ---- */
@media (max-width: 639px) {
    /* Container padding */
    .slh-wrap { padding-left: 16px !important; padding-right: 16px !important; }
    .slh-hero { margin-left: -16px; margin-right: -16px; border-radius: 0; padding: 32px 16px 28px; }
    .slh-hero-routes { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .slh-hero-trust { gap: 10px; margin-bottom: 12px; }
    .slh-hero-trust-item { font-size: 11px; }
    .slh-section-alt { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; border-radius: 0; }

    /* Breadcrumb */
    .slh-crumb { padding: 4px 0; margin-bottom: 16px; font-size: 12px; }

    /* Subject cards */
    .slh-subject-card { padding: 12px 14px; }
    .slh-subject-icon-wrap { width: 32px; height: 32px; }

    /* Tables */
    .slh-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .slh-table-wrap table { min-width: 400px; font-size: 13px; }
    .slh-table-wrap th, .slh-table-wrap td { padding: 8px 10px; }

    /* Comparison entity cards */
    .slh-comp-entities--2, .slh-comp-entities--3 { grid-template-columns: 1fr !important; }
    .slh-comp-backlinks.slh-comp-entities--2, .slh-comp-backlinks.slh-comp-entities--3 { grid-template-columns: 1fr !important; }
    .slh-comp-entity-placeholder, .slh-comp-entity-img { height: 120px; }

    /* Guide step cards */
    .slh-step { padding: 14px; }
    .slh-step-num { min-width: 28px; height: 28px; font-size: 13px; }
    .slh-step-content p { font-size: 13px; }

    /* Related topics */
    .slh-related { padding: 16px; }
    .slh-related-item { padding: 8px 10px; }

    /* Calendar */
    /* old calendar classes removed in v2.8 */

    /* Map */
    .slh-map-grid { grid-template-columns: 1fr !important; }
    .slh-state-select { width: 100%; }

    /* Diagnoser */
    .slh-diag { padding: 20px 16px; }
    .slh-diag-q { font-size: 16px; }
    .slh-diag-opt { padding: 12px 16px; font-size: 13px; }
    .slh-diag-result { padding: 24px 16px; }

    /* Regional notes */
    .slh-region-note { padding: 12px 14px; font-size: 13px; }

    /* CTAs */
    .slh-cta-text strong { font-size: 13px; }
    .slh-cta-text span { font-size: 11px; }

    /* Series nav */
    .slh-series-nav { gap: 8px; }
    .slh-series-nav a { font-size: 13px; }

    /* Progress bar */
    .slh-progress { margin-bottom: 16px; }

    /* Answer capsule */
    .slh-answer-capsule { padding: 14px 16px; }
    .slh-answer-capsule p { font-size: 14px; }
}

/* ---- Tablet: 960px and below ---- */
@media (max-width: 959px) {
    .slh-glossary-sidebar { width: 100%; max-width: 100%; }
    .slh-facts-box { padding: 16px; }
    .slh-fact-row { gap: 12px; }
    .slh-cta { padding: 12px 14px; }
    .slh-cta-icon { width: 36px; height: 36px; }
}

/* ======== DIRECTORY QUESTION CARDS ======== */
.slh-dir-questions { margin: 0 0 28px; }
.slh-dir-question-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .slh-dir-question-list { grid-template-columns: repeat(2, 1fr); } }
.slh-dir-question-card { display: block; border-left: 3px solid; border-radius: 8px; padding: 16px 18px; background: rgba(57,89,3,0.02); border: 1px solid rgba(57,89,3,0.08); border-left: 3px solid; text-decoration: none; color: inherit; transition: background 0.15s, border-color 0.15s; }
.slh-dir-question-card:hover { background: rgba(57,89,3,0.05); }
.slh-dir-question-q { font-size: 15px; font-weight: 600; color: #1a1a1a; margin: 0 0 4px; }
.slh-dir-question-desc { font-size: 13px; color: #6b7280; margin: 0 0 6px; line-height: 1.5; }
.slh-dir-question-dest { font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }

/* ======== CLUSTER HUB TEMPLATE ======== */
.slh-cluster-hub { max-width: 100%; }
.slh-cluster-title { font-size: 28px; font-weight: 800; line-height: 1.15; margin: 0 0 8px; color: #1a1a1a; }
@media (min-width: 960px) { .slh-cluster-title { font-size: 32px; } }
.slh-cluster-intro { font-size: 15px; color: #4a4a4a; margin: 0 0 20px; max-width: 640px; line-height: 1.65; }

/* Table of Contents */
.slh-toc { background: var(--slh-bg); border-radius: 8px; padding: 16px 20px; margin: 20px 0 28px; }
.slh-toc-title { font-size: 13px; font-weight: 600; color: var(--slh-caption); margin: 0 0 8px; }
.slh-toc ul { list-style: none; margin: 0; padding: 0; }
.slh-toc li { margin: 0; }
.slh-toc a { display: block; font-size: 13px; color: var(--slh-green); text-decoration: none; padding: 4px 0; }
.slh-toc a:hover { text-decoration: none; }

/* Main content area */
.slh-cluster-content { max-width: 780px; margin: 0 0 32px; }
.slh-cluster-content h2 { font-size: 20px; font-weight: 700; color: #1a1a1a; margin: 32px 0 8px; scroll-margin-top: 24px; }
.slh-cluster-content h3 { font-size: 16px; font-weight: 600; color: #1a1a1a; margin: 20px 0 6px; }
.slh-cluster-content p { font-size: 14px; color: #4a4a4a; line-height: 1.7; margin: 0 0 12px; }
/* Cluster hub content tables: unified with .slh-table-wrap styling */
.slh-cluster-content table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0 20px; }
.slh-cluster-content table th { text-align: left; padding: 10px 14px; font-weight: 700; color: var(--slh-dark); background: var(--slh-bg); font-size: 14px; }
.slh-cluster-content table td { padding: 10px 14px; color: var(--slh-body); }
.slh-cluster-content table tbody tr { border-top: 1px solid var(--slh-border); }
.slh-cluster-content table td:first-child { font-weight: 600; color: var(--slh-green); }
.slh-cluster-content table td:first-child a { color: var(--slh-green); text-decoration: none; }
.slh-cluster-content table td:first-child a:hover { text-decoration: none; }

/* All entries grid */
.slh-cluster-entries { margin: 32px 0; }
.slh-cluster-entries h2 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.slh-cluster-entries-intro { font-size: 13px; color: var(--slh-caption); margin: 0 0 14px; }
.slh-cluster-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 600px) { .slh-cluster-entry-grid { grid-template-columns: 1fr; } }
.slh-cluster-entry-card { display: block; background: #fff; border: 1px solid var(--slh-border); border-radius: 8px; padding: 14px 16px; text-decoration: none; color: inherit; transition: border-color 0.15s; }
.slh-cluster-entry-card:hover { border-color: var(--slh-green); }
.slh-cluster-entry-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.slh-cluster-entry-header strong { font-size: 14px; color: #1a1a1a; }
.slh-cluster-entry-def { font-size: 12px; color: var(--slh-caption); margin: 0 0 6px; line-height: 1.5; }
.slh-cluster-entry-count { font-size: 11px; color: var(--slh-green); font-weight: 500; }

/* Comparisons list */
.slh-cluster-comparisons { margin: 32px 0; padding-top: 24px; border-top: 1px solid var(--slh-border); }
.slh-cluster-comparisons h2 { font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.slh-cluster-comp-list { display: flex; flex-direction: column; gap: 8px; }
.slh-comp-link-desc { display: block; font-size: 13px; color: var(--slh-body); margin-top: 2px; font-weight: 400; }

/* CTA row */
.slh-cluster-cta-row { margin: 24px 0; max-width: 500px; }

/* Service CTA (cluster variant) */
.slh-cluster-service-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border: 1px solid; border-radius: 12px; padding: 20px; margin: 24px 0; max-width: 800px; }
.slh-cluster-service-cta div { flex: 1; min-width: 200px; }
.slh-cluster-service-cta strong { display: block; font-size: 16px; color: #1a1a1a; margin-bottom: 2px; }
.slh-cluster-service-cta span { font-size: 13px; color: #4a4a4a; }
.slh-service-cta-btn { display: inline-block; font-size: 13px; font-weight: 600; padding: 10px 20px; border-radius: 8px; color: #fff; text-decoration: none; white-space: nowrap; background: var(--slh-green) !important; }
.slh-service-cta-btn:hover { opacity: 0.9; color: #fff; text-decoration: none; }

/* Hub footer */
.slh-hub-footer { margin-top: 40px; padding: 20px 0; border-top: 1px solid var(--slh-border); text-align: center; }
.slh-hub-footer p { font-size: 14px; color: #4a4a4a; margin: 0; }

/* Badge small variant */
.slh-badge--small { font-size: 10px; padding: 2px 6px; }

/* ---- Print ---- */
@media print {
    .slh-hero, .slh-map-controls, .slh-search-wrap, .slh-cta-stack, .slh-service-cta, .slh-comp-promo { display: none; }
    .slh-wrap { max-width: 100%; padding: 0; }
}

/* ======== SPECIES PROFILE ======== */
.slh-species-layout { display: flex; flex-direction: column; gap: 24px; overflow: hidden; }
@media (min-width: 960px) { .slh-species-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; } }
.slh-species-sidebar { order: -1; }
@media (min-width: 960px) { .slh-species-sidebar { order: 2; } }

/* ======== CALCULATOR ======== */
.slh-calc-layout { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 960px) { .slh-calc-layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; } }
.slh-calc-form { background: var(--slh-bg); border-radius: 12px; padding: 24px; }
.slh-calc-field { margin-bottom: 16px; }
.slh-calc-field label { display: block; font-size: 13px; color: var(--slh-caption); margin-bottom: 4px; }
.slh-calc-field input[type="number"] { width: 100%; padding: 10px 14px; border: 1px solid var(--slh-border); border-radius: 8px; font-size: 16px; font-family: inherit; }
.slh-calc-field input[type="range"] { width: 100%; }
.slh-calc-range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--slh-caption); }
.slh-calc-result { border: 1px solid; border-radius: 12px; padding: 28px; text-align: center; margin-top: 20px; }
.slh-calc-big { font-size: 32px; font-weight: 700; margin: 0; }
.slh-calc-sub { font-size: 15px; color: var(--slh-body); margin: 4px 0 0; }
.slh-calc-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.slh-calc-btn-primary { display: inline-block; font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 6px; color: #fff; text-decoration: none; }
.slh-calc-sidebar { order: 2; }

/* ======== PRODUCT ROUNDUP ======== */
.slh-product-list { margin: 20px 0; }
.slh-product-card { display: grid; grid-template-columns: 40px 1fr 100px; gap: 14px; align-items: start; background: #fff; border: 1px solid var(--slh-border); border-radius: 12px; padding: 18px 20px; margin-bottom: 10px; }
.slh-product-card--top { border-width: 2px; border-color: #99B207; }
@media (max-width: 600px) { .slh-product-card { grid-template-columns: 1fr; gap: 8px; } .slh-product-price-col { display: flex; align-items: center; gap: 12px; } }
.slh-product-rank { width: 32px; height: 32px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.slh-product-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.slh-product-header strong { font-size: 16px; color: #1a1a1a; }
.slh-product-meta { font-size: 12px; color: var(--slh-caption); margin: 0 0 6px; }
.slh-product-desc { font-size: 13px; color: var(--slh-body); line-height: 1.6; margin: 0 0 8px; }
.slh-product-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.slh-product-tag { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: rgba(15,110,86,0.08); color: #0F6E56; }
.slh-product-price-col { text-align: right; }
.slh-product-price { display: block; font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.slh-product-shop-btn { display: inline-block; font-size: 12px; font-weight: 600; padding: 7px 16px; border-radius: 6px; border: 1px solid; text-decoration: none; }

/* ======== PRICING GUIDE ======== */
.slh-price-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0; }
@media (max-width: 600px) { .slh-price-tiers { grid-template-columns: 1fr; } }
.slh-price-tier { background: var(--slh-bg); border-radius: 12px; padding: 20px; text-align: center; }
.slh-price-tier-label { font-size: 12px; color: var(--slh-caption); margin: 0 0 4px; }
.slh-price-tier-size { font-size: 11px; color: var(--slh-caption); margin: 0 0 8px; }
.slh-price-tier-range { font-size: 22px; font-weight: 700; margin: 0; }
.slh-cost-factors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 600px) { .slh-cost-factors { grid-template-columns: 1fr; } }
.slh-cost-factor { background: #fff; border: 1px solid var(--slh-border); border-radius: 8px; padding: 12px 14px; }
.slh-cost-factor strong { display: block; font-size: 14px; color: #1a1a1a; margin-bottom: 4px; }
.slh-cost-factor p { font-size: 12px; color: var(--slh-body); line-height: 1.5; margin: 0; }

/* ======== SEASONAL PROGRAM ======== */
.slh-season-toggle { display: flex; gap: 6px; margin-bottom: 20px; }
.slh-toggle-btn { padding: 7px 16px; border-radius: 20px; border: 1px solid var(--slh-border); background: transparent; color: var(--slh-caption); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; }
.slh-toggle-btn.slh-toggle-active { border-color: var(--slh-green); background: rgba(57,89,3,0.06); color: var(--slh-green); }
.slh-month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
@media (max-width: 600px) { .slh-month-grid { grid-template-columns: 1fr; } }
.slh-checklist { background: #fff; border: 1px solid var(--slh-border); border-radius: 12px; padding: 20px; }
.slh-check-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--slh-border); font-size: 14px; }
.slh-check-item:last-child { border-bottom: none; }
.slh-check-box { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--slh-border); flex-shrink: 0; margin-top: 2px; }
.slh-check-item a { color: var(--slh-green); text-decoration: none; }
.slh-check-item a:hover { text-decoration: none; }

/* ======== DIAGNOSTIC TRIAGE ======== */
.slh-diagnoser-interactive { border: 1px solid; border-radius: 12px; padding: 24px; margin-bottom: 24px; background: #fff; }
.slh-diagnoser-loading { font-size: 13px; color: var(--slh-caption); }
.slh-causes-overview { margin: 24px 0; }
.slh-cause-symptoms { font-size: 12px; color: #9B2226; font-weight: 500; margin: 0 0 8px; }
.slh-cause-photo { width: 100%; height: 140px; background: var(--slh-bg); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--slh-caption); }
.slh-cause-confirm { background: var(--slh-bg); border-radius: 8px; padding: 10px 14px; margin: 8px 0; }
.slh-cause-confirm strong { display: block; font-size: 12px; color: #1a1a1a; margin-bottom: 2px; }
.slh-cause-confirm p { font-size: 13px; color: var(--slh-body); margin: 0; line-height: 1.5; }

/* ======== REGIONAL LANDING ======== */
.slh-regional-layout { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 960px) { .slh-regional-layout { display: grid; grid-template-columns: 1fr 220px; gap: 28px; } }
.slh-window-big { font-size: 24px !important; font-weight: 700 !important; margin: 0 0 4px !important; }
.slh-grass-recs { display: flex; flex-direction: column; gap: 8px; }
.slh-grass-rec { background: #fff; border: 1px solid var(--slh-border); border-radius: 8px; padding: 14px 16px; }
.slh-grass-rec-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.slh-grass-rec-header strong { font-size: 15px; }
.slh-grass-rec-header strong a { text-decoration: none; }
.slh-grass-rec p { font-size: 13px; color: var(--slh-body); margin: 0; line-height: 1.5; }

/* ============================================
   MOBILE + ADA COMPLIANCE FIXES (v2.5.2)
   ============================================ */

/* --- 1. CTA BUTTON CONTRAST (ADA) --- */
/* Calculator CTA: force high-contrast white-on-dark with proper sizing */
.slh-calc-btn-primary {
    display: inline-block; font-size: 15px; font-weight: 700;
    padding: 12px 28px; border-radius: 8px;
    color: #fff !important; text-decoration: none;
    min-height: 44px; /* Apple HIG touch target */
    line-height: 1.3;
    transition: opacity 0.15s, box-shadow 0.15s;
}
.slh-calc-btn-primary:hover { opacity: 0.9; text-decoration: none; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.slh-calc-btn-primary:focus-visible { outline: 3px solid var(--slh-focus); outline-offset: 2px; }

/* All CTA links site-wide: ensure min touch target */
.slh-btn, .slh-btn-outline, .slh-service-cta-btn, .slh-product-shop-btn {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.slh-service-cta-btn { padding: 12px 24px; font-size: 14px; }
.slh-product-shop-btn { padding: 10px 18px; font-size: 13px; min-height: 44px; }

/* --- 2. HUB HOMEPAGE MOBILE SPACING --- */
@media (max-width: 639px) {
    /* Hub hero: tighter padding, 2-col route cards on mobile */
    .slh-hero { margin-left: -16px; margin-right: -16px; border-radius: 0; padding: 28px 20px 24px; }
    .slh-hero h1 { font-size: 22px; }
    .slh-hero-sub { font-size: 13px; margin-bottom: 16px; }
    .slh-hero-routes { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .slh-hero-card { padding: 12px 14px; }
    .slh-hero-card-title { font-size: 13px; }
    .slh-hero-card-desc { font-size: 10px; }
    .slh-hero-trust { gap: 8px; margin-bottom: 10px; }
    .slh-hero-trust-item { font-size: 11px; }

    /* Section alt blocks: proper edge-to-edge with inner padding */
    .slh-section-alt { margin-left: -16px; margin-right: -16px; padding: 28px 20px; border-radius: 0; }

    /* Subject cards: ensure they don't overflow */
    .slh-subject-grid { gap: 8px; }
    .slh-subject-card { padding: 12px 14px; }
    .slh-subject-name { font-size: 14px; }

    /* Entry grid cards */
    .slh-entry-grid { gap: 10px; }
    .slh-entry-card { padding: 16px; }

    /* Section headings */
    .slh-h2 { font-size: 18px; }
}

/* --- 3. GUIDE PAGES MOBILE --- */
@media (max-width: 639px) {
    /* Mobile pills nav: scrollable but with breathing room */
    .slh-guide-mobile-pills {
        gap: 6px; padding: 2px 0 8px; margin: 0 -16px; padding-left: 16px; padding-right: 16px;
        /* Ensure scrollbar doesn't eat into content */
        scrollbar-width: none; -ms-overflow-style: none;
    }
    .slh-guide-mobile-pills::-webkit-scrollbar { display: none; }
    .slh-guide-mobile-pill { font-size: 12px; padding: 8px 12px; min-height: 36px; }

    /* Steps: stack step number and content vertically on very small screens */
    .slh-step { flex-direction: column; gap: 8px; padding: 14px; }
    .slh-step-num { min-width: 28px; height: 28px; font-size: 12px; align-self: flex-start; }
    .slh-step-head { margin-bottom: 4px; }
    .slh-step-title { font-size: 14px; }
    .slh-step-content p { font-size: 13px; line-height: 1.65; }

    /* Guide intro text */
    .slh-guide-intro { font-size: 13px; margin-bottom: 16px; }

    /* Mobile back link */
    .slh-guide-mobile-back { margin-bottom: 10px; }

    /* Guide mobile CTAs */
    .slh-guide-mobile-ctas .slh-cta { padding: 12px 14px; }
    .slh-guide-mobile-ctas .slh-cta-icon { width: 36px; height: 36px; }
}

/* --- 4. GLOSSARY/ENTITY PAGES MOBILE --- */
@media (max-width: 639px) {
    .slh-glossary-layout { gap: 16px; }
    .slh-answer-capsule { padding: 14px 16px; margin-bottom: 16px; }
    .slh-answer-capsule p { font-size: 14px; line-height: 1.6; }

    /* Quick Facts inline (mobile) */
    .slh-facts-box { padding: 14px; }
    .slh-fact-row { font-size: 13px; padding: 6px 0; }
    .slh-fact-row dd { max-width: 60%; font-size: 13px; }

    /* Commonly confused table: ensure horizontal scroll works */
    .slh-table-wrap { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

/* --- 5. CLUSTER HUB MOBILE --- */
@media (max-width: 639px) {
    .slh-cluster-title { font-size: 24px; }
    .slh-cluster-intro { font-size: 14px; }
    .slh-cluster-content p { font-size: 13px; }

    /* Hub tables: horizontal scroll */
    .slh-cluster-content { overflow-x: auto; }
    .slh-cluster-content table { min-width: 500px; }

    /* TOC */
    .slh-toc { padding: 14px 16px; }
    .slh-toc a { font-size: 13px; padding: 5px 0; }

    /* Entry grid */
    .slh-cluster-entry-grid { grid-template-columns: 1fr; gap: 8px; }
}

/* --- 6. COMPARISON PAGES MOBILE --- */
@media (max-width: 639px) {
    .slh-comp-entity { padding: 14px; }
    .slh-comp-entity-placeholder, .slh-comp-entity-img { height: 100px; }
    .slh-comp-entity-name { font-size: 14px; }

    /* Comparison table horizontal scroll */
    .slh-comp-table { min-width: 400px; }
    .slh-comp-table th, .slh-comp-table td { padding: 8px 10px; font-size: 13px; }
}

/* --- 7. CALCULATOR MOBILE --- */
@media (max-width: 639px) {
    .slh-calc-form { padding: 16px; }
    .slh-calc-field label { font-size: 13px; }
    .slh-calc-field input[type="number"] { font-size: 16px; padding: 12px 14px; } /* 16px prevents iOS zoom */
    .slh-calc-result { padding: 20px 16px; }
    .slh-calc-big { font-size: 26px; }
    .slh-calc-sub { font-size: 13px; }
    .slh-calc-btn-primary { width: 100%; text-align: center; padding: 14px 20px; font-size: 16px; }
}

/* --- 8. PRODUCT ROUNDUP MOBILE --- */
@media (max-width: 639px) {
    .slh-product-card { padding: 14px 16px; }
    .slh-product-header strong { font-size: 15px; }
    .slh-product-price { font-size: 16px; text-align: left; }
    .slh-product-shop-btn { width: 100%; text-align: center; padding: 12px 16px; }
}

/* --- 9. PRICING GUIDE MOBILE --- */
@media (max-width: 639px) {
    .slh-price-tier { padding: 16px; }
    .slh-price-tier-range { font-size: 20px; }
    .slh-cost-factor { padding: 12px; }
}

/* --- 10. DIAGNOSTIC TRIAGE MOBILE --- */
@media (max-width: 639px) {
    .slh-diagnoser-interactive { padding: 16px; }
    .slh-diag { padding: 20px 16px; }
    .slh-diag-q { font-size: 16px; }
    .slh-diag-opt { padding: 12px 14px; font-size: 14px; min-height: 44px; }
}

/* --- 11. SEASONAL PROGRAM MOBILE --- */
@media (max-width: 639px) {
    .slh-season-toggle { flex-wrap: wrap; }
    .slh-toggle-btn { min-height: 44px; padding: 10px 16px; }
    .slh-checklist { padding: 16px; }
    .slh-check-item { font-size: 14px; min-height: 44px; align-items: center; }
}

/* --- 12. FAQ MOBILE --- */
@media (max-width: 639px) {
    .slh-faq-q { font-size: 14px; }
    .slh-faq-a p { font-size: 13px; line-height: 1.65; }
}

/* --- 13. BREADCRUMB MOBILE --- */
@media (max-width: 639px) {
    .slh-crumb { font-size: 11px; }
    .slh-crumb [aria-current] { font-size: 11px; }
    /* Allow breadcrumb to wrap on very long paths */
    .slh-crumb ol { flex-wrap: wrap; }
}

/* --- 14. GLOBAL ADA: Focus states, reduced motion, touch targets --- */
/* All interactive elements need visible focus */
.slh-wrap a:focus-visible,
.slh-wrap button:focus-visible,
.slh-wrap input:focus-visible,
.slh-wrap select:focus-visible {
    outline: 3px solid var(--slh-focus); outline-offset: 2px;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .slh-wrap, .slh-wrap * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Ensure all clickable items meet 44px minimum on touch devices */
@media (pointer: coarse) {
    .slh-filter-btn { min-height: 44px; padding: 10px 14px; }
    .slh-alpha-btn { min-width: 36px; min-height: 36px; }
    .slh-dir-item { min-height: 44px; }
    .slh-guide-mobile-pill { min-height: 44px; padding: 10px 14px; }
    .slh-toggle-btn { min-height: 44px; }
    .slh-diag-opt { min-height: 48px; }
    .slh-check-item { min-height: 44px; }
    .slh-toc a { min-height: 44px; display: flex; align-items: center; }
}


/* ============================================
   DIRECTORY REDESIGN (v2.5.7)
   Intent-based sections instead of flat A-to-Z
   ============================================ */

/* Section spacing */
.slh-dir-section { margin: 32px 0; padding-top: 24px; border-top: 1px solid var(--slh-border); }
.slh-dir-section:first-of-type { border-top: none; }
.slh-dir-section-header { margin-bottom: 16px; }
.slh-dir-section-header h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.slh-dir-section-desc { font-size: 14px; color: var(--slh-caption); margin: 0; }

/* Encyclopedia section gets a subtle top border for separation */
.slh-dir-encyclopedia { /* border handled by .slh-dir-section */ }

/* Cluster hub cards ("Start Here") */
.slh-dir-hub-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .slh-dir-hub-grid { grid-template-columns: repeat(2, 1fr); } }
.slh-dir-hub-card { display: block; padding: 18px 20px; border-left: 3px solid; border-radius: 8px; background: rgba(57,89,3,0.02); border: 1px solid rgba(57,89,3,0.08); border-left: 3px solid; text-decoration: none; color: inherit; transition: background 0.15s; }
.slh-dir-hub-card:hover { background: rgba(57,89,3,0.05); text-decoration: none; }
.slh-dir-hub-card strong { display: block; font-size: 15px; color: var(--slh-dark); margin-bottom: 4px; }
.slh-dir-hub-card p { font-size: 13px; color: var(--slh-body); margin: 0 0 6px; line-height: 1.5; }
.slh-dir-hub-count { font-size: 12px; font-weight: 500; color: var(--slh-caption); }

/* Encyclopedia: scientific name inline */
.slh-dir-item-sci { font-size: 12px; color: var(--slh-caption); font-style: italic; font-weight: 400; }

/* Resource cards (guides, diagnostics, pricing, seasonal, regional) */
.slh-dir-resource-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .slh-dir-resource-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .slh-dir-resource-grid { grid-template-columns: repeat(3, 1fr); } }
.slh-dir-resource-card { display: flex; flex-direction: column; padding: 16px 18px; background: var(--slh-white); border: 1px solid var(--slh-border); border-radius: var(--slh-radius); text-decoration: none; color: inherit; transition: all 0.15s; }
.slh-dir-resource-card:hover { border-color: rgba(57,89,3,0.4); box-shadow: 0 2px 8px rgba(0,0,0,0.06); text-decoration: none; }
.slh-dir-resource-type { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; }
.slh-dir-resource-card strong { font-size: 15px; color: var(--slh-dark); margin-bottom: 4px; display: block; }
.slh-dir-resource-card p { font-size: 13px; color: var(--slh-body); margin: 0; line-height: 1.5; flex: 1; }

/* Comparison cards */
.slh-dir-comp-list { display: flex; flex-direction: column; gap: 8px; }
.slh-dir-comp-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--slh-white); border: 1px solid rgba(37,99,235,0.12); border-left: 3px solid rgba(37,99,235,0.4); border-radius: 8px; text-decoration: none; color: inherit; transition: border-color 0.15s; }
.slh-dir-comp-card:hover { border-color: rgba(37,99,235,0.35); text-decoration: none; }
.slh-dir-comp-card strong { font-size: 15px; color: var(--slh-dark); display: block; margin-bottom: 2px; }
.slh-dir-comp-card p { font-size: 13px; color: var(--slh-body); margin: 0; line-height: 1.5; }
.slh-dir-comp-card svg { flex-shrink: 0; color: var(--slh-blue); }

/* Mobile adjustments for directory sections */
@media (max-width: 639px) {
    .slh-dir-section { margin: 24px 0; padding-top: 20px; }
    .slh-dir-section-header h2 { font-size: 18px; }
    .slh-dir-hub-card { padding: 14px 16px; }
    .slh-dir-resource-card { padding: 14px 16px; }
    .slh-dir-comp-card { padding: 12px 14px; }
    .slh-dir-comp-card strong { font-size: 14px; }
}

/* ============================================
   COMPREHENSIVE MOBILE FIX (v2.6.2)
   iPhone 16 Pro (393px) tested
   ============================================ */

/* --- FIX 1: iOS input zoom prevention --- */
/* All inputs must be 16px+ to prevent iOS Safari zoom */
@media (max-width: 639px) {
    .slh-dir-search,
    .slh-search-input,
    .slh-state-select,
    input[type="text"],
    input[type="number"],
    input[type="search"],
    select {
        font-size: 16px !important;
    }
}

/* --- FIX 2: Table overflow - individual table wrapping --- */
/* Replace parent-level overflow with per-table scroll wrappers */
.slh-cluster-content { overflow-x: visible; } /* Remove the broken parent overflow */
.slh-cluster-content table,
/* Entity content tables: unified with other table styles */
.slh-entry-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 16px 0 20px;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.slh-entry-content table th {
    text-align: left;
    padding: 10px 14px;
    font-weight: 700;
    color: var(--slh-dark);
    background: var(--slh-bg);
    font-size: 14px;
}
.slh-entry-content table td {
    padding: 10px 14px;
    color: var(--slh-body);
}
.slh-entry-content table tbody tr {
    border-top: 1px solid var(--slh-border);
}
.slh-entry-content table td:first-child {
    font-weight: 600;
    color: var(--slh-dark);
}
.slh-cluster-content thead,
.slh-cluster-content tbody,
.slh-entry-content thead,
.slh-entry-content tbody {
    display: table;
    width: 100%;
}
/* On mobile, add a subtle shadow to indicate scrollability */
@media (max-width: 639px) {
    .slh-cluster-content table,
    .slh-entry-content table {
        min-width: 480px;
        font-size: 13px;
    }
    .slh-cluster-content table th,
    .slh-cluster-content table td,
    .slh-entry-content table th,
    .slh-entry-content table td {
        padding: 8px 10px;
        white-space: normal;
        word-break: break-word;
    }
}

/* --- FIX 3: Comparison table scroll wrapper --- */
@media (max-width: 639px) {
    .slh-comp-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .slh-comp-table thead,
    .slh-comp-table tbody {
        display: table;
        width: 100%;
    }
}

/* --- FIX 4: Product card mobile layout --- */
@media (max-width: 639px) {
    .slh-product-card {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 16px;
    }
    .slh-product-rank {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    .slh-product-price-col {
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: flex-start;
    }
    .slh-product-price {
        font-size: 18px;
        text-align: left;
    }
    .slh-product-shop-btn {
        width: auto;
        min-width: 120px;
        text-align: center;
        padding: 12px 20px;
        font-size: 14px;
        min-height: 44px;
    }
}

/* --- FIX 5: Service CTA bar mobile stack --- */
@media (max-width: 639px) {
    .slh-cluster-service-cta {
        flex-direction: column;
        text-align: center;
        padding: 16px;
        gap: 12px;
    }
    .slh-cluster-service-cta div {
        min-width: 0;
    }
    .slh-service-cta-btn {
        width: 100%;
        text-align: center;
        padding: 14px 20px;
        min-height: 48px;
    }
}

/* --- FIX 6: Alpha filter touch targets --- */
@media (max-width: 639px) {
    .slh-alpha-bar {
        gap: 3px;
        justify-content: flex-start;
    }
    .slh-alpha-btn {
        width: 32px;
        height: 36px;
        font-size: 13px;
        border-radius: 6px;
    }
}
/* On touch devices, ensure minimum 36px touch target */
@media (pointer: coarse) {
    .slh-alpha-btn {
        min-width: 32px;
        min-height: 36px;
    }
}

/* --- FIX 7: Regional landing mobile --- */
@media (max-width: 639px) {
    .slh-regional-layout { gap: 16px; }
    .slh-window-big { font-size: 20px !important; }
    .slh-grass-rec { padding: 12px 14px; }
    .slh-grass-rec-header strong { font-size: 14px; }
    .slh-grass-rec p { font-size: 13px; }
}

/* --- FIX 8: Pricing guide tiers mobile --- */
@media (max-width: 639px) {
    .slh-price-tiers {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .slh-price-tier {
        padding: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }
    .slh-price-tier-range {
        font-size: 20px;
    }
}
@media (min-width: 640px) and (max-width: 959px) {
    .slh-price-tiers {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- FIX 9: Quick Facts value wrapping --- */
@media (max-width: 639px) {
    .slh-fact-row {
        flex-direction: column;
        gap: 2px;
    }
    .slh-fact-row dd {
        max-width: 100%;
        text-align: left;
    }
}

/* --- FIX 10: Breadcrumb truncation on deep paths --- */
@media (max-width: 639px) {
    .slh-crumb ol li {
        max-width: none;
    }
    .slh-crumb ol li a {
        display: inline;
        word-break: break-word;
    }
}

/* --- FIX 11: Guide mobile pills scroll indicator --- */
.slh-guide-mobile-pills {
    position: relative;
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

/* --- FIX 12: Diagnostic triage mobile --- */
@media (max-width: 639px) {
    .slh-diagnoser-interactive {
        padding: 16px;
        margin-left: -16px;
        margin-right: -16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .slh-diag-opt {
        min-height: 48px;
        padding: 14px 16px;
        font-size: 14px;
    }
    .slh-cause-photo {
        height: 100px;
    }
}

/* --- FIX 13: Hub search results dropdown mobile --- */
@media (max-width: 639px) {
    .slh-search-results {
        max-height: 260px;
        left: -16px;
        right: -16px;
    }
    .slh-search-results a {
        padding: 14px 16px;
        min-height: 44px;
    }
}

/* --- FIX 14: Comparison entity cards mobile spacing --- */
@media (max-width: 639px) {
    .slh-comp-entities {
        gap: 10px;
    }
    .slh-comp-entity {
        padding: 12px;
    }
    .slh-comp-entity-placeholder,
    .slh-comp-entity-img {
        height: 80px;
    }
    .slh-comp-entity-name {
        font-size: 15px;
        margin-top: 8px;
    }
    .slh-comp-backlink {
        padding: 14px;
    }
}

/* --- FIX 15: Calculator sidebar depth guide mobile --- */
@media (max-width: 639px) {
    .slh-calc-sidebar table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 13px;
    }
    .slh-calc-sidebar table thead,
    .slh-calc-sidebar table tbody {
        display: table;
        width: 100%;
    }
}

/* --- FIX 16: Seasonal program checklist touch targets --- */
@media (pointer: coarse) {
    .slh-check-item {
        min-height: 48px;
        padding: 10px 0;
    }
    .slh-check-item a {
        display: inline-block;
        min-height: 44px;
        line-height: 1.5;
    }
}

/* --- FIX 17: Standardize breakpoints at 639px --- */
/* Override stray 600px breakpoints to use 639px for consistency */
@media (max-width: 639px) {
    .slh-product-card { grid-template-columns: 1fr; }
    .slh-price-tiers { grid-template-columns: 1fr; }
    .slh-cost-factors { grid-template-columns: 1fr; }
    .slh-month-grid { grid-template-columns: 1fr; }
}

/* --- FIX 18: Word break safety net for all content --- */
.slh-wrap {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.slh-wrap table td,
.slh-wrap table th {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* --- FIX 19: Directory page mobile improvements --- */
@media (max-width: 639px) {
    .slh-dir-header {
        flex-direction: column;
        gap: 8px;
    }
    .slh-dir-desc {
        font-size: 14px;
    }
    .slh-dir-item {
        padding: 12px 14px;
    }
    .slh-dir-item-def {
        font-size: 13px;
        -webkit-line-clamp: 3;
    }
    /* Resource cards: full width on mobile */
    .slh-dir-resource-grid {
        grid-template-columns: 1fr;
    }
}

/* --- FIX 20: Ensure no horizontal scroll anywhere --- */
.slh-directory,
.slh-glossary,
.slh-guide,
.slh-cluster-hub,
.slh-comparison,
.slh-roundup,
.slh-calculator,
.slh-species-profile,
.slh-pricing-guide,
.slh-seasonal-program,
.slh-diagnostic-triage,
.slh-regional-landing {
    max-width: 100%;
    overflow-x: hidden;
}

/* Allow only tables to scroll horizontally within these containers */
.slh-directory table,
.slh-glossary table,
.slh-cluster-hub table {
    overflow-x: auto;
}

/* ============================================
   PRODUCT REVIEW TEMPLATE (v2.6.3)
   Template 14: Two-column review layout
   ============================================ */

/* Review layout: content + spec sidebar */
.slh-review-layout { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 960px) {
    .slh-review-layout { display: grid; grid-template-columns: 1fr 280px; gap: 32px; }
}
.slh-review-main { min-width: 0; }

/* Spec sidebar */
.slh-review-sidebar { order: -1; }
@media (min-width: 960px) {
    .slh-review-sidebar { order: 2; }
}
.slh-review-sidebar-inner {
    background: var(--slh-white);
    border: 1px solid var(--slh-border);
    border-radius: 12px;
    padding: 20px;
    position: static;
}
@media (min-width: 960px) {
    .slh-review-sidebar-inner { position: sticky; top: 24px; }
}

/* Score badge */
.slh-review-sidebar-score { text-align: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--slh-border); }
.slh-review-score-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    border: 3px solid; font-size: 22px; font-weight: 800;
}
.slh-review-score-badge--lg { width: 72px; height: 72px; font-size: 24px; }
.slh-review-score-label {
    display: block; font-size: 11px; font-weight: 600;
    color: var(--slh-caption); text-transform: uppercase;
    letter-spacing: 0.5px; margin-top: 4px;
}

/* Spec rows */
.slh-review-specs { margin-bottom: 16px; }
.slh-review-spec-row {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 7px 0; border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}
.slh-review-spec-row:last-child { border-bottom: none; }
.slh-review-spec-row dt { color: var(--slh-caption); font-weight: 400; }
.slh-review-spec-row dd { color: var(--slh-dark); font-weight: 500; text-align: right; max-width: 55%; margin: 0; }
.slh-review-spec-row--hl dt { font-weight: 600; }

/* Buy CTA */
.slh-review-buy { text-align: center; padding-top: 16px; border-top: 1px solid var(--slh-border); }
.slh-review-price { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.slh-review-buy-btn {
    display: block; color: #fff; padding: 14px 20px;
    border-radius: 8px; font-weight: 700; font-size: 15px;
    text-decoration: none; text-align: center; margin-bottom: 6px;
    min-height: 48px;
}
.slh-review-buy-btn:hover { opacity: 0.9; text-decoration: none; color: #fff; }
.slh-review-price-date { font-size: 11px; color: var(--slh-caption); }

/* Verdict capsule with score */
.slh-review-verdict {
    display: flex; gap: 16px; align-items: flex-start;
    border-radius: 10px; padding: 18px 20px;
    margin-bottom: 24px; border: 1px solid;
}
.slh-review-verdict-score { flex-shrink: 0; text-align: center; }
.slh-review-verdict-text { flex: 1; }
.slh-review-verdict-text p { font-size: 15px; color: var(--slh-dark); line-height: 1.7; margin: 0; font-weight: 500; }

/* Pros & Cons grid */
.slh-review-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; }
@media (max-width: 639px) { .slh-review-proscons { grid-template-columns: 1fr; } }
.slh-review-pros { background: rgba(57,89,3,0.03); border-radius: 10px; padding: 16px; border: 1px solid rgba(57,89,3,0.08); }
.slh-review-cons { background: rgba(155,34,38,0.03); border-radius: 10px; padding: 16px; border: 1px solid rgba(155,34,38,0.08); }
.slh-review-pros h3, .slh-review-cons h3 {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.3px; margin: 0 0 10px;
}
.slh-review-pro-item, .slh-review-con-item {
    display: flex; gap: 8px; margin-bottom: 8px;
    font-size: 13px; line-height: 1.5;
}
.slh-review-pro-item:last-child, .slh-review-con-item:last-child { margin-bottom: 0; }
.slh-review-check { font-weight: 700; flex-shrink: 0; font-size: 14px; }

/* Section spacing */
.slh-review-section { margin-bottom: 28px; }
.slh-review-section h2 { font-size: 20px; font-weight: 700; color: var(--slh-dark); margin: 0 0 12px; }

/* Audience cards */
.slh-review-audience { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 639px) { .slh-review-audience { grid-template-columns: 1fr; } }
.slh-review-audience-card { padding: 14px; border-radius: 8px; border: 1px solid; }
.slh-review-audience-label {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-bottom: 6px;
}
.slh-review-audience-card p { font-size: 13px; margin: 0; line-height: 1.6; }

/* Mobile adjustments */
@media (max-width: 639px) {
    .slh-review-verdict { flex-direction: column; align-items: center; text-align: center; padding: 16px; }
    .slh-review-verdict-text { text-align: left; }
    .slh-review-sidebar-inner { padding: 16px; }
    .slh-review-spec-row { font-size: 13px; }
    .slh-review-spec-row dd { max-width: 60%; }
    .slh-review-buy-btn { font-size: 16px; padding: 16px 20px; }
}

/* ============================================
   CROSS-LINKING COMPONENTS (v2.7.0)
   Guide -> Roundup promo, Entity -> Product section,
   Roundup -> Review links
   ============================================ */

/* Guide: Sibling product roundup promo card */
.slh-roundup-promo {
    border: 1px solid;
    border-radius: 12px;
    padding: 20px;
    margin: 24px 0;
}
.slh-roundup-promo h2 { font-size: 18px; font-weight: 700; }
.slh-roundup-promo-desc { font-size: 13px; color: var(--slh-caption); margin: 0 0 14px; }
.slh-roundup-promo-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--slh-white);
    border-radius: 8px;
    border: 1px solid;
    margin-bottom: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.slh-roundup-promo-card:last-child { margin-bottom: 0; }
.slh-roundup-promo-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); text-decoration: none; }
.slh-roundup-promo-icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.slh-roundup-promo-text { flex: 1; min-width: 0; }
.slh-roundup-promo-text strong { display: block; font-size: 14px; color: var(--slh-dark); }
.slh-roundup-promo-text span { display: block; font-size: 12px; color: var(--slh-caption); margin-top: 1px; }

/* Entity: Recommended Products section */
.slh-entity-products {
    border-top: 1px solid;
    padding-top: 20px;
    margin-top: 8px;
}
.slh-entity-products h2 { font-size: 18px; margin-bottom: 12px; }

/* Roundup: Review link on product cards */
.slh-product-review-link {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 8px;
}
.slh-product-review-link:hover { text-decoration: none; }

/* Mobile adjustments for cross-linking */
@media (max-width: 639px) {
    .slh-roundup-promo { padding: 16px; }
    .slh-roundup-promo-card { padding: 10px 12px; gap: 10px; }
    .slh-roundup-promo-icon { width: 32px; height: 32px; }
    .slh-roundup-promo-text strong { font-size: 13px; }
}

/* ============================================
   FINAL MOBILE/RESPONSIVENESS SWEEP (v2.7.0)
   Fixes all remaining audit issues
   ============================================ */

/* --- Fix stray breakpoints: override 600px rules with 639px --- */
@media (max-width: 639px) {
    /* Product card (was 600px) */
    .slh-product-card { grid-template-columns: 1fr; }
    .slh-product-price-col { display: flex; align-items: center; gap: 12px; justify-content: flex-start; }

    /* Pricing guide (was 600px) */
    .slh-price-tiers { grid-template-columns: 1fr; }
    .slh-cost-factors { grid-template-columns: 1fr; }

    /* Seasonal program (was 600px) */
    .slh-month-grid { grid-template-columns: 1fr; }

    /* Cluster hub entry grid (was 600px) */
    .slh-cluster-entry-grid { grid-template-columns: 1fr; }

    /* ID images single column */
    .slh-id-images { grid-template-columns: 1fr; }

    /* Dir question cards single column */
    .slh-dir-question-list { grid-template-columns: 1fr; }
    .slh-dir-question-card { padding: 14px 16px; }

    /* Hub grid single column */
    .slh-dir-hub-grid { grid-template-columns: 1fr; }
}

/* --- iOS input zoom: ALL inputs must be 16px --- */
@media (max-width: 639px) {
    .slh-search-input,
    .slh-dir-search,
    .slh-state-select,
    .slh-calc-field input,
    input[type="text"],
    input[type="number"],
    input[type="search"],
    input[type="email"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* --- Touch targets for pointer:coarse devices --- */
@media (pointer: coarse) {
    .slh-faq-item { padding: 16px 0; }
    .slh-faq-q { min-height: 44px; display: flex; align-items: center; }
    .slh-dir-question-card { min-height: 48px; }
    .slh-roundup-promo-card { min-height: 48px; }
    .slh-review-buy-btn { min-height: 48px; }
    .slh-product-shop-btn { min-height: 48px; padding: 12px 18px; }
    .slh-guide-card { min-height: 48px; }
    .slh-subject-card { min-height: 48px; }
    .slh-entry-card { min-height: 48px; }
    .slh-comp-promo-card { min-height: 48px; }
    .slh-related-item { min-height: 48px; }
    .slh-dir-item { min-height: 48px; }
}

/* --- Review template: mobile spec card expandable behavior --- */
@media (max-width: 959px) {
    .slh-review-layout { display: flex; flex-direction: column; gap: 16px; }
    .slh-review-sidebar { order: -1; }
    .slh-review-sidebar-inner { position: static; }
    /* Score + verdict take priority on mobile */
    .slh-review-verdict { flex-direction: row; gap: 12px; }
}
@media (max-width: 639px) {
    .slh-review-verdict { flex-direction: column; align-items: center; text-align: center; padding: 14px; }
    .slh-review-verdict-text { text-align: left; }
    .slh-review-score-badge--lg { width: 60px; height: 60px; font-size: 20px; }
    .slh-review-proscons { grid-template-columns: 1fr; gap: 10px; }
    .slh-review-audience { grid-template-columns: 1fr; gap: 10px; }
    .slh-review-buy-btn { font-size: 16px; padding: 16px 20px; }
    .slh-review-spec-row { font-size: 12px; }
    .slh-review-spec-row dd { max-width: 60%; }
}

/* --- Comparison table: ensure scroll wrapper works on all sizes --- */
@media (max-width: 639px) {
    .slh-comp-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .slh-comp-table thead,
    .slh-comp-table tbody {
        display: table;
        width: 100%;
        min-width: 400px;
    }
    .slh-comp-table th,
    .slh-comp-table td {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* --- Service CTA on cluster hubs: stack vertically on mobile --- */
@media (max-width: 639px) {
    .slh-cluster-service-cta {
        flex-direction: column;
        text-align: center;
        padding: 16px;
        gap: 10px;
    }
    .slh-cluster-service-cta div { min-width: 0; }
    .slh-service-cta-btn {
        width: 100%;
        text-align: center;
        padding: 14px 20px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- Species profile mobile --- */
@media (max-width: 639px) {
    .slh-species-layout { gap: 16px; }
}

/* --- Calculator result and form mobile --- */
@media (max-width: 639px) {
    .slh-calc-layout { gap: 16px; }
    .slh-calc-result { padding: 20px 16px; }
    .slh-calc-big { font-size: 24px; }
    .slh-calc-actions { flex-direction: column; gap: 8px; }
    .slh-calc-btn-primary { width: 100%; text-align: center; min-height: 48px; }
}

/* --- Global: prevent any element from causing horizontal scroll --- */
.slh-wrap * {
    max-width: 100%;
}
/* Except tables which are intentionally scrollable */
.slh-wrap table,
.slh-wrap table * {
    max-width: none;
}

/* --- Ensure no double 639px mobile override on already-set items --- */
/* This block uses higher specificity to win over earlier stray 600px rules */
@media (max-width: 639px) {
    .slh-wrap .slh-product-card { grid-template-columns: 1fr; gap: 10px; }
    .slh-wrap .slh-price-tiers { grid-template-columns: 1fr; }
    .slh-wrap .slh-cost-factors { grid-template-columns: 1fr; }
    .slh-wrap .slh-month-grid { grid-template-columns: 1fr; }
}