/* Industry pages extend the established type scale and spacing system. */
.industry-context{padding-top:32px}
.industry-context img{width:100%;height:auto;background:#e7eaec}
.industry-context figcaption{padding-top:12px;font-size:.875rem;line-height:1.6;color:var(--sub)}
.industry-context+.industry-content{padding-top:72px}
@media(max-width:780px){.industry-context{padding-top:22px}.industry-context figcaption{padding-top:10px}.industry-context+.industry-content{padding-top:48px}}
.industry-challenges,.industry-evidence-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px}
.industry-challenges article,.industry-evidence-grid article{border-top:1px solid var(--line);padding-top:26px}
.industry-challenges h3,.industry-evidence-grid h3,.industry-results h3{font-size:1.5rem;line-height:1.25;letter-spacing:-.025em;font-weight:400}
.industry-challenges h3,.industry-evidence-grid h3{margin-bottom:18px}
.industry-challenges p,.industry-evidence-grid p{font-size:1rem;line-height:1.7}
.industry-content .tech-video-copy .text-link{display:flex;width:fit-content}
.industry-content .editorial-body>.text-link{display:flex;width:fit-content;margin-top:25px}
.industry-results{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:42px;border-block:1px solid var(--line);padding-block:34px}
.industry-result-value{font-size:clamp(2.8rem,4.4vw,4.4rem);line-height:1.1;letter-spacing:-.045em;color:var(--ink);margin-bottom:22px;font-weight:600}
.industry-results h3{margin-bottom:16px}
.industry-results p:not(.industry-result-value){font-size:1rem;line-height:1.7}
.industry-result-context{border-left:1px solid var(--line);padding-left:34px}
.industry-evidence-footer{margin-top:30px;max-width:850px}
/* In the heading row it is a grid item in the narrow right column, bottom-
   aligned with the h2 by .section-top's align-items:end, so it drops the
   top margin it needed when it followed the evidence grid. Below 850px
   .section-top is display:block and the two stack, so the margin comes back
   as the gap under the heading. */
.section-top .industry-evidence-footer{max-width:none}
/* The paragraph is capped at 360px and sits against the column’s right edge,
   so the box is narrowed to match: both it and the link then start on the
   same left edge instead of the link hanging 69px further out. */
@media(min-width:851px){.section-top .industry-evidence-footer{max-width:360px;margin-left:auto}}
@media(min-width:851px){.section-top .industry-evidence-footer{margin-top:0}}
.industry-evidence-footer>p{font-size:.9375rem;line-height:1.7}
.industry-evidence-footer .actions{margin-block:25px 18px}
.industry-evidence-footer>.text-link{margin-top:22px}
.industry-workflow{margin-top:0}
.industry-workflow .application-row{grid-template-columns:.7fr 1.3fr;gap:26px;padding-block:28px}
.industry-workflow .application-row:first-child{padding-top:0;border-top:0}
/* Give the session one heading and a shared baseline for image and steps. */
#daily-workflow .facility-workflow-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(36px,5vw,80px);row-gap:42px}
#daily-workflow .facility-workflow-title{grid-column:1/-1;max-width:none;margin:0;text-wrap:balance}
#daily-workflow .facility-session-photo{margin:0;min-width:0}
#daily-workflow .facility-session-photo img{display:block;width:100%;height:auto}
#daily-workflow .editorial-body{min-width:0}
#daily-workflow .industry-workflow{margin:0}
#daily-workflow .application-row{display:block;padding-block:24px}
#daily-workflow .application-row:first-child{padding-top:0}
#daily-workflow .application-row h3{margin:0 0 12px}
#daily-workflow .application-row p{max-width:none;margin:0;text-wrap:pretty}
@media(max-width:780px){#daily-workflow .facility-workflow-layout{display:grid;grid-template-columns:1fr;row-gap:30px}#daily-workflow .facility-workflow-title{max-width:550px}#daily-workflow .industry-workflow{margin:0}#daily-workflow .application-row{padding-block:24px}#daily-workflow .application-row:first-child{padding-top:0}}
.industry-content .faq-intro>p{max-width:370px;margin-top:25px;font-size:1rem;line-height:1.7}
@media(max-width:1000px){.industry-challenges,.industry-evidence-grid{gap:24px}.industry-results{gap:25px;grid-template-columns:1fr 1fr}.industry-result-context{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:25px 0 0}.industry-workflow .application-row{display:block}.industry-workflow h3{margin-bottom:15px}}
@media(max-width:700px){.industry-challenges,.industry-evidence-grid{grid-template-columns:1fr;gap:28px}.industry-challenges article,.industry-evidence-grid article{padding-top:24px}.industry-results{grid-template-columns:1fr;gap:26px}.industry-results>article+article{border-top:1px solid var(--line);padding-top:26px}.industry-result-value{margin-bottom:16px}.industry-workflow{margin-top:32px}.industry-evidence-footer .actions{gap:20px}.industry-content .faq-intro>p{margin:0 0 30px}}
/* Three context statistics, each carrying its own citation. The results grid is
   built for two figures beside a wider context block, so the trio gets its own
   layout rather than a modifier that has to fight that grid at every breakpoint.
   The big number reuses .industry-result-value, hence the :not() on the body rule
   -- a bare `.industry-figures p` would outrank it and flatten the figure. */
.industry-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px;border-block:1px solid var(--line);padding-block:34px}
.industry-figures p:not(.industry-result-value){font-size:1rem;line-height:1.7}
.industry-figures>article{display:flex;flex-direction:column}
/* Labels wrap to different line counts, so the citations are pushed to the
   bottom of each column and sit on one line across the trio. */
