/* 301 BIOTEC — Design your system: layout glue ONLY.
   The form uses the approved .fm component on dark bands, so no field styling is restated here.
   Everything below arranges existing homepage patterns; all values are homepage values. */

.sp [data-bg]>*{opacity:var(--fade,1)}

/* the hero is the product hero without the machine column */
.dys-hero .h-type{max-width:min(1040px,86vw)}
.dys-hero .h-copy p{max-width:62ch}

/* the preliminary-configuration notice: the homepage evidence-note treatment, brass-ruled */
.prelim{margin-top:26px;padding:16px 20px;border-left:2px solid var(--brass);background:rgba(184,149,90,.08);max-width:62ch}
.prelim b{display:block;font:600 10px/1.4 var(--b);letter-spacing:.2em;text-transform:uppercase;color:var(--brass-hi)}
.prelim span{display:block;margin-top:7px;font-size:14.5px;line-height:1.6;color:var(--muted-d)}

/* configurator: form left, concept flow right — the homepage enquiry two-column rhythm */
.dys-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,86px);margin-top:clamp(40px,6vh,70px);align-items:start}
.dys-form fieldset{border:0;padding:0;margin:0 0 clamp(26px,4vh,40px)}
.dys-form legend{padding:0 0 16px;font:600 10px/1.3 var(--b);letter-spacing:.2em;text-transform:uppercase;color:var(--brass-hi);border-bottom:1px solid rgba(242,238,229,.16);width:100%;margin-bottom:20px}
.dys-form .qrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.4vw,30px)}
.dys-form .fld{margin-bottom:22px}
.dys-form .fld.w{margin-bottom:26px}

/* concept flow — a sticky column of documented components */
.dys-flow{position:sticky;top:calc(var(--hdrH,86px) + 24px)}
.dys-flow>.k{margin-bottom:18px}
.flow-empty{font-size:14.5px;line-height:1.6;color:rgba(242,238,229,.6)}
.fn-head{padding:18px 0 20px;border-top:1px solid rgba(221,190,133,.4);border-bottom:1px solid rgba(242,238,229,.14)}
.fn-head .lbl{display:block;font:600 10px/1.4 var(--b);letter-spacing:.2em;text-transform:uppercase;color:var(--brass-hi)}
.fn-head strong{display:block;margin-top:8px;font:600 clamp(24px,2.4vw,34px)/1.05 var(--h);letter-spacing:-.03em;color:var(--off)}
.fn-head em{display:block;margin-top:4px;font-style:normal;font:500 14px/1.4 var(--b);color:var(--muted-d)}
.fn-head p{margin-top:10px;font-size:13px;line-height:1.6;color:rgba(242,238,229,.6)}
.fn-head.pe .lbl{color:var(--brass-hi)}
.fn-list{list-style:none;margin-top:4px}
.fn{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid rgba(242,238,229,.12)}
.fn::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:1px;background:rgba(221,190,133,.26)}
.fn:first-child::before{top:50%}
.fn:last-child::before{bottom:50%}
.fn-n{position:relative;z-index:1;align-self:start;margin-top:2px;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:var(--deep);border:1px solid rgba(221,190,133,.5);font:600 9.5px/1 var(--b);letter-spacing:.06em;color:var(--brass-hi)}
.fn b{display:block;font:600 15px/1.35 var(--b);color:var(--off)}
.fn span{display:block;margin-top:5px;font-size:13.5px;line-height:1.6;color:var(--muted-d)}
.fn.flag .fn-n{border-color:var(--brass);background:rgba(184,149,90,.2)}

/* questions the assessment has to answer */
.cf{margin-top:28px;padding-top:20px;border-top:1px solid rgba(242,238,229,.14)}
.cf .lbl{font:600 10px/1.4 var(--b);letter-spacing:.2em;text-transform:uppercase;color:var(--brass-hi)}
.cf ul{list-style:none;margin-top:14px}
.cf li{position:relative;padding:7px 0 7px 20px;font-size:13.5px;line-height:1.6;color:var(--muted-d)}
.cf li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:1px;background:var(--brass)}
.cf li.none{padding-left:0;color:rgba(242,238,229,.6)}
.cf li.none::before{display:none}

/* summary */
.dys-sum .prelim{margin-top:30px}
.sum-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:0 clamp(28px,4vw,64px);margin-top:clamp(32px,4.5vh,48px)}
.sum-dl div{display:grid;grid-template-columns:minmax(0,1fr);padding:15px 0;border-bottom:1px solid rgba(242,238,229,.12)}
.sum-dl dt{font:600 10px/1.4 var(--b);letter-spacing:.18em;text-transform:uppercase;color:rgba(242,238,229,.6)}
.sum-dl dd{margin-top:7px;font-size:15.5px;line-height:1.55;color:var(--off);word-break:break-word}
.sum-dl div.off dd{color:rgba(242,238,229,.6)}   /* AA: .3 measured 2.46:1 against the band */
.dys-sum .s3-note{margin-top:26px;max-width:72ch;color:rgba(242,238,229,.6)}
.dys-sum .acts{margin-top:30px}

@media (max-width:980px){
  .dys-grid{grid-template-columns:minmax(0,1fr);gap:clamp(34px,6vh,52px)}
  .dys-flow{position:static}
}
@media (max-width:620px){
  .dys-form .qrow{grid-template-columns:minmax(0,1fr)}
}