/* Product family extensions; the palette stays in styles.css. */
.nav { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--border); }
.nav-inner { max-width: 1280px; margin: auto; padding: 16px 28px; display: flex; align-items: center; gap: 28px; }
.nav .brand img { width: 176px; height: auto; }
.nav-links { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav-links a { font-size: .92rem; font-weight: 600; white-space: nowrap; }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav .btn-login { background: var(--graphite); color: var(--cream); padding: 10px 16px; }
.nav .mobile-toggle { display: none; }
.family-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.family-product { padding: 36px; display: flex; flex-direction: column; scroll-margin-top: 100px; }
.family-product h3 { font-size: 2rem; margin-top: 30px; }
.family-product .large-p { font-size: 1.24rem; line-height: 1.5; }
.family-product .section-actions { margin-top: auto; padding-top: 24px; }
.family-product-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.family-flow { padding: 25px; }
.family-flow-node { display: flex; align-items: flex-start; gap: 18px; border-bottom: 1px solid var(--border); padding: 24px 0; }
.family-flow-node > span { color: var(--oxide); font-size: .8rem; font-weight: 700; line-height: 1.8; }
.family-flow-node strong { display: block; font-size: 1.1rem; }
.family-flow-node p { margin: 8px 0 0; line-height: 1.55; color: var(--muted); font-size: .95rem; }
.family-flow-foot { font-size: .82rem; line-height: 1.65; padding-top: 20px; color: var(--muted); }
.family-rate-unit { font-size: 1rem; font-weight: 500; color: var(--muted); }
.family-pricing-hero { padding: 72px 0 42px; }
.family-pricing-hero h1 { max-width: 900px; }
.family-pricing-hero .hero-lede { max-width: 680px; }
.family-availability { background: var(--surface-2); border-left: 3px solid var(--oxide); padding: 22px; margin: 20px 0; }
#build-quote { margin: 22px 0; }
#build-quote label { font-weight: 600; display: block; line-height: 1.5; }
#door-count { display: block; width: 100%; padding: 14px; margin: 12px 0; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
#build-total { display: block; font-size: 2rem; font-weight: 700; margin-top: 26px; }
#build-floor { color: var(--muted); font-size: .9rem; }
:focus-visible { outline: 3px solid var(--oxide); outline-offset: 4px; }
[aria-disabled="true"] { opacity: .6; pointer-events: none; }
@media (max-width: 960px) {
 .nav-inner { padding: 14px 20px; gap: 16px; flex-wrap: wrap; }
 .nav .brand img { width: 148px; }
 .nav .mobile-toggle { display: block; margin-left: auto; padding: 8px; }
 .nav-links { display: none; width: 100%; margin: 0; order: 3; flex-wrap: wrap; padding: 14px 0; }
 .nav-links.open { display: flex; }
 .family-product { padding: 26px; }
}
@media (max-width: 700px) {
 .family-products { grid-template-columns: 1fr; }
 .family-product-top { align-items: flex-start; }
 .family-pricing-hero { padding-top: 44px; }
 .family-flow { padding: 20px; }
 .nav-actions { gap: 8px; }
 .nav .btn-login { font-size: .82rem; padding: 8px 10px; }
}

[data-theme="dark"] .family-flow-node > span { color: var(--oxide-soft); }
[data-theme="dark"] .family-flow .status-pill { color: var(--cream); border-color: var(--success); }

/* Fine print under a figure or a form (pricing, value). The class was used on two pages and
   defined nowhere, so the lines rendered as body copy at body size. */
.meta { color:var(--muted); font-size:14px; line-height:1.5; }