/*! DBC V7.31.8-R22 ยท BIOTEN Packaging homepage precision layout | 2026-07-26 */ html[data-v7318-packaging-layout="precision-r22"] { --bp7318-r22-line: rgba(26, 58, 72, .12); --bp7318-r22-line-strong: rgba(31, 85, 122, .2); --bp7318-r22-shadow: 0 16px 42px rgba(29, 55, 62, .075), 0 2px 7px rgba(29, 55, 62, .035); --bp7318-r22-shadow-hover: 0 20px 48px rgba(29, 55, 62, .105), 0 3px 9px rgba(29, 55, 62, .04); --bp7318-r22-blue: #174d72; --bp7318-r22-blue-deep: #103b5f; } /* Keep the accepted information architecture; refine only vertical rhythm. */ html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] :is(#domains, #engineering) { padding-block: clamp(84px, 7.25vw, 104px); } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #routes { padding-block: clamp(78px, 6.7vw, 96px); } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #publishing { padding-block: clamp(74px, 6.25vw, 90px); } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #evidence { padding-block: clamp(70px, 5.8vw, 84px); } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .bp7140-section-head { margin-bottom: 38px; padding-bottom: 24px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .bp7160-section-head--stack { margin-bottom: 32px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .bp7160-section-head--compact { margin-bottom: 26px; } /* Application cards: a calmer frame and a wider editorial image ratio. */ html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #domains .bp7140-route-card { padding: 5px; border-color: rgba(255, 255, 255, .88); border-radius: 23px; box-shadow: var(--bp7318-r22-shadow); } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #domains .bp7140-route-card::before { inset: 5px; border-radius: 17px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #domains .bp7140-route-card__media { aspect-ratio: 16 / 10; border-radius: 17px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #domains .bp7140-route-card__body { padding: 23px 22px 24px; } /* Engineering chain: retain the rail on desktop, remove its ghost spacing on compact layouts. */ html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #engineering .bp7140-chain { border-color: rgba(255, 255, 255, .88); box-shadow: var(--bp7318-r22-shadow); } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #engineering .bp7140-chain article { min-height: 164px; padding: 52px 19px 22px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #engineering .bp7140-chain strong { margin-top: 32px; } /* Candidate and collaboration cards form two distinct, compact systems. */ html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #routes .bp7140-grid--3 { gap: 18px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #routes .bp7140-card { min-height: 252px; padding: 27px 26px 25px; border-color: rgba(255, 255, 255, .84); border-radius: 24px; box-shadow: var(--bp7318-r22-shadow); } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #routes .bp7140-card::before { inset: 7px; border-radius: 17px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #routes .bp7140-card__number { margin-bottom: 22px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #publishing .bp7140-grid--4, html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #evidence .bp7140-evidence-ribbon { box-shadow: var(--bp7318-r22-shadow); } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #publishing .bp7140-card { min-height: 198px; padding: 24px 22px 22px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #publishing .bp7140-card::after { left: 22px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #publishing .bp7140-card__number { margin-bottom: 18px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #evidence .bp7140-evidence-ribbon article { min-height: 118px; padding: 22px 20px 20px; } /* Buttons: restore a clear primary/secondary hierarchy without neumorphic noise. */ html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] main#main-content .bp7140-button { color: #17332f !important; -webkit-text-fill-color: #17332f !important; text-shadow: none !important; background: rgba(255, 255, 255, .82) !important; border: 1px solid rgba(31, 85, 122, .2) !important; box-shadow: 0 8px 20px rgba(25, 54, 65, .07), inset 0 1px 0 rgba(255, 255, 255, .84) !important; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] main#main-content .bp7140-button > * { -webkit-text-fill-color: inherit !important; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] main#main-content :is(.bp7140-button--primary, .bp7140-button--blue), html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] main#main-content #project .bp7140-button { color: #fff !important; -webkit-text-fill-color: #fff !important; background: linear-gradient(135deg, var(--bp7318-r22-blue), var(--bp7318-r22-blue-deep)) !important; border-color: transparent !important; box-shadow: 0 11px 26px rgba(16, 59, 95, .2), inset 0 1px 0 rgba(255, 255, 255, .16) !important; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] main#main-content .bp7140-button > span:last-child[aria-hidden="true"], html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] main#main-content .bp7140-button .bp7141-button-icon { text-shadow: none !important; box-shadow: none !important; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] main#main-content :is(.bp7140-button--primary, .bp7140-button--blue) > span:last-child[aria-hidden="true"], html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] main#main-content :is(.bp7140-button--primary, .bp7140-button--blue) .bp7141-button-icon, html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] main#main-content #project .bp7141-button-icon { background: rgba(255, 255, 255, .12) !important; } /* Patent evidence aligns to the main page shell and avoids artificial English hyphenation. */ html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .pgeo-feature { padding-block: clamp(76px, 6.4vw, 92px); } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .pgeo-shell { width: min(1240px, calc(100% - 48px)); } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .pgeo-feature__head { margin-bottom: 32px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] main#main-content .pgeo-feature__head h2 { overflow-wrap: normal !important; word-break: normal !important; -webkit-hyphens: none !important; hyphens: none !important; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .pgeo-feature__metric { padding: 23px 22px 25px; } /* Footer: two useful columns on regular phones; a safe single column on narrow phones. */ @media (hover: hover) and (pointer: fine) { html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] main#main-content .bp7140-button:hover, html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] main#main-content .bp7140-button:focus-visible { transform: translateY(-2px); box-shadow: 0 11px 25px rgba(25, 54, 65, .105), inset 0 1px 0 rgba(255, 255, 255, .88) !important; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] main#main-content :is(.bp7140-button--primary, .bp7140-button--blue):hover, html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] main#main-content :is(.bp7140-button--primary, .bp7140-button--blue):focus-visible, html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] main#main-content #project .bp7140-button:hover, html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] main#main-content #project .bp7140-button:focus-visible { box-shadow: 0 14px 31px rgba(16, 59, 95, .25), inset 0 1px 0 rgba(255, 255, 255, .18) !important; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #domains .bp7140-route-card:hover, html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #routes .bp7140-card:hover { transform: translateY(-3px); box-shadow: var(--bp7318-r22-shadow-hover); } } @media (max-width: 980px) { html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] :is(#domains, #engineering, #routes, #publishing, #evidence) { padding-block: 70px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .bp7140-section-head { margin-bottom: 32px; padding-bottom: 21px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #engineering .bp7140-chain article { min-height: 154px; padding: 25px 22px 23px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #engineering .bp7140-chain::before, html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #engineering .bp7140-chain article::before { display: none; content: none; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #engineering .bp7140-chain strong { margin-top: 20px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .pgeo-feature { padding-block: 70px; } } @media (max-width: 560px) { html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] :is(#domains, #engineering, #routes, #publishing, #evidence) { padding-block: 60px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .bp7140-section-head { margin-bottom: 27px; padding-bottom: 18px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #domains .bp7140-route-card__body { padding: 20px 19px 21px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #engineering .bp7140-chain article, html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #engineering .bp7140-chain article:nth-child(n) { min-height: 0; padding: 21px 20px 20px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #engineering .bp7140-chain strong { margin-top: 14px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #routes .bp7140-card { min-height: 0; padding: 23px 21px 22px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #routes .bp7140-card__number, html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #publishing .bp7140-card__number { margin-bottom: 16px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #publishing .bp7140-card { min-height: 0; padding: 22px 20px 21px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #publishing .bp7140-card::after { left: 20px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #evidence .bp7140-evidence-ribbon article, html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #evidence .bp7140-evidence-ribbon article:nth-child(n) { padding: 21px 20px 20px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .pgeo-feature { padding-block: 62px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .pgeo-shell { width: calc(100% - 28px); } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .pgeo-feature__head { margin-bottom: 27px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .bp7140-footer__top { gap: 36px; padding: 44px 0 30px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .bp7140-footer__directory { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .bp7140-footer__group:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .bp7140-footer__group:nth-child(3) h2 { grid-column: 1 / -1; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .bp7140-footer__group a { min-height: 44px; display: flex; align-items: center; padding-block: 8px; } } @media (max-width: 350px) { html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .bp7140-footer__directory { grid-template-columns: minmax(0, 1fr); gap: 24px; } html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] .bp7140-footer__group:nth-child(3) { grid-column: auto; display: block; } } @media (prefers-reduced-motion: reduce) { html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] main#main-content .bp7140-button, html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #domains .bp7140-route-card, html[data-v7318-packaging-layout="precision-r22"] body[data-v7318-packaging-page="bioten"] #routes .bp7140-card { transform: none !important; } }