/* 301 BIOTEC — Systems hub: layout glue ONLY.
   Every visual value comes from the locked homepage via site.css. The rules below exist where a
   homepage pattern is reused in a slightly different arrangement, and each uses homepage values. */

/* text entry timing: same rule the product page uses (--fade is set by chrome.js) */
.sp [data-bg]>*{opacity:var(--fade,1)}

/* the hub opening is the product hero without the machine column, so the type block runs wider */
.sys-hero .h-type{max-width:min(1040px,86vw)}
.sys-hero .h-copy p{max-width:62ch}

/* capacity ruler ticks become links on the hub; appearance is the homepage tick, unchanged */
.dim a.tk{pointer-events:auto;text-decoration:none}
.dim a.tk:hover{background:var(--brass-hi)}
.dim a.tk:hover b{color:var(--brass-hi)}
.dim a.tk:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}

/* H2 find-your-capacity: the .fm field component is drawn for the dark enquiry band, so the two
   fields are restated here in the homepage's warm-surface tones. Same geometry, warm colours. */
.sz-form{margin-top:4px}
.sz-form .fm-acts{margin-top:18px}
.sz-form .qrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.4vw,34px)}
.sz-form label{display:block;font:600 10px/1.4 var(--b);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sz-form input[type=number],.sz-form select{width:100%;margin-top:8px;padding:10px 0 11px;background:transparent;
  border:0;border-bottom:1px solid rgba(21,26,23,.3);border-radius:0;color:var(--ink);font:500 17px/1.3 var(--b);
  outline:none;transition:border-color .25s;-webkit-appearance:none;appearance:none}
.sz-form input[type=number]{-moz-appearance:textfield}
.sz-form input:focus,.sz-form select:focus{border-bottom-color:var(--brass-lo)}
.sz-form select{padding-right:28px;cursor:pointer;background-repeat:no-repeat;background-position:right 4px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238C6E3D' stroke-width='1.5'/%3E%3C/svg%3E")}
.sz-form select option{color:var(--ink);background:var(--off)}
.sz-form .btn{display:inline-flex;align-items:center;gap:12px;padding:15px 26px;border:1px solid var(--brass);
  background:var(--brass);color:#0B1710;font:600 10.5px/1.2 var(--b);letter-spacing:.17em;text-transform:uppercase;
  cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.sz-form .btn:hover{background:transparent;color:var(--brass-lo)}
.sz-form .btn:focus-visible{outline:2px solid var(--brass-lo);outline-offset:3px}
.sz-out{margin-top:26px;border-top:1px solid rgba(21,26,23,.14);padding-top:22px}
.sz-hit .lbl{display:block;font:600 10px/1.4 var(--b);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.sz-hit>b{display:block;margin-top:6px;font:600 clamp(22px,2.2vw,30px)/1.1 var(--h);letter-spacing:-.03em;color:var(--ink)}
.sz-m{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:16px}
.sz-m strong{font:600 clamp(24px,2.6vw,36px)/1.05 var(--h);letter-spacing:-.03em;color:var(--ink)}
.sz-c{font:500 14px/1.4 var(--b);color:var(--muted)}
.sz-hit p{margin-top:10px;max-width:46ch;font-size:15px;line-height:1.6;color:var(--muted)}
.sz-hit .go{margin-top:18px}

/* H3 rows: the approved .ind-list row plus one extra line of brochure figures */
.sys-list .sx{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:8px;
  font:400 12.5px/1.5 var(--b);color:var(--muted)}
.sys-list .sx span{position:relative;padding-right:18px}
.sys-list .sx span:not(:last-child)::after{content:"";position:absolute;right:8px;top:.45em;width:1px;height:.9em;background:rgba(21,26,23,.2)}
.sys-list .ds b{font-weight:600;color:var(--ink)}
.sys-list li.hit>a::before{opacity:1;background:var(--brass)}
.sys-list li.hit .nm{color:var(--ink)}

/* H4 compare: a genuine table, typeset with the homepage spec-row tones */
.cmp-pick{margin:28px 0 8px}
.cmp-pick .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{display:inline-flex;align-items:center;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:block;padding:9px 14px;border:1px solid rgba(21,26,23,.2);font:600 11px/1.2 var(--b);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:border-color .2s,color .2s,background-color .2s}
.chip input:checked+span{border-color:var(--brass);color:var(--ink);background:rgba(184,149,90,.12)}
.chip input:focus-visible+span{outline:2px solid var(--brass);outline-offset:2px}
.cmp-wrap{margin-top:26px;overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;font:400 14px/1.5 var(--b)}
.cmp th,.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(21,26,23,.12);vertical-align:top}
.cmp thead th{font:600 11px/1.3 var(--b);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom-color:rgba(21,26,23,.26);white-space:nowrap}
.cmp thead th a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(184,149,90,.5)}
.cmp thead th a:hover{color:var(--brass-lo);border-color:var(--brass-lo)}
.cmp tbody th{font-weight:500;color:var(--muted);white-space:nowrap}
.cmp td{color:var(--ink);white-space:nowrap}
.cmp-empty{margin-top:24px;font-size:15px;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* H5 project-engineered list — the dark-band numbered list used on the homepage large-scale section */
.pe-list{list-style:none;display:grid;gap:0}
.pe-list li{display:flex;gap:18px;padding:18px 0;border-top:1px solid rgba(242,238,229,.14);font-size:clamp(15px,1.2vw,17px);line-height:1.5;color:var(--off)}
.pe-list li:last-child{border-bottom:1px solid rgba(242,238,229,.14)}
.pe-list .no{flex:none;font:600 10px/1.9 var(--b);letter-spacing:.16em;color:var(--brass-hi)}
.sys-pe .s3-note{margin-top:22px;color:rgba(242,238,229,.6)}

@media (max-width:760px){
  .sz-form .qrow{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .cmp td,.cmp th{padding:12px 12px;white-space:normal}
  .cmp thead th{white-space:normal}
  .sys-list .sx{gap:3px 14px;font-size:12px}
}


/* AA: index numbers and small labels take their tone from the band behind them.
   Dark and forest bands use the light brass; the warm band uses a 6%-darker step of --brass-lo
   (4.56:1). Nothing else changes — same type, size, position, spacing and numbering. */
.k i,.ind-list .no,.pg-list .no,.area .n,.in-lbl,.od-lbl,.fq-q .n,.st-op,.sy .n,.ls-el .n{color:var(--brass-hi)}
.ind .k i,.ind .no,.ind .n,.ind .in-lbl,.ind .od-lbl,.ind .fq-q .n,.ind .st-op,
section[data-bg="#F2EEE5"] .k i,section[data-bg="#F2EEE5"] .no,section[data-bg="#F2EEE5"] .n,
section[data-bg="#F2EEE5"] .in-lbl,section[data-bg="#F2EEE5"] .od-lbl,
section[data-bg="#F2EEE5"] .fq-q .n,section[data-bg="#F2EEE5"] .st-op{color:#846739}