/* The ecosystem showcase and contact pages. Uses the site's tokens from /styles.css. */
.page-nav{display:flex;gap:26px;margin-left:auto;margin-right:26px}
.page-nav a{color:#c9d6d2;font-size:13px;font-weight:650;min-height:24px;display:inline-flex;align-items:center}
.page-nav a:hover{color:var(--mint)}
.eco-hero{padding:92px 0 20px}
.eco-hero h1{font-size:clamp(42px,5vw,74px);line-height:1.05;letter-spacing:-.06em;font-weight:680;margin:24px 0}
.eco-hero h1 em,.eco-product h2 em,.eco-map-section h2 em{font:italic 1.04em var(--display);font-weight:400;letter-spacing:-.06em;color:var(--mint)}
.eco-intro{font-size:17px;line-height:1.8;color:var(--muted);max-width:720px;margin:0 0 24px}
.eco-notice{border:1px solid #84613e;background:#1a1712;color:#ecd9bd;border-radius:10px;padding:15px 18px;font-size:14px;line-height:1.65;max-width:720px;margin-bottom:26px}
.eco-notice strong{color:#f3cf98}
.eco-notice p{margin:0}
.eco-notice p+p{margin-top:10px;padding-top:10px;border-top:1px solid #4a3a26}
.eco-key{display:flex;flex-wrap:wrap;gap:14px 34px;margin:0}
.eco-key div{display:flex;flex-direction:column;gap:6px;max-width:340px}
.eco-key dd{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.eco-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.eco-status.done{color:var(--mint)}
.eco-status.proto{color:#e8bd7f}
.eco-status.planned{color:#bfd0da}
.eco-status-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:13px;color:var(--muted);margin:0 0 22px}
.eco-map{display:grid;grid-template-columns:1.25fr 1fr;gap:18px}
.map-core,.map-node{border:1px solid #2f4a43;border-radius:12px;background:#0d1718;padding:24px}
.map-core{background:linear-gradient(160deg,#10231f,#0d1718)}
.map-label{margin:0 0 14px;font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--gold)}
.map-parts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.map-parts li{border:1px solid #2a3f3a;border-radius:9px;padding:14px;display:flex;flex-direction:column;gap:6px}
.map-parts strong,.map-node strong{font-size:18px;letter-spacing:-.02em}
.map-parts span,.map-node span{font-size:13px;line-height:1.55;color:var(--muted)}
.map-side{display:grid;gap:18px}
.map-node{display:flex;flex-direction:column;gap:6px}
.map-node.independent{border-style:dashed}
.shot-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:18px;margin:0 0 30px}
.shot{margin:0;border:1px solid #2a3f3a;border-radius:12px;overflow:hidden;background:#0b1415}
.shot-link{display:block;position:relative;cursor:zoom-in}
.shot-link{background:#000}
.shot-link img{display:block;width:100%;height:auto;margin:0 auto}
/* Never enlarge a capture beyond its own pixels; width/height attributes reserve the space before it loads. */
.shot[data-shot="lucy-governance"] .shot-link img{max-width:1060px}
.shot.wide{grid-column:1/-1}
.shot-label{display:block;margin-top:6px;font-size:12px;color:#c9d6d2}
.shot-link::after{content:"Enlarge ↗";position:absolute;right:10px;bottom:10px;background:#061416e6;border:1px solid #3e6353;border-radius:4px;color:#e3f5ec;font-size:11px;font-weight:800;padding:6px 9px}
.shot-link:focus-visible{outline:3px solid var(--mint);outline-offset:-3px}
.shot figcaption{padding:12px 16px 14px;font-size:13px;line-height:1.55;color:var(--muted);border-top:1px solid #1f302d}
.shot-pending{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;font-size:13px;line-height:1.6;color:var(--muted);background:repeating-linear-gradient(135deg,#0f1c1e 0 14px,#0c1719 14px 28px)}
.shot-pending strong{color:#e8bd7f}
.component-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.companion-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}
.component{border:1px solid #283b39;background:#0d1718;border-radius:12px;padding:22px 24px}
.component h3{font-size:24px;letter-spacing:-.04em;margin:0 0 10px}
.component h3 span{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#a9bfb5;margin-left:8px}
.component p{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 12px}
.component .eco-status-line{margin:0}
.capability-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px;max-width:860px}
.capability-list li{display:grid;grid-template-columns:24px 1fr;font-size:15px;line-height:1.65;color:var(--muted)}
.capability-list strong{color:var(--text)}
.eco-footnote{font-size:13px;color:var(--muted);margin:16px 0 0}
.eco-footnote a,.contact-form .check a,.contact-aside a{color:var(--mint);display:inline-flex;align-items:center;min-height:24px}
.eco-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}
.eco-cta p{margin:0 12px 0 0;font-size:15px;color:var(--muted)}
.shot-viewer{width:min(1500px,calc(100vw - 24px));max-height:calc(100vh - 24px);padding:0;border:1px solid #4d7663;border-radius:12px;background:#081011;color:var(--text)}
.shot-viewer::backdrop{background:#000c}
.shot-viewer-bar{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 18px;border-bottom:1px solid #1f302d}
.shot-viewer-caption{margin:0;font-size:13px;color:var(--muted);flex:1}
.shot-viewer-close{min-width:44px;min-height:44px;border:1px solid #33443f;border-radius:6px;background:#0d1718;color:var(--text);font-size:16px;cursor:pointer}
.shot-viewer-frame{overflow:auto;max-height:calc(100vh - 100px)}
.shot-viewer-frame{background:#000}
.shot-viewer-frame img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto}
.ecosystem-page .footer-bottom a,.contact-page .footer-bottom a{color:#a4b7ad;display:inline-flex;align-items:center;min-height:24px}
.ecosystem-page .footer-bottom a:hover,.contact-page .footer-bottom a:hover{color:var(--mint)}

/* Contact page */
.contact-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
.contact-form{border:1px solid #2f4a43;border-radius:12px;background:#0d1718;padding:26px;display:grid;gap:18px}
.contact-form label{display:grid;gap:7px;font-size:13px;font-weight:700;color:#d8e3df}
.contact-form input,.contact-form select,.contact-form textarea{font:inherit;font-size:15px;color:var(--text);background:#081011;border:1px solid #3a5249;border-radius:7px;padding:11px 12px;min-height:44px;width:100%}
.contact-form textarea{min-height:170px;resize:vertical}
.contact-form input:focus-visible,.contact-form select:focus-visible,.contact-form textarea:focus-visible{outline:3px solid var(--mint);outline-offset:1px}
.contact-form .hint{font-size:12px;font-weight:500;color:var(--muted)}
.contact-form .check{grid-template-columns:22px 1fr;align-items:start;font-weight:500;line-height:1.55}
.contact-form .check input{min-height:20px;width:20px;height:20px;margin:2px 0 0}
.contact-form .trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.contact-form button[disabled]{opacity:.6;cursor:not-allowed}
.contact-status{border-radius:9px;padding:14px 16px;font-size:14px;line-height:1.6;margin:0}
.contact-status.info{border:1px solid #84613e;background:#1a1712;color:#ecd9bd}
.contact-status.ok{border:1px solid #2f8f73;background:#0f2a22;color:#d6f5e9}
.contact-status.error{border:1px solid #a1574a;background:#2a1513;color:#f5d6d0}
.contact-aside{font-size:14px;line-height:1.75;color:var(--muted)}
.contact-aside h2{font-size:20px;letter-spacing:-.02em;color:var(--text);margin:0 0 10px}
.turnstile-slot{min-height:65px}
@media(max-width:1000px){.page-nav{display:none}}
@media(max-width:850px){.eco-map,.contact-wrap{grid-template-columns:1fr}.eco-hero{padding:64px 0 10px}}
@media(max-width:620px){.component-grid,.companion-pair,.map-parts{grid-template-columns:1fr}.eco-hero h1{font-size:clamp(36px,10vw,52px)}.eco-intro{font-size:15px}.contact-form{padding:18px}.eco-status{white-space:normal}}
