/* Local Microbex composition; base containers, buttons and section rhythm reuse Ora-Aid. */
.microbex-page { --type-h1: clamp(2.2rem,3.3vw,3.15rem); --type-h2: clamp(1.8rem,3vw,2.75rem); }
.mbx-main { background: #fff; color: #152328; }
.mbx-main *, .mbx-main *::before, .mbx-main *::after { box-sizing: border-box; }
.mbx-main :is(h1,h2,h3,p,figure,ul,ol,dl,dd) { margin: 0; }
.mbx-main [id] { scroll-margin-top: 7rem; }
.mbx-main [hidden] { display: none !important; }
.mbx-main img { display: block; width: 100%; max-width: 100%; }
.mbx-main .ora-button { margin-top: 0; border: 0; cursor: pointer; gap: .85rem; font-family: inherit; line-height: 1.45; text-decoration: none; text-align: center; }
.mbx-main .mbx-secondary { background: #fff; color: #152328; border: 1px solid #c7d9d9; }
.mbx-main .mbx-secondary:hover { background: #edf4f4; }
.mbx-main .ora-description { margin-top: 1rem; }
:root body main.mbx-main h1 { font-size: var(--type-h1); line-height: 1.12; letter-spacing: -.04em; max-width: 22ch; }
:root body main.mbx-main h2 { font-size: var(--type-h2); line-height: 1.16; letter-spacing: -.03em; max-width: 30ch; }
:root body main.mbx-main p { font-size: 1rem; line-height: 1.75; color: #617075; }
.mbx-intro { margin-bottom: 2.5rem; }
.mbx-intro h2 { margin-top: 1rem; }
.mbx-hero { display: grid; grid-template-columns: 1fr 1.35fr; gap: 3rem; align-items: center; padding-block: 2.75rem 3.25rem; }
.mbx-hero h1 { margin-top: 1rem; }
.mbx-hero-callout { display: block; margin-block: 1rem 1.5rem; color: #287d7d; font-size: .85rem; font-weight: 600; }
.mbx-hero-visual { border-radius: 1.25rem; background: #f2f7f7; padding: 1.5rem; }
.mbx-slideshow { position: relative; aspect-ratio: 1; width: 100%; max-width: 480px; margin-inline: auto; overflow: hidden; border-radius: .75rem; background: #fff; }
.mbx-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 350ms ease, visibility 350ms; }
.mbx-slide.is-active { opacity: 1; visibility: visible; }
.mbx-slide img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.mbx-pair { --mbx-frame-height: 340px; display: grid; grid-template-columns: .55fr 1fr; gap: 1rem; align-items: end; }
.mbx-pair > div { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.mbx-pair > div > span { margin-top: 1rem; font-size: .85rem; font-weight: 600; text-align: center; }
.mbx-pair small { display: block; color: #617075; font-size: .72rem; font-weight: 400; margin-top: .3rem; }
.mbx-product { position: relative; overflow: hidden; flex-shrink: 0; width: min(100%,calc(var(--mbx-frame-height,340px) * var(--mbx-ratio))); height: auto; background: #fff; isolation: isolate; }
.mbx-product img { position: absolute; max-width: none; object-fit: fill; }
.mbx-product-rs { --mbx-ratio: .348214286; aspect-ratio: 390/1120; }
.mbx-product-rs img { width: 384.6154%; height: 133.9286%; left: -25.641%; top: -25%; }
.mbx-product-se { --mbx-ratio: .710526316; aspect-ratio: 675/950; }
.mbx-product-se img { width: 222.2222%; height: 157.8947%; left: -40.7407%; top: -46.3158%; }
.mbx-solution-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; }
.mbx-solution { min-width: 0; display: grid; grid-template-columns: .9fr 1fr; gap: 1.5rem; align-items: center; padding: 2rem; background: #fff; border-radius: 1.25rem; }
.mbx-solution-image { --mbx-frame-height: 350px; height: 350px; display: flex; justify-content: center; align-items: center; min-width: 0; }
.mbx-solution-image > img { width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: .5rem; }
.mbx-step-label { display: block; margin-bottom: 1rem; font-size: .65rem; color: #287d7d; text-transform: uppercase; letter-spacing: .1em; }
.mbx-solution h3 { margin-bottom: .6rem; }
.mbx-solution strong { display: block; font-weight: 500; font-size: 1.05rem; line-height: 1.5; }
:root body main.mbx-main .mbx-solution p { margin-top: 1rem; font-size: .85rem; line-height: 1.7; }
.mbx-size { display: block; margin-top: 1rem; color: #287d7d; font-weight: 600; font-size: .8rem; }
.mbx-text-link { display: inline-flex; align-items: center; min-height: 44px; gap: 1rem; margin-top: 1rem; border-bottom: 1px solid #abcaca; color: #287d7d; font-size: .8rem; font-weight: 600; text-decoration: none; }
.mbx-showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; align-items: center; }
.mbx-showcase-reverse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mbx-showcase-reverse .mbx-showcase-visual { order: 2; }
.mbx-showcase-visual { min-width: 0; display: grid; grid-template-columns: .9fr 1fr; align-items: center; gap: 1.25rem; }
.mbx-showcase-visual.mbx-showcase-single { display: block; }
.mbx-showcase-single > .mbx-single-image { width: 100%; aspect-ratio: 1; border-radius: 1rem; overflow: hidden; }
.mbx-single-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mbx-showcase-single > .mbx-application-placeholder { aspect-ratio: 1; }
.mbx-product-stage { --mbx-frame-height: 508px; display: flex; justify-content: center; align-items: center; height: 540px; padding: 1rem; background: #f3f7f7; border-radius: 1rem; min-width: 0; }
.mbx-product-stage .mbx-showcase-photo { width: 100%; height: 100%; object-fit: contain; border-radius: .5rem; }
.mbx-name { display: block; color: #152328; font-size: 1.15rem; font-weight: 600; margin-bottom: .7rem; }
.mbx-tagline { display: block; max-width: 42ch; margin-bottom: 1rem; color: #287d7d; font-size: .8rem; font-weight: 500; line-height: 1.6; }
.mbx-tags { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; list-style: none; margin-top: 1.5rem !important; }
.mbx-tags li { border-bottom: 1px solid #c7dada; padding: .45rem .25rem; color: #405e63; font-size: .75rem; font-weight: 600; }
.mbx-application-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-width: 0; aspect-ratio: 3/4; background: #f2f7f7; border: 1px dashed #b4cdcd; border-radius: 1rem; padding: 1.5rem; text-align: center; }
.mbx-application-placeholder > span { color: #87adad; width: 42px; }
.mbx-application-placeholder { width: 100%; }
.mbx-application-placeholder figcaption { color: #526d72; font-size: .85rem; line-height: 1.6; }
.mbx-application-placeholder small { display: block; margin-top: .6rem; font-size: .7rem; color: #617075; }
.mbx-contact-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; padding-block: 1.5rem; margin-top: 1.25rem; border-block: 1px solid #dbe7e7; }
.mbx-contact-facts strong { display: block; color: #287d7d; font-size: clamp(1.4rem,2.4vw,2rem); font-weight: 600; line-height: 1.3; }
.mbx-contact-facts strong span { margin-left: .3rem; font-size: .75rem; }
.mbx-contact-facts div > span { display: block; max-width: 20ch; color: #617075; font-size: .7rem; margin-top: .5rem; }
.mbx-use-icons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; padding: 0; list-style: none; margin-top: 1.5rem !important; }
.mbx-use-icons svg { width: 30px; height: 30px; color: #287d7d; margin-bottom: .75rem; }
.mbx-use-icons span { font-size: .7rem; color: #526970; line-height: 1.5; display: block; }
.mbx-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.mbx-transition { background: #f2f7f7; padding-block: 2.75rem; }
.mbx-transition h2 { margin-bottom: 2rem; }
.mbx-transition-photo { overflow: hidden; border-radius: 1rem; }
.mbx-transition-photo img { display: block; width: 100%; height: auto; aspect-ratio: 2043 / 770; object-fit: contain; }
.mbx-transition .mbx-application-placeholder { aspect-ratio: 3.3; min-height: 220px; background: #e8f0f0; }
.mbx-workflow { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 2rem; list-style: none; padding: 0; }
.mbx-workflow li { position: relative; min-width: 0; text-align: center; }
.mbx-workflow-number { color: #287d7d; font-size: .75rem; font-variant-numeric: tabular-nums; }
.mbx-workflow-visual { --mbx-frame-height: 140px; display: flex; align-items: center; justify-content: center; height: 160px; margin-block: 1rem; background: #fff; border-radius: .75rem; }
.mbx-workflow-visual > svg { width: 70px; height: 70px; color: #6a9e9e; }
.mbx-workflow-visual > img { width: 100%; height: 100%; padding: .5rem; object-fit: contain; object-position: center; border-radius: .75rem; }
:root body main.mbx-main .mbx-workflow h3 { font-size: .95rem; line-height: 1.4; }
.mbx-workflow-label { display: block; margin-top: .5rem; color: #617075; font-size: .75rem; }
.mbx-workflow-arrow { position: absolute; right: -1.4rem; top: 6rem; color: #6a9e9e; font-size: 1.25rem; }
.mbx-workflow-note { display: block; margin-top: 2rem; max-width: 90ch; color: #617075; font-size: .75rem; line-height: 1.7; }
.mbx-workflow-artwork { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.mbx-workflow-artwork img { display: block; width: 100%; height: auto; aspect-ratio: 2164 / 727; }
.mbx-workflow-artwork:focus-visible { outline: 2px solid #287d7d; outline-offset: 5px; }
@media (max-width: 767px) { .mbx-workflow-artwork img { width: 56rem; max-width: none; } }
.mbx-selector { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3rem; }
.mbx-selector article { display: grid; grid-template-columns: .65fr 1fr; align-items: center; gap: 1.5rem; min-width: 0; border-top: 1px solid #c9dada; padding-top: 1.5rem; }
.mbx-selector-image { --mbx-frame-height: 270px; height: 270px; display: flex; justify-content: center; align-items: center; }
.mbx-selector h3 { margin-bottom: 1rem; }
.mbx-selector dl > div, .mbx-how-to dl > div { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding-block: .55rem; font-size: .85rem; }
.mbx-selector dt { color: #617075; }
.mbx-selector dd { color: #405d63; }
:root body main.mbx-main p.mbx-workflow-summary { margin-top: 2.5rem; color: #287d7d; font-weight: 500; text-align: center; }
.mbx-how-to { margin-top: 2rem; border-block: 1px solid #dbe7e7; }
.mbx-how-to summary { display: flex; align-items: center; justify-content: space-between; min-height: 60px; cursor: pointer; color: #405d63; font-weight: 600; font-size: .9rem; list-style: none; }
.mbx-how-to summary::-webkit-details-marker { display: none; }
.mbx-how-to[open] summary > span { transform: rotate(45deg); }
.mbx-how-to > div { max-width: 56rem; padding-bottom: 1.5rem; }
:root body main.mbx-main .mbx-how-to p { font-size: .85rem; }
.mbx-how-to dl { margin-block: 1rem; }
.mbx-how-to dl > div { grid-template-columns: 7rem 1fr; }
.mbx-how-to .ora-button { margin-top: 1rem; }
.mbx-clinic-section { background: #f2f7f7; }
.mbx-clinic-photo { position: relative; height: 480px; overflow: hidden; border-radius: 1rem; margin-bottom: 2rem !important; }
.mbx-clinic-photo img { height: 100%; object-fit: cover; object-position: center 48%; }
.mbx-clinic-photo figcaption { position: absolute; bottom: 1rem; left: 1rem; color: #fff; background: #152328c9; padding: .4rem .7rem; border-radius: .3rem; font-size: .7rem; }
.mbx-clinic-section .mbx-intro { margin-bottom: 0; }
.mbx-final { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; align-items: center; }
.mbx-final .mbx-pair { padding: 1.5rem; border-radius: 1rem; background: #f2f7f7; }
.mbx-final .mbx-pair-artwork { display: block; padding: 0; overflow: hidden; background: #fff; }
.mbx-pair-artwork img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
@media (max-width: 1023px) {
  .mbx-hero, .mbx-showcase, .mbx-showcase-reverse, .mbx-final { gap: 2rem; }
  .mbx-solution { grid-template-columns: 1fr; padding: 1.5rem; }
  .mbx-solution-image { --mbx-frame-height: 290px; height: 290px; }
  .mbx-showcase-visual { grid-template-columns: 1fr; }
  .mbx-showcase-visual .mbx-application-placeholder { aspect-ratio: 16/9; }
  .mbx-product-stage { --mbx-frame-height: 368px; height: 400px; }
  .mbx-selector { gap: 2rem; }
  .mbx-selector article { grid-template-columns: 1fr; }
  .mbx-workflow { gap: 1.25rem; }
  .mbx-workflow-arrow { right: -1rem; }
}
@media (max-width: 767px) {
  .mbx-hero, .mbx-showcase, .mbx-showcase-reverse, .mbx-final { grid-template-columns: 1fr; }
  .mbx-hero { padding-top: 1.5rem; }
  .mbx-hero-visual { order: -1; }
  .mbx-pair { --mbx-frame-height: 280px; }
  .mbx-showcase-reverse .mbx-showcase-visual { order: 0; }
  .mbx-showcase-visual { grid-template-columns: 1fr 1fr; }
  .mbx-product-stage { --mbx-frame-height: 344px; height: 360px; padding: .5rem; }
  .mbx-showcase-visual .mbx-application-placeholder { aspect-ratio: 3/4; padding: .9rem; }
  .mbx-selector { gap: 1.5rem; }
  .mbx-selector-image { --mbx-frame-height: 220px; height: 220px; }
  .mbx-selector dl > div { grid-template-columns: 1fr; gap: .2rem; padding-block: .5rem; }
  .mbx-workflow { grid-template-columns: 1fr; gap: 2.5rem; }
  .mbx-workflow li { display: grid; grid-template-columns: 2rem 100px 1fr; column-gap: 1rem; text-align: left; align-items: center; }
  .mbx-workflow-visual { --mbx-frame-height: 105px; grid-column: 2; grid-row: 1/3; width: 100px; height: 120px; margin: 0; }
  .mbx-workflow-visual > svg { width: 50px; height: 50px; }
  .mbx-workflow-number { grid-column: 1; grid-row: 1/3; }
  .mbx-workflow h3 { grid-column: 3; grid-row: 1; align-self: end; }
  .mbx-workflow-label { grid-column: 3; grid-row: 2; align-self: start; }
  .mbx-workflow-arrow { left: 4.6rem; top: auto; bottom: -2.15rem; right: auto; transform: rotate(90deg); }
  .mbx-transition .mbx-application-placeholder { aspect-ratio: 16/9; min-height: 230px; }
  .mbx-clinic-photo { height: 360px; }
  .mbx-final .mbx-pair { order: -1; }
}
@media (max-width: 479px) {
  .mbx-solution-pair { grid-template-columns: 1fr; }
  .mbx-solution { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; }
  .mbx-solution-image { --mbx-frame-height: 300px; height: 300px; }
  .mbx-pair { --mbx-frame-height: 230px; }
  .mbx-hero-visual { padding: 1.25rem .75rem; }
  .mbx-pair { gap: .5rem; }
  .mbx-pair > div > span { font-size: .75rem; }
  .mbx-pair small { font-size: .65rem; }
  .mbx-showcase-visual { grid-template-columns: 1fr; }
  .mbx-showcase-visual .mbx-application-placeholder { aspect-ratio: 16/9; }
  .mbx-actions { flex-direction: column; align-items: stretch; }
  .mbx-actions .ora-button { width: 100%; }
  .mbx-selector { grid-template-columns: 1fr; gap: 2.5rem; }
  .mbx-selector article { grid-template-columns: 1fr; }
  .mbx-use-icons { gap: .75rem; }
  .mbx-how-to dl > div { grid-template-columns: 1fr; gap: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mbx-main *, .mbx-main *::before, .mbx-main *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}