/* Commercial pages and public navigation; converter workspace uses its own shell. */
.skip-link{position:fixed;top:.5rem;left:.5rem;z-index:50;padding:.7rem 1rem;background:var(--ink);color:#fff;transform:translateY(-200%)}
.skip-link:focus{transform:none}
.public-header .desktop-nav{gap:clamp(.7rem,1vw,1.1rem)}
.public-header .desktop-nav a{font-size:.9rem;white-space:nowrap}
.public-header a[aria-current="page"]{text-decoration:underline;text-underline-offset:.3rem}
.public-utilities{display:flex;align-items:center;gap:.7rem}
.public-utilities .portal-link{background:var(--navy);border-color:var(--navy);color:var(--white);font-weight:600;text-decoration:none}
.public-utilities .portal-link:hover{background:var(--ink);border-color:var(--ink)}
.public-utilities .portal-link:focus-visible{outline-color:var(--accent);outline-offset:-4px}
.mobile-menu{display:none}
.mobile-menu summary{cursor:pointer;font-weight:650;padding:.55rem .75rem;border:1px solid var(--line);border-radius:10px}
.commercial-footer{display:grid;grid-template-columns:1.2fr 1fr 1.2fr 1fr;gap:2rem}
.commercial-footer h2{font-size:1rem;letter-spacing:0;margin-bottom:.6rem}
.commercial-footer .footer-links{gap:.55rem;font-size:.95rem}
.commercial-footer a{overflow-wrap:anywhere}
.commercial-section{scroll-margin-top:8rem}
.commercial-section .card{min-width:0}
.commercial-section .card h3{font-size:1.35rem}
.commercial-section .card ul{padding-left:1.2rem}
.commercial-section .card li{margin-bottom:.5rem}
.example-list{display:grid;gap:1.4rem}
.example-card{padding:clamp(1.5rem,3vw,2.5rem);background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.example-card h2{font-size:1.6rem}
.example-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.example-steps h3{font-size:1rem;letter-spacing:0;color:var(--accent-dark)}
.example-steps p{color:var(--muted)}
.package-price{font-size:2rem;font-weight:750;color:var(--ink)!important;letter-spacing:-.03em}
.package-price small{font-size:1rem;font-weight:500;letter-spacing:0}
.package-details{margin-top:1.5rem}
.package-details summary{cursor:pointer;font-weight:750;padding:1rem 0}
.package-details .prose{padding:1rem 0}
.package-details h3{color:var(--ink);font-size:1.2rem}
.response-list{margin:0}
.response-list dt{font-weight:750;color:var(--ink);margin-top:1rem}
.response-list dd{margin:.25rem 0 0}
@media(max-width:1100px){
 .public-header .desktop-nav{display:none}
 .mobile-menu{display:block}
 .mobile-nav{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:0;max-height:calc(100dvh - 70px);overflow-y:auto;background:var(--paper);border-bottom:1px solid var(--line);padding:.7rem 1.25rem;box-shadow:var(--shadow)}
 body:not(.authenticated) .public-header .mobile-nav>a{display:block;padding:.7rem .5rem}
}
@media(max-width:900px){.commercial-footer{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
 .commercial-footer,.example-steps{grid-template-columns:1fr}
 .public-header .nav-wrap{gap:.5rem}
 .public-utilities{gap:.4rem}
 .public-utilities .portal-link{font-size:.8rem;padding:.5rem .6rem}
 .mobile-menu summary{padding:.5rem .6rem;font-size:.9rem}
 .package-price{font-size:1.85rem}
}

/* Readable English source pages; legacy pages and the converter keep their layout. */
.commercial-page .section{padding:clamp(2.75rem,5vw,4.5rem) 0}
.commercial-page .page-hero{padding:clamp(3rem,6vw,5rem) 0 2rem}
.commercial-page .page-hero h1{font-size:clamp(2.3rem,4.3vw,4.2rem);max-width:20ch}
.commercial-page .prose{max-width:65ch}
.commercial-page .card{min-height:0}
.commercial-page .card p:last-child{margin-bottom:0}
.commercial-page .commercial-cta{padding:clamp(3rem,5vw,4.5rem) 0}
.commercial-page .commercial-cta h2{max-width:22ch}
.commercial-page .commercial-cta .lead{max-width:40ch}
.commercial-page .example-card{scroll-margin-top:8rem}
#systems-pricing .package-price{font-size:clamp(1.4rem,2.25vw,1.85rem)}
.commercial-page .package-grid+.prose{margin-top:1.5rem}
.commercial-page .package-details{border-top:1px solid var(--line)}
.commercial-page .package-details summary{line-height:1.4}
.example-index{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;list-style:none;padding:0;margin:1.5rem 0 0;font-weight:650}
.example-index a{text-underline-offset:.2rem}
.process-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;list-style:decimal inside;padding:0;margin:2rem 0 0}
.process-list li::marker{font-weight:750;color:var(--accent-dark)}
.process-list h3{margin-top:.6rem}
.commercial-contact .enquiry-intro{grid-column:1;grid-row:1}
.commercial-contact .form-layout>form{grid-column:2;grid-row:1}
.commercial-contact .form-stack>.help-text{font-size:.88rem;margin:0}
.commercial-contact .form-layout{padding-top:1rem}
@media(max-width:900px){
 .commercial-contact .enquiry-intro,.commercial-contact .form-layout>form{grid-column:auto;grid-row:auto}
}
@media(max-width:620px){
 .process-list{grid-template-columns:1fr}
 .commercial-page .card{padding:1.4rem}
 .commercial-page .example-card{padding:1.4rem}
 .commercial-page .package-grid .package-price{font-size:1.75rem}
 .commercial-page .example-index{gap:.6rem 1rem;font-size:.95rem}
}

/* Explicit language links stay usable independently of the mobile menu. */
.language-selector{display:flex;justify-content:flex-end;align-items:center;gap:.5rem;padding-bottom:.6rem;font-size:.8rem;flex-wrap:wrap}
.language-selector a{padding:.25rem .15rem;text-underline-offset:.2rem}
.language-selector a[aria-current="page"]{font-weight:750;text-decoration:underline}
.language-selector a:focus-visible{outline:2px solid var(--accent-dark);outline-offset:3px}
.language-note,.english-only{font-size:.75rem}
.language-note{color:var(--muted)}
.english-only{color:inherit}

body .site-header nav.language-selector>a{display:inline-flex}
html[lang="af"] main p,html[lang="af"] main li,html[lang="af"] main dd{overflow-wrap:anywhere}

/* Comparison estimates stay secondary to the approved ZAR price. */
.commercial-page .foreign-price{display:flex;flex-wrap:wrap;gap:.15rem .35rem;font-size:.85rem;font-weight:400;line-height:1.5;color:var(--muted);margin-top:-.6rem}
.foreign-price .currency-estimate{white-space:nowrap}
.commercial-page .fx-pricing-note{font-size:.88rem;color:var(--muted);margin:1rem 0 1.5rem}
.fx-pricing-note p{margin:.4rem 0}
.fx-pricing-note time{white-space:nowrap}

/* The enquiry stays short until the visitor chooses to add context. */
.commercial-contact .enquiry-check{display:none}
.commercial-contact .enquiry-details{border-top:1px solid var(--line);padding-top:.4rem}
.enquiry-details summary{cursor:pointer;font-weight:750;padding:.8rem 0;min-height:44px}
.enquiry-details summary:focus-visible{outline:3px solid var(--accent-dark);outline-offset:3px}
.commercial-contact .help-text{font-size:.88rem;color:var(--muted);margin:.4rem 0}
.commercial-contact textarea{resize:vertical;min-height:6rem;max-width:100%}
.commercial-contact .enquiry-errors{border:1px solid var(--danger);border-radius:10px;padding:1rem;overflow-wrap:anywhere}
.enquiry-errors p,.enquiry-errors ul{margin:.4rem 0}
.commercial-contact .form-layout>form{min-width:0}
.commercial-contact .form-control,.commercial-contact .enquiry-errors{scroll-margin-top:9rem}