.industry-figures p.industry-figure-source{margin-top:auto;padding-top:16px;font-size:.8125rem;line-height:1.5;color:var(--sub)}
@media(max-width:1000px){.industry-figures{gap:28px}}
@media(max-width:780px){.industry-figures{grid-template-columns:1fr;gap:0}.industry-figures>article+article{border-top:1px solid var(--line);margin-top:26px;padding-top:26px}}

/* Four reasons folded under "A defined role for surface UV-C." Reuses the
   challenges grid for type, rule and stacking; only the column count, the
   heading level and the dark-section rule colour differ. Appended after the
   existing media queries so these win at equal specificity. */
.industry-reasons{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.industry-reasons h4{font-size:1.5rem;line-height:1.25;letter-spacing:-.025em;font-weight:400;margin:0 0 18px}
.industry-reasons-block{margin-top:62px}
.industry-reasons-title{font-size:1.5rem;line-height:1.25;letter-spacing:-.025em;font-weight:400;margin:0 0 34px}
.dark .industry-challenges article{border-top-color:#324048}
@media(max-width:1100px){.industry-reasons{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:700px){.industry-reasons{grid-template-columns:1fr;gap:28px}.industry-reasons-block{margin-top:44px}}
/* The figures sat under .section-top's 45px bottom margin; the intro above them
   is now the same .editorial-split the "contamination gap" section uses, which
   carries no bottom margin, so the space belongs to the figures. On /international/ the
   intro is still .section-top and these two margins collapse to one 45px, so
   that edition is unchanged. */
.industry-figures{margin-top:45px}
/* Each figure carries its own hairline above, so the rule breaks at the column
   gaps the way .industry-challenges does, and the block closes without one
   underneath -- border-block drew a single continuous line top and bottom. */
.industry-figures{border-block:0;padding-block:0}
.industry-figures>article{border-top:1px solid var(--line);padding-top:34px}
@media(max-width:780px){.industry-figures>article{padding-top:26px}}
.industry-figures p.industry-figure-source a{color:var(--link);text-decoration:underline;text-underline-offset:3px}


/* GMP dose groups (#dose-by-organism): vegetative organisms (3-log target) beside
   spores (2-log target). Doses are printed, not drawn: the groups have different log
   targets, so a shared bar scale would compare unlike things. */
/* The takeaway beside the heading starts level with its top line, not its bottom. */
#dose-by-organism .section-top .industry-evidence-footer{align-self:start}
.dose-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 64px}
.dose-group h3{font:400 .8125rem/1.5 Plex,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--sub);padding-bottom:14px;border-bottom:2px solid var(--cyan)}
.dose-group ul{list-style:none;margin:0;padding:0}
.dose-group li{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.dose-org{font-weight:500;font-size:1.0625rem;line-height:1.4}
.dose-meta{display:block;margin-top:4px;font-size:.875rem;font-weight:400;line-height:1.45;color:var(--sub)}
.dose-dose{font-weight:500;font-size:1.125rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.dose-dose small{font-size:.875rem;font-weight:400;color:var(--sub)}
/* Note and source share the width of one group column above them (64px is the column gap). */
.dose-note,.dose-source{max-width:calc((100% - 64px)/2)}
.dose-note{margin-top:28px;font-size:.8125rem;line-height:1.7;color:var(--sub)}
.dose-source{margin-top:12px;font-size:.8125rem;line-height:1.5;color:var(--sub)}
@media(max-width:850px){.dose-groups{grid-template-columns:1fr}.dose-note,.dose-source{max-width:none}}

.dose-source a{color:var(--link);text-decoration:underline;text-underline-offset:3px}

/* Two-figure variant. .industry-figures is repeat(3,...), which strands a pair
   in a three-column grid the way .specs' repeat(4,1fr) did. */
.industry-figures-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:780px){.industry-figures-pair{grid-template-columns:1fr}}
/* The lead paragraph sat flush against the video with no gap at all; 45px is
   what .industry-figures leaves above itself in the same position. */
#dosage-simulation .media-frame{margin-top:45px}