/* index.html-specific styles — base/reset/nav/btn rules are in shared.css */
h1{font-size:2.5rem;font-weight:700;letter-spacing:-.02em}
h2{font-size:1.75rem;font-weight:600;margin-bottom:.5em}
h3{font-size:1.125rem;font-weight:600}

/* --- Nav (index.html additions — base nav styles are in shared.css) --- */
#status-badge{font-size:.75rem;padding:3px 10px;border-radius:12px;font-weight:600;background:var(--c-surface);color:var(--c-muted);border:1px solid var(--c-border);transition:all .3s}
#status-badge.online{background:rgba(63,185,80,.15);color:var(--c-green);border-color:var(--c-green)}
#status-badge.offline{background:rgba(248,81,73,.15);color:var(--c-red);border-color:var(--c-red)}

/* --- Hero --- */
.hero{padding:80px 0 60px;text-align:center}
.hero p{color:var(--c-muted);font-size:1.125rem;max-width:640px;margin:16px auto 32px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* --- Section --- */
section{padding:64px 0}
section:nth-child(even){background:var(--c-surface)}

/* --- Cards --- */
.card-grid{display:grid;gap:20px;margin-top:24px}
.card-grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card-grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);padding:24px;transition:border-color .2s}
.card:hover{border-color:var(--c-accent)}
.card .icon{font-size:1.5rem;margin-bottom:8px}
.card h3{margin-bottom:6px}
.card p{color:var(--c-muted);font-size:.875rem}

/* --- Capability grid --- */
.cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:24px}
.cap-item{display:flex;align-items:flex-start;gap:10px;font-size:.875rem;color:var(--c-muted)}
.cap-item .dot{width:8px;height:8px;border-radius:50%;background:var(--c-green);flex-shrink:0;margin-top:6px}

/* --- Demo --- */
.demo-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media(max-width:768px){.demo-layout{grid-template-columns:1fr}}
.demo-layout.timelapse-active{grid-template-columns:58% 1fr;gap:24px}
.demo-layout.timelapse-active #demo-input-col{display:none}
#demo-analysis-col{display:none}
.demo-layout.timelapse-active #demo-analysis-col{display:flex;flex-direction:column;gap:12px;align-self:start}
#timelapse-header{display:none;align-items:center;gap:12px;margin-bottom:14px}
#timelapse-header.visible{display:flex}
#back-to-kml{background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-muted);padding:5px 14px;border-radius:var(--radius);cursor:pointer;font-size:.8rem;transition:color .15s;flex-shrink:0}
#back-to-kml:hover{color:var(--c-text);border-color:var(--c-accent)}
#header-frame-label{font-size:.8rem;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
#timelapse-header .layer-toggle{margin-left:auto;flex-shrink:0}
.demo-layout.timelapse-active #map{height:520px}
.demo-form{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);padding:24px}
label{display:block;font-size:.875rem;font-weight:500;margin-bottom:4px}
input[type=email],textarea,input[type=text],select{width:100%;padding:10px 12px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);color:var(--c-text);font-size:.875rem;font-family:inherit;margin-bottom:16px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--c-accent)}
textarea{min-height:120px;font-family:monospace;font-size:.8rem}
.demo-status{margin-top:12px;font-size:.875rem;padding:10px;border-radius:var(--radius);display:none}
.demo-status.show{display:block}
.demo-status.success{background:rgba(63,185,80,.1);color:var(--c-green);border:1px solid rgba(63,185,80,.3)}
.demo-status.error{background:rgba(248,81,73,.1);color:var(--c-red);border:1px solid rgba(248,81,73,.3)}

