/* Page styles carried over from the Claude Design source's <helmet> block. */
body{margin:0;background:var(--stone-100);font-family:var(--font-sans);color:var(--color-text-primary);-webkit-font-smoothing:antialiased}
a{color:var(--surgical-blue-600);text-decoration:none}
a:hover{color:var(--navy-800);text-decoration:underline}
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---- What used to be runtime behaviour, now CSS ---------------------- */
/* Links that were <div onClick> in the source: keep the inherited colour. */
.lnk{display:block;color:inherit;text-decoration:none}
.lnk:hover{color:inherit;text-decoration:none}
/* The design system's Button, as rendered by its React component. */
.btn{font-family:var(--font-sans);font-weight:var(--fw-semibold);border-radius:var(--radius-md);cursor:pointer;letter-spacing:var(--ls-normal);transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:normal;text-align:center;text-decoration:none;box-sizing:border-box;margin:0}
.btn:hover{text-decoration:none}
.btn-sm{padding:8px 16px;font-size:var(--fs-body-sm)}
.btn-md{padding:11px 22px;font-size:var(--fs-body-md)}
.btn-lg{padding:15px 30px;font-size:var(--fs-body-lg)}
.btn-primary{background:var(--navy-800);color:var(--color-text-inverse);border:1px solid var(--navy-800)}
.btn-primary:hover{background:var(--navy-900);border-color:var(--navy-900);color:var(--color-text-inverse)}
.btn-secondary{background:transparent;color:var(--navy-800);border:1px solid var(--navy-800)}
.btn-secondary:hover{background:var(--navy-800);color:#fff}
.btn-ghost{background:transparent;color:var(--navy-800);border:1px solid transparent}
.btn-ghost:hover{background:var(--stone-200);color:var(--navy-800)}
.btn-accent{background:var(--green-500);color:#fff;border:1px solid var(--green-500)}
.btn-accent:hover{background:var(--green-600);border-color:var(--green-600);color:#fff}
/* "Hip & knee care →" scrolled to the care section 82px below the top. */
html{scroll-behavior:smooth}
#care{scroll-margin-top:82px}
/* Header: the runtime switched hamburger/nav at 1000px. */
.menu-btn,.more-btn{appearance:none;background:none;border:0;margin:0;font:inherit;color:inherit;text-align:inherit}
.more-btn{letter-spacing:inherit}
@media (max-width:999.98px){.d-only{display:none !important}}
@media (min-width:1000px){.m-only{display:none !important}}
.more-panel{display:none}
.more:hover .more-panel,.more.open .more-panel,.more:focus-within .more-panel{display:block}
.hv1:hover{background:var(--stone-200)}
.hv2:hover{background:var(--stone-100);color:var(--navy-800)}
/* Grid templates the runtime switched by window width. */
.g-labelCols{grid-template-columns:220px 1fr}
@media (max-width:759.98px){.g-labelCols{grid-template-columns:1fr}}
.g-cols08_1{grid-template-columns:0.8fr 1fr}
@media (max-width:899.98px){.g-cols08_1{grid-template-columns:1fr}}
.g-cols1_085{grid-template-columns:1fr 0.85fr}
@media (max-width:899.98px){.g-cols1_085{grid-template-columns:1fr}}
.g-cols1_09{grid-template-columns:1fr 0.9fr}
@media (max-width:899.98px){.g-cols1_09{grid-template-columns:1fr}}
.g-cols1_075{grid-template-columns:1fr 0.75fr}
@media (max-width:899.98px){.g-cols1_075{grid-template-columns:1fr}}
.g-cols135_1{grid-template-columns:1.35fr 1fr}
@media (max-width:759.98px){.g-cols135_1{grid-template-columns:1fr}}
.g-cols1_auto{grid-template-columns:1fr auto}
@media (max-width:899.98px){.g-cols1_auto{grid-template-columns:1fr}}
.g-colsFooter{grid-template-columns:1.3fr 1fr 1fr}
@media (max-width:759.98px){.g-colsFooter{grid-template-columns:1fr}}
/* Photos: the image-slot component's host, frame and cropped image.
   Fallback first (centered cover), then the exact slot geometry in
   container-query units for browsers that have them. */
.slot{display:block;position:relative;width:100%;height:100%;aspect-ratio:3/2;container-type:size}
.slot-frame{position:absolute;inset:0;overflow:hidden;background:rgba(127,127,127,.08)}
.slot img{position:absolute;max-width:none;width:100%;height:100%;left:50%;top:50%;object-fit:cover;transform:translate(-50%,-50%);-webkit-user-drag:none;user-select:none}