/* Client concept content, styled to match the ALLIO product page. */
.allio-graft { padding-block: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 64px; }
.allio-content-lead { font-size: 17px; line-height: 1.85; color: var(--muted); margin: 22px 0 0; }
.allio-surfaces { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-self: center; }
.allio-surfaces > div { border-top: 2px solid #cee3ef; padding-top: 20px; }
.allio-detail-number { color: var(--blue); font-size: 12px; letter-spacing: 1px; }
.allio-surfaces h3 { font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--ink); margin: 14px 0 8px; }
.allio-surfaces p { font-size: 14px; line-height: 1.75; color: var(--muted); margin: 0; }
.allio-processing { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.8; margin: 0; }
.allio-applications { background: #f2f6f8; border-block: 1px solid var(--line); padding-block: 64px; }
.allio-applications-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.allio-joints { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.allio-joints li { background: #fff; border: 1px solid #d5e2e9; border-radius: 6px; padding: 18px 10px; text-align: center; color: var(--ink); font-size: 14px; }
.allio-benefits { padding-block: 64px; }
.allio-benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.product-main .allio-benefit-grid h2 { font-size: clamp(23px, 2.5vw, 29px); line-height: 1.45; border-left: 3px solid var(--blue); padding-left: 24px; }
.allio-benefit-grid sup { font-size: 12px; margin-left: 4px; vertical-align: super; }
.allio-benefit-grid a, .allio-references a { color: var(--blue); }
.allio-references { padding-left: 18px; margin: 36px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.allio-references li + li { margin-top: 8px; }
.allio-references li { scroll-margin-top: 110px; }
@media (max-width: 900px) {
    .allio-graft, .allio-applications-inner { grid-template-columns: 1fr; gap: 32px; }
    .allio-benefit-grid { gap: 28px; }
}
@media (max-width: 600px) {
    .allio-graft, .allio-applications, .allio-benefits { padding-block: 44px; }
    .allio-benefit-grid { grid-template-columns: 1fr; }
    .allio-surfaces { gap: 20px; }
    .allio-joints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.allio-clinical-gallery { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.allio-clinical-gallery figure { margin: 0; min-width: 0; }
.allio-clinical-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; border-radius: 8px; }
.allio-clinical-gallery figcaption { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }
@media (max-width: 600px) { .allio-clinical-gallery { grid-template-columns: 1fr; gap: 24px; } }

/* Annotated graft presentation based on the client concept. */
.allio-graft { display: block; background: #374149; color: #fff; padding-block: 56px; text-align: center; }
.allio-graft .product-eyebrow { color: #c6dbe8; margin-bottom: 12px; }
.product-main .allio-graft h2 { color: #fff; font-size: clamp(34px, 4vw, 46px); }
.allio-graft .allio-content-lead { color: #f0f2f4; max-width: 860px; margin: 20px auto 0; font-size: 16px; }
.allio-graft-diagram { position: relative; width: 100%; max-width: 620px; aspect-ratio: 620 / 360; margin: 32px auto; }
.allio-graft-diagram img { position: absolute; width: 58.0645%; height: auto; left: 20.9677%; top: 22.2222%; }
.allio-graft-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #fff5ab; stroke-width: 3; }
.allio-graft-diagram figcaption { color: #edf0f2; font-size: 14px; line-height: 1.5; }
.allio-surface-smooth { position: absolute; top: 5%; right: 0; }
.allio-surface-rough { position: absolute; bottom: 0; left: 0; width: 100%; }
.allio-graft .allio-processing { color: #edf0f2; border: 0; padding: 0; font-size: 14px; }
@media (max-width: 600px) {
    .allio-graft { padding-block: 40px; }
    .allio-graft-diagram figcaption { font-size: 11px; }
    .allio-graft-diagram { margin-block: 28px; }
}

/* A single reveal keeps the surface callouts steady once introduced. */
.allio-graft.is-revealed .allio-graft-diagram img { animation: allio-graft-enter 850ms cubic-bezier(.2,.7,.2,1) both; }
.allio-graft.is-revealed .allio-graft-lines path { stroke-dasharray: 1; animation: allio-line-draw 650ms ease-out 550ms both; }
.allio-graft.is-revealed .allio-graft-lines path + path { animation-delay: 950ms; }
.allio-graft.is-revealed .allio-surface-smooth { animation: allio-label-enter 500ms ease-out 950ms both; }
.allio-graft.is-revealed .allio-surface-rough { animation: allio-label-enter 500ms ease-out 1350ms both; }
@keyframes allio-graft-enter {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes allio-line-draw {
    from { stroke-dashoffset: 1; opacity: 0; }
    to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes allio-label-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}