.model-showcase{padding-top:72px}
.model-showcase .section-heading{margin-bottom:34px}
.model-showcase .section-heading>p:last-child{max-width:720px}
.model-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:28px;align-items:stretch}
.model-stage{position:relative;min-height:560px;border:1px solid rgba(17,23,20,.12);border-radius:32px;background:radial-gradient(circle at 50% 30%,#ffffff 0,#eef1eb 55%,#dce4db 100%);overflow:hidden;box-shadow:0 30px 90px rgba(18,31,23,.14)}
.model-stage model-viewer{display:block;width:100%;height:560px;cursor:grab;--poster-color:transparent;--progress-bar-color:#55d881;--progress-mask:transparent;--interaction-prompt-threshold:0;background:transparent}
.model-stage model-viewer:active{cursor:grabbing}
.model-stage model-viewer::part(default-progress-bar){height:3px;background:#56d881}
.model-poster{position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;color:#53645a;font-size:12px;letter-spacing:.05em;pointer-events:none}
.model-poster strong{display:block;margin-bottom:8px;color:#16221b;font-size:15px;letter-spacing:.04em}
.model-poster span{display:block}
.model-meta{display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:34px;background:#fffdfa;border:1px solid rgba(17,23,20,.1);border-radius:28px}
.model-meta h3{margin:0;font-size:clamp(28px,3vw,42px);line-height:1.05;letter-spacing:-.045em}
.model-meta p{margin:18px 0 0;color:var(--muted);font-size:14px;line-height:1.75}
.model-meta ul{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.model-meta li{padding:14px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;font-size:12px;color:#47534b}
.model-meta li::before{content:"";width:10px;height:10px;flex:0 0 auto;border-radius:50%;background:#202822;box-shadow:0 0 0 4px rgba(32,40,34,.12)}
.model-meta li:nth-child(2)::before{background:#bec5c1;box-shadow:0 0 0 4px rgba(121,133,125,.16)}
.model-meta li:nth-child(3)::before{background:#9aa5a4;box-shadow:0 0 0 4px rgba(121,133,125,.16)}
.model-variants{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:28px}
.model-variants button{min-height:46px;min-width:0;padding:0 10px;border:1px solid #bfc8c1;border-radius:999px;background:#fffdfa;color:#445149;font:750 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;white-space:nowrap;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.model-variants button:hover,.model-variants button:focus-visible{transform:translateY(-1px);border-color:#538269}
.model-variants button[aria-pressed="true"]{background:#111714;color:#fff;border-color:#111714}
.hero-model-visual{min-width:0}
.hero-model-stage{min-height:0;height:560px}
.hero-model-stage model-viewer{height:560px}
.hero-copy .hero-model-variants{width:min(100%,560px);max-width:none;margin:24px 0 0}
.connection-diagram{margin-top:auto;padding-top:24px}
.connection-diagram img{display:block;width:100%;height:auto;border-radius:18px;background:#ecebe5}
.model-view-modes{margin-top:10px}
.model-hint{margin-top:18px!important;color:#768179!important;font-size:11px!important}
.model-fallback{display:none}
html.no-model-viewer .model-fallback{display:block;padding:24px;color:#53645a;font-size:13px;line-height:1.6}
@media(max-width:960px){.model-layout{grid-template-columns:1fr}.model-stage,.model-stage model-viewer{min-height:500px;height:500px}.model-meta{padding:28px}}
@media(max-width:960px){.hero-model-stage,.hero-model-stage model-viewer{min-height:500px;height:500px}}
@media(max-width:620px){.model-showcase{padding-top:48px}.model-stage,.model-stage model-viewer{min-height:360px;height:360px;border-radius:22px}.hero-model-stage,.hero-model-stage model-viewer{min-height:360px;height:360px;border-radius:22px}.model-meta{padding:24px;border-radius:22px}.model-meta h3{font-size:32px}.model-variants{margin-top:22px}.hero-copy .hero-model-variants{margin-top:20px}.model-hint{line-height:1.5}.connection-diagram{padding-top:18px}}
@media(prefers-reduced-motion:reduce){.model-variants button{transition:none}}

/* The hero product viewport is square at every breakpoint. */
.hero-model-stage{width:100%;min-height:0!important;height:auto!important;aspect-ratio:1/1}
.hero-model-stage model-viewer{width:100%;min-height:0!important;height:100%!important}