/* --- Pipeline progress --- */
#pipeline-progress{display:none;margin-top:16px}
#pipeline-progress .pipeline-step{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:.85rem;color:var(--c-muted)}
#pipeline-progress .pipeline-step.active{color:var(--c-text);font-weight:500}
#pipeline-progress .pipeline-step.done{color:var(--c-green)}
#pipeline-progress .pipeline-step.failed{color:var(--c-red)}
#pipeline-progress .step-icon{width:20px;text-align:center;font-size:.9rem}
#pipeline-progress .spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--c-border);border-top-color:var(--c-accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#pipeline-results{display:none;margin-top:14px;background:rgba(63,185,80,.06);border:1px solid rgba(63,185,80,.2);border-radius:var(--c-radius,8px);padding:14px 16px;font-size:.85rem}
#pipeline-results h4{margin:0 0 8px;font-size:.9rem;color:var(--c-green)}
#pipeline-results .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
#pipeline-results .stat{color:var(--c-muted)}
#pipeline-results .stat b{color:var(--c-text)}
#pipeline-error{display:none;margin-top:14px;background:rgba(248,81,73,.08);border:1px solid rgba(248,81,73,.25);border-radius:var(--c-radius,8px);padding:14px 16px;font-size:.85rem;color:var(--c-red)}

