.brand{display:flex;align-items:center;gap:9px}
.brand .brand-logo{display:block;width:99px;height:auto;max-height:28px;object-fit:contain}
.brand .brand-suffix{display:inline;width:auto;height:auto;margin:0;background:none;color:currentColor;font-size:.9rem;letter-spacing:.01em}
.hero{position:relative;isolation:isolate;background:linear-gradient(90deg,rgba(8,31,27,.93) 0%,rgba(8,31,27,.79) 47%,rgba(8,31,27,.34) 100%),url("assets/canada/vancouver-skyline.jpg") center/cover}
.hero .eyebrow,.hero-copy,.hero-note{color:#f7f8f2}
.hero h1{color:white;text-shadow:0 2px 20px rgba(0,0,0,.22)}
.hero .quiet-link{color:var(--leaf)}
.hero .button{background:var(--leaf);color:var(--ink)}
.hero-note{background:rgba(6,29,25,.34);padding:12px 14px;border-left:2px solid var(--leaf)}
.system-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;background:none}
.system-card{display:flex;flex-direction:column;padding:0;background:var(--paper);color:var(--ink);box-shadow:0 8px 24px rgba(2,22,17,.16);transition:transform .2s ease,box-shadow .2s ease}
.system-card:hover,.system-card.recommended{transform:translateY(-4px);box-shadow:0 14px 28px rgba(2,22,17,.28)}
.system-card.recommended{outline:3px solid var(--leaf)}
.system-image{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff}
.system-image-placeholder{display:grid;place-items:center;padding:22px;background:linear-gradient(145deg,#e8ece6,#bdcbc2);color:var(--pine);font-size:.74rem;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:.09em}
.system-card-body{display:flex;flex:1;flex-direction:column;padding:20px}
.system-card h3{font-size:1.37rem;line-height:1.06}
.system-family{margin:0 0 10px;color:var(--pine);font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.system-description{min-height:76px;margin:14px 0 18px;color:var(--muted);font-size:.77rem;line-height:1.46}
.system-card .metric-grid{margin-top:auto;border-top:1px solid var(--line);padding-top:14px}
.system-card .metric-grid div{color:var(--muted)}
.system-card .metric-grid strong{color:var(--ink);font-size:.79rem}
.system-card .metric-grid .pending{color:#98502e}
.system-card .text-button{margin-top:18px;text-align:left}
.download-link{display:block;margin:0 0 6px;color:var(--pine);font-size:.74rem;font-weight:800;text-decoration:underline;text-underline-offset:2px}
.support-section{background:linear-gradient(rgba(225,236,228,.94),rgba(225,236,228,.94)),url("assets/canada/vancouver-waterfront.jpg") center/cover}
.projects-panel{background:linear-gradient(115deg,rgba(251,250,246,.96),rgba(251,250,246,.84)),url("assets/canada/canmore-lake.jpg") center/cover;padding:34px;margin-left:-2vw;margin-right:-2vw;padding-left:2vw;padding-right:2vw}
.contact-panel{background:linear-gradient(100deg,rgba(251,250,246,.94),rgba(251,250,246,.78)),url("assets/canada/moraine-lake.jpg") center/cover;padding:42px 2vw 0;margin-left:-2vw;margin-right:-2vw}
.dialog-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:22px 0;background:var(--line)}
.dialog-metrics div{padding:11px 12px;background:var(--paper)}
.dialog-metrics dt{color:var(--muted);font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.dialog-metrics dd{margin:3px 0 0;font:500 .83rem "DM Mono",monospace}
.dialog-downloads{margin:21px 0;padding:14px;background:#edf0e9}
.dialog-disclaimer{margin:20px 0 0;color:var(--muted);font-size:.72rem;line-height:1.45}
@media(max-width:1100px){.system-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.brand .brand-logo{width:86px}.hero{background-position:60% center}.system-grid{grid-template-columns:repeat(1,minmax(0,1fr));gap:10px}.system-description{min-height:0}.projects-panel,.contact-panel{margin-left:-1vw;margin-right:-1vw;padding-left:1vw;padding-right:1vw}.contact-panel{padding-top:35px}.dialog-metrics{grid-template-columns:1fr}}