/* Static catalogue pages (products/, applications/, systems/, projects/) — generated by tools/build-seo.mjs.
   Uses the v2 tokens only; layout is quiet on purpose: the interactive views stay the showpiece. */
.sp-hero{background:var(--bone)}
.sp-bc ol{list-style:none;margin:0 0 var(--s4);padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font:500 13px/1.4 var(--sans);color:var(--mute)}
.sp-bc li{display:flex;align-items:center}
.sp-bc li+li::before{content:"/";margin:0 10px;color:var(--line-2)}
.sp-bc a{color:var(--ink-2);text-decoration:none;padding:12px 0;margin:-12px 0}
.sp-bc a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sp-bc [aria-current]{color:var(--mute);max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sp-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.sp-head-hub{grid-template-columns:minmax(0,1fr)}
.sp-head h1{overflow-wrap:anywhere}
.sp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.sp-tag{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--line-2);border-radius:3px;font:500 12.5px/1.2 var(--mono);letter-spacing:.04em;color:var(--ink-2);text-decoration:none;background:var(--paper)}
a.sp-tag:hover{border-color:var(--ink);color:var(--ink)}
.sp-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--gap-cta,32px)}
.sp-cta .b.done{background:var(--graphite);color:#fff}

.sp-pack,.sp-fig{margin:0;border-radius:var(--r);overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.sp-pack{aspect-ratio:1/1;display:grid;place-items:center;padding:clamp(20px,4vw,48px)}
.sp-pack img{width:100%;height:100%;object-fit:contain}
.sp-fig{aspect-ratio:4/3}
.sp-fig img{width:100%;height:100%;object-fit:cover;display:block}
.sp-type span{font:600 clamp(28px,3.4vw,52px)/1 var(--disp);letter-spacing:-.02em;color:var(--co-text,#a04709);text-align:center;overflow-wrap:anywhere}

.sp-sec{padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--line)}
.sp-sec:nth-of-type(even){background:var(--paper)}
.sp-sec h2{margin:0 0 var(--s4)}
.sp-sec h2 a{color:inherit;text-decoration:none}
.sp-sec h2 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.sp-n{font:500 14px/1 var(--mono);color:var(--mute);vertical-align:middle;margin-left:6px}
.sp-h3{font:500 11.5px/1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:var(--s5) 0 var(--s2)}
.sp-copy{margin:0;max-width:68ch;font-size:clamp(17px,1.3vw,19px);line-height:1.65;color:var(--ink-2)}
.sp-kd{max-width:980px}
.sp-out{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.sp-out li{background:var(--paper);padding:20px 22px;font-size:16px;line-height:1.5;color:var(--ink-2)}

.sp-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 28px}
.sp-list li{border-top:1px solid var(--line)}
.sp-list a{display:flex;flex-direction:column;gap:3px;min-height:44px;padding:14px 0;text-decoration:none;color:var(--ink)}
.sp-list b{font:600 15.5px/1.3 var(--sans)}
.sp-list span{font-size:14px;line-height:1.45;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-list a:hover b{color:var(--co-text,#a04709)}
.sp-list a:focus-visible{outline:2px solid var(--co);outline-offset:2px}
.sp-more{margin:var(--s4) 0 0}
.sp-end{background:var(--sand)!important}

@media (max-width:900px){
  .sp-head{grid-template-columns:1fr}
  .sp-pack{max-width:420px;width:100%}
}
@media (max-width:600px){
  .sp-cta .b{flex:1 1 100%;justify-content:center}
  .sp-list{grid-template-columns:1fr}
}
.sp-hero{padding-bottom:var(--sec-y-tight,64px)}
.sp-pack{background:#fff}

/* blog posts */
.sp-date{margin:var(--s3) 0 0;font:500 13px/1.4 var(--mono);color:var(--mute)}
.sp-post{background:var(--paper)}
.sp-article{max-width:72ch;font-size:clamp(17px,1.25vw,18.5px);line-height:1.7;color:var(--ink-2)}
.sp-article>*:first-child{margin-top:0}
.sp-article p{margin:0 0 1.1em}
.sp-article h2{font:650 clamp(24px,2.2vw,32px)/1.2 var(--disp);color:var(--ink);margin:1.8em 0 .6em;letter-spacing:-.01em}
.sp-article h3{font:600 clamp(19px,1.5vw,22px)/1.3 var(--sans);color:var(--ink);margin:1.5em 0 .5em}
.sp-article ul,.sp-article ol{margin:0 0 1.2em;padding-left:1.3em}
.sp-article li{margin:.35em 0}
.sp-article strong{color:var(--ink);font-weight:600}
.sp-article a{color:var(--co-text,#a04709);text-underline-offset:3px}
.sp-article blockquote{margin:1.4em 0;padding:0 0 0 20px;border-left:2px solid var(--co)}
.sp-article table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:15px;display:block;overflow-x:auto}
.sp-article th,.sp-article td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.sp-article th{background:var(--bone);color:var(--ink)}