/* --- Map --- */
#map{height:420px;border-radius:var(--radius);border:1px solid var(--c-border)}
#map .leaflet-tile{image-rendering:auto}                     /* bicubic upscale for S2 */
#map .leaflet-tile.leaflet-tile-loaded{backface-visibility:hidden} /* GPU compositing hint */
.map-controls{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:12px;font-size:.8rem;color:var(--c-muted)}
.map-controls button{background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-text);padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8rem}
.map-controls button:hover{border-color:var(--c-accent)}
.map-controls input[type=range]{accent-color:var(--c-accent);margin-bottom:0}
.map-controls .controls-row{display:flex;align-items:center;gap:8px;width:100%}
.map-controls .controls-row input[type=range]{flex:1}
.map-controls .label-row{display:flex;align-items:center;gap:8px;width:100%}
#frame-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#frame-counter{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.75rem;color:var(--c-muted);flex-shrink:0}
#frame-info{font-size:.75rem;color:var(--c-muted);margin-top:6px;min-height:1.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cache-progress{margin-top:8px;display:none}
#cache-progress .bar{height:4px;border-radius:2px;background:var(--c-border);overflow:hidden}
#cache-progress .fill{height:100%;background:var(--c-accent);transition:width .3s}
#cache-progress .text{font-size:.7rem;color:var(--c-muted);margin-top:3px}
.naip-badge{display:inline-block;background:var(--c-accent);color:#fff;font-size:.6rem;padding:1px 5px;border-radius:3px;margin-left:4px;vertical-align:middle;font-weight:700;letter-spacing:.5px}
.poly-tooltip{background:rgba(22,27,34,0.9);color:#e6edf3;border:1px solid var(--c-border);font-size:.72rem;padding:3px 8px;border-radius:4px;box-shadow:none}

/* --- Layer toggle --- */
.layer-toggle{display:flex;gap:0;margin-left:auto}
.layer-toggle button{background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-muted);padding:3px 10px;font-size:.7rem;cursor:pointer;transition:all .15s}
.layer-toggle button:first-child{border-radius:4px 0 0 4px}
.layer-toggle button:last-child{border-radius:0 4px 4px 0;border-left:0}
.layer-toggle button.active{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}

/* --- Weather chart --- */
#weather-panel{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:14px 16px;display:none}
#weather-panel h4{font-size:.8rem;margin-bottom:8px;color:var(--c-text)}
#weather-chart{position:relative;height:80px;width:100%}
#weather-chart canvas{width:100%;height:100%}
.weather-legend{display:flex;gap:14px;font-size:.65rem;color:var(--c-muted);margin-top:6px}
.weather-legend span::before{content:'';display:inline-block;width:10px;height:3px;border-radius:1px;margin-right:4px;vertical-align:middle}
.weather-legend .leg-temp::before{background:#f0883e}
.weather-legend .leg-precip::before{background:#58a6ff}
.weather-marker{position:absolute;top:0;bottom:0;width:2px;background:var(--c-green);opacity:.7;pointer-events:none;transition:left .15s}

/* --- Insights panel --- */
#insights-panel{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:14px 16px;display:none}
#insights-panel h4{font-size:.8rem;margin-bottom:8px;color:var(--c-text)}
#analytics-scope{display:none;align-items:center;gap:8px;font-size:.68rem;color:var(--c-muted);margin-bottom:8px}
#analytics-scope-swatch{width:10px;height:10px;border-radius:50%;background:var(--c-muted);border:1px solid rgba(255,255,255,0.25);flex-shrink:0}
#analytics-scope-label{color:var(--c-text);font-weight:600}
#analytics-scope-reset{background:transparent;border:1px solid var(--c-border);color:var(--c-muted);padding:2px 7px;border-radius:999px;font-size:.65rem;cursor:pointer}
#analytics-scope-reset:hover{color:var(--c-text);border-color:var(--c-accent)}
#insights-content{height:111px;overflow-y:auto}
.insight-row{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--c-muted);padding:3px 0}
.insight-row .insight-icon{font-size:.85rem;flex-shrink:0}
.scope-selected #insights-panel,
.scope-selected #weather-panel,
.scope-selected #ndvi-trend-panel,
.scope-selected #period-summary{border-color:var(--scope-color,#58a6ff)}
.insight-row.alert{color:var(--c-orange);font-weight:500}
.ndvi-bar{display:inline-block;height:8px;border-radius:2px;vertical-align:middle;margin-left:4px}

/* --- AI Insights panel --- */
#ai-insights-panel{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:14px 16px;display:none}
#ai-insights-panel h4{font-size:.8rem;margin-bottom:8px;color:var(--c-text)}
#ai-insights-content{background:rgba(88,166,255,.08);border:1px solid rgba(88,166,255,.2);border-radius:4px;padding:10px;font-size:.75rem;line-height:1.5;color:var(--c-text)}
#ai-insights-content .observation{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid rgba(88,166,255,.1)}
#ai-insights-content .observation:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
#ai-insights-content .obs-category{font-weight:600;color:var(--c-accent);font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
#ai-insights-content .obs-severity{display:inline-block;font-size:.65rem;padding:1px 6px;border-radius:2px;margin-left:4px}
#ai-insights-content .severity-critical{background:rgba(248,81,73,.3);color:#ff7b72}
#ai-insights-content .severity-high{background:rgba(248,81,73,.2);color:#f85149}
#ai-insights-content .severity-moderate{background:rgba(210,137,34,.2);color:#d29922}
#ai-insights-content .severity-low{background:rgba(63,185,80,.2);color:#3fb950}
#ai-insights-content .severity-normal{background:rgba(139,148,158,.2);color:#8b949e}
#ai-insights-content .obs-description{margin-bottom:4px;color:var(--c-text)}
#ai-insights-content .obs-recommendation{font-size:.7rem;color:var(--c-muted);font-style:italic}
#ai-insights-summary{font-size:.75rem;color:var(--c-muted);margin:8px 0;padding:8px;background:rgba(139,148,158,.05);border-radius:4px}
#btn-get-ai-insights:hover{background:#79c0ff;text-decoration:none}

/* --- NDVI trend chart --- */
#ndvi-trend-panel{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:14px 16px;display:none}
#ndvi-trend-panel h4{font-size:.8rem;margin-bottom:8px;color:var(--c-text)}
#ndvi-trend-chart{position:relative;height:64px;width:100%}
#ndvi-trend-chart canvas{width:100%;height:100%}
.ndvi-trend-marker{position:absolute;top:0;bottom:0;width:2px;background:var(--c-accent);opacity:.7;pointer-events:none;transition:left .15s}
.ndvi-trend-legend{display:flex;gap:14px;font-size:.65rem;color:var(--c-muted);margin-top:6px}
.ndvi-trend-legend span::before{content:'';display:inline-block;width:10px;height:3px;border-radius:1px;margin-right:4px;vertical-align:middle}
.ndvi-trend-legend .leg-ndvi::before{background:#3fb950}
.ndvi-trend-legend .leg-change::before{background:#f85149}

/* --- Period summary --- */
#period-summary{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:14px 16px;display:none}
#period-summary h4{font-size:.8rem;margin-bottom:10px;color:var(--c-text)}
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.summary-metric{font-size:.72rem;color:var(--c-muted)}
.summary-metric .label{opacity:.7}
.summary-metric .value{font-weight:600;color:var(--c-text)}
.summary-metric .delta{margin-left:4px;font-size:.65rem}
.delta-up{color:#3fb950}.delta-down{color:#f85149}.delta-flat{color:var(--c-muted)}
#period-assessment{font-size:.72rem;color:var(--c-muted);margin-top:10px;padding-top:8px;border-top:1px solid var(--c-border);line-height:1.5}

/* --- FIRMS fire markers --- */
.fire-marker{background:transparent;border:none}
.fire-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,80,20,0.7);border:1.5px solid #ff4500;box-shadow:0 0 6px rgba(255,69,0,0.5)}

/* --- Comparison split view (#226) --- */
.compare-controls{display:none;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;font-size:.8rem;color:var(--c-muted)}
.compare-controls.show{display:flex}
.compare-controls select{padding:4px 8px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:4px;color:var(--c-text);font-size:.75rem;max-width:180px}
.compare-controls .compare-label{font-size:.7rem;color:var(--c-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
#compare-divider{position:absolute;top:0;bottom:0;width:4px;background:var(--c-accent);cursor:ew-resize;z-index:800;touch-action:none;display:none}
#compare-divider::after{content:'⇔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--c-accent);color:#fff;font-size:.65rem;padding:4px 2px;border-radius:4px;pointer-events:none;line-height:1}
#map-wrapper{position:relative}
#map-wrapper .compare-tag{position:absolute;top:8px;z-index:700;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:3px;pointer-events:none;display:none}
#map-wrapper .compare-tag.show{display:block}
#compare-tag-left{left:8px;background:rgba(63,185,80,.85);color:#fff}
#compare-tag-right{right:8px;background:rgba(88,166,255,.85);color:#fff}

/* --- Flood event markers --- */
.flood-marker{background:transparent;border:none}
.flood-dot{width:12px;height:12px;border-radius:50%;background:rgba(66,165,245,0.6);border:1.5px solid #1e88e5;box-shadow:0 0 8px rgba(30,136,229,0.6)}

/* --- Timeline --- */
.timeline{position:relative;padding-left:28px;margin-top:24px}
.timeline::before{content:'';position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--c-border)}
.timeline-step{position:relative;padding-bottom:32px}
.timeline-step:last-child{padding-bottom:0}
.timeline-step .dot{position:absolute;left:-28px;top:2px;width:22px;height:22px;border-radius:50%;background:var(--c-accent);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff}
.timeline-step h3{margin-bottom:2px}
.timeline-step p{color:var(--c-muted);font-size:.875rem}

/* --- Pricing --- */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:24px}
.pricing-card{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);padding:28px 24px;display:flex;flex-direction:column;transition:border-color .2s}
.pricing-card:hover{border-color:var(--c-accent)}
.pricing-card.featured{border-color:var(--c-accent);box-shadow:0 0 0 1px var(--c-accent)}
.pricing-card .tier-name{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c-accent);font-weight:600;margin-bottom:4px}
.pricing-card .tier-price{font-size:2rem;font-weight:700;margin-bottom:2px}
.pricing-card .tier-price span{font-size:.875rem;font-weight:400;color:var(--c-muted)}
.pricing-card .tier-desc{font-size:.8rem;color:var(--c-muted);margin-bottom:16px}
.pricing-card ul{list-style:none;flex:1;margin-bottom:20px}
.pricing-card li{font-size:.8rem;color:var(--c-muted);padding:4px 0;padding-left:18px;position:relative}
.pricing-card li::before{content:'✓';position:absolute;left:0;color:var(--c-green);font-weight:700;font-size:.75rem}
.pricing-card .btn{text-align:center;width:100%}
.pricing-note{text-align:center;margin-top:16px;font-size:.75rem;color:var(--c-muted)}

/* --- Social proof --- */
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:24px}
.proof-card{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);padding:24px}
.proof-card .proof-quote{font-size:.875rem;color:var(--c-text);line-height:1.6;margin-bottom:12px;font-style:italic}
.proof-card .proof-author{font-size:.75rem;color:var(--c-muted)}
.proof-card .proof-author strong{color:var(--c-text)}
.proof-card .proof-tag{display:inline-block;font-size:.65rem;padding:2px 8px;border-radius:12px;background:rgba(88,166,255,.1);color:var(--c-accent);font-weight:600;margin-top:8px}

/* --- FAQ --- */
.faq-item{border-bottom:1px solid var(--c-border);padding:16px 0}
.faq-q{cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:.95rem}
.faq-q::after{content:'+';font-size:1.25rem;color:var(--c-muted);transition:transform .2s}
.faq-item.open .faq-q::after{transform:rotate(45deg);color:var(--c-accent)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--c-muted);font-size:.875rem}
.faq-item.open .faq-a{max-height:400px;padding-top:8px}

