/* =====================================================================
MISTCULTURE DESIGN SYSTEM 1.0 — single stylesheet for all widgets
=====================================================================
Add to the WordPress theme:
- wp_enqueue_style( 'mistculture-ds', get_stylesheet_directory_uri().'/mistculture-ds.css' );
- enqueue the Space Grotesk font separately (NOT via @import, for speed):
wp_enqueue_style( 'mistculture-font',
'https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;650;700&display=swap' );
Optionally minify this file with your cache plugin. All pages use the
shared .th-* components below; calculator-specific styles live in the
sections at the bottom, scoped to each widget root id.
===================================================================== */
body { background-color: #E7EEF7 !important; }
/* =====================================================================
1. TOKENS + SHELL
===================================================================== */
.th-root {
--mc-ink: #064E3B;
--mc-ink-2: #064E3B;
--mc-mist: #F9FAFB;
--mc-paper: #FFFFFF;
--mc-leaf: #16A34A;
--mc-leaf-dark: #064E3B;
--mc-line: #E5E7EB;
--mc-text: #374151;
--mc-text-soft: #6B7280;
--mc-soil: #9CA3AF;
--mc-blue: #2563EB;
--mc-hero-bg: url('https://mistculture.com/wp-content/uploads/2026/08/Mistculture-Internal-page-Hero-Background-scaled.webp');
--mc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
--mc-display: "Space Grotesk", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--mc-pad-top: 48px;
--mc-pad-x: 32px;
font-family: var(--mc-font);
color: var(--mc-text);
background: linear-gradient(180deg, #FFFFFF 0%, var(--mc-mist) 320px, var(--mc-mist) 100%);
border: 1px solid var(--mc-line);
border-radius: 20px;
max-width: 1280px;
margin: 0 auto;
overflow: hidden;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 56px -28px rgba(6,78,59,.22);
}
.th-root * { box-sizing: border-box; }
.th-root h1, .th-root h2, .th-root h3, .th-root h4 {
font-family: var(--mc-display);
font-weight: 650;
margin: 0;
color: var(--mc-ink);
letter-spacing: -.02em;
}
.th-root a { text-decoration: none; color: inherit; transition: color .2s ease, transform .2s ease; }
.th-root svg { overflow: visible; flex-shrink: 0; }
.th-root .mc-text-link { color: var(--mc-leaf); font-weight: 600; border-bottom: 1px solid rgba(22,163,74,.3); }
.th-root .mc-text-link:hover { color: var(--mc-ink); border-bottom-color: var(--mc-ink); }
.th-root a:focus-visible, .th-root button:focus-visible, .th-root summary:focus-visible,
.th-root select:focus-visible, .th-root input:focus-visible {
outline: 3px solid rgba(22,163,74,.4); outline-offset: 2px; border-radius: 4px;
}
/* ambient background shapes */
.th-root::before, .th-root::after { content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; }
.th-root::before { width: 460px; height: 460px; top: -140px; right: -120px; background: radial-gradient(circle at center, rgba(22,163,74,.14), rgba(22,163,74,0) 70%); }
.th-root::after { width: 560px; height: 560px; bottom: 120px; left: -180px; background: radial-gradient(circle at center, rgba(37,99,235,.10), rgba(37,99,235,0) 70%); }
.th-root .th-inner { position: relative; z-index: 1; padding: var(--mc-pad-top) var(--mc-pad-x) 48px; }
/* =====================================================================
2. HERO (single canonical version)
===================================================================== */
.th-root .th-head { position: relative; margin: calc(-1 * var(--mc-pad-top)) calc(-1 * var(--mc-pad-x)) 0; padding: var(--mc-pad-top) var(--mc-pad-x) 16px; background: var(--mc-hero-bg) center 22% / cover no-repeat; }
.th-root .th-head::before { content: ""; position: absolute; inset: -38px -38px 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(250,250,252,.38) 50%, rgba(250,250,252,.58) 100%); }
.th-root .th-head::after { content: ""; position: absolute; inset: -38px -38px 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(6,78,59,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(6,78,59,.025) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(720px 380px at 74% 8%, #000, transparent 80%); mask-image: radial-gradient(720px 380px at 74% 8%, #000, transparent 80%); }
.th-root .th-hero { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.th-root .th-hero-copy { min-width: 0; }
.th-root .th-eyebrow { display: flex; align-items: center; gap: 9px; font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: #15803D; font-weight: 700; margin-bottom: 12px; }
.th-root .th-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--mc-leaf); box-shadow: 0 0 0 4px rgba(22,163,74,.14); flex-shrink: 0; }
.th-root .th-hero h1 { font-size: 38px; line-height: 1.08; max-width: 18ch; }
.th-root .th-sub { font-size: 15px; color: var(--mc-text-soft); margin: 16px 0 0; line-height: 1.65; max-width: 58ch; }
.th-root .th-sub strong { color: var(--mc-ink-2); }
.th-root .th-hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.th-root .th-hero-btn, .th-root .th-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
background: var(--mc-leaf); color: #fff; font-size: 14px; font-weight: 700;
text-decoration: none; padding: 12px 22px; border-radius: 12px;
border: none; cursor: pointer; transition: all .15s ease;
}
.th-root .th-hero-btn:hover, .th-root .th-btn:hover { background: var(--mc-ink-2); transform: translateY(-1px); }
.th-root .th-hero-btn--ghost {
background: rgba(255,255,255,.62); color: var(--mc-ink-2); border: 1px solid rgba(255,255,255,.7);
box-shadow: 0 6px 18px -8px rgba(6,78,59,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.th-root .th-hero-btn--ghost:hover { border-color: var(--mc-leaf); color: var(--mc-leaf); background: rgba(255,255,255,.85); }
.th-root .th-hero-btn svg, .th-root .th-btn svg, .th-root .th-cta-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.th-root .th-hero-trust { display: flex; gap: 18px; flex-wrap: wrap; list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--mc-line); }
.th-root .th-hero-trust li { font-size: 11px; color: var(--mc-text-soft); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.th-root .th-hero-trust li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mc-leaf); }
/* hero glass viz card */
.th-root .th-viz {
position: relative; overflow: hidden; background: rgba(255,255,255,.95);
border: 1px solid rgba(255,255,255,.7); border-radius: 20px; padding: 18px;
box-shadow: 0 14px 36px -16px rgba(6,78,59,.28), inset 0 1px 0 rgba(255,255,255,.85);
transform: perspective(1000px) rotateY(-5deg); transition: transform .4s ease;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.th-root .th-viz { background: rgba(255,255,255,.62); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
}
.th-root .th-viz:hover { transform: perspective(1000px) rotateY(0deg) translateY(-5px); }
.th-root .th-viz::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--mc-leaf), var(--mc-blue)); }
.th-root .th-viz-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 6px; }
.th-root .th-viz-brand { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--mc-ink-2); }
.th-root .th-viz-brand svg { width: 18px; height: 18px; flex-shrink: 0; }
.th-root .th-viz-live { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; color: #15803D; letter-spacing: .09em; text-transform: uppercase; background: #F0FDF4; border: 1px solid #BBF7D0; padding: 4px 8px; border-radius: 999px; }
.th-root .th-viz-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--mc-leaf); animation: mcLive 1.6s ease-in-out infinite; }
@keyframes mcLive { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.th-root .th-viz-sub { font-size: 10.5px; color: var(--mc-text-soft); margin: 0 0 6px; }
.th-root .th-viz-row { display: grid; grid-template-columns: 60px minmax(0,1fr) 1.25fr 30px; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--mc-line); }
.th-root .th-viz-lab { font-size: 10.5px; color: var(--mc-text-soft); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: .05em; }
.th-root .th-viz-val { font-size: 13px; font-weight: 700; color: var(--mc-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.th-root .th-viz-val em { font-style: normal; font-size: 10px; color: var(--mc-text-soft); font-weight: 600; margin-left: 2px; }
.th-root .th-viz-track { height: 6px; border-radius: 999px; background: rgba(15,23,42,.06); overflow: hidden; }
.th-root .th-viz-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--mc-leaf), var(--mc-ink-2)); }
.th-root .th-viz-fill--blue { background: linear-gradient(90deg, #60A5FA, var(--mc-blue)); }
.th-root .th-viz-fill--amber { background: linear-gradient(90deg, #FBBF24, #D97706); }
.th-root .th-viz-ok { font-size: 9px; font-weight: 700; color: var(--mc-ink-2); text-align: right; letter-spacing: .04em; }
.th-root .th-viz-foot, .th-root .th-viz-quote { font-size: 12.5px; color: var(--mc-text-soft); margin-top: 10px; line-height: 1.6; }
.th-root .th-viz-quote { font-style: italic; color: var(--mc-ink-2); font-weight: 500; }
.th-root .th-viz-quote strong { color: var(--mc-leaf-dark); }
/* =====================================================================
3. SECTIONS, CARDS, STEPS
===================================================================== */
.th-root .th-section { margin-top: 56px; }
.th-root .th-section-head { margin-bottom: 28px; text-align: center; }
.th-root .th-section-head h2 { font-size: 28px; margin-bottom: 12px; }
.th-root .th-section-head p { font-size: 15px; color: var(--mc-text-soft); margin: 0 auto; max-width: 640px; line-height: 1.6; }
.th-root .th-card {
background: #fff; border: 1px solid var(--mc-line); border-radius: 16px; padding: 24px;
box-shadow: 0 1px 2px rgba(6,78,59,.06), 0 10px 26px -14px rgba(6,78,59,.15);
transition: all .2s ease;
}
.th-root .th-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(6,78,59,.08), 0 24px 40px -16px rgba(6,78,59,.25); border-color: rgba(22,163,74,.4); }
.th-root .th-card h2 { font-size: 17px; margin-bottom: 16px; }
.th-root .th-card-sub { font-size: 13.5px; color: var(--mc-text-soft); margin: -10px 0 18px; }
.th-root .th-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.th-root .th-step-card {
display: block; background: #fff; border: 1px solid var(--mc-line); border-radius: 16px; padding: 28px 24px;
box-shadow: 0 1px 2px rgba(6,78,59,.06), 0 10px 26px -14px rgba(6,78,59,.15); transition: all .2s ease;
}
.th-root .th-step-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(6,78,59,.08), 0 24px 40px -16px rgba(6,78,59,.25); border-color: rgba(22,163,74,.4); }
.th-root .th-step-icon {
width: 48px; height: 48px; border-radius: 12px; background: var(--mc-mist); display: flex;
align-items: center; justify-content: center; margin-bottom: 18px; color: var(--mc-leaf-dark);
border: 1px solid var(--mc-line); transition: background .2s, color .2s;
}
.th-root .th-step-icon svg { stroke: var(--mc-leaf-dark); }
.th-root .th-step-card h3 { font-size: 17px; margin-bottom: 10px; transition: color .2s; }
.th-root .th-step-card:hover h3 { color: var(--mc-leaf); }
.th-root .th-step-card:hover .th-step-icon { background: var(--mc-leaf); color: #fff; }
.th-root .th-step-card:hover .th-step-icon svg { stroke: #fff; }
.th-root .th-step-card p { font-size: 14px; color: var(--mc-text-soft); margin: 0; line-height: 1.65; }
/* =====================================================================
4. SHAPE DIVIDER
===================================================================== */
.th-root .th-divider { display: flex; align-items: center; justify-content: center; margin: 48px 0 20px; position: relative; padding: 10px 0; width: 100%; }
.th-root .th-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, #CBD5E1 20%, var(--mc-leaf) 50%, #CBD5E1 80%, transparent); z-index: 0; }
.th-root .th-divider-badge {
position: relative; z-index: 1; background: #F0FDF4; border: 1px solid #BBF7D0; color: var(--mc-leaf-dark);
padding: 8px 22px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; display: inline-block; box-shadow: 0 2px 8px rgba(0,0,0,.04); line-height: 1;
}
/* =====================================================================
5. FAQ
===================================================================== */
.th-root .th-faq {
position: relative;
background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.82) 50%, rgba(255,255,255,.92) 100%),
url('https://mistculture.com/wp-content/uploads/2025/08/vertical-hydroponic-plant-tower.webp-scaled-e1755331106642.webp') center/cover no-repeat;
border: 1px solid var(--mc-line); border-radius: 20px; padding: 10px 32px;
box-shadow: 0 10px 30px -10px rgba(6,78,59,.1); overflow: hidden; margin: 0 auto;
}
.th-root details.th-faq-item { border-top: 1px solid rgba(6,78,59,.12); padding: 20px 0; }
.th-root details.th-faq-item:first-child { border-top: none; }
.th-root details.th-faq-item summary { font-size: 16px; font-weight: 650; cursor: pointer; list-style: none; color: var(--mc-ink); display: flex; gap: 14px; align-items: flex-start; }
.th-root details.th-faq-item summary::-webkit-details-marker { display: none; }
.th-root details.th-faq-item summary::before {
content: "+"; color: #fff; background: var(--mc-leaf); width: 24px; height: 24px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 400;
flex-shrink: 0; transition: transform .2s; margin-top: 1px; box-shadow: 0 2px 6px rgba(22,163,74,.3);
}
.th-root details.th-faq-item[open] summary::before { content: "-"; background: var(--mc-ink); transform: rotate(180deg); }
.th-root details.th-faq-item p { font-size: 14.5px; color: var(--mc-text); line-height: 1.65; margin: 14px 0 0 38px; font-weight: 500; }
/* =====================================================================
6. CTA + FOOTER
===================================================================== */
.th-root .th-cta {
margin-top: 56px; padding: 40px; border-radius: 20px;
background: linear-gradient(135deg, var(--mc-ink) 0%, #022c22 100%);
display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
box-shadow: 0 20px 40px -10px rgba(6,78,59,.4); position: relative; overflow: hidden;
}
.th-root .th-cta-text { position: relative; z-index: 1; max-width: 600px; }
.th-root .th-cta h3 { color: #fff; font-size: 26px; margin-bottom: 10px; }
.th-root .th-cta p { color: #A7F3D0; font-size: 15px; margin: 0; line-height: 1.6; }
.th-root .th-cta-buttons { display: flex; gap: 16px; position: relative; z-index: 1; flex-wrap: wrap; }
.th-root .th-cta-btn {
background: var(--mc-leaf); color: #fff; font-weight: 700; font-size: 15px; padding: 14px 30px;
border-radius: 12px; transition: all .2s; white-space: nowrap; border: 1px solid rgba(255,255,255,.1);
display: inline-block;
}
.th-root .th-cta-btn.ghost { background: rgba(255,255,255,.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.th-root .th-cta-btn:hover { background: #fff; color: var(--mc-ink); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.th-root .th-foot { font-size: 12.5px; color: var(--mc-text-soft); margin: 22px 0 0; line-height: 1.6; text-align: center; }
.th-root .th-foot strong { color: var(--mc-ink); }
/* =====================================================================
7. TABLES
===================================================================== */
.th-root .th-table-wrap {
background: #fff; border: 1px solid var(--mc-line); border-radius: 16px; overflow: hidden;
box-shadow: 0 1px 2px rgba(6,78,59,.06), 0 10px 26px -14px rgba(6,78,59,.20); overflow-x: auto;
}
.th-root table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.th-root caption { text-align: left; padding: 15px 20px 0; font-size: 12.5px; color: var(--mc-text-soft); caption-side: top; }
.th-root th, .th-root td { padding: 11px 20px; text-align: left; border-bottom: 1px solid var(--mc-line); }
.th-root th { background: var(--mc-mist); color: var(--mc-ink); font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; }
.th-root tr:last-child td { border-bottom: none; }
/* =====================================================================
8. FORMS (shared across calculators)
===================================================================== */
.th-root .th-field { margin-bottom: 16px; }
.th-root label { display: block; font-size: 13px; font-weight: 700; color: var(--mc-ink); margin-bottom: 6px; }
.th-root label .th-step, .th-root .th-step-num {
display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
border-radius: 50%; background: var(--mc-leaf); color: #fff; font-size: 11px; font-weight: 700; margin-right: 7px;
}
.th-root select, .th-root input[type=number] {
width: 100%; padding: 11px 12px; border: 1px solid var(--mc-line); border-radius: 12px;
font-size: 16px; color: var(--mc-text); background: #fff; font-family: inherit;
}
.th-root select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
appearance: none; -webkit-appearance: none;
}
.th-root select:focus, .th-root input[type=number]:focus {
outline: 3px solid rgba(22,163,74,.18); outline-offset: 0; border-color: var(--mc-leaf);
}
.th-root .th-hint { font-size: 12px; color: var(--mc-text-soft); margin-top: 6px; }
.th-root .th-error { display: none; color: #B45309; background: #FEF3C7; border-radius: 8px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; margin-top: 8px; }
.th-root .th-error.show { display: block; }
/* =====================================================================
9. BLOG — category hierarchy + dynamic post grid
===================================================================== */
#blog-page .th-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 20px; }
#blog-page .th-cat-card { background: #fff; border: 1px solid var(--mc-line); border-radius: 16px; padding: 18px; box-shadow: 0 4px 15px rgba(6,78,59,.04); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
#blog-page .th-cat-card:hover { transform: translateY(-4px); border-color: var(--mc-leaf); box-shadow: 0 12px 24px -6px rgba(6,78,59,.12); }
#blog-page .th-cat-head { font-size: 15px; font-weight: 700; color: var(--mc-ink); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--mc-line); }
#blog-page .th-cat-icon { width: 34px; height: 34px; border-radius: 10px; background: #F0FDF4; border: 1px solid #BBF7D0; display: inline-flex; align-items: center; justify-content: center; color: var(--mc-leaf); flex-shrink: 0; transition: background .25s ease, color .25s ease, transform .25s ease; }
#blog-page .th-cat-card:hover .th-cat-icon { background: var(--mc-leaf); color: #fff; transform: scale(1.05); }
#blog-page .th-cat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
#blog-page .th-cat-list li a { font-size: 13px; color: var(--mc-text-soft); display: flex; align-items: center; gap: 7px; transition: color .2s ease, transform .2s ease; }
#blog-page .th-cat-list li a:hover { color: var(--mc-leaf); transform: translateX(2px); }
#blog-page .th-cat-list li a svg { color: var(--mc-leaf); opacity: .7; transition: opacity .2s ease, transform .2s ease; }
#blog-page .th-cat-list li a:hover svg { opacity: 1; transform: translateX(1px); }
#blog-page .th-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
#blog-page .th-post-card { background: #fff; border: 1px solid var(--mc-line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 15px rgba(6,78,59,.04); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; position: relative; text-decoration: none; color: inherit; height: 100%; }
#blog-page .th-post-card:hover { transform: translateY(-6px); border-color: rgba(22,163,74,.4); box-shadow: 0 16px 32px -8px rgba(6,78,59,.16); }
#blog-page .th-card-media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mc-mist); }
#blog-page .th-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
#blog-page .th-post-card:hover .th-card-media img { transform: scale(1.05); }
#blog-page .th-card-cat { position: absolute; top: 12px; left: 12px; background: rgba(240,253,244,.92); border: 1px solid #BBF7D0; color: var(--mc-leaf-dark); padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
#blog-page .th-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; justify-content: space-between; }
#blog-page .th-card-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mc-text-soft); margin-bottom: 10px; }
#blog-page .th-card-title { font-size: 17px; line-height: 1.35; color: var(--mc-ink); margin-bottom: 10px; transition: color .2s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#blog-page .th-post-card:hover .th-card-title { color: var(--mc-leaf); }
#blog-page .th-card-excerpt { font-size: 13.5px; color: var(--mc-text-soft); line-height: 1.55; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#blog-page .th-card-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px dashed var(--mc-line); padding-top: 14px; margin-top: auto; }
#blog-page .th-card-author { display: flex; align-items: center; gap: 8px; }
#blog-page .th-card-author img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid var(--mc-leaf); }
#blog-page .th-card-author span { font-size: 12px; font-weight: 600; color: var(--mc-ink); }
#blog-page .th-read-more { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--mc-leaf); }
#blog-page .th-read-more svg { width: 14px; height: 14px; flex-shrink: 0; }
#blog-page .th-post-card:hover .th-read-more { color: var(--mc-ink); }
#blog-page .th-pagination-wrap { display: flex; justify-content: center; margin-top: 40px; }
#blog-page .th-load-more-btn { background: var(--mc-leaf); color: #fff; border: none; border-radius: 12px; padding: 14px 28px; font-size: 14.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all .25s ease; box-shadow: 0 6px 18px rgba(22,163,74,.25); display: inline-flex; align-items: center; justify-content: center; gap: 12px; line-height: 1; }
#blog-page .th-load-more-btn:hover { background: var(--mc-ink); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(6,78,59,.3); }
#blog-page .th-load-more-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
#blog-page .th-load-more-btn svg { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; margin: 0; }
.th-root .th-skeleton { animation: mcPulse 1.5s infinite ease-in-out; background: #E2E8F0; border-color: transparent; border-radius: 20px; }
@keyframes mcPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
/* =====================================================================
10. VPD CALCULATOR — component styles
===================================================================== */
#vpd-tool .th-calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; align-items: start; }
#vpd-tool .th-card { background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#vpd-tool .th-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#vpd-tool .th-gauge-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0 20px; }
#vpd-tool .th-gauge { position: relative; width: 180px; height: 180px; }
#vpd-tool .th-gauge svg { width: 100%; height: 100%; }
#vpd-tool .th-gauge-value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#vpd-tool .th-gauge-value strong { font-size: 28px; color: var(--mc-ink); line-height: 1.1; font-family: var(--mc-display); }
#vpd-tool .th-gauge-value span { font-size: 12px; color: var(--mc-text-soft); margin-top: 2px; }
#vpd-tool .th-status { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-top: 12px; }
#vpd-tool .th-status--ok { color: #15803D; background: #F0FDF4; border: 1px solid #BBF7D0; }
#vpd-tool .th-status--low { color: #B45309; background: #FEF3C7; border: 1px solid #FDE68A; }
#vpd-tool .th-status--high { color: #1D4ED8; background: #EFF6FF; border: 1px solid #BFDBFE; }
#vpd-tool .th-target-line { font-size: 12px; color: var(--mc-text-soft); margin-top: 8px; }
#vpd-tool .th-stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
#vpd-tool .th-stat { background: var(--mc-mist); border: 1px solid var(--mc-line); border-radius: 12px; padding: 13px 15px; }
#vpd-tool .th-stat span { display: block; font-size: 12px; color: var(--mc-text-soft); margin-bottom: 4px; }
#vpd-tool .th-stat strong { font-size: 19px; color: var(--mc-ink); }
#vpd-tool .th-recs { margin-top: 16px; }
#vpd-tool .th-recs h3 { font-size: 14.5px; margin-bottom: 8px; }
#vpd-tool .th-recs p { font-size: 13px; color: var(--mc-text-soft); margin: 0 0 8px; line-height: 1.55; }
#vpd-tool .th-config-summary { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mc-line); font-size: 13px; color: var(--mc-text-soft); }
#vpd-tool .th-config-summary strong { color: var(--mc-ink); }
#vpd-tool .th-results { display: none; }
#vpd-tool .th-results.show { display: block; }
#vpd-tool .th-results-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 300px; color: var(--mc-text-soft); border: 1.5px dashed var(--mc-line); border-radius: 16px; padding: 30px; }
#vpd-tool .th-results-placeholder svg { margin-bottom: 14px; opacity: .5; stroke: var(--mc-leaf-dark); }
#vpd-tool .th-results-placeholder p { margin: 0; font-size: 14px; }
.th-root .th-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.th-root .th-tool-card { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--mc-line); border-radius: 14px; padding: 15px; text-decoration: none; color: var(--mc-ink); transition: all .15s; box-shadow: 0 1px 2px rgba(6,78,59,.06), 0 6px 18px -10px rgba(6,78,59,.18); }
.th-root .th-tool-card:hover { border-color: var(--mc-leaf); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(6,78,59,.06), 0 16px 32px -16px rgba(6,78,59,.28); }
.th-root .th-tool-card .th-badge { width: 36px; height: 36px; border-radius: 10px; background: var(--mc-mist); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.th-root .th-tool-card .th-badge svg { width: 19px; height: 19px; stroke: var(--mc-leaf-dark); fill: none; }
.th-root .th-tool-card > div { min-width: 0; flex: 1; }
.th-root .th-tool-card h3 { font-size: 14.5px; margin: 0 0 3px; }
.th-root .th-tool-card p { font-size: 12.5px; color: var(--mc-text-soft); margin: 0; line-height: 1.45; }
.th-root .th-tool-card .th-arrow { margin-left: auto; color: var(--mc-leaf-dark); flex-shrink: 0; align-self: center; font-size: 15px; line-height: 1; }
.th-root .th-tool-card .th-arrow::after { content: "\2192"; }
/* =====================================================================
11. CONTENT + PAGE COMPONENTS (shared across all widgets)
===================================================================== */
/* Hero viz — stats grid, date, badge, author */
.th-root .th-viz-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.th-root .th-viz-stat { background: rgba(255,255,255,.85); border: 1px solid rgba(22,163,74,.15); border-radius: 10px; padding: 8px 4px; text-align: center; }
.th-root .th-viz-stat-val { font-size: 14px; font-weight: 700; color: var(--mc-ink); font-variant-numeric: tabular-nums; }
.th-root .th-viz-stat-lbl { font-size: 9.5px; color: var(--mc-text-soft); text-transform: uppercase; font-weight: 600; letter-spacing: .04em; }
.th-root .th-viz-bar { height: 6px; background: rgba(15,23,42,.08); border-radius: 999px; overflow: hidden; margin: 4px 0 12px; }
.th-root .th-viz-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--mc-leaf), var(--mc-blue)); }
.th-root .th-viz-date { font-size: 11.5px; color: var(--mc-text-soft); font-weight: 600; letter-spacing: .03em; }
.th-root .th-viz-badge { display: inline-block; background: #F0FDF4; border: 1px solid #BBF7D0; color: var(--mc-leaf-dark); font-size: 10.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; margin: 8px 0; letter-spacing: .05em; text-transform: uppercase; }
.th-root .th-viz-author { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--mc-line); }
.th-root .th-viz-author img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--mc-leaf); }
.th-root .th-viz-author strong { display: block; font-size: 12.5px; color: var(--mc-ink); line-height: 1.2; }
.th-root .th-viz-author span { font-size: 11px; color: var(--mc-text-soft); }
.th-root .th-viz-chart { margin: 6px 0 4px; }
.th-root .th-viz-chart svg { width: 100%; height: 44px; display: block; }
.th-root .th-viz-chart-cap { font-size: 10px; color: var(--mc-text-soft); display: flex; justify-content: space-between; gap: 8px; }
/* Quick-link pillars */
.th-root .th-quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 28px; }
.th-root .th-quick-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--mc-line); border-radius: 14px; padding: 16px; text-decoration: none; color: var(--mc-ink); font-weight: 700; font-size: 14px; transition: all .2s ease; box-shadow: 0 4px 15px rgba(6,78,59,.04); }
.th-root .th-quick-card:hover { transform: translateY(-3px); border-color: var(--mc-leaf); box-shadow: 0 12px 24px -6px rgba(6,78,59,.14); color: var(--mc-leaf); }
.th-root .th-quick-icon { width: 38px; height: 38px; border-radius: 11px; background: #F0FDF4; border: 1px solid #BBF7D0; display: inline-flex; align-items: center; justify-content: center; color: var(--mc-leaf); flex-shrink: 0; }
.th-root .th-quick-card:hover .th-quick-icon { background: var(--mc-leaf); color: #fff; }
.th-root .th-quick-icon svg { width: 19px; height: 19px; }
/* Search box */
.th-root .th-search { display: flex; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid var(--mc-line); border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px -14px rgba(6,78,59,.18); margin-top: 28px; }
.th-root .th-search-input { flex: 1 1 240px; padding: 12px 14px; border: 1px solid var(--mc-line); border-radius: 12px; font-size: 15px; font-family: inherit; color: var(--mc-text); background: var(--mc-mist); }
.th-root .th-search-input:focus { outline: 3px solid rgba(22,163,74,.18); border-color: var(--mc-leaf); }
.th-root .th-search-submit { background: var(--mc-leaf); color: #fff; border: none; border-radius: 12px; padding: 12px 22px; font-size: 14.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all .2s ease; }
.th-root .th-search-submit:hover { background: var(--mc-ink); transform: translateY(-1px); }
/* Split section (image + text) */
.th-root .th-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: center; margin-top: 28px; }
.th-root .th-split-media { position: relative; }
.th-root .th-split-media img { width: 100%; border-radius: 18px; object-fit: cover; box-shadow: 0 18px 40px -16px rgba(6,78,59,.3); }
.th-root .th-split-copy h3 { font-size: 26px; margin-bottom: 12px; }
.th-root .th-split-copy p { font-size: 15px; color: var(--mc-text); line-height: 1.7; margin: 0 0 14px; }
.th-root .th-split-copy .mc-text-link { display: inline-block; margin-top: 6px; }
/* Reliability info bars */
.th-root .th-info { margin-top: 20px; }
.th-root .th-info-title { font-size: 13px; font-weight: 700; color: var(--mc-ink); margin-bottom: 12px; }
.th-root .th-bar-row { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 10px; margin-bottom: 10px; }
.th-root .th-bar-label { font-size: 12.5px; color: var(--mc-text); font-weight: 600; }
.th-root .th-bar-track { grid-column: 1 / -1; height: 8px; background: rgba(15,23,42,.07); border-radius: 999px; overflow: hidden; }
.th-root .th-bar-fill { height: 100%; border-radius: 999px; }
.th-root .th-bar-fill--mc { background: linear-gradient(90deg, var(--mc-leaf), var(--mc-ink-2)); }
.th-root .th-bar-fill--norm { background: #CBD5E1; }
.th-root .th-bar-pct { font-size: 12.5px; font-weight: 700; color: var(--mc-ink); text-align: right; font-variant-numeric: tabular-nums; }
/* Big stat counters */
.th-root .th-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 28px; }
.th-root .th-stat-card { background: #fff; border: 1px solid var(--mc-line); border-radius: 16px; padding: 20px 16px; text-align: center; box-shadow: 0 6px 20px -12px rgba(6,78,59,.15); }
.th-root .th-stat-card .th-stat-val { font-size: 26px; font-weight: 700; color: var(--mc-leaf); font-variant-numeric: tabular-nums; line-height: 1.1; }
.th-root .th-stat-card .th-stat-lbl { font-size: 12.5px; color: var(--mc-text-soft); margin-top: 6px; font-weight: 600; }
/* Timeline */
.th-root .th-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 28px; position: relative; }
.th-root .th-time-node { position: relative; background: #fff; border: 1px solid var(--mc-line); border-radius: 16px; padding: 22px; box-shadow: 0 4px 15px rgba(6,78,59,.04); }
.th-root .th-time-icon { width: 40px; height: 40px; border-radius: 12px; background: #F0FDF4; border: 1px solid #BBF7D0; display: flex; align-items: center; justify-content: center; color: var(--mc-leaf); margin-bottom: 14px; }
.th-root .th-time-node h3 { font-size: 16px; margin-bottom: 8px; }
.th-root .th-time-node p { font-size: 13.5px; color: var(--mc-text-soft); margin: 0; line-height: 1.6; }
/* Team grid */
.th-root .th-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 28px; }
.th-root .th-team-card { background: #fff; border: 1px solid var(--mc-line); border-radius: 18px; padding: 24px; text-align: center; transition: all .2s ease; box-shadow: 0 6px 20px -14px rgba(6,78,59,.15); display: block; color: inherit; }
.th-root .th-team-card:hover { transform: translateY(-4px); border-color: var(--mc-leaf); box-shadow: 0 18px 32px -14px rgba(6,78,59,.22); }
.th-root .th-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid #BBF7D0; margin-bottom: 14px; }
.th-root .th-team-card h3 { font-size: 17px; }
.th-root .th-team-role { display: block; font-size: 12px; font-weight: 700; color: var(--mc-leaf); text-transform: uppercase; letter-spacing: .06em; margin: 4px 0 12px; }
.th-root .th-team-bio { font-size: 13.5px; color: var(--mc-text-soft); margin: 0; line-height: 1.6; }
/* Testimonials */
.th-root .th-testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 28px; }
.th-root .th-testi-card { background: #fff; border: 1px solid var(--mc-line); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; box-shadow: 0 4px 15px rgba(6,78,59,.04); }
.th-root .th-testi-card p { font-size: 13.5px; color: var(--mc-text); line-height: 1.65; margin: 0 0 16px; flex: 1; }
.th-root .th-testi-author { display: flex; align-items: center; gap: 10px; }
.th-root .th-testi-author img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid var(--mc-line); }
.th-root .th-testi-author strong { font-size: 13px; color: var(--mc-ink); }
/* Contact */
.th-root .th-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 28px; }
.th-root .th-contact-card { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--mc-line); border-radius: 16px; padding: 20px; text-decoration: none; color: inherit; transition: all .2s ease; box-shadow: 0 4px 15px rgba(6,78,59,.04); }
.th-root .th-contact-card:hover { transform: translateY(-3px); border-color: var(--mc-leaf); }
.th-root .th-contact-icon { width: 42px; height: 42px; border-radius: 12px; background: #F0FDF4; border: 1px solid #BBF7D0; display: inline-flex; align-items: center; justify-content: center; color: var(--mc-leaf); flex-shrink: 0; }
.th-root .th-contact-text h3 { font-size: 15px; margin-bottom: 4px; }
.th-root .th-contact-text p { font-size: 13px; color: var(--mc-text-soft); margin: 0; line-height: 1.5; }
.th-root .th-contact-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.th-root .th-contact-tag { font-size: 11px; font-weight: 700; color: var(--mc-leaf-dark); background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 999px; padding: 3px 9px; }
.th-root .th-map { margin-top: 16px; border-radius: 16px; overflow: hidden; border: 1px solid var(--mc-line); box-shadow: 0 10px 26px -14px rgba(6,78,59,.18); }
.th-root .th-map iframe { display: block; width: 100%; height: 380px; border: 0; }
.th-root .th-form-card { margin-top: 28px; }
/* Policy + cookie */
.th-root .th-policy-list { list-style: none; margin: 14px 0 0; padding: 0; }
.th-root .th-policy-list li { position: relative; padding-left: 20px; font-size: 14px; color: var(--mc-text); line-height: 1.7; margin-bottom: 8px; }
.th-root .th-policy-list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--mc-leaf); }
.th-root .th-policy-list li > strong { color: var(--mc-ink); }
.th-root .th-policy-sublist { list-style: none; margin: 6px 0 0; padding-left: 18px; }
.th-root .th-policy-sublist li { font-size: 13.5px; }
.th-root .th-cookie-group { margin-top: 18px; }
.th-root .th-cookie-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.th-root .th-cookie-group-title { font-size: 14px; font-weight: 700; color: var(--mc-ink); }
.th-root .th-tag { font-size: 10.5px; font-weight: 700; color: var(--mc-leaf-dark); background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 999px; padding: 3px 10px; text-transform: uppercase; letter-spacing: .05em; }
.th-root .th-tag--req { color: #1D4ED8; background: #EFF6FF; border-color: #BFDBFE; }
.th-root .th-cat-title { font-size: 18px; margin: 0 0 4px; }
.th-root .th-note { font-size: 12.5px; color: var(--mc-text-soft); margin-top: 12px; line-height: 1.55; }
.th-root .th-full-img { width: 100%; border-radius: 18px; object-fit: cover; margin-top: 24px; box-shadow: 0 18px 40px -16px rgba(6,78,59,.22); }
/* =====================================================================
12. RESPONSIVE + MOTION
===================================================================== */
@media (prefers-reduced-motion: reduce) {
.th-root, .th-root * { animation: none !important; transition: none !important; }
.th-root .th-viz, .th-root .th-step-card:hover, .th-root .th-card:hover { transform: none !important; }
}
@media (max-width: 1024px) {
.th-root .th-cta { flex-direction: column; text-align: center; justify-content: center; }
.th-root .th-cta-buttons { width: 100%; flex-direction: column; }
.th-root .th-cta-btn { text-align: center; width: 100%; }
.th-root .th-faq { padding: 10px 20px; }
#blog-page .th-cat-grid { grid-template-columns: 1fr; }
#blog-page .th-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
.th-root .th-hero { grid-template-columns: 1fr; gap: 24px; }
.th-root .th-hero h1 { max-width: none; }
.th-root .th-split { grid-template-columns: 1fr; }
#vpd-tool .th-calc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
#blog-page .th-post-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.th-root .th-head::before, .th-root .th-head::after { inset: -26px -18px 0; }
.th-root .th-hero h1 { font-size: 30px; }
.th-root .th-hero-ctas .th-hero-btn { flex: 1 1 auto; }
.th-root .th-hero-trust { gap: 10px 16px; }
.th-root .th-viz-row { grid-template-columns: 56px minmax(0,1fr) 1.25fr 0; gap: 8px; }
.th-root .th-viz-ok { display: none; }
}
@media (max-width: 480px) {
.th-root { --mc-pad-top: 44px; --mc-pad-x: 18px; }
.th-root .th-inner { padding-bottom: 36px; }
.th-root .th-cta { padding: 28px 20px; margin-top: 40px; }
.th-root .th-stats { grid-template-columns: repeat(2, 1fr); }
.th-root .th-map iframe { height: 280px; }
#vpd-tool .th-row2 { grid-template-columns: 1fr; }
#vpd-tool .th-stat-row { grid-template-columns: 1fr; }
#vpd-tool .th-calc-grid { margin-top: 20px; }
}
/* =====================================================================
13. CALCULATOR COMPONENTS (generic — shared by all calculator pages)
Mirrors the approved VPD components but scoped to .th-root so every
calculator widget uses the same look.
===================================================================== */
.th-root .th-calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; align-items: start; }
.th-root .th-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.th-root .th-calc-grid, .th-root .th-card, .th-root .th-row2, .th-root .th-stat-row, .th-root .th-recs, .th-root .th-config-summary { min-width: 0; max-width: 100%; }
.th-root .th-btn--block { width: 100%; justify-content: center; }
.th-root .th-btn--outline {
background: #fff; border: 1px solid var(--mc-line); color: var(--mc-ink);
box-shadow: 0 4px 14px -8px rgba(6,78,59,.18);
}
.th-root .th-btn--outline svg { stroke: var(--mc-ink); }
.th-root .th-btn--outline:hover { border-color: var(--mc-leaf); color: var(--mc-leaf); background: #fff; }
.th-root .th-results { display: none; }
.th-root .th-results.show { display: block; }
.th-root .th-results-placeholder {
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
min-height: 300px; color: var(--mc-text-soft); border: 1.5px dashed var(--mc-line); border-radius: 16px; padding: 30px;
}
.th-root .th-results-placeholder svg { margin-bottom: 14px; opacity: .5; stroke: var(--mc-leaf-dark); }
.th-root .th-results-placeholder p { margin: 0; font-size: 14px; }
.th-root .th-gauge-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0 20px; }
.th-root .th-gauge { position: relative; width: 180px; height: 180px; }
.th-root .th-gauge svg { width: 100%; height: 100%; }
.th-root .th-gauge-value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.th-root .th-gauge-value strong { font-size: 28px; color: var(--mc-ink); line-height: 1.1; font-family: var(--mc-display); }
.th-root .th-gauge-value span { font-size: 12px; color: var(--mc-text-soft); margin-top: 2px; }
.th-root .th-status { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-top: 12px; }
.th-root .th-status--ok { color: #15803D; background: #F0FDF4; border: 1px solid #BBF7D0; }
.th-root .th-status--low { color: #B45309; background: #FEF3C7; border: 1px solid #FDE68A; }
.th-root .th-status--high { color: #1D4ED8; background: #EFF6FF; border: 1px solid #BFDBFE; }
.th-root .th-target-line { font-size: 12px; color: var(--mc-text-soft); margin-top: 8px; }
.th-root .th-stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.th-root .th-stat { background: var(--mc-mist); border: 1px solid var(--mc-line); border-radius: 12px; padding: 13px 15px; }
.th-root .th-stat span { display: block; font-size: 12px; color: var(--mc-text-soft); margin-bottom: 4px; }
.th-root .th-stat strong { font-size: 19px; color: var(--mc-ink); }
.th-root .th-recs { margin-top: 16px; }
.th-root .th-recs h3 { font-size: 14.5px; margin-bottom: 8px; }
.th-root .th-recs p { font-size: 13px; color: var(--mc-text-soft); margin: 0 0 8px; line-height: 1.55; }
.th-root .th-config-summary { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mc-line); font-size: 13px; color: var(--mc-text-soft); }
.th-root .th-config-summary strong { color: var(--mc-ink); }
.th-root .th-cycle-note { font-size: 13px; color: var(--mc-text-soft); background: var(--mc-mist); border: 1px solid var(--mc-line); border-radius: 12px; padding: 12px 14px; margin-top: 14px; line-height: 1.5; }
.th-root .th-cycle-note strong { color: var(--mc-ink); }
.th-root .th-hero-result { text-align: center; padding: 6px 0 20px; }
.th-root .th-big { font-family: var(--mc-display); font-size: 44px; line-height: 1.05; color: var(--mc-ink); letter-spacing: -0.03em; }
.th-root .th-big-label { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--mc-text-soft); font-weight: 600; margin-top: 6px; }
.th-root .th-payback { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mc-line); font-size: 13.5px; color: var(--mc-text-soft); line-height: 1.6; }
.th-root .th-payback strong { color: var(--mc-ink); }
.th-root .th-factors-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.th-root .th-factor-card { background: #fff; border: 1px solid var(--mc-line); border-radius: 16px; padding: 18px; box-shadow: 0 1px 2px rgba(6,78,59,.06), 0 8px 22px -12px rgba(6,78,59,.18); }
.th-root .th-factor-card h3 { font-size: 15.5px; margin-bottom: 8px; }
.th-root .th-factor-card p { font-size: 13.5px; color: var(--mc-text-soft); margin: 0; line-height: 1.55; }
.th-root .th-compare { margin-top: 4px; }
.th-root .th-compare-row { margin-bottom: 14px; }
.th-root .th-compare-label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; color: var(--mc-ink); font-weight: 700; }
.th-root .th-compare-track { width: 100%; height: 11px; border-radius: 999px; background: var(--mc-mist); overflow: hidden; }
.th-root .th-compare-fill { height: 100%; border-radius: 999px; width: 0%; transition: width .8s ease; }
.th-root .th-compare-fill.soil { background: var(--mc-soil); }
.th-root .th-compare-fill.hydro { background: linear-gradient(90deg, var(--mc-leaf), var(--mc-ink)); }
/* generic calculator responsive */
@media (max-width: 768px) {
.th-root .th-calc-grid { grid-template-columns: 1fr; }
.th-root .th-factors-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.th-root .th-row2 { grid-template-columns: 1fr; }
.th-root .th-stat-row { grid-template-columns: 1fr; }
.th-root .th-calc-grid { margin-top: 20px; }
}
/* =====================================================================
TOOLS HUB PAGE (root id="th-hub") - searchable app card grid
=====================================================================
*/
#th-hub{
--th-green:#16A34A; --th-green-dark:#064E3B; --th-blue:#2563EB;
--th-bg:#F9FAFB; --th-card:#FFFFFF; --th-border:#E5E7EB;
--th-text:#374151; --th-muted:#6B7280;
--th-radius:20px; --th-radius-sm:12px;
--th-shadow:0 4px 20px rgba(0,0,0,.04);
--th-hero-bg:url('https://mistculture.com/wp-content/uploads/2026/08/Mistculture-Internal-page-Hero-Background-scaled.webp');
--th-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
--th-display:"Space Grotesk",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
font-family:var(--th-font);
color:var(--th-text);
background:linear-gradient(180deg,#FFFFFF 0%,var(--th-bg) 300px,var(--th-bg) 100%);
border:1px solid var(--th-border); border-radius:var(--th-radius); max-width:1320px; margin:0 auto;
overflow:hidden; position:relative;
box-shadow:0 1px 2px rgba(0,0,0,.04), 0 24px 56px -28px rgba(6,78,59,.22);
}
#th-hub *{box-sizing:border-box;}
#th-hub h1,#th-hub h2,#th-hub h3,#th-hub h4{
font-family:var(--th-display); font-weight:650; margin:0; color:var(--th-green-dark); letter-spacing:-.02em;
}
/* ---------- ambient background shapes ---------- */
#th-hub::before,#th-hub::after{content:""; position:absolute; z-index:0; pointer-events:none; border-radius:50%;}
#th-hub::before{width:460px; height:460px; top:-140px; right:-120px; background:radial-gradient(circle at center,rgba(22,163,74,.16),rgba(22,163,74,0) 70%);}
#th-hub::after{width:560px; height:560px; bottom:120px; left:-180px; background:radial-gradient(circle at center,rgba(37,99,235,.10),rgba(37,99,235,0) 70%);}
#th-hub .th-inner{position:relative; z-index:1; padding:38px 36px 10px;}
/* ---------- header / hero ---------- */
#th-hub .th-head{
position:relative; padding-bottom:12px;
background:var(--th-hero-bg) center 22% / cover no-repeat;
}
#th-hub .th-head::before{
content:""; position:absolute; inset:-38px -38px 0; z-index:0; pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.80) 0%,rgba(250,250,252,.86) 50%,rgba(250,250,252,.97) 100%);
}
#th-hub .th-head::after{
content:""; position:absolute; inset:-38px -38px 0; z-index:0; pointer-events:none;
background-image:
linear-gradient(rgba(6,78,59,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(6,78,59,.05) 1px, transparent 1px);
background-size:26px 26px;
-webkit-mask-image:radial-gradient(720px 380px at 74% 8%,#000,transparent 80%);
mask-image:radial-gradient(720px 380px at 74% 8%,#000,transparent 80%);
}
#th-hub .th-hero{position:relative; z-index:1; display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;}
#th-hub .th-eyebrow{
display:flex; align-items:center; gap:9px;
font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
color:#15803D; font-weight:700; margin-bottom:12px;
}
#th-hub .th-dot{width:8px; height:8px; border-radius:2px; background:var(--th-green); box-shadow:0 0 0 4px rgba(22,163,74,.14); flex-shrink:0;}
#th-hub h1{font-size:38px; line-height:1.08; max-width:14ch;}
#th-hub .th-acc{color:var(--th-green);}
#th-hub .th-sub{font-size:15px; color:var(--th-muted); margin:12px 0 0; line-height:1.65; max-width:58ch;}
#th-hub .th-sub strong{color:var(--th-green-dark);}
/* hero CTAs + trust */
#th-hub .th-hero-ctas{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}
#th-hub .th-hero-btn{
display:inline-flex; align-items:center; gap:8px; background:var(--th-green); color:#fff;
font-size:13.5px; font-weight:700; text-decoration:none; padding:12px 18px; border-radius:var(--th-radius-sm);
transition:all .15s;
}
#th-hub .th-hero-btn:hover{background:var(--th-green-dark); transform:translateY(-1px);}
#th-hub .th-hero-btn.th-hero-btn--ghost{
background:rgba(255,255,255,.62); color:var(--th-green-dark); border:1px solid rgba(255,255,255,.7);
box-shadow:0 6px 18px -8px rgba(6,78,59,.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
#th-hub .th-hero-btn.th-hero-btn--ghost:hover{border-color:var(--th-green); color:var(--th-green);}
#th-hub .th-hero-trust{display:flex; gap:18px; flex-wrap:wrap; list-style:none; margin:18px 0 0; padding:14px 0 0; border-top:1px solid var(--th-border);}
#th-hub .th-hero-trust li{font-size:11px; color:var(--th-muted); font-weight:600; display:flex; align-items:center; gap:6px;}
#th-hub .th-hero-trust li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--th-green);}
/* ---- live readout panel (glassmorphism) ---- */
#th-hub .th-viz{
position:relative; overflow:hidden;
background:rgba(255,255,255,.62);
border:1px solid rgba(255,255,255,.7);
border-radius:var(--th-radius);
padding:18px;
box-shadow:0 14px 36px -16px rgba(6,78,59,.28), inset 0 1px 0 rgba(255,255,255,.85);
backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
#th-hub .th-viz{background:rgba(255,255,255,.95);}
}
#th-hub .th-viz::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--th-green),var(--th-blue));}
#th-hub .th-viz-head{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin-bottom:6px;}
#th-hub .th-viz-brand{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:var(--th-green-dark);}
#th-hub .th-viz-brand svg{width:18px; height:18px; flex-shrink:0;}
#th-hub .th-viz-live{display:inline-flex; align-items:center; gap:6px; font-size:9.5px; font-weight:700; color:#15803D; letter-spacing:.09em; text-transform:uppercase; background:#F0FDF4; border:1px solid #BBF7D0; padding:4px 8px; border-radius:999px;}
#th-hub .th-viz-live i{width:6px; height:6px; border-radius:50%; background:var(--th-green); animation:thpulse 1.6s ease-in-out infinite;}
@keyframes thpulse{0%,100%{opacity:1;} 50%{opacity:.3;}}
#th-hub .th-viz-sub{font-size:10.5px; color:var(--th-muted); margin:0 0 6px;}
#th-hub .th-viz-row{
display:grid; grid-template-columns:60px minmax(0,1fr) 1.25fr 30px; align-items:center; gap:10px;
padding:8px 0; border-top:1px dashed var(--th-border);
}
#th-hub .th-viz-lab{font-size:10.5px; color:var(--th-muted); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; text-transform:uppercase; letter-spacing:.05em;}
#th-hub .th-viz-val{font-size:13px; font-weight:700; color:var(--th-green-dark); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:nowrap;}
#th-hub .th-viz-val em{font-style:normal; font-size:10px; color:var(--th-muted); font-weight:600; margin-left:2px;}
#th-hub .th-viz-track{height:6px; border-radius:999px; background:rgba(15,23,42,.06); overflow:hidden;}
#th-hub .th-viz-fill{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--th-green),var(--th-green-dark));}
#th-hub .th-viz-fill.th-viz-fill--blue{background:linear-gradient(90deg,#60A5FA,var(--th-blue));}
#th-hub .th-viz-ok{font-size:9px; font-weight:700; color:var(--th-green-dark); text-align:right; letter-spacing:.04em;}
#th-hub .th-viz-foot{font-size:10.5px; color:var(--th-muted); margin-top:10px; line-height:1.5;}
/* EC trend sparkline */
#th-hub .th-viz-chart{margin-top:12px; padding-top:10px; border-top:1px dashed var(--th-border);}
#th-hub .th-viz-chart svg{width:100%; height:40px; display:block;}
#th-hub .th-viz-chart-cap{display:flex; justify-content:space-between; gap:8px; font-size:9.5px; color:var(--th-muted); letter-spacing:.06em; text-transform:uppercase; margin-top:4px;}
/* ---------- kicker + stat strip ---------- */
#th-hub .th-kicker{display:flex; align-items:center; gap:10px; margin-top:36px; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--th-muted); font-weight:700;}
#th-hub .th-kicker::after{content:""; flex:1; height:1px; background:var(--th-border);}
#th-hub .th-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px;}
#th-hub .th-stat{
position:relative; background:rgba(255,255,255,.88); border:1px solid var(--th-border); border-radius:16px;
padding:16px 18px 14px; box-shadow:0 6px 18px -10px rgba(6,78,59,.16), inset 0 1px 0 #fff;
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
#th-hub .th-stat b{display:block; font-family:var(--th-display); font-size:28px; line-height:1; color:var(--th-green-dark); letter-spacing:-.02em;}
#th-hub .th-stat span{display:block; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--th-muted); font-weight:600; line-height:1.4; margin-top:8px;}
#th-hub .th-bar{display:block; height:4px; border-radius:999px; background:rgba(15,23,42,.06); margin-top:12px; overflow:hidden;}
#th-hub .th-bar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--th-green),var(--th-green-dark));}
/* ---------- filter bar ---------- */
#th-hub .th-filters{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:22px;}
#th-hub .th-fbtns{display:flex; gap:8px; flex-wrap:wrap;}
#th-hub .th-fbtn{
border:1px solid var(--th-border); background:var(--th-card); color:var(--th-text);
font-size:13px; font-weight:600; padding:10px 16px; border-radius:var(--th-radius-sm); cursor:pointer;
font-family:inherit; transition:all .15s;
}
#th-hub .th-fbtn:hover{border-color:var(--th-green); color:var(--th-green-dark);}
#th-hub .th-fbtn.is-active{background:var(--th-green-dark); border-color:var(--th-green-dark); color:#fff;}
#th-hub .th-searchwrap{position:relative; flex:1; min-width:240px;}
#th-hub .th-search{
width:100%; padding:11px 14px 11px 40px; border:1px solid var(--th-border); border-radius:var(--th-radius-sm);
font-size:16px; color:var(--th-text); background:var(--th-card); font-family:inherit; box-shadow:var(--th-shadow);
}
#th-hub .th-search:focus{outline:3px solid rgba(22,163,74,.18); outline-offset:0; border-color:var(--th-green);}
#th-hub .th-searchwrap svg{position:absolute; left:13px; top:50%; margin-top:-8px; width:16px; height:16px; stroke:var(--th-muted);}
#th-hub .th-result{font-size:12px; color:var(--th-muted); margin:14px 2px 0;}
/* ---------- card grid (3D layered shadows) ---------- */
#th-hub .th-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:20px; scroll-margin-top:20px;
}
#th-hub .th-card{
position:relative; display:flex; flex-direction:column; gap:12px;
background:var(--th-card); border:1px solid var(--th-border); border-radius:var(--th-radius);
padding:20px;
box-shadow:0 1px 2px rgba(6,78,59,.06), 0 2px 6px rgba(0,0,0,.04), 0 12px 30px -16px rgba(6,78,59,.22);
transition:all .18s ease;
}
#th-hub .th-card:hover{
border-color:var(--th-green); transform:translateY(-4px);
box-shadow:0 2px 4px rgba(6,78,59,.06), 0 4px 10px rgba(0,0,0,.04), 0 26px 48px -20px rgba(6,78,59,.34);
}
#th-hub .th-card::after{content:""; position:absolute; left:20px; right:20px; bottom:0; height:3px; border-radius:3px 3px 0 0; background:linear-gradient(90deg,var(--th-green),var(--th-blue)); opacity:0; transition:opacity .18s;}
#th-hub .th-card:hover::after{opacity:1;}
/* feature card (full-width highlight row) */
#th-hub .th-card.th-feature{grid-column:1 / -1; flex-direction:row; align-items:stretch; gap:0; padding:0; overflow:hidden; background:linear-gradient(180deg,#FFFFFF,#FBFDFC); box-shadow:0 1px 2px rgba(6,78,59,.06), 0 4px 12px rgba(0,0,0,.05), 0 24px 48px -24px rgba(6,78,59,.35);}
#th-hub .th-card.th-feature:hover{transform:translateY(-2px);}
#th-hub .th-card.th-feature::after{left:0; right:0;}
#th-hub .th-feature-body{display:grid; grid-template-columns:1.55fr 1fr; width:100%; min-width:0;}
#th-hub .th-feature-main{display:flex; flex-direction:column; gap:12px; padding:24px 22px;}
#th-hub .th-feature-side{position:relative; display:flex; flex-direction:column; justify-content:center; gap:14px; padding:24px 22px; border-left:1px solid var(--th-border); background:linear-gradient(165deg,#F0FDF4 0%,#ECFDF5 60%,#D1FAE5 100%);}
#th-hub .th-feature-side::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(22,163,74,.06) 1px, transparent 1px),linear-gradient(90deg, rgba(22,163,74,.06) 1px, transparent 1px); background-size:22px 22px; -webkit-mask-image:radial-gradient(320px 200px at 70% 0%,#000,transparent 85%); mask-image:radial-gradient(320px 200px at 70% 0%,#000,transparent 85%);}
#th-hub .th-feature-side>*{position:relative;}
#th-hub .th-feat-tag{font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#15803D;}
#th-hub .th-feat-stat b{display:block; font-size:26px; line-height:1; color:var(--th-green-dark); font-family:var(--th-display); letter-spacing:-.02em;}
#th-hub .th-feat-stat span{font-size:12px; color:#166534; font-weight:600; line-height:1.35;}
/* top row: icon + badges (no overlap) */
#th-hub .th-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
#th-hub .th-ico{
width:46px; height:46px; border-radius:var(--th-radius-sm); background:#F0FDF4; border:1px solid #BBF7D0;
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
#th-hub .th-ico--blue{background:#EFF6FF; border-color:#BFDBFE;}
#th-hub .th-ico svg{width:22px; height:22px; stroke:var(--th-green-dark); fill:none; stroke-linecap:round; stroke-linejoin:round;}
#th-hub .th-tags{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
#th-hub .th-badge{
font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--th-green-dark);
background:#ECFDF5; border:1px solid #A7F3D0; padding:4px 9px; border-radius:999px; white-space:nowrap;
}
#th-hub .th-badge--blue{color:#1D4ED8; background:#EFF6FF; border-color:#BFDBFE;}
#th-hub .th-free{
font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#15803D;
background:#F0FDF4; border:1px solid #BBF7D0; padding:4px 9px; border-radius:999px; white-space:nowrap;
}
/* body */
#th-hub .th-card h3{font-size:16.5px; line-height:1.3; margin-top:2px;}
#th-hub .th-card .th-desc{font-size:13px; color:var(--th-muted); margin:0; line-height:1.6;}
#th-hub .th-meta{
display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
font-size:10px; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
color:#1D4ED8; background:#EFF6FF; border:1px solid #DBEAFE; border-radius:999px; padding:5px 10px;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
#th-hub .th-meta::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--th-blue); flex-shrink:0;}
/* card footer / links */
#th-hub .th-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:6px;}
#th-hub .th-open{
position:relative; display:inline-flex; align-items:center; gap:8px;
color:var(--th-green-dark); font-size:13px; font-weight:700; text-decoration:none; padding:6px 0;
}
#th-hub .th-open .th-arrow{
width:26px; height:26px; border-radius:999px; border:1px solid var(--th-border);
display:inline-flex; align-items:center; justify-content:center; color:var(--th-green-dark);
transition:all .15s; font-size:13px; line-height:1;
}
#th-hub .th-open .th-arrow::after{content:"\2192";}
#th-hub .th-card:hover .th-arrow{background:var(--th-green-dark); border-color:var(--th-green-dark); color:#fff;}
#th-hub .th-secondary{position:relative; z-index:2; display:inline-flex; align-items:center; gap:4px; color:var(--th-blue); font-size:12.5px; font-weight:600; text-decoration:none;}
#th-hub .th-secondary:hover{text-decoration:underline;}
/* ---------- empty state ---------- */
#th-hub .th-empty{display:none; margin-top:24px; padding:22px; border:1px dashed var(--th-border); border-radius:var(--th-radius); color:var(--th-muted); font-size:14px; text-align:center; background:#fff;}
/* ---------- CTA ---------- */
#th-hub .th-cta{margin:40px 0 0; padding:28px; border-radius:var(--th-radius); background:var(--th-green-dark); display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; content-visibility:auto; contain-intrinsic-size:auto 150px;}
#th-hub .th-cta h3{color:#fff; font-size:19px;}
#th-hub .th-cta p{color:#A7F3D0; font-size:13.5px; margin:6px 0 0; line-height:1.55;}
#th-hub .th-cta .th-btnrow{display:flex; gap:10px; flex-wrap:wrap;}
#th-hub .th-cta .th-btn{background:#fff; color:var(--th-green-dark); text-decoration:none; font-weight:700; font-size:13.5px; padding:12px 18px; border-radius:var(--th-radius-sm); flex-shrink:0;}
#th-hub .th-cta .th-btn:hover{background:#ECFDF5;}
#th-hub .th-cta .th-btn.th-btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.25);}
#th-hub .th-cta .th-btn.th-btn-ghost:hover{background:rgba(255,255,255,.16);}
/* ---------- FAQ ---------- */
#th-hub .th-faq{margin-top:40px; content-visibility:auto; contain-intrinsic-size:auto 520px;}
#th-hub .th-faqwrap{background:var(--th-card); border:1px solid var(--th-border); border-radius:var(--th-radius); padding:4px 22px; box-shadow:var(--th-shadow);}
#th-hub details.th-faq-item{border-top:1px solid var(--th-border); padding:14px 0;}
#th-hub details.th-faq-item:first-child{border-top:none;}
#th-hub details.th-faq-item summary{font-size:14.5px; font-weight:600; cursor:pointer; list-style:none; color:var(--th-green-dark); display:flex; gap:10px; font-family:var(--th-display); letter-spacing:-.01em;}
#th-hub details.th-faq-item summary::-webkit-details-marker{display:none;}
#th-hub details.th-faq-item summary::before{content:"+"; color:var(--th-green); font-size:16px; width:18px; flex-shrink:0; font-weight:700;}
#th-hub details.th-faq-item[open] summary::before{content:"";}
#th-hub details.th-faq-item p{font-size:13.5px; color:var(--th-muted); line-height:1.6; margin:8px 0 0 28px;}
/* ---------- footer ---------- */
#th-hub .th-foot-note{font-size:12px; color:var(--th-muted); margin:16px 0 26px; line-height:1.5;}
/* ---------- focus & motion ---------- */
#th-hub .th-fbtn:focus-visible,
#th-hub .th-search:focus-visible,
#th-hub .th-hero-btn:focus-visible,
#th-hub .th-open:focus-visible,
#th-hub .th-secondary:focus-visible,
#th-hub .th-btn:focus-visible,
#th-hub summary:focus-visible{outline:3px solid rgba(22,163,74,.4); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
#th-hub *, #th-hub *::before, #th-hub *::after{animation:none !important; transition:none !important;}
#th-hub .th-card:hover{transform:none;}
}
@media(max-width:1024px){
#th-hub .th-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:960px){
#th-hub .th-hero{grid-template-columns:1fr; gap:24px;}
#th-hub h1{max-width:none;}
#th-hub .th-stats{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
#th-hub .th-grid{grid-template-columns:1fr;}
#th-hub .th-card.th-feature{flex-direction:column;}
#th-hub .th-feature-body{grid-template-columns:1fr;}
#th-hub .th-feature-side{border-left:none; border-top:1px solid var(--th-border);}
}
@media(max-width:560px){
#th-hub .th-inner{padding:26px 18px 6px;}
#th-hub .th-head::before,#th-hub .th-head::after{inset:-26px -18px 0;}
#th-hub h1{font-size:26px;}
#th-hub .th-hero-ctas .th-hero-btn{flex:1 1 auto;}
#th-hub .th-hero-trust{gap:10px 16px;}
#th-hub .th-stats{grid-template-columns:repeat(2,1fr); gap:8px;}
#th-hub .th-stat b{font-size:24px;}
#th-hub .th-viz-row{grid-template-columns:56px minmax(0,1fr) 1.25fr 0; gap:8px;}
#th-hub .th-viz-ok{display:none;}
#th-hub .th-cta{margin:24px 0; padding:22px; flex-direction:column; align-items:flex-start; content-visibility:visible;}
#th-hub .th-cta .th-btn{width:100%; text-align:center;}
#th-hub .th-foot-note{margin:14px 0 20px;}
#th-hub .th-faq{content-visibility:visible;}
}
@media(max-width:380px){
#th-hub .th-stats{grid-template-columns:1fr;}
#th-hub .th-fbtn{padding:9px 13px; font-size:12.5px;}
}
/* =====================================================================
CONVERSIONS & REFERENCE HUB (root id="cr-conv-hub") - unit converters
=====================================================================
*/
#cr-conv-hub{
--cr-ink:#064E3B; --cr-ink-2:#064E3B;
--cr-mist:#F9FAFB; --cr-paper:#FFFFFF;
--cr-leaf:#16A34A; --cr-leaf-dark:#064E3B;
--cr-line:#E5E7EB; --cr-text:#374151; --cr-text-soft:#6B7280;
--cr-soil:#9CA3AF;
--cr-hero-bg:url('https://mistculture.com/wp-content/uploads/2026/08/Mistculture-Internal-page-Hero-Background-scaled.webp');
--cr-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
--cr-display:"Space Grotesk",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
font-family:var(--cr-font);
color:var(--cr-text);
background:linear-gradient(180deg,#FFFFFF 0%,var(--cr-mist) 320px,var(--cr-mist) 100%);
border:1px solid var(--cr-line); border-radius:20px; max-width:1320px; margin:0 auto;
overflow:hidden; position:relative;
box-shadow:0 1px 2px rgba(0,0,0,.04), 0 24px 56px -28px rgba(6,78,59,.22);
}
#cr-conv-hub *{box-sizing:border-box;}
#cr-conv-hub h1,#cr-conv-hub h2,#cr-conv-hub h3,#cr-conv-hub h4{
font-family:var(--cr-display); font-weight:650; margin:0; color:var(--cr-ink); letter-spacing:-.02em;
}
/* ambient background shapes */
#cr-conv-hub::before,#cr-conv-hub::after{content:""; position:absolute; z-index:0; pointer-events:none; border-radius:50%;}
#cr-conv-hub::before{width:460px; height:460px; top:-140px; right:-120px; background:radial-gradient(circle at center,rgba(22,163,74,.14),rgba(22,163,74,0) 70%);}
#cr-conv-hub::after{width:560px; height:560px; bottom:120px; left:-180px; background:radial-gradient(circle at center,rgba(37,99,235,.10),rgba(37,99,235,0) 70%);}
#cr-conv-hub .cr-inner{position:relative; z-index:1; padding:34px 32px 8px;}
/* ---------- header / hero (Tools Hub parity) ---------- */
#cr-conv-hub .th-head{position:relative; padding-bottom:12px; background:var(--cr-hero-bg) center 22% / cover no-repeat;}
#cr-conv-hub .th-head::before{content:""; position:absolute; inset:-38px -38px 0; z-index:0; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.80) 0%,rgba(250,250,252,.86) 50%,rgba(250,250,252,.97) 100%);}
#cr-conv-hub .th-head::after{content:""; position:absolute; inset:-38px -38px 0; z-index:0; pointer-events:none; background-image:linear-gradient(rgba(6,78,59,.05) 1px, transparent 1px),linear-gradient(90deg, rgba(6,78,59,.05) 1px, transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(720px 380px at 74% 8%,#000,transparent 80%); mask-image:radial-gradient(720px 380px at 74% 8%,#000,transparent 80%);}
#cr-conv-hub .th-hero{position:relative; z-index:1; display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;}
#cr-conv-hub .th-eyebrow{display:flex; align-items:center; gap:9px; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:#15803D; font-weight:700; margin-bottom:12px;}
#cr-conv-hub .th-dot{width:8px; height:8px; border-radius:2px; background:var(--cr-leaf); box-shadow:0 0 0 4px rgba(22,163,74,.14); flex-shrink:0;}
#cr-conv-hub h1{font-size:38px; line-height:1.08; max-width:14ch;}
#cr-conv-hub .th-sub{font-size:15px; color:var(--cr-text-soft); margin:12px 0 0; line-height:1.65; max-width:58ch;}
#cr-conv-hub .th-sub strong{color:var(--cr-ink-2);}
#cr-conv-hub .th-hero-ctas{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}
#cr-conv-hub .th-hero-btn{display:inline-flex; align-items:center; gap:8px; background:var(--cr-leaf); color:#fff; font-size:13.5px; font-weight:700; text-decoration:none; padding:12px 18px; border-radius:12px; transition:all .15s;}
#cr-conv-hub .th-hero-btn:hover{background:var(--cr-ink-2); transform:translateY(-1px);}
#cr-conv-hub .th-hero-btn.th-hero-btn--ghost{background:rgba(255,255,255,.62); color:var(--cr-ink-2); border:1px solid rgba(255,255,255,.7); box-shadow:0 6px 18px -8px rgba(6,78,59,.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
#cr-conv-hub .th-hero-btn.th-hero-btn--ghost:hover{border-color:var(--cr-leaf); color:var(--cr-leaf);}
#cr-conv-hub .th-hero-trust{display:flex; gap:18px; flex-wrap:wrap; list-style:none; margin:18px 0 0; padding:14px 0 0; border-top:1px solid var(--cr-line);}
#cr-conv-hub .th-hero-trust li{font-size:11px; color:var(--cr-text-soft); font-weight:600; display:flex; align-items:center; gap:6px;}
#cr-conv-hub .th-hero-trust li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--cr-leaf);}
#cr-conv-hub .th-viz{position:relative; overflow:hidden; background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.7); border-radius:20px; padding:18px; box-shadow:0 14px 36px -16px rgba(6,78,59,.28), inset 0 1px 0 rgba(255,255,255,.85); backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#cr-conv-hub .th-viz{background:rgba(255,255,255,.95);}}
#cr-conv-hub .th-viz::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--cr-leaf),#2563EB);}
#cr-conv-hub .th-viz-head{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin-bottom:6px;}
#cr-conv-hub .th-viz-brand{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:var(--cr-ink-2);}
#cr-conv-hub .th-viz-brand svg{width:18px; height:18px; flex-shrink:0;}
#cr-conv-hub .th-viz-live{display:inline-flex; align-items:center; gap:6px; font-size:9.5px; font-weight:700; color:#15803D; letter-spacing:.09em; text-transform:uppercase; background:#F0FDF4; border:1px solid #BBF7D0; padding:4px 8px; border-radius:999px;}
#cr-conv-hub .th-viz-live i{width:6px; height:6px; border-radius:50%; background:var(--cr-leaf); animation:thpulse-cr 1.6s ease-in-out infinite;}
@keyframes thpulse-cr{0%,100%{opacity:1;} 50%{opacity:.3;}}
#cr-conv-hub .th-viz-sub{font-size:10.5px; color:var(--cr-text-soft); margin:0 0 6px;}
#cr-conv-hub .th-viz-row{display:grid; grid-template-columns:60px minmax(0,1fr) 1.25fr 30px; align-items:center; gap:10px; padding:8px 0; border-top:1px dashed var(--cr-line);}
#cr-conv-hub .th-viz-lab{font-size:10.5px; color:var(--cr-text-soft); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; text-transform:uppercase; letter-spacing:.05em;}
#cr-conv-hub .th-viz-val{font-size:13px; font-weight:700; color:var(--cr-ink-2); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:nowrap;}
#cr-conv-hub .th-viz-val em{font-style:normal; font-size:10px; color:var(--cr-text-soft); font-weight:600; margin-left:2px;}
#cr-conv-hub .th-viz-track{height:6px; border-radius:999px; background:rgba(15,23,42,.06); overflow:hidden;}
#cr-conv-hub .th-viz-fill{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--cr-leaf),var(--cr-ink-2));}
#cr-conv-hub .th-viz-fill.th-viz-fill--blue{background:linear-gradient(90deg,#60A5FA,#2563EB);}
#cr-conv-hub .th-viz-fill.th-viz-fill--amber{background:linear-gradient(90deg,#FBBF24,#D97706);}
#cr-conv-hub .th-viz-ok{font-size:9px; font-weight:700; color:var(--cr-ink-2); text-align:right; letter-spacing:.04em;}
#cr-conv-hub .th-viz-foot{font-size:10.5px; color:var(--cr-text-soft); margin-top:10px; line-height:1.5;}
#cr-conv-hub .th-viz-chart{margin-top:12px; padding-top:10px; border-top:1px dashed var(--cr-line);}
#cr-conv-hub .th-viz-chart svg{width:100%; height:40px; display:block;}
#cr-conv-hub .th-viz-chart-cap{display:flex; justify-content:space-between; gap:8px; font-size:9.5px; color:var(--cr-text-soft); letter-spacing:.06em; text-transform:uppercase; margin-top:4px;}
@media(max-width:960px){#cr-conv-hub .th-hero{grid-template-columns:1fr; gap:24px;} #cr-conv-hub h1{max-width:none;}}
@media(max-width:560px){#cr-conv-hub .th-head::before,#cr-conv-hub .th-head::after{inset:-26px -18px 0;} #cr-conv-hub h1{font-size:26px;} #cr-conv-hub .th-hero-ctas .th-hero-btn{flex:1 1 auto;} #cr-conv-hub .th-hero-trust{gap:10px 16px;} #cr-conv-hub .th-viz-row{grid-template-columns:56px minmax(0,1fr) 1.25fr 0; gap:8px;} #cr-conv-hub .th-viz-ok{display:none;}}
/* ---------- calculator grid ---------- */
#cr-conv-hub .cr-calc-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:28px; align-items:start;}
@media(max-width:880px){#cr-conv-hub .cr-calc-grid{grid-template-columns:1fr;}}
#cr-conv-hub .cr-card{
background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.75); border-radius:20px; padding:24px;
box-shadow:0 1px 2px rgba(6,78,59,.06), 0 2px 6px rgba(0,0,0,.04), 0 12px 30px -16px rgba(6,78,59,.22);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
#cr-conv-hub .cr-card h2{font-size:17px; margin-bottom:16px;}
#cr-conv-hub .cr-card .cr-card-sub{font-size:13.5px; color:var(--cr-text-soft); margin:-10px 0 18px;}
/* ---------- form fields ---------- */
#cr-conv-hub .cr-field{margin-bottom:16px;}
#cr-conv-hub label{display:block; font-size:13px; font-weight:700; color:var(--cr-ink); margin-bottom:6px;}
#cr-conv-hub label .cr-step{
display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
border-radius:50%; background:var(--cr-leaf); color:#fff; font-size:11px; font-weight:700; margin-right:7px;
}
#cr-conv-hub select,#cr-conv-hub input[type=number]{
width:100%; padding:11px 12px; border:1px solid var(--cr-line); border-radius:12px; font-size:16px;
color:var(--cr-text); background:#fff; font-family:inherit;
}
#cr-conv-hub select{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
appearance:none; -webkit-appearance:none;
}
#cr-conv-hub select:focus,#cr-conv-hub input[type=number]:focus{
outline:3px solid rgba(22,163,74,.18); outline-offset:0; border-color:var(--cr-leaf);
}
#cr-conv-hub .cr-row2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
#cr-conv-hub .cr-error{display:none; color:#B45309; background:#FEF3C7; border-radius:8px; padding:10px 12px; font-size:13.5px; font-weight:600; margin-top:8px;}
#cr-conv-hub .cr-error.show{display:block;}
#cr-conv-hub .cr-btn{
width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
background:var(--cr-ink); color:#fff; border:none; border-radius:12px; padding:13px;
font-size:14.5px; font-weight:700; cursor:pointer; margin-top:4px; transition:all .15s;
}
#cr-conv-hub .cr-btn:hover{background:var(--cr-ink-2); transform:translateY(-1px);}
#cr-conv-hub .cr-btn svg{width:16px; height:16px; stroke:#fff;}
#cr-conv-hub .cr-btn.cr-btn-outline{background:#fff; border:1px solid var(--cr-line); color:var(--cr-ink); margin-top:12px; box-shadow:0 4px 14px -8px rgba(6,78,59,.18);}
#cr-conv-hub .cr-btn.cr-btn-outline svg{stroke:var(--cr-ink);}
#cr-conv-hub .cr-btn.cr-btn-outline:hover{border-color:var(--cr-leaf); color:var(--cr-leaf);}
/* ---------- results ---------- */
#cr-conv-hub .cr-results{display:none;}
#cr-conv-hub .cr-results.show{display:block;}
#cr-conv-hub .cr-results-placeholder{
display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
min-height:300px; color:var(--cr-text-soft); border:1.5px dashed var(--cr-line); border-radius:16px; padding:30px;
}
#cr-conv-hub .cr-results-placeholder svg{margin-bottom:14px; opacity:.5; stroke:var(--cr-leaf-dark);}
#cr-conv-hub .cr-results-placeholder p{margin:0; font-size:14px;}
#cr-conv-hub .cr-gauge-wrap{display:flex; flex-direction:column; align-items:center; text-align:center; padding:6px 0 20px;}
#cr-conv-hub .cr-gauge{position:relative; width:180px; height:180px;}
#cr-conv-hub .cr-gauge svg{width:100%; height:100%;}
#cr-conv-hub .cr-gauge-value{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
#cr-conv-hub .cr-gauge-value strong{font-size:28px; color:var(--cr-ink); line-height:1.1; font-family:var(--cr-display);}
#cr-conv-hub .cr-gauge-value span{font-size:12px; color:var(--cr-text-soft); margin-top:2px;}
#cr-conv-hub .cr-compare{margin-top:4px;}
#cr-conv-hub .cr-compare-row{margin-bottom:14px;}
#cr-conv-hub .cr-compare-label{display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; color:var(--cr-ink); font-weight:700;}
#cr-conv-hub .cr-compare-track{width:100%; height:11px; border-radius:999px; background:var(--cr-mist); overflow:hidden;}
#cr-conv-hub .cr-compare-fill{height:100%; border-radius:999px; width:0%; transition:width .8s ease;}
#cr-conv-hub .cr-compare-fill.soil{background:var(--cr-soil);}
#cr-conv-hub .cr-compare-fill.hydro{background:linear-gradient(90deg,var(--cr-leaf),var(--cr-ink));}
#cr-conv-hub .cr-stat-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px;}
#cr-conv-hub .cr-stat{background:var(--cr-mist); border:1px solid var(--cr-line); border-radius:12px; padding:13px 15px;}
#cr-conv-hub .cr-stat span{display:block; font-size:12px; color:var(--cr-text-soft); margin-bottom:4px;}
#cr-conv-hub .cr-stat strong{font-size:19px; color:var(--cr-ink);}
#cr-conv-hub .cr-config-summary{margin-top:16px; padding-top:14px; border-top:1px solid var(--cr-line); font-size:13px; color:var(--cr-text-soft);}
#cr-conv-hub .cr-config-summary strong{color:var(--cr-ink);}
/* ---------- sections ---------- */
#cr-conv-hub .cr-section{margin:44px 0 0;}
#cr-conv-hub .cr-section-head{margin-bottom:20px;}
#cr-conv-hub .cr-section-head h2{font-size:21px;}
#cr-conv-hub .cr-section-head p{font-size:14px; color:var(--cr-text-soft); margin:8px 0 0; line-height:1.55;}
#cr-conv-hub .cr-steps{display:grid; grid-template-columns:1fr; gap:16px;}
@media(min-width:720px){#cr-conv-hub .cr-steps{grid-template-columns:repeat(3,minmax(0,1fr));}}
#cr-conv-hub .cr-step-card{
background:#fff; border:1px solid var(--cr-line); border-radius:16px; padding:20px;
box-shadow:0 1px 2px rgba(6,78,59,.06), 0 2px 6px rgba(0,0,0,.04), 0 10px 26px -14px rgba(6,78,59,.20);
transition:all .15s;
}
#cr-conv-hub .cr-step-card:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(6,78,59,.06), 0 18px 36px -18px rgba(6,78,59,.28);}
#cr-conv-hub .cr-step-card h3{font-size:16px; margin-bottom:8px;}
#cr-conv-hub .cr-step-card p{font-size:13.5px; color:var(--cr-text-soft); margin:0; line-height:1.55;}
#cr-conv-hub .cr-step-icon{width:40px; height:40px; border-radius:12px; background:var(--cr-mist); display:flex; align-items:center; justify-content:center; margin-bottom:12px; color:var(--cr-leaf-dark);}
#cr-conv-hub .cr-step-icon svg{stroke:var(--cr-leaf-dark);}
#cr-conv-hub .cr-factors-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:640px){#cr-conv-hub .cr-factors-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
#cr-conv-hub .cr-factor-card{background:#fff; border:1px solid var(--cr-line); border-radius:16px; padding:18px; box-shadow:0 1px 2px rgba(6,78,59,.06), 0 8px 22px -12px rgba(6,78,59,.18);}
#cr-conv-hub .cr-factor-card h3{font-size:15.5px; margin-bottom:8px;}
#cr-conv-hub .cr-factor-card p{font-size:13.5px; color:var(--cr-text-soft); margin:0; line-height:1.55;}
/* ---------- table ---------- */
#cr-conv-hub .cr-table-wrap{background:#fff; border:1px solid var(--cr-line); border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(6,78,59,.06), 0 10px 26px -14px rgba(6,78,59,.20); overflow-x:auto;}
#cr-conv-hub table{width:100%; border-collapse:collapse; font-size:14px; min-width:480px;}
#cr-conv-hub caption{text-align:left; padding:15px 20px 0; font-size:12.5px; color:var(--cr-text-soft); caption-side:top;}
#cr-conv-hub th,#cr-conv-hub td{padding:11px 20px; text-align:left; border-bottom:1px solid var(--cr-line);}
#cr-conv-hub th{background:var(--cr-mist); color:var(--cr-ink); font-size:12.5px; text-transform:uppercase; letter-spacing:.03em;}
#cr-conv-hub tr:last-child td{border-bottom:none;}
/* ---------- FAQ ---------- */
#cr-conv-hub .cr-faq{background:#fff; border:1px solid var(--cr-line); border-radius:16px; padding:0 20px; box-shadow:0 1px 2px rgba(6,78,59,.06), 0 8px 22px -12px rgba(6,78,59,.18);}
#cr-conv-hub details.cr-faq-item{border-top:1px solid var(--cr-line); padding:12px 0;}
#cr-conv-hub details.cr-faq-item:first-child{border-top:none;}
#cr-conv-hub details.cr-faq-item summary{font-size:14.5px; font-weight:700; cursor:pointer; list-style:none; color:var(--cr-ink); display:flex; gap:8px;}
#cr-conv-hub details.cr-faq-item summary::-webkit-details-marker{display:none;}
#cr-conv-hub details.cr-faq-item summary::before{content:"+"; color:var(--cr-leaf-dark); font-size:16px; width:18px; flex-shrink:0;}
#cr-conv-hub details.cr-faq-item[open] summary::before{content:"";}
#cr-conv-hub details.cr-faq-item p{font-size:14px; color:var(--cr-text-soft); line-height:1.55; margin:8px 0 0 26px;}
/* ---------- tool grid ---------- */
#cr-conv-hub .cr-toolgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}
#cr-conv-hub .cr-toolcard{
display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--cr-line);
border-radius:14px; padding:15px; text-decoration:none; color:var(--cr-ink); transition:all .15s;
box-shadow:0 1px 2px rgba(6,78,59,.06), 0 6px 18px -10px rgba(6,78,59,.18);
}
#cr-conv-hub .cr-toolcard:hover{border-color:var(--cr-leaf); transform:translateY(-2px); box-shadow:0 2px 4px rgba(6,78,59,.06), 0 16px 32px -16px rgba(6,78,59,.28);}
#cr-conv-hub .cr-toolcard .cr-badge{width:36px; height:36px; border-radius:10px; background:var(--cr-mist); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
#cr-conv-hub .cr-toolcard .cr-badge svg{width:19px; height:19px; stroke:var(--cr-leaf-dark); fill:none;}
#cr-conv-hub .cr-toolcard > div{min-width:0; flex:1;}
#cr-conv-hub .cr-toolcard h3{font-size:14.5px; margin:0 0 3px;}
#cr-conv-hub .cr-toolcard p{font-size:12.5px; color:var(--cr-text-soft); margin:0; line-height:1.45;}
#cr-conv-hub .cr-toolcard .cr-arrow{margin-left:auto; color:var(--cr-leaf-dark); flex-shrink:0; align-self:center; font-size:15px; line-height:1;}
#cr-conv-hub .cr-toolcard .cr-arrow::after{content:"\2192";}
/* ---------- CTA + footer ---------- */
#cr-conv-hub .cr-cta{margin:32px 0 0; padding:24px 28px; border-radius:20px; background:var(--cr-ink); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; content-visibility:auto; contain-intrinsic-size:auto 130px;}
#cr-conv-hub .cr-cta h3{color:#fff; font-size:18px;}
#cr-conv-hub .cr-cta p{color:#A7F3D0; font-size:13.5px; margin:4px 0 0;}
#cr-conv-hub .cr-cta a{background:#fff; color:var(--cr-ink); text-decoration:none; font-weight:700; font-size:13.5px; padding:11px 18px; border-radius:12px; flex-shrink:0;}
#cr-conv-hub .cr-cta a:hover{background:var(--cr-mist);}
#cr-conv-hub .cr-foot{font-size:12px; color:var(--cr-text-soft); margin:16px 0 24px; line-height:1.5; text-align:left;}
/* ---------- focus & motion ---------- */
#cr-conv-hub .cr-btn:focus-visible,
#cr-conv-hub .cr-toolcard:focus-visible,
#cr-conv-hub summary:focus-visible,
#cr-conv-hub select:focus-visible,
#cr-conv-hub input[type=number]:focus-visible,
#cr-conv-hub .cr-cta a:focus-visible{outline:3px solid rgba(22,163,74,.4); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
#cr-conv-hub *, #cr-conv-hub *::before, #cr-conv-hub *::after{animation:none !important; transition:none !important;}
#cr-conv-hub .cr-btn:hover, #cr-conv-hub .cr-step-card:hover, #cr-conv-hub .cr-toolcard:hover{transform:none;}
}
@media(max-width:480px){
#cr-conv-hub .cr-inner{padding:24px 18px 4px;}
#cr-conv-hub .cr-cta{margin:20px 0; flex-direction:column; align-items:flex-start; content-visibility:visible;}
#cr-conv-hub .cr-cta a{width:100%; text-align:center;}
#cr-conv-hub .cr-row2{grid-template-columns:1fr;}
#cr-conv-hub .cr-stat-row{grid-template-columns:1fr;}
#cr-conv-hub .cr-foot{margin:14px 0 20px;}
}
/* ---------- conversions hub extras ---------- */
#cr-conv-hub .cr-converters{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:28px; align-items:start;}
@media(max-width:880px){#cr-conv-hub .cr-converters{grid-template-columns:1fr;}}
#cr-conv-hub .cr-wide{grid-column:1 / -1;}
#cr-conv-hub .cr-card h2{display:flex; align-items:center; gap:10px;}
#cr-conv-hub .cr-ico{width:34px; height:34px; border-radius:10px; background:var(--cr-mist); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
#cr-conv-hub .cr-ico svg{width:18px; height:18px; stroke:var(--cr-ink); fill:none;}
#cr-conv-hub .cr-hint{font-size:12.5px; color:var(--cr-text-soft); margin-top:6px;}
#cr-conv-hub .cr-ec-us{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:700; color:var(--cr-ink);}
#cr-conv-hub .cr-facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
@media(max-width:640px){#cr-conv-hub .cr-facts{grid-template-columns:1fr;}}
#cr-conv-hub .cr-fact{background:#fff; border:1px solid var(--cr-line); border-radius:14px; padding:14px 16px; font-size:13px; color:var(--cr-text-soft); line-height:1.5; box-shadow:0 1px 2px rgba(6,78,59,.06), 0 8px 22px -12px rgba(6,78,59,.18);}
#cr-conv-hub .cr-fact strong{display:block; font-family:var(--cr-display); font-size:15px; color:var(--cr-ink); margin-bottom:4px; letter-spacing:-.01em;}
#cr-conv-hub .cr-ref-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start;}
@media(max-width:880px){#cr-conv-hub .cr-ref-grid{grid-template-columns:1fr;}}
/* grid overflow hardening (narrow phones incl. Samsung) */
#cr-conv-hub .cr-calc-grid,#cr-conv-hub .cr-grid,#cr-conv-hub .cr-layout,#cr-conv-hub .cr-row2,#cr-conv-hub .cr-stat-grid,#cr-conv-hub .cr-stat-row{min-width:0;}
#cr-conv-hub .cr-card,#cr-conv-hub .cr-col,#cr-conv-hub .cr-viz,#cr-conv-hub .cr-results,#cr-conv-hub .cr-config-summary,#cr-conv-hub .cr-ref-grid{min-width:0; max-width:100%;}
@media(prefers-reduced-motion:reduce){ }
/* ============================================================
Hydroponic Nutrient Calculator - scoped to #nutrient-calc
============================================================ */
#nutrient-calc{
--nc-ink:#064E3B; --nc-ink-2:#064E3B;
--nc-mist:#F9FAFB; --nc-paper:#FFFFFF;
--nc-leaf:#16A34A; --nc-leaf-dark:#064E3B;
--nc-line:#E5E7EB; --nc-text:#374151; --nc-text-soft:#6B7280;
--nc-soil:#9CA3AF;
--nc-amber:#D97706; --nc-amber-dark:#B45309;
--nc-rust:#B45309; --nc-rust-dark:#92400E;
--nc-hero-bg:url('https://mistculture.com/wp-content/uploads/2026/08/Mistculture-Internal-page-Hero-Background-scaled.webp');
--nc-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
--nc-display:"Space Grotesk",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
font-family:var(--nc-font);
color:var(--nc-text);
background:linear-gradient(180deg,#FFFFFF 0%,var(--nc-mist) 320px,var(--nc-mist) 100%);
border:1px solid var(--nc-line); border-radius:20px; max-width:1320px; margin:0 auto;
overflow:hidden; position:relative;
box-shadow:0 1px 2px rgba(0,0,0,.04), 0 24px 56px -28px rgba(6,78,59,.22);
}
#nutrient-calc *{box-sizing:border-box;}
#nutrient-calc h1,#nutrient-calc h2,#nutrient-calc h3,#nutrient-calc h4{
font-family:var(--nc-display); font-weight:650; margin:0; color:var(--nc-ink); letter-spacing:-.02em;
}
/* ambient background shapes */
#nutrient-calc::before,#nutrient-calc::after{content:""; position:absolute; z-index:0; pointer-events:none; border-radius:50%;}
#nutrient-calc::before{width:460px; height:460px; top:-140px; right:-120px; background:radial-gradient(circle at center,rgba(22,163,74,.14),rgba(22,163,74,0) 70%);}
#nutrient-calc::after{width:560px; height:560px; bottom:120px; left:-180px; background:radial-gradient(circle at center,rgba(37,99,235,.10),rgba(37,99,235,0) 70%);}
#nutrient-calc .nc-inner{position:relative; z-index:1; padding:34px 32px 8px;}
/* ---------- header / hero (Tools Hub parity) ---------- */
#nutrient-calc .th-head{position:relative; padding-bottom:12px; background:var(--nc-hero-bg) center 22% / cover no-repeat;}
#nutrient-calc .th-head::before{content:""; position:absolute; inset:-38px -38px 0; z-index:0; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.80) 0%,rgba(250,250,252,.86) 50%,rgba(250,250,252,.97) 100%);}
#nutrient-calc .th-head::after{content:""; position:absolute; inset:-38px -38px 0; z-index:0; pointer-events:none; background-image:linear-gradient(rgba(6,78,59,.05) 1px, transparent 1px),linear-gradient(90deg, rgba(6,78,59,.05) 1px, transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(720px 380px at 74% 8%,#000,transparent 80%); mask-image:radial-gradient(720px 380px at 74% 8%,#000,transparent 80%);}
#nutrient-calc .th-hero{position:relative; z-index:1; display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;}
#nutrient-calc .th-eyebrow{display:flex; align-items:center; gap:9px; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:#15803D; font-weight:700; margin-bottom:12px;}
#nutrient-calc .th-dot{width:8px; height:8px; border-radius:2px; background:var(--nc-leaf); box-shadow:0 0 0 4px rgba(22,163,74,.14); flex-shrink:0;}
#nutrient-calc h1{font-size:38px; line-height:1.08; max-width:14ch;}
#nutrient-calc .th-sub{font-size:15px; color:var(--nc-text-soft); margin:12px 0 0; line-height:1.65; max-width:58ch;}
#nutrient-calc .th-sub strong{color:var(--nc-ink-2);}
#nutrient-calc .th-hero-ctas{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}
#nutrient-calc .th-hero-btn{display:inline-flex; align-items:center; gap:8px; background:var(--nc-leaf); color:#fff; font-size:13.5px; font-weight:700; text-decoration:none; padding:12px 18px; border-radius:12px; transition:all .15s;}
#nutrient-calc .th-hero-btn:hover{background:var(--nc-ink-2); transform:translateY(-1px);}
#nutrient-calc .th-hero-btn.th-hero-btn--ghost{background:rgba(255,255,255,.62); color:var(--nc-ink-2); border:1px solid rgba(255,255,255,.7); box-shadow:0 6px 18px -8px rgba(6,78,59,.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
#nutrient-calc .th-hero-btn.th-hero-btn--ghost:hover{border-color:var(--nc-leaf); color:var(--nc-leaf);}
#nutrient-calc .th-hero-trust{display:flex; gap:18px; flex-wrap:wrap; list-style:none; margin:18px 0 0; padding:14px 0 0; border-top:1px solid var(--nc-line);}
#nutrient-calc .th-hero-trust li{font-size:11px; color:var(--nc-text-soft); font-weight:600; display:flex; align-items:center; gap:6px;}
#nutrient-calc .th-hero-trust li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--nc-leaf);}
#nutrient-calc .th-viz{position:relative; overflow:hidden; background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.7); border-radius:20px; padding:18px; box-shadow:0 14px 36px -16px rgba(6,78,59,.28), inset 0 1px 0 rgba(255,255,255,.85); backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#nutrient-calc .th-viz{background:rgba(255,255,255,.95);}}
#nutrient-calc .th-viz::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--nc-leaf),#2563EB);}
#nutrient-calc .th-viz-head{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin-bottom:6px;}
#nutrient-calc .th-viz-brand{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:var(--nc-ink-2);}
#nutrient-calc .th-viz-brand svg{width:18px; height:18px; flex-shrink:0;}
#nutrient-calc .th-viz-live{display:inline-flex; align-items:center; gap:6px; font-size:9.5px; font-weight:700; color:#15803D; letter-spacing:.09em; text-transform:uppercase; background:#F0FDF4; border:1px solid #BBF7D0; padding:4px 8px; border-radius:999px;}
#nutrient-calc .th-viz-live i{width:6px; height:6px; border-radius:50%; background:var(--nc-leaf); animation:thpulse-nc 1.6s ease-in-out infinite;}
@keyframes thpulse-nc{0%,100%{opacity:1;} 50%{opacity:.3;}}
#nutrient-calc .th-viz-sub{font-size:10.5px; color:var(--nc-text-soft); margin:0 0 6px;}
#nutrient-calc .th-viz-row{display:grid; grid-template-columns:60px minmax(0,1fr) 1.25fr 30px; align-items:center; gap:10px; padding:8px 0; border-top:1px dashed var(--nc-line);}
#nutrient-calc .th-viz-lab{font-size:10.5px; color:var(--nc-text-soft); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; text-transform:uppercase; letter-spacing:.05em;}
#nutrient-calc .th-viz-val{font-size:13px; font-weight:700; color:var(--nc-ink-2); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:nowrap;}
#nutrient-calc .th-viz-val em{font-style:normal; font-size:10px; color:var(--nc-text-soft); font-weight:600; margin-left:2px;}
#nutrient-calc .th-viz-track{height:6px; border-radius:999px; background:rgba(15,23,42,.06); overflow:hidden;}
#nutrient-calc .th-viz-fill{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--nc-leaf),var(--nc-ink-2));}
#nutrient-calc .th-viz-fill.th-viz-fill--blue{background:linear-gradient(90deg,#60A5FA,#2563EB);}
#nutrient-calc .th-viz-fill.th-viz-fill--amber{background:linear-gradient(90deg,#FBBF24,#D97706);}
#nutrient-calc .th-viz-ok{font-size:9px; font-weight:700; color:var(--nc-ink-2); text-align:right; letter-spacing:.04em;}
#nutrient-calc .th-viz-foot{font-size:10.5px; color:var(--nc-text-soft); margin-top:10px; line-height:1.5;}
#nutrient-calc .th-viz-chart{margin-top:12px; padding-top:10px; border-top:1px dashed var(--nc-line);}
#nutrient-calc .th-viz-chart svg{width:100%; height:40px; display:block;}
#nutrient-calc .th-viz-chart-cap{display:flex; justify-content:space-between; gap:8px; font-size:9.5px; color:var(--nc-text-soft); letter-spacing:.06em; text-transform:uppercase; margin-top:4px;}
@media(max-width:960px){#nutrient-calc .th-hero{grid-template-columns:1fr; gap:24px;} #nutrient-calc h1{max-width:none;}}
@media(max-width:560px){#nutrient-calc .th-head::before,#nutrient-calc .th-head::after{inset:-26px -18px 0;} #nutrient-calc h1{font-size:26px;} #nutrient-calc .th-hero-ctas .th-hero-btn{flex:1 1 auto;} #nutrient-calc .th-hero-trust{gap:10px 16px;} #nutrient-calc .th-viz-row{grid-template-columns:56px minmax(0,1fr) 1.25fr 0; gap:8px;} #nutrient-calc .th-viz-ok{display:none;}}
/* ---------- calculator grid ---------- */
#nutrient-calc .nc-calc-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:28px; align-items:start;}
@media(max-width:880px){#nutrient-calc .nc-calc-grid{grid-template-columns:1fr;}}
#nutrient-calc .nc-card{
background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.75); border-radius:20px; padding:24px;
box-shadow:0 1px 2px rgba(6,78,59,.06), 0 2px 6px rgba(0,0,0,.04), 0 12px 30px -16px rgba(6,78,59,.22);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
#nutrient-calc .nc-card h2{font-size:17px; margin-bottom:16px;}
#nutrient-calc .nc-card .nc-card-sub{font-size:13.5px; color:var(--nc-text-soft); margin:-10px 0 18px;}
/* ---------- form fields ---------- */
#nutrient-calc .nc-field{margin-bottom:16px;}
#nutrient-calc label{display:block; font-size:13px; font-weight:700; color:var(--nc-ink); margin-bottom:6px;}
#nutrient-calc label .nc-step{
display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
border-radius:50%; background:var(--nc-leaf); color:#fff; font-size:11px; font-weight:700; margin-right:7px;
}
#nutrient-calc select,#nutrient-calc input[type=number]{
width:100%; padding:11px 12px; border:1px solid var(--nc-line); border-radius:12px; font-size:16px;
color:var(--nc-text); background:#fff; font-family:inherit;
}
#nutrient-calc select{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
appearance:none; -webkit-appearance:none;
}
#nutrient-calc select:focus,#nutrient-calc input[type=number]:focus{
outline:3px solid rgba(22,163,74,.18); outline-offset:0; border-color:var(--nc-leaf);
}
#nutrient-calc .nc-row2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
#nutrient-calc .nc-error{display:none; color:#B45309; background:#FEF3C7; border-radius:8px; padding:10px 12px; font-size:13.5px; font-weight:600; margin-top:8px;}
#nutrient-calc .nc-error.show{display:block;}
#nutrient-calc .nc-btn{
width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
background:var(--nc-ink); color:#fff; border:none; border-radius:12px; padding:13px;
font-size:14.5px; font-weight:700; cursor:pointer; margin-top:4px; transition:all .15s;
}
#nutrient-calc .nc-btn:hover{background:var(--nc-ink-2); transform:translateY(-1px);}
#nutrient-calc .nc-btn svg{width:16px; height:16px; stroke:#fff;}
#nutrient-calc .nc-btn.nc-btn-outline{background:#fff; border:1px solid var(--nc-line); color:var(--nc-ink); margin-top:12px; box-shadow:0 4px 14px -8px rgba(6,78,59,.18);}
#nutrient-calc .nc-btn.nc-btn-outline svg{stroke:var(--nc-ink);}
#nutrient-calc .nc-btn.nc-btn-outline:hover{border-color:var(--nc-leaf); color:var(--nc-leaf);}
/* ---------- results ---------- */
#nutrient-calc .nc-results{display:none;}
#nutrient-calc .nc-results.show{display:block;}
#nutrient-calc .nc-results-placeholder{
display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
min-height:300px; color:var(--nc-text-soft); border:1.5px dashed var(--nc-line); border-radius:16px; padding:30px;
}
#nutrient-calc .nc-results-placeholder svg{margin-bottom:14px; opacity:.5; stroke:var(--nc-leaf-dark);}
#nutrient-calc .nc-results-placeholder p{margin:0; font-size:14px;}
#nutrient-calc .nc-gauge-wrap{display:flex; flex-direction:column; align-items:center; text-align:center; padding:6px 0 20px;}
#nutrient-calc .nc-gauge{position:relative; width:180px; height:180px;}
#nutrient-calc .nc-gauge svg{width:100%; height:100%;}
#nutrient-calc .nc-gauge-value{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
#nutrient-calc .nc-gauge-value strong{font-size:28px; color:var(--nc-ink); line-height:1.1; font-family:var(--nc-display);}
#nutrient-calc .nc-gauge-value span{font-size:12px; color:var(--nc-text-soft); margin-top:2px;}
#nutrient-calc .nc-compare{margin-top:4px;}
#nutrient-calc .nc-compare-row{margin-bottom:14px;}
#nutrient-calc .nc-compare-label{display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; color:var(--nc-ink); font-weight:700;}
#nutrient-calc .nc-compare-track{width:100%; height:11px; border-radius:999px; background:var(--nc-mist); overflow:hidden;}
#nutrient-calc .nc-compare-fill{height:100%; border-radius:999px; width:0%; transition:width .8s ease;}
#nutrient-calc .nc-compare-fill.soil{background:var(--nc-soil);}
#nutrient-calc .nc-compare-fill.hydro{background:linear-gradient(90deg,var(--nc-leaf),var(--nc-ink));}
#nutrient-calc .nc-stat-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px;}
#nutrient-calc .nc-stat{background:var(--nc-mist); border:1px solid var(--nc-line); border-radius:12px; padding:13px 15px;}
#nutrient-calc .nc-stat span{display:block; font-size:12px; color:var(--nc-text-soft); margin-bottom:4px;}
#nutrient-calc .nc-stat strong{font-size:19px; color:var(--nc-ink);}
#nutrient-calc .nc-config-summary{margin-top:16px; padding-top:14px; border-top:1px solid var(--nc-line); font-size:13px; color:var(--nc-text-soft);}
#nutrient-calc .nc-config-summary strong{color:var(--nc-ink);}
/* ---------- sections ---------- */
#nutrient-calc .nc-section{margin:44px 0 0;}
#nutrient-calc .nc-section-head{margin-bottom:20px;}
#nutrient-calc .nc-section-head h2{font-size:21px;}
#nutrient-calc .nc-section-head p{font-size:14px; color:var(--nc-text-soft); margin:8px 0 0; line-height:1.55;}
#nutrient-calc .nc-steps{display:grid; grid-template-columns:1fr; gap:16px;}
@media(min-width:720px){#nutrient-calc .nc-steps{grid-template-columns:repeat(3,minmax(0,1fr));}}
#nutrient-calc .nc-step-card{
background:#fff; border:1px solid var(--nc-line); border-radius:16px; padding:20px;
box-shadow:0 1px 2px rgba(6,78,59,.06), 0 2px 6px rgba(0,0,0,.04), 0 10px 26px -14px rgba(6,78,59,.20);
transition:all .15s;
}
#nutrient-calc .nc-step-card:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(6,78,59,.06), 0 18px 36px -18px rgba(6,78,59,.28);}
#nutrient-calc .nc-step-card h3{font-size:16px; margin-bottom:8px;}
#nutrient-calc .nc-step-card p{font-size:13.5px; color:var(--nc-text-soft); margin:0; line-height:1.55;}
#nutrient-calc .nc-step-icon{width:40px; height:40px; border-radius:12px; background:var(--nc-mist); display:flex; align-items:center; justify-content:center; margin-bottom:12px; color:var(--nc-leaf-dark);}
#nutrient-calc .nc-step-icon svg{stroke:var(--nc-leaf-dark);}
#nutrient-calc .nc-factors-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:640px){#nutrient-calc .nc-factors-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
#nutrient-calc .nc-factor-card{background:#fff; border:1px solid var(--nc-line); border-radius:16px; padding:18px; box-shadow:0 1px 2px rgba(6,78,59,.06), 0 8px 22px -12px rgba(6,78,59,.18);}
#nutrient-calc .nc-factor-card h3{font-size:15.5px; margin-bottom:8px;}
#nutrient-calc .nc-factor-card p{font-size:13.5px; color:var(--nc-text-soft); margin:0; line-height:1.55;}
/* ---------- table ---------- */
#nutrient-calc .nc-table-wrap{background:#fff; border:1px solid var(--nc-line); border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(6,78,59,.06), 0 10px 26px -14px rgba(6,78,59,.20); overflow-x:auto;}
#nutrient-calc table{width:100%; border-collapse:collapse; font-size:14px; min-width:480px;}
#nutrient-calc caption{text-align:left; padding:15px 20px 0; font-size:12.5px; color:var(--nc-text-soft); caption-side:top;}
#nutrient-calc th,#nutrient-calc td{padding:11px 20px; text-align:left; border-bottom:1px solid var(--nc-line);}
#nutrient-calc th{background:var(--nc-mist); color:var(--nc-ink); font-size:12.5px; text-transform:uppercase; letter-spacing:.03em;}
#nutrient-calc tr:last-child td{border-bottom:none;}
/* ---------- FAQ ---------- */
#nutrient-calc .nc-faq{background:#fff; border:1px solid var(--nc-line); border-radius:16px; padding:0 20px; box-shadow:0 1px 2px rgba(6,78,59,.06), 0 8px 22px -12px rgba(6,78,59,.18);}
#nutrient-calc details.nc-faq-item{border-top:1px solid var(--nc-line); padding:12px 0;}
#nutrient-calc details.nc-faq-item:first-child{border-top:none;}
#nutrient-calc details.nc-faq-item summary{font-size:14.5px; font-weight:700; cursor:pointer; list-style:none; color:var(--nc-ink); display:flex; gap:8px;}
#nutrient-calc details.nc-faq-item summary::-webkit-details-marker{display:none;}
#nutrient-calc details.nc-faq-item summary::before{content:"+"; color:var(--nc-leaf-dark); font-size:16px; width:18px; flex-shrink:0;}
#nutrient-calc details.nc-faq-item[open] summary::before{content:"";}
#nutrient-calc details.nc-faq-item p{font-size:14px; color:var(--nc-text-soft); line-height:1.55; margin:8px 0 0 26px;}
/* ---------- tool grid ---------- */
#nutrient-calc .nc-toolgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}
#nutrient-calc .nc-toolcard{
display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--nc-line);
border-radius:14px; padding:15px; text-decoration:none; color:var(--nc-ink); transition:all .15s;
box-shadow:0 1px 2px rgba(6,78,59,.06), 0 6px 18px -10px rgba(6,78,59,.18);
}
#nutrient-calc .nc-toolcard:hover{border-color:var(--nc-leaf); transform:translateY(-2px); box-shadow:0 2px 4px rgba(6,78,59,.06), 0 16px 32px -16px rgba(6,78,59,.28);}
#nutrient-calc .nc-toolcard .nc-badge{width:36px; height:36px; border-radius:10px; background:var(--nc-mist); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
#nutrient-calc .nc-toolcard .nc-badge svg{width:19px; height:19px; stroke:var(--nc-leaf-dark); fill:none;}
#nutrient-calc .nc-toolcard > div{min-width:0; flex:1;}
#nutrient-calc .nc-toolcard h3{font-size:14.5px; margin:0 0 3px;}
#nutrient-calc .nc-toolcard p{font-size:12.5px; color:var(--nc-text-soft); margin:0; line-height:1.45;}
#nutrient-calc .nc-toolcard .nc-arrow{margin-left:auto; color:var(--nc-leaf-dark); flex-shrink:0; align-self:center; font-size:15px; line-height:1;}
#nutrient-calc .nc-toolcard .nc-arrow::after{content:"\2192";}
/* ---------- CTA + footer ---------- */
#nutrient-calc .nc-cta{margin:32px 0 0; padding:24px 28px; border-radius:20px; background:var(--nc-ink); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; content-visibility:auto; contain-intrinsic-size:auto 130px;}
#nutrient-calc .nc-cta h3{color:#fff; font-size:18px;}
#nutrient-calc .nc-cta p{color:#A7F3D0; font-size:13.5px; margin:4px 0 0;}
#nutrient-calc .nc-cta a{background:#fff; color:var(--nc-ink); text-decoration:none; font-weight:700; font-size:13.5px; padding:11px 18px; border-radius:12px; flex-shrink:0;}
#nutrient-calc .nc-cta a:hover{background:var(--nc-mist);}
#nutrient-calc .nc-foot{font-size:12px; color:var(--nc-text-soft); margin:16px 0 24px; line-height:1.5; text-align:left;}
/* ---------- focus & motion ---------- */
#nutrient-calc .nc-btn:focus-visible,
#nutrient-calc .nc-toolcard:focus-visible,
#nutrient-calc summary:focus-visible,
#nutrient-calc select:focus-visible,
#nutrient-calc input[type=number]:focus-visible,
#nutrient-calc .nc-cta a:focus-visible{outline:3px solid rgba(22,163,74,.4); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
#nutrient-calc *, #nutrient-calc *::before, #nutrient-calc *::after{animation:none !important; transition:none !important;}
#nutrient-calc .nc-btn:hover, #nutrient-calc .nc-step-card:hover, #nutrient-calc .nc-toolcard:hover{transform:none;}
}
@media(max-width:480px){
#nutrient-calc .nc-inner{padding:24px 18px 4px;}
#nutrient-calc .nc-cta{margin:20px 0; flex-direction:column; align-items:flex-start; content-visibility:visible;}
#nutrient-calc .nc-cta a{width:100%; text-align:center;}
#nutrient-calc .nc-row2{grid-template-columns:1fr;}
#nutrient-calc .nc-stat-row{grid-template-columns:1fr;}
#nutrient-calc .nc-foot{margin:14px 0 20px;}
}
/* ---------- accent rules ---------- */
#nutrient-calc .nc-error{color:var(--nc-rust-dark); background:#FEE2E2; border-radius:8px; padding:10px 12px; font-size:13.5px; font-weight:600;}
#nutrient-calc .nc-bar-p{background:var(--nc-amber);}
/* ---------- nutrient calculator components ---------- */
#nutrient-calc .nc-layout{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:28px; align-items:start;}
@media(max-width:880px){#nutrient-calc .nc-layout{grid-template-columns:1fr;}}
#nutrient-calc .nc-col{display:flex; flex-direction:column; gap:24px;}
#nutrient-calc .nc-card{background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.75); border-radius:20px; padding:24px; box-shadow:0 1px 2px rgba(6,78,59,.06), 0 2px 6px rgba(0,0,0,.04), 0 12px 30px -16px rgba(6,78,59,.22); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
#nutrient-calc .nc-card h2{font-size:17px; margin-bottom:16px;}
#nutrient-calc .nc-ic{display:inline-flex; width:30px; height:30px; border-radius:9px; background:var(--nc-mist); align-items:center; justify-content:center; margin-right:9px; vertical-align:middle;}
#nutrient-calc .nc-ic svg{width:17px; height:17px; stroke:var(--nc-ink); fill:none;}
#nutrient-calc .nc-crops{display:flex; flex-wrap:wrap; gap:8px;}
#nutrient-calc .nc-crop{border:1px solid var(--nc-line); background:#fff; color:var(--nc-text); font-size:12.5px; font-weight:600; padding:8px 12px; border-radius:11px; cursor:pointer; font-family:inherit; transition:all .15s; display:inline-flex; align-items:center; gap:6px;}
#nutrient-calc .nc-crop:hover{border-color:var(--nc-leaf); color:var(--nc-ink);}
#nutrient-calc .nc-crop.nc-picked{background:var(--nc-ink); border-color:var(--nc-ink); color:#fff; box-shadow:0 6px 16px -8px rgba(6,78,59,.4);}
#nutrient-calc .nc-field-row{display:flex; gap:10px; align-items:center;}
#nutrient-calc .nc-field-row input{flex:1;}
#nutrient-calc .nc-iconbtn{width:44px; height:44px; border:1px solid var(--nc-line); background:#fff; border-radius:12px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--nc-ink); flex-shrink:0; transition:all .15s;}
#nutrient-calc .nc-iconbtn svg{width:18px; height:18px; stroke:var(--nc-ink);}
#nutrient-calc .nc-iconbtn:hover{border-color:var(--nc-leaf);}
#nutrient-calc .nc-btn2{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#fff; border:1px solid var(--nc-line); color:var(--nc-ink); border-radius:12px; padding:12px 14px; font-size:14px; font-weight:700; cursor:pointer; margin-top:12px; box-shadow:0 4px 14px -8px rgba(6,78,59,.18); font-family:inherit; transition:all .15s;}
#nutrient-calc .nc-btn2 svg{width:16px; height:16px; stroke:var(--nc-ink);}
#nutrient-calc .nc-btn2:hover{border-color:var(--nc-leaf); color:var(--nc-leaf);}
#nutrient-calc .nc-btn2:hover svg{stroke:var(--nc-leaf);}
#nutrient-calc .nc-custom-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:8px;}
@media(max-width:640px){#nutrient-calc .nc-custom-grid{grid-template-columns:1fr;}}
#nutrient-calc input[type=range]{width:100%; accent-color:var(--nc-leaf);}
#nutrient-calc .nc-slider-labels{display:flex; justify-content:space-between; font-size:11px; color:var(--nc-text-soft); margin-top:4px;}
#nutrient-calc .nc-ringwrap{display:flex; flex-direction:column; align-items:center; text-align:center; padding:10px 0 18px;}
#nutrient-calc .nc-ringwrap svg{width:130px; height:130px;}
#nutrient-calc .nc-ring-label{font-size:12px; color:var(--nc-text-soft); margin-top:6px; line-height:1.5;}
#nutrient-calc .nc-npk-head{display:flex; justify-content:space-between; font-size:13px; font-weight:700; color:var(--nc-ink); margin-bottom:10px;}
#nutrient-calc .nc-bar-row{margin-bottom:14px;}
#nutrient-calc .nc-bar-top{display:flex; justify-content:space-between; font-size:12px; margin-bottom:6px; color:var(--nc-ink); font-weight:600;}
#nutrient-calc .nc-bar-track{width:100%; height:11px; border-radius:999px; background:var(--nc-mist); overflow:hidden;}
#nutrient-calc .nc-bar-fill{height:100%; border-radius:999px; width:0%; transition:width .8s ease;}
#nutrient-calc .nc-bar-fill.nc-bar-n{background:linear-gradient(90deg,#22C55E,var(--nc-ink));}
#nutrient-calc .nc-bar-fill.nc-bar-p{background:linear-gradient(90deg,var(--nc-amber),#B45309);}
#nutrient-calc .nc-bar-fill.nc-bar-k{background:linear-gradient(90deg,#60A5FA,var(--nc-ink));}
#nutrient-calc .nc-recipe{background:var(--nc-mist); border:1px solid var(--nc-line); border-radius:14px; padding:6px 16px; margin-top:14px;}
#nutrient-calc .nc-recipe h3{font-size:14px; padding:10px 0 2px;}
#nutrient-calc .nc-recipe-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--nc-line); font-size:13.5px;}
#nutrient-calc .nc-recipe-row:last-child{border-bottom:none;}
#nutrient-calc .nc-amt{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:700; color:var(--nc-ink);}
#nutrient-calc .nc-hint{font-size:12.5px; color:var(--nc-text-soft); margin-top:8px; line-height:1.5;}
#nutrient-calc .nc-edu-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
@media(max-width:640px){#nutrient-calc .nc-edu-grid{grid-template-columns:1fr;}}
#nutrient-calc .nc-edu-card{background:#fff; border:1px solid var(--nc-line); border-radius:16px; padding:18px; box-shadow:0 1px 2px rgba(6,78,59,.06), 0 8px 22px -12px rgba(6,78,59,.18);}
#nutrient-calc .nc-edu-card h3{font-size:15.5px; margin-bottom:8px;}
#nutrient-calc .nc-edu-card p{font-size:13.5px; color:var(--nc-text-soft); margin:0; line-height:1.55;}
#nutrient-calc .nc-ref-sub{font-size:14px; color:var(--nc-text-soft); margin:8px 0 0; line-height:1.55;}
/* grid overflow hardening (narrow phones incl. Samsung) */
#nutrient-calc .nc-calc-grid,#nutrient-calc .nc-grid,#nutrient-calc .nc-layout,#nutrient-calc .nc-row2,#nutrient-calc .nc-stat-grid,#nutrient-calc .nc-stat-row{min-width:0;}
#nutrient-calc .nc-card,#nutrient-calc .nc-col,#nutrient-calc .nc-viz,#nutrient-calc .nc-results,#nutrient-calc .nc-config-summary,#nutrient-calc .nc-ref-grid{min-width:0; max-width:100%;}
@media(prefers-reduced-motion:reduce){ }
/* ============================================================
Hydroponic & Aeroponic Plant Selection Tool - scoped to #plant-selection-tool
============================================================ */
#plant-selection-tool{
--ps-ink:#064E3B; --ps-ink-2:#064E3B;
--ps-mist:#F9FAFB; --ps-paper:#FFFFFF;
--ps-leaf:#16A34A; --ps-leaf-dark:#064E3B;
--ps-line:#E5E7EB; --ps-text:#374151; --ps-text-soft:#6B7280;
--ps-soil:#9CA3AF;
--ps-amber:#D97706; --ps-amber-dark:#B45309;
--ps-rust:#B45309; --ps-rust-dark:#92400E;
--ps-hero-bg:url('https://mistculture.com/wp-content/uploads/2026/08/Mistculture-Internal-page-Hero-Background-scaled.webp');
--ps-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
--ps-display:"Space Grotesk",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
font-family:var(--ps-font);
color:var(--ps-text);
background:linear-gradient(180deg,#FFFFFF 0%,var(--ps-mist) 320px,var(--ps-mist) 100%);
border:1px solid var(--ps-line); border-radius:20px; max-width:1320px; margin:0 auto;
overflow:hidden; position:relative;
box-shadow:0 1px 2px rgba(0,0,0,.04), 0 24px 56px -28px rgba(6,78,59,.22);
}
#plant-selection-tool *{box-sizing:border-box;}
#plant-selection-tool h1,#plant-selection-tool h2,#plant-selection-tool h3,#plant-selection-tool h4{
font-family:var(--ps-display); font-weight:650; margin:0; color:var(--ps-ink); letter-spacing:-.02em;
}
/* ambient background shapes */
#plant-selection-tool::before,#plant-selection-tool::after{content:""; position:absolute; z-index:0; pointer-events:none; border-radius:50%;}
#plant-selection-tool::before{width:460px; height:460px; top:-140px; right:-120px; background:radial-gradient(circle at center,rgba(22,163,74,.14),rgba(22,163,74,0) 70%);}
#plant-selection-tool::after{width:560px; height:560px; bottom:120px; left:-180px; background:radial-gradient(circle at center,rgba(37,99,235,.10),rgba(37,99,235,0) 70%);}
#plant-selection-tool .ps-inner{position:relative; z-index:1; padding:34px 32px 8px;}
/* ---------- header / hero (Tools Hub parity) ---------- */
#plant-selection-tool .th-head{position:relative; padding-bottom:12px; background:var(--ps-hero-bg) center 22% / cover no-repeat;}
#plant-selection-tool .th-head::before{content:""; position:absolute; inset:-38px -38px 0; z-index:0; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.80) 0%,rgba(250,250,252,.86) 50%,rgba(250,250,252,.97) 100%);}
#plant-selection-tool .th-head::after{content:""; position:absolute; inset:-38px -38px 0; z-index:0; pointer-events:none; background-image:linear-gradient(rgba(6,78,59,.05) 1px, transparent 1px),linear-gradient(90deg, rgba(6,78,59,.05) 1px, transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(720px 380px at 74% 8%,#000,transparent 80%); mask-image:radial-gradient(720px 380px at 74% 8%,#000,transparent 80%);}
#plant-selection-tool .th-hero{position:relative; z-index:1; display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;}
#plant-selection-tool .th-eyebrow{display:flex; align-items:center; gap:9px; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:#15803D; font-weight:700; margin-bottom:12px;}
#plant-selection-tool .th-dot{width:8px; height:8px; border-radius:2px; background:var(--ps-leaf); box-shadow:0 0 0 4px rgba(22,163,74,.14); flex-shrink:0;}
#plant-selection-tool h1{font-size:38px; line-height:1.08; max-width:14ch;}
#plant-selection-tool .th-sub{font-size:15px; color:var(--ps-text-soft); margin:12px 0 0; line-height:1.65; max-width:58ch;}
#plant-selection-tool .th-sub strong{color:var(--ps-ink-2);}
#plant-selection-tool .th-hero-ctas{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}
#plant-selection-tool .th-hero-btn{display:inline-flex; align-items:center; gap:8px; background:var(--ps-leaf); color:#fff; font-size:13.5px; font-weight:700; text-decoration:none; padding:12px 18px; border-radius:12px; transition:all .15s;}
#plant-selection-tool .th-hero-btn:hover{background:var(--ps-ink-2); transform:translateY(-1px);}
#plant-selection-tool .th-hero-btn.th-hero-btn--ghost{background:rgba(255,255,255,.62); color:var(--ps-ink-2); border:1px solid rgba(255,255,255,.7); box-shadow:0 6px 18px -8px rgba(6,78,59,.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
#plant-selection-tool .th-hero-btn.th-hero-btn--ghost:hover{border-color:var(--ps-leaf); color:var(--ps-leaf);}
#plant-selection-tool .th-hero-trust{display:flex; gap:18px; flex-wrap:wrap; list-style:none; margin:18px 0 0; padding:14px 0 0; border-top:1px solid var(--ps-line);}
#plant-selection-tool .th-hero-trust li{font-size:11px; color:var(--ps-text-soft); font-weight:600; display:flex; align-items:center; gap:6px;}
#plant-selection-tool .th-hero-trust li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--ps-leaf);}
#plant-selection-tool .th-viz{position:relative; overflow:hidden; background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.7); border-radius:20px; padding:18px; box-shadow:0 14px 36px -16px rgba(6,78,59,.28), inset 0 1px 0 rgba(255,255,255,.85); backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#plant-selection-tool .th-viz{background:rgba(255,255,255,.95);}}
#plant-selection-tool .th-viz::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--ps-leaf),#2563EB);}
#plant-selection-tool .th-viz-head{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin-bottom:6px;}
#plant-selection-tool .th-viz-brand{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:var(--ps-ink-2);}
#plant-selection-tool .th-viz-brand svg{width:18px; height:18px; flex-shrink:0;}
#plant-selection-tool .th-viz-live{display:inline-flex; align-items:center; gap:6px; font-size:9.5px; font-weight:700; color:#15803D; letter-spacing:.09em; text-transform:uppercase; background:#F0FDF4; border:1px solid #BBF7D0; padding:4px 8px; border-radius:999px;}
#plant-selection-tool .th-viz-live i{width:6px; height:6px; border-radius:50%; background:var(--ps-leaf); animation:thpulse-ps 1.6s ease-in-out infinite;}
@keyframes thpulse-ps{0%,100%{opacity:1;} 50%{opacity:.3;}}
#plant-selection-tool .th-viz-sub{font-size:10.5px; color:var(--ps-text-soft); margin:0 0 6px;}
#plant-selection-tool .th-viz-row{display:grid; grid-template-columns:60px minmax(0,1fr) 1.25fr 30px; align-items:center; gap:10px; padding:8px 0; border-top:1px dashed var(--ps-line);}
#plant-selection-tool .th-viz-lab{font-size:10.5px; color:var(--ps-text-soft); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; text-transform:uppercase; letter-spacing:.05em;}
#plant-selection-tool .th-viz-val{font-size:13px; font-weight:700; color:var(--ps-ink-2); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:nowrap;}
#plant-selection-tool .th-viz-val em{font-style:normal; font-size:10px; color:var(--ps-text-soft); font-weight:600; margin-left:2px;}
#plant-selection-tool .th-viz-track{height:6px; border-radius:999px; background:rgba(15,23,42,.06); overflow:hidden;}
#plant-selection-tool .th-viz-fill{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--ps-leaf),var(--ps-ink-2));}
#plant-selection-tool .th-viz-fill.th-viz-fill--blue{background:linear-gradient(90deg,#60A5FA,#2563EB);}
#plant-selection-tool .th-viz-fill.th-viz-fill--amber{background:linear-gradient(90deg,#FBBF24,#D97706);}
#plant-selection-tool .th-viz-ok{font-size:9px; font-weight:700; color:var(--ps-ink-2); text-align:right; letter-spacing:.04em;}
#plant-selection-tool .th-viz-foot{font-size:10.5px; color:var(--ps-text-soft); margin-top:10px; line-height:1.5;}
#plant-selection-tool .th-viz-chart{margin-top:12px; padding-top:10px; border-top:1px dashed var(--ps-line);}
#plant-selection-tool .th-viz-chart svg{width:100%; height:40px; display:block;}
#plant-selection-tool .th-viz-chart-cap{display:flex; justify-content:space-between; gap:8px; font-size:9.5px; color:var(--ps-text-soft); letter-spacing:.06em; text-transform:uppercase; margin-top:4px;}
@media(max-width:960px){#plant-selection-tool .th-hero{grid-template-columns:1fr; gap:24px;} #plant-selection-tool h1{max-width:none;}}
@media(max-width:560px){#plant-selection-tool .th-head::before,#plant-selection-tool .th-head::after{inset:-26px -18px 0;} #plant-selection-tool h1{font-size:26px;} #plant-selection-tool .th-hero-ctas .th-hero-btn{flex:1 1 auto;} #plant-selection-tool .th-hero-trust{gap:10px 16px;} #plant-selection-tool .th-viz-row{grid-template-columns:56px minmax(0,1fr) 1.25fr 0; gap:8px;} #plant-selection-tool .th-viz-ok{display:none;}}
/* ---------- calculator grid ---------- */
#plant-selection-tool .ps-calc-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:28px; align-items:start;}
@media(max-width:880px){#plant-selection-tool .ps-calc-grid{grid-template-columns:1fr;}}
#plant-selection-tool .ps-card{
background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.75); border-radius:20px; padding:24px;
box-shadow:0 1px 2px rgba(6,78,59,.06), 0 2px 6px rgba(0,0,0,.04), 0 12px 30px -16px rgba(6,78,59,.22);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
#plant-selection-tool .ps-card h2{font-size:17px; margin-bottom:16px;}
#plant-selection-tool .ps-card .ps-card-sub{font-size:13.5px; color:var(--ps-text-soft); margin:-10px 0 18px;}
/* ---------- form fields ---------- */
#plant-selection-tool .ps-field{margin-bottom:16px;}
#plant-selection-tool label{display:block; font-size:13px; font-weight:700; color:var(--ps-ink); margin-bottom:6px;}
#plant-selection-tool label .ps-step{
display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
border-radius:50%; background:var(--ps-leaf); color:#fff; font-size:11px; font-weight:700; margin-right:7px;
}
#plant-selection-tool select,#plant-selection-tool input[type=number]{
width:100%; padding:11px 12px; border:1px solid var(--ps-line); border-radius:12px; font-size:16px;
color:var(--ps-text); background:#fff; font-family:inherit;
}
#plant-selection-tool select{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
appearance:none; -webkit-appearance:none;
}
#plant-selection-tool select:focus,#plant-selection-tool input[type=number]:focus{
outline:3px solid rgba(22,163,74,.18); outline-offset:0; border-color:var(--ps-leaf);
}
#plant-selection-tool .ps-row2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
#plant-selection-tool .ps-error{display:none; color:#B45309; background:#FEF3C7; border-radius:8px; padding:10px 12px; font-size:13.5px; font-weight:600; margin-top:8px;}
#plant-selection-tool .ps-error.show{display:block;}
#plant-selection-tool .ps-btn{
width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
background:var(--ps-ink); color:#fff; border:none; border-radius:12px; padding:13px;
font-size:14.5px; font-weight:700; cursor:pointer; margin-top:4px; transition:all .15s;
}
#plant-selection-tool .ps-btn:hover{background:var(--ps-ink-2); transform:translateY(-1px);}
#plant-selection-tool .ps-btn svg{width:16px; height:16px; stroke:#fff;}
#plant-selection-tool .ps-btn.ps-btn-outline{background:#fff; border:1px solid var(--ps-line); color:var(--ps-ink); margin-top:12px; box-shadow:0 4px 14px -8px rgba(6,78,59,.18);}
#plant-selection-tool .ps-btn.ps-btn-outline svg{stroke:var(--ps-ink);}
#plant-selection-tool .ps-btn.ps-btn-outline:hover{border-color:var(--ps-leaf); color:var(--ps-leaf);}
/* ---------- results ---------- */
#plant-selection-tool .ps-results{display:none;}
#plant-selection-tool .ps-results.show{display:block;}
#plant-selection-tool .ps-results-placeholder{
display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
min-height:300px; color:var(--ps-text-soft); border:1.5px dashed var(--ps-line); border-radius:16px; padding:30px;
}
#plant-selection-tool .ps-results-placeholder svg{margin-bottom:14px; opacity:.5; stroke:var(--ps-leaf-dark);}
#plant-selection-tool .ps-results-placeholder p{margin:0; font-size:14px;}
#plant-selection-tool .ps-gauge-wrap{display:flex; flex-direction:column; align-items:center; text-align:center; padding:6px 0 20px;}
#plant-selection-tool .ps-gauge{position:relative; width:180px; height:180px;}
#plant-selection-tool .ps-gauge svg{width:100%; height:100%;}
#plant-selection-tool .ps-gauge-value{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
#plant-selection-tool .ps-gauge-value strong{font-size:28px; color:var(--ps-ink); line-height:1.1; font-family:var(--ps-display);}
#plant-selection-tool .ps-gauge-value span{font-size:12px; color:var(--ps-text-soft); margin-top:2px;}
#plant-selection-tool .ps-compare{margin-top:4px;}
#plant-selection-tool .ps-compare-row{margin-bottom:14px;}
#plant-selection-tool .ps-compare-label{display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; color:var(--ps-ink); font-weight:700;}
#plant-selection-tool .ps-compare-track{width:100%; height:11px; border-radius:999px; background:var(--ps-mist); overflow:hidden;}
#plant-selection-tool .ps-compare-fill{height:100%; border-radius:999px; width:0%; transition:width .8s ease;}
#plant-selection-tool .ps-compare-fill.soil{background:var(--ps-soil);}
#plant-selection-tool .ps-compare-fill.hydro{background:linear-gradient(90deg,var(--ps-leaf),var(--ps-ink));}
#plant-selection-tool .ps-stat-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px;}
#plant-selection-tool .ps-stat{background:var(--ps-mist); border:1px solid var(--ps-line); border-radius:12px; padding:13px 15px;}
#plant-selection-tool .ps-stat span{display:block; font-size:12px; color:var(--ps-text-soft); margin-bottom:4px;}
#plant-selection-tool .ps-stat strong{font-size:19px; color:var(--ps-ink);}
#plant-selection-tool .ps-config-summary{margin-top:16px; padding-top:14px; border-top:1px solid var(--ps-line); font-size:13px; color:var(--ps-text-soft);}
#plant-selection-tool .ps-config-summary strong{color:var(--ps-ink);}
/* ---------- sections ---------- */
#plant-selection-tool .ps-section{margin:44px 0 0;}
#plant-selection-tool .ps-section h2{display:flex; align-items:center; gap:10px; font-size:21px;}
#plant-selection-tool .ps-section h2 svg{width:20px; height:20px; flex-shrink:0; stroke:var(--ps-leaf-dark); fill:none;}
#plant-selection-tool .ps-section-head{margin-bottom:20px;}
#plant-selection-tool .ps-section-head h2{font-size:21px;}
#plant-selection-tool .ps-section-head p{font-size:14px; color:var(--ps-text-soft); margin:8px 0 0; line-height:1.55;}
#plant-selection-tool .ps-steps{display:grid; grid-template-columns:1fr; gap:16px;}
@media(min-width:720px){#plant-selection-tool .ps-steps{grid-template-columns:repeat(3,minmax(0,1fr));}}
#plant-selection-tool .ps-step-card{
background:#fff; border:1px solid var(--ps-line); border-radius:16px; padding:20px;
box-shadow:0 1px 2px rgba(6,78,59,.06), 0 2px 6px rgba(0,0,0,.04), 0 10px 26px -14px rgba(6,78,59,.20);
transition:all .15s;
}
#plant-selection-tool .ps-step-card:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(6,78,59,.06), 0 18px 36px -18px rgba(6,78,59,.28);}
#plant-selection-tool .ps-step-card h3{font-size:16px; margin-bottom:8px;}
#plant-selection-tool .ps-step-card p{font-size:13.5px; color:var(--ps-text-soft); margin:0; line-height:1.55;}
#plant-selection-tool .ps-step-icon{width:40px; height:40px; border-radius:12px; background:var(--ps-mist); display:flex; align-items:center; justify-content:center; margin-bottom:12px; color:var(--ps-leaf-dark);}
#plant-selection-tool .ps-step-icon svg{stroke:var(--ps-leaf-dark);}
#plant-selection-tool .ps-factors-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:640px){#plant-selection-tool .ps-factors-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
#plant-selection-tool .ps-factor-card{background:#fff; border:1px solid var(--ps-line); border-radius:16px; padding:18px; box-shadow:0 1px 2px rgba(6,78,59,.06), 0 8px 22px -12px rgba(6,78,59,.18);}
#plant-selection-tool .ps-factor-card h3{font-size:15.5px; margin-bottom:8px;}
#plant-selection-tool .ps-factor-card p{font-size:13.5px; color:var(--ps-text-soft); margin:0; line-height:1.55;}
/* ---------- table ---------- */
#plant-selection-tool .ps-table-wrap{background:#fff; border:1px solid var(--ps-line); border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(6,78,59,.06), 0 10px 26px -14px rgba(6,78,59,.20); overflow-x:auto;}
#plant-selection-tool table{width:100%; border-collapse:collapse; font-size:14px; min-width:480px;}
#plant-selection-tool caption{text-align:left; padding:15px 20px 0; font-size:12.5px; color:var(--ps-text-soft); caption-side:top;}
#plant-selection-tool th,#plant-selection-tool td{padding:11px 20px; text-align:left; border-bottom:1px solid var(--ps-line);}
#plant-selection-tool th{background:var(--ps-mist); color:var(--ps-ink); font-size:12.5px; text-transform:uppercase; letter-spacing:.03em;}
#plant-selection-tool tr:last-child td{border-bottom:none;}
/* ---------- FAQ ---------- */
#plant-selection-tool .ps-faq{background:#fff; border:1px solid var(--ps-line); border-radius:16px; padding:0 20px; box-shadow:0 1px 2px rgba(6,78,59,.06), 0 8px 22px -12px rgba(6,78,59,.18);}
#plant-selection-tool details.ps-faq-item{border-top:1px solid var(--ps-line); padding:12px 0;}
#plant-selection-tool details.ps-faq-item:first-child{border-top:none;}
#plant-selection-tool details.ps-faq-item summary{font-size:14.5px; font-weight:700; cursor:pointer; list-style:none; color:var(--ps-ink); display:flex; gap:8px;}
#plant-selection-tool details.ps-faq-item summary::-webkit-details-marker{display:none;}
#plant-selection-tool details.ps-faq-item summary::before{content:"+"; color:var(--ps-leaf-dark); font-size:16px; width:18px; flex-shrink:0;}
#plant-selection-tool details.ps-faq-item[open] summary::before{content:"";}
#plant-selection-tool details.ps-faq-item p{font-size:14px; color:var(--ps-text-soft); line-height:1.55; margin:8px 0 0 26px;}
/* ---------- tool grid ---------- */
#plant-selection-tool .ps-toolgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}
#plant-selection-tool .ps-toolcard{
display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--ps-line);
border-radius:14px; padding:15px; text-decoration:none; color:var(--ps-ink); transition:all .15s;
box-shadow:0 1px 2px rgba(6,78,59,.06), 0 6px 18px -10px rgba(6,78,59,.18);
}
#plant-selection-tool .ps-toolcard:hover{border-color:var(--ps-leaf); transform:translateY(-2px); box-shadow:0 2px 4px rgba(6,78,59,.06), 0 16px 32px -16px rgba(6,78,59,.28);}
#plant-selection-tool .ps-toolcard .ps-badge{width:36px; height:36px; border-radius:10px; background:var(--ps-mist); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
#plant-selection-tool .ps-toolcard .ps-badge svg{width:19px; height:19px; stroke:var(--ps-leaf-dark); fill:none;}
#plant-selection-tool .ps-toolcard > div{min-width:0; flex:1;}
#plant-selection-tool .ps-toolcard h3{font-size:14.5px; margin:0 0 3px;}
#plant-selection-tool .ps-toolcard p{font-size:12.5px; color:var(--ps-text-soft); margin:0; line-height:1.45;}
#plant-selection-tool .ps-toolcard .ps-arrow{margin-left:auto; color:var(--ps-leaf-dark); flex-shrink:0; align-self:center; font-size:15px; line-height:1;}
#plant-selection-tool .ps-toolcard .ps-arrow::after{content:"\2192";}
/* ---------- CTA + footer ---------- */
#plant-selection-tool .ps-cta{margin:32px 0 0; padding:24px 28px; border-radius:20px; background:var(--ps-ink); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; content-visibility:auto; contain-intrinsic-size:auto 130px;}
#plant-selection-tool .ps-cta h3{color:#fff; font-size:18px;}
#plant-selection-tool .ps-cta p{color:#A7F3D0; font-size:13.5px; margin:4px 0 0;}
#plant-selection-tool .ps-cta a{background:#fff; color:var(--ps-ink); text-decoration:none; font-weight:700; font-size:13.5px; padding:11px 18px; border-radius:12px; flex-shrink:0;}
#plant-selection-tool .ps-cta a:hover{background:var(--ps-mist);}
#plant-selection-tool .ps-foot{font-size:12px; color:var(--ps-text-soft); margin:16px 0 24px; line-height:1.5; text-align:left;}
/* ---------- component fixes (missing rules) ---------- */
#plant-selection-tool .ps-loading{display:none; text-align:center; padding:30px 0; color:var(--ps-text-soft); font-size:14px;}
#plant-selection-tool .ps-loading.ps-show{display:block;}
#plant-selection-tool .ps-pill{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ps-ink); background:var(--ps-mist); border:1px solid var(--ps-line); border-radius:999px; padding:4px 9px; margin:10px 6px 0 0;}
#plant-selection-tool .ps-export{display:inline-flex; align-items:center; gap:8px; margin-top:14px; background:var(--ps-ink); color:#fff; border:none; border-radius:12px; padding:12px 16px; font-size:13.5px; font-weight:700; cursor:pointer; transition:all .15s;}
#plant-selection-tool .ps-export:hover{background:var(--ps-leaf);}
#plant-selection-tool .ps-export svg{width:16px; height:16px; stroke:#fff;}
#plant-selection-tool .ps-badge-easy,#plant-selection-tool .ps-badge-medium,#plant-selection-tool .ps-badge-challenging{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:999px; border:1px solid;}
#plant-selection-tool .ps-badge-easy{color:#15803D; background:#F0FDF4; border-color:#BBF7D0;}
#plant-selection-tool .ps-extra{margin-top:20px; padding-top:18px; border-top:1px dashed var(--ps-line);}
#plant-selection-tool .ps-extra h3{font-size:13.5px; margin-bottom:12px;}
#plant-selection-tool .ps-section-inner{max-width:1120px; margin:0 auto;}
#plant-selection-tool .ps-temp-card.ps-accent-ink{border-top-color:var(--ps-ink);}
#plant-selection-tool .ps-temp-card.ps-accent-leaf2{border-top-color:var(--ps-leaf);}
#plant-selection-tool .ps-cta-main{margin:32px 0 0; padding:24px 28px; border-radius:20px; background:var(--ps-ink); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; content-visibility:auto; contain-intrinsic-size:auto 130px;}
#plant-selection-tool .ps-cta-main-inner{flex:1; min-width:240px;}
#plant-selection-tool .ps-cta-main h2{color:#fff; font-size:18px;}
#plant-selection-tool .ps-cta-main p{color:#A7F3D0; font-size:13.5px; margin:4px 0 0;}
#plant-selection-tool .ps-cta-main a{background:#fff; color:var(--ps-ink); text-decoration:none; font-weight:700; font-size:13.5px; padding:11px 18px; border-radius:12px; flex-shrink:0;}
#plant-selection-tool .ps-cta-main a:hover{background:var(--ps-mist);}
/* ---------- focus & motion ---------- */
#plant-selection-tool .ps-btn:focus-visible,
#plant-selection-tool .ps-toolcard:focus-visible,
#plant-selection-tool summary:focus-visible,
#plant-selection-tool select:focus-visible,
#plant-selection-tool input[type=number]:focus-visible,
#plant-selection-tool .ps-cta a:focus-visible{outline:3px solid rgba(22,163,74,.4); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
#plant-selection-tool *, #plant-selection-tool *::before, #plant-selection-tool *::after{animation:none !important; transition:none !important;}
#plant-selection-tool .ps-btn:hover, #plant-selection-tool .ps-step-card:hover, #plant-selection-tool .ps-toolcard:hover{transform:none;}
}
@media(max-width:480px){
#plant-selection-tool .ps-inner{padding:24px 18px 4px;}
#plant-selection-tool .ps-cta{margin:20px 0; flex-direction:column; align-items:flex-start; content-visibility:visible;}
#plant-selection-tool .ps-cta a{width:100%; text-align:center;}
#plant-selection-tool .ps-row2{grid-template-columns:1fr;}
#plant-selection-tool .ps-stat-row{grid-template-columns:1fr;}
#plant-selection-tool .ps-foot{margin:14px 0 20px;}
}
/* ---------- accent rules ---------- */
#plant-selection-tool .ps-badge-medium{background:#FEF3C7; color:var(--ps-amber-dark);}
#plant-selection-tool .ps-badge-challenging{background:#FEE2E2; color:var(--ps-rust-dark);}
#plant-selection-tool .ps-match-good{background:#FEF3C7; border-color:#FEF3C7; color:var(--ps-amber-dark);}
#plant-selection-tool .ps-none svg{width:28px; height:28px; stroke:var(--ps-rust-dark); margin:0 auto 8px;}
#plant-selection-tool .ps-none h3{font-size:15px; color:var(--ps-rust-dark); margin-bottom:6px;}
#plant-selection-tool .ps-temp-card.ps-accent-amber{border-top-color:var(--ps-amber);}
#plant-selection-tool .ps-medium p.ps-diff-note{color:var(--ps-amber-dark);}
#plant-selection-tool .ps-hard p.ps-diff-note{color:var(--ps-rust-dark);}
/* ---------- plant selection components ---------- */
#plant-selection-tool .ps-wrap{position:relative; z-index:1; padding:34px 32px 8px;}
#plant-selection-tool .ps-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:28px;}
@media(max-width:880px){#plant-selection-tool .ps-grid{grid-template-columns:1fr;}}
#plant-selection-tool .ps-card{background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.75); border-radius:20px; padding:24px; box-shadow:0 1px 2px rgba(6,78,59,.06), 0 2px 6px rgba(0,0,0,.04), 0 12px 30px -16px rgba(6,78,59,.22); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
#plant-selection-tool .ps-card h2{font-size:17px; margin-bottom:16px;}
#plant-selection-tool .ps-ic{display:inline-flex; width:30px; height:30px; border-radius:9px; background:var(--ps-mist); align-items:center; justify-content:center; margin-right:9px; vertical-align:middle;}
#plant-selection-tool .ps-ic svg{width:17px; height:17px; stroke:var(--ps-ink); fill:none;}
#plant-selection-tool .ps-results-heading-count{font-size:13px; color:var(--ps-text-soft); font-weight:600; margin:0 0 12px;}
#plant-selection-tool .ps-results-card{display:flex; flex-direction:column;}
#plant-selection-tool #ps-results-container{flex:1 1 auto; display:flex; flex-direction:column; min-height:190px; max-height:560px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;}
#plant-selection-tool #ps-results-container::-webkit-scrollbar{width:8px;}
#plant-selection-tool #ps-results-container::-webkit-scrollbar-thumb{background:var(--ps-line); border-radius:999px;}
#plant-selection-tool .ps-placeholder{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:190px; margin:auto; color:var(--ps-text-soft); border:1.5px dashed var(--ps-line); border-radius:16px; padding:24px 20px;}
#plant-selection-tool .ps-placeholder svg{width:44px; height:44px; margin-bottom:12px; opacity:.5; stroke:var(--ps-leaf-dark);}
#plant-selection-tool .ps-placeholder p{margin:0; font-size:14px;}
#plant-selection-tool .ps-loading{text-align:center; padding:30px 0; color:var(--ps-text-soft); font-size:14px;}
#plant-selection-tool .ps-spinner{width:26px; height:26px; border-radius:50%; border:3px solid var(--ps-line); border-top-color:var(--ps-leaf); margin:0 auto 10px; animation:psspin .8s linear infinite;}
@keyframes psspin{to{transform:rotate(360deg);}}
#plant-selection-tool .ps-hidden{display:none;}
#plant-selection-tool .ps-plant-card{background:#fff; border:1px solid var(--ps-line); border-radius:14px; padding:12px 14px; margin-bottom:10px; box-shadow:0 1px 2px rgba(6,78,59,.06), 0 8px 22px -12px rgba(6,78,59,.18);}
#plant-selection-tool .ps-plant-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
#plant-selection-tool .ps-plant-top h4{font-size:16px; margin:0; flex:1; min-width:0;}
#plant-selection-tool .ps-emoji{font-size:22px; line-height:1;}
#plant-selection-tool .ps-match{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:999px; border:1px solid;}
#plant-selection-tool .ps-match-great{color:#15803D; background:#F0FDF4; border-color:#BBF7D0;}
#plant-selection-tool .ps-match-good{background:#FEF3C7; border-color:#FDE68A; color:var(--ps-amber-dark);}
#plant-selection-tool .ps-match-possible{color:#1D4ED8; background:#EFF6FF; border-color:#BFDBFE;}
#plant-selection-tool .ps-plant-notes{margin-top:8px; font-size:13px; color:var(--ps-text-soft); line-height:1.5;}
#plant-selection-tool .ps-plant-stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:10px;}
#plant-selection-tool .ps-plant-stats span{background:var(--ps-mist); border:1px solid var(--ps-line); border-radius:9px; padding:6px 10px; font-size:11px; color:var(--ps-text-soft); text-transform:uppercase; letter-spacing:.04em; font-weight:600;}
#plant-selection-tool .ps-plant-stats strong{color:var(--ps-ink); font-size:13px; display:block; margin-top:2px;}
#plant-selection-tool .ps-more{font-size:13px; color:var(--ps-leaf-dark); font-weight:700;}
#plant-selection-tool .ps-note{font-size:13px; color:var(--ps-text-soft); line-height:1.5; background:var(--ps-mist); border:1px solid var(--ps-line); border-radius:12px; padding:12px 14px;}
#plant-selection-tool .ps-diff-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
@media(max-width:640px){#plant-selection-tool .ps-diff-grid{grid-template-columns:1fr;}}
#plant-selection-tool .ps-diff-card{background:#fff; border:1px solid var(--ps-line); border-radius:16px; padding:18px; box-shadow:0 1px 2px rgba(6,78,59,.06), 0 8px 22px -12px rgba(6,78,59,.18);}
#plant-selection-tool .ps-diff-card h4{font-size:15.5px; margin-bottom:10px;}
#plant-selection-tool .ps-diff-card ul{margin:0; padding:0 0 0 18px; font-size:13px; color:var(--ps-text-soft); line-height:1.6;}
#plant-selection-tool .ps-diff-note{margin-top:8px; font-size:12px;}
#plant-selection-tool .ps-temp-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
@media(max-width:640px){#plant-selection-tool .ps-temp-grid{grid-template-columns:1fr;}}
#plant-selection-tool .ps-temp-card{background:#fff; border:1px solid var(--ps-line); border-top:3px solid var(--ps-leaf); border-radius:16px; padding:18px; box-shadow:0 1px 2px rgba(6,78,59,.06), 0 8px 22px -12px rgba(6,78,59,.18);}
#plant-selection-tool .ps-temp-card h4{font-size:15px; margin-bottom:10px;}
#plant-selection-tool .ps-temp-card ul{margin:0; padding:0 0 0 18px; font-size:13px; color:var(--ps-text-soft); line-height:1.6;}
#plant-selection-tool .ps-temp-note{margin-top:10px; font-size:12.5px; color:var(--ps-text-soft); line-height:1.5;}
#plant-selection-tool .ps-climate-box{margin-top:16px;}
#plant-selection-tool .ps-climate-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
@media(max-width:640px){#plant-selection-tool .ps-climate-cols{grid-template-columns:1fr;}}
#plant-selection-tool .ps-climate-tip{background:#fff; border:1px solid var(--ps-line); border-radius:14px; padding:14px 16px; font-size:13px; color:var(--ps-text-soft); line-height:1.5; box-shadow:0 1px 2px rgba(6,78,59,.06), 0 8px 22px -12px rgba(6,78,59,.18);}
#plant-selection-tool .ps-climate-tip h4{font-size:14px; margin-bottom:6px;}
#plant-selection-tool .ps-expert-tip{background:#F0FDF4; border:1px solid #BBF7D0; border-left:4px solid var(--ps-leaf); border-radius:12px; padding:14px 16px; margin-top:14px; font-size:13px; color:var(--ps-text-soft); line-height:1.55;}
#plant-selection-tool .ps-expert-tip strong{display:block; color:var(--ps-ink); margin-bottom:4px;}
#plant-selection-tool .ps-lead{font-size:14px; color:var(--ps-text-soft); margin:8px 0 0; line-height:1.55;}
#plant-selection-tool .ps-tip{position:relative; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:var(--ps-mist); border:1px solid var(--ps-line); color:var(--ps-ink); font-size:10px; font-weight:700; cursor:help; vertical-align:middle; margin-left:4px;}
#plant-selection-tool .ps-tip .ps-tiptext{position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); width:200px; background:var(--ps-ink); color:#fff; font-size:12px; font-weight:400; padding:8px 10px; border-radius:8px; display:none; z-index:10; text-transform:none; letter-spacing:normal;}
#plant-selection-tool .ps-tip:hover .ps-tiptext{display:block;}
/* grid overflow hardening (narrow phones incl. Samsung) */
#plant-selection-tool .ps-calc-grid,#plant-selection-tool .ps-grid,#plant-selection-tool .ps-layout,#plant-selection-tool .ps-row2,#plant-selection-tool .ps-stat-grid,#plant-selection-tool .ps-stat-row{min-width:0;}
#plant-selection-tool .ps-card,#plant-selection-tool .ps-col,#plant-selection-tool .ps-viz,#plant-selection-tool .ps-results,#plant-selection-tool .ps-config-summary,#plant-selection-tool .ps-ref-grid{min-width:0; max-width:100%;}
@media(prefers-reduced-motion:reduce){ }
/* =====================================================================
99. CATEGORY HUB PILLAR PAGES - scoped to .th-root.th-hub
Shared components: category hierarchy, subcategory quick links,
zig-zag guide blocks, dynamic 2x2 post grids, latest-posts strip.
===================================================================== */
/* ---------- category hierarchy ---------- */
.th-root.th-hub .th-hub-cats{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:8px;}
.th-root.th-hub .th-hub-cat{background:#fff; border:1px solid var(--mc-line); border-radius:16px; padding:18px; box-shadow:0 4px 15px rgba(6,78,59,.04); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
.th-root.th-hub .th-hub-cat:hover{transform:translateY(-4px); border-color:var(--mc-leaf); box-shadow:0 12px 24px -6px rgba(6,78,59,.12);}
.th-root.th-hub .th-hub-cat-head{font-size:15px; font-weight:700; color:var(--mc-ink); display:flex; align-items:center; gap:10px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--mc-line);}
.th-root.th-hub .th-hub-cat-head:hover{color:var(--mc-leaf);}
.th-root.th-hub .th-hub-cat-icon{width:34px; height:34px; border-radius:10px; background:#F0FDF4; border:1px solid #BBF7D0; display:inline-flex; align-items:center; justify-content:center; color:var(--mc-leaf); flex-shrink:0; transition:background .25s ease,color .25s ease,transform .25s ease;}
.th-root.th-hub .th-hub-cat:hover .th-hub-cat-icon{background:var(--mc-leaf); color:#fff; transform:scale(1.05);}
.th-root.th-hub .th-hub-cat-icon svg{width:18px; height:18px;}
.th-root.th-hub .th-hub-cat-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px;}
.th-root.th-hub .th-hub-cat-list li a{font-size:13px; color:var(--mc-text-soft); display:flex; align-items:center; gap:7px; transition:color .2s ease,transform .2s ease;}
.th-root.th-hub .th-hub-cat-list li a:hover{color:var(--mc-leaf); transform:translateX(2px);}
.th-root.th-hub .th-hub-cat-list li a svg{color:var(--mc-leaf); opacity:.7; width:12px; height:12px; flex-shrink:0; transition:opacity .2s ease,transform .2s ease;}
.th-root.th-hub .th-hub-cat-list li a:hover svg{opacity:1; transform:translateX(1px);}
/* ---------- subcategory quick links (thumb cards) ---------- */
.th-root.th-hub .th-hub-subcats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px;}
.th-root.th-hub .th-hub-subcat{display:flex; flex-direction:column; background:#fff; border:1px solid var(--mc-line); border-radius:14px; overflow:hidden; box-shadow:0 4px 15px rgba(6,78,59,.04); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
.th-root.th-hub .th-hub-subcat:hover{transform:translateY(-4px); border-color:rgba(22,163,74,.45); box-shadow:0 14px 28px -10px rgba(6,78,59,.16);}
.th-root.th-hub .th-hub-subcat-thumb{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--mc-mist);}
.th-root.th-hub .th-hub-subcat-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.th-root.th-hub .th-hub-subcat:hover .th-hub-subcat-thumb img{transform:scale(1.06);}
.th-root.th-hub .th-hub-subcat-title{font-size:13.5px; font-weight:700; color:var(--mc-ink); padding:12px 14px; line-height:1.35; text-align:center;}
.th-root.th-hub .th-hub-subcat:hover .th-hub-subcat-title{color:var(--mc-leaf);}
/* ---------- zig-zag guide blocks ---------- */
.th-root.th-hub .th-hub-zigzag{display:flex; flex-direction:column; gap:46px; margin-top:8px;}
.th-root.th-hub .th-hub-zigzag-block{display:grid; grid-template-columns:1.1fr 0.9fr; gap:34px; align-items:center;}
.th-root.th-hub .th-hub-zigzag-block--reverse .th-hub-zigzag-media{order:-1;}
.th-root.th-hub .th-hub-zigzag-content{min-width:0;}
.th-root.th-hub .th-hub-zigzag-content h2{font-size:24px; margin-bottom:14px;}
.th-root.th-hub .th-hub-zigzag-content p{font-size:14.5px; color:var(--mc-text-soft); margin:0 0 18px; line-height:1.7;}
.th-root.th-hub .th-hub-zigzag-content p strong{color:var(--mc-ink);}
.th-root.th-hub .th-hub-zigzag-media{position:relative; overflow:hidden; border-radius:20px; aspect-ratio:4/3; background:var(--mc-mist); box-shadow:0 14px 34px -16px rgba(6,78,59,.3);}
.th-root.th-hub .th-hub-zigzag-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.th-root.th-hub .th-hub-zigzag-block:hover .th-hub-zigzag-media img{transform:scale(1.04);}
/* ---------- dynamic 2x2 post grid (small cards) ---------- */
.th-root.th-hub .th-hub-post-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:18px;}
.th-root.th-hub .th-hub-small-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--mc-line); border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:0 2px 8px rgba(6,78,59,.05); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.th-root.th-hub .th-hub-small-card:hover{transform:translateY(-3px); border-color:rgba(22,163,74,.45); box-shadow:0 12px 24px -10px rgba(6,78,59,.16);}
.th-root.th-hub .th-hub-small-media{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--mc-mist);}
.th-root.th-hub .th-hub-small-media img{width:100%; height:100%; object-fit:cover; transition:transform .45s ease;}
.th-root.th-hub .th-hub-small-card:hover .th-hub-small-media img{transform:scale(1.06);}
.th-root.th-hub .th-hub-small-title{font-size:13px; font-weight:650; color:var(--mc-ink); padding:10px 12px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.th-root.th-hub .th-hub-small-card:hover .th-hub-small-title{color:var(--mc-leaf);}
/* ---------- latest posts strip (large cards) ---------- */
.th-root.th-hub .th-hub-latest-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;}
.th-root.th-hub .th-hub-large-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--mc-line); border-radius:18px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:0 4px 15px rgba(6,78,59,.04); transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;}
.th-root.th-hub .th-hub-large-card:hover{transform:translateY(-5px); border-color:rgba(22,163,74,.45); box-shadow:0 18px 34px -12px rgba(6,78,59,.18);}
.th-root.th-hub .th-hub-large-media{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--mc-mist);}
.th-root.th-hub .th-hub-large-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.th-root.th-hub .th-hub-large-card:hover .th-hub-large-media img{transform:scale(1.06);}
.th-root.th-hub .th-hub-large-body{display:flex; flex-direction:column; flex:1; padding:16px 18px;}
.th-root.th-hub .th-hub-large-title{font-size:16px; font-weight:650; color:var(--mc-ink); line-height:1.4; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.th-root.th-hub .th-hub-large-card:hover .th-hub-large-title{color:var(--mc-leaf);}
.th-root.th-hub .th-hub-large-meta{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--mc-text-soft); margin-top:auto; border-top:1px dashed var(--mc-line); padding-top:11px; text-transform:uppercase; letter-spacing:.05em;}
.th-root.th-hub .th-hub-large-meta svg{width:13px; height:13px; stroke:var(--mc-leaf); fill:none; flex-shrink:0;}
/* ---------- block buttons + view-all row ---------- */
.th-root.th-hub .th-hub-block-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--mc-leaf); color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-decoration:none; padding:11px 18px; border-radius:10px; transition:all .18s ease; border:1px solid transparent;}
.th-root.th-hub .th-hub-block-btn:hover{background:var(--mc-ink-2); transform:translateY(-1px);}
.th-root.th-hub .th-hub-block-btn svg{width:14px; height:14px; flex-shrink:0;}
.th-root.th-hub .th-hub-block-btn--ghost{background:transparent; color:var(--mc-leaf); border-color:var(--mc-leaf);}
.th-root.th-hub .th-hub-block-btn--ghost:hover{background:var(--mc-leaf); color:#fff;}
.th-root.th-hub .th-hub-more{display:flex; justify-content:center; margin:24px 0 8px;}
/* ---------- SEO text block ---------- */
.th-root.th-hub .th-hub-seo{max-width:760px; margin:0 auto 24px; text-align:center;}
.th-root.th-hub .th-hub-seo h3{font-size:24px; margin-bottom:14px;}
.th-root.th-hub .th-hub-seo p{font-size:15px; color:var(--mc-text-soft); line-height:1.75; margin:0;}
/* ---------- empty / error / skeleton states ---------- */
.th-root.th-hub .th-hub-empty,.th-root.th-hub .th-hub-error{grid-column:1 / -1; font-size:13px; padding:14px; text-align:center; border:1.5px dashed var(--mc-line); border-radius:12px; color:var(--mc-text-soft);}
.th-root.th-hub .th-hub-error{color:#DC2626; border-color:rgba(220,38,38,.3);}
.th-root.th-hub .th-hub-skel{position:relative; overflow:hidden; background:#E2E8F0; border:none; pointer-events:none;}
.th-root.th-hub .th-hub-skel::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); transform:translateX(-100%); animation:mcHubShimmer 1.4s infinite;}
@keyframes mcHubShimmer{100%{transform:translateX(100%);}}
.th-root.th-hub .th-hub-post-grid .th-hub-skel,.th-root.th-hub .th-hub-latest-grid .th-hub-skel{min-height:150px;}
.th-root.th-hub .th-hub-post-grid .th-hub-skel{border-radius:12px;}
.th-root.th-hub .th-hub-latest-grid .th-hub-skel{border-radius:18px;}
/* ---------- responsive ---------- */
@media(max-width:960px){
.th-root.th-hub .th-hub-zigzag-block{grid-template-columns:1fr; gap:18px;}
.th-root.th-hub .th-hub-zigzag-block--reverse .th-hub-zigzag-media{order:0;}
.th-root.th-hub .th-hub-latest-grid{grid-template-columns:1fr; gap:16px;}
.th-root.th-hub .th-hub-latest-grid .th-hub-large-card{max-width:460px; margin:0 auto; width:100%;}
}
@media(max-width:640px){
.th-root.th-hub .th-hub-post-grid{grid-template-columns:1fr;}
.th-root.th-hub .th-hub-subcats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.th-root.th-hub .th-hub-zigzag-content h2{font-size:20px;}
}