/* --- Early Access --- */
.ea-form{max-width:520px;margin:24px auto 0;background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);padding:24px}
#ea-status{margin-top:12px;font-size:.875rem;display:none}
#ea-status.show{display:block}

/* --- Footer --- */
footer{padding:32px 0;border-top:1px solid var(--c-border);text-align:center;color:var(--c-muted);font-size:.8rem}

/* --- Contract warning --- */
.contract-warning{background:rgba(210,153,34,.1);color:var(--c-orange);border:1px solid rgba(210,153,34,.3);padding:10px 16px;border-radius:var(--radius);font-size:.875rem;margin-bottom:16px;display:none}
.contract-warning.show{display:block}

/* --- Onboarding banner --- */
.onboard-banner{background:rgba(88,166,255,.08);border:1px solid rgba(88,166,255,.2);border-radius:var(--radius);padding:14px 20px;margin-bottom:20px;display:flex;align-items:center;gap:14px;font-size:.875rem;flex-wrap:wrap}
.onboard-banner .onboard-icon{font-size:1.5rem;flex-shrink:0}
.onboard-banner .onboard-text{flex:1;min-width:200px}
.onboard-banner .onboard-text strong{color:var(--c-text)}
.onboard-banner .onboard-text p{color:var(--c-muted);margin:2px 0 0;font-size:.8rem}
.onboard-banner .btn-sm{padding:6px 16px;font-size:.8rem;border-radius:var(--radius);font-weight:600;white-space:nowrap}

/* --- File drop zone --- */
.drop-zone{border:2px dashed var(--c-border);border-radius:var(--radius);padding:20px;text-align:center;color:var(--c-muted);font-size:.85rem;cursor:pointer;transition:border-color .2s,background .2s;margin-bottom:12px;position:relative}
.drop-zone:hover,.drop-zone.dragover{border-color:var(--c-accent);background:rgba(88,166,255,.05)}
.drop-zone .drop-icon{font-size:1.5rem;margin-bottom:6px}
.drop-zone .drop-text strong{color:var(--c-text)}
.drop-zone .drop-hint{font-size:.75rem;margin-top:4px;color:var(--c-muted)}
.drop-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop-zone .file-name{color:var(--c-green);font-weight:500;margin-top:6px;font-size:.8rem}
.drop-divider{text-align:center;color:var(--c-muted);font-size:.75rem;margin:4px 0 12px;text-transform:uppercase;letter-spacing:.08em}

/* --- Auth UI (base in shared.css, modifiers here) --- */
.auth-user{font-size:.8rem;color:var(--c-muted);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-prompt{background:rgba(88,166,255,.08);border:1px solid rgba(88,166,255,.2);border-radius:var(--radius);padding:12px 16px;margin-bottom:12px;font-size:.85rem;color:var(--c-muted);text-align:center;display:none}
.login-prompt a{cursor:pointer;font-weight:600}