/* Two homepage studies. Existing brand tokens and widgets remain the foundation. */
:root { --nav-h:64px; }
.page-width { width:calc(100% - 96px); max-width:1280px; margin-inline:auto; }
.nav { max-width:1376px; }
.nav-logo svg { height:28px; }
.nav-menu a { font-size:14px; }
.nav-cta { background:transparent; color:var(--accent-text); border:1px solid var(--fh-primary); padding:8px 16px; }
.preview-switch { display:flex; align-items:center; justify-content:flex-end; gap:4px; padding:6px 32px; background:#7F9F9F; font-size:12px; min-height:36px; }
.preview-switch a { padding:3px 11px; color:#7F9F9F; border-radius:0 0 8px 0; }
.preview-switch a[aria-current] { background:#7F9F9F; color:white; }
.preview-switch .comparison-home { margin-right:auto; }
.design-hero { background:#2b2b2b; color:white; overflow:hidden; padding:52px 0 24px; }
.hero-copy { text-align:center; }
.hero-brand { font:400 clamp(76px,8vw,112px)/1.12 var(--font-head); letter-spacing:-.055em; color:white; }
.hero-brand .wm { text-shadow:0 0 20px #7F9F9Fb3,0 0 60px #7F9F9F73,0 0 110px #7F9F9F47; }
.hero-subheadline { color:white; font:500 clamp(28px,3.25vw,46px)/1.16 var(--font-head); letter-spacing:-.035em; margin:22px auto 0; }
.hero-description { font-size:17px; line-height:1.55; color:#7F9F9F; margin-top:23px; }
.hero-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:28px; margin-top:26px; }
.hero-actions .btn-primary { background:#7F9F9F; border-color:#7F9F9F; color:#212121; padding:13px 22px; }
.hero-actions .btn-primary:hover { background:white; border-color:white; }
.hero-actions .link { color:#7F9F9F; font-size:15px; }
.hero-actions .btn span, .clinic-next .btn span { margin-left:22px; }
.hero-product { width:min(100%,960px); margin:42px auto 0; }
.product-caption { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; font-size:12px; color:#7F9F9F; }
.product-caption > span { display:flex; align-items:center; gap:9px; }
.status-dot { width:6px; height:6px; background:#7F9F9F; border-radius:50%; }
.motion-toggle { font-size:12px; color:#7F9F9F; text-decoration:underline; text-underline-offset:4px; padding:7px 0 7px 12px; }
.motion-toggle:hover { color:#fff; }
.hero-product .hs-window { border-color:#7F9F9F; border-radius:0 0 36px 0; }
.hero-product .hs-screen { aspect-ratio:16/8.5; }
.hero-product .hs-frame { opacity:0; }
.hero-product .hs-app.is-live .hs-poster { opacity:1; }
.hero-product .hs-app.demo-active .hs-frame.is-ready { opacity:1; }
.hero-product .hs-app.demo-active .hs-poster { opacity:0; }
.hero-product .hs-app.demo-paused .hs-frame { opacity:0; }
.hero-product .hs-app.demo-paused .hs-poster { opacity:1; }
.demo-note { font-size:11px; color:#b5b5b5; text-align:right; margin-top:9px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:36px; margin-bottom:32px; }
.section-heading h2 { font-size:clamp(32px,3.5vw,48px); font-weight:500; letter-spacing:-.04em; line-height:1.12; }
.section-heading h2 span { color:#7F9F9F; }
.section-heading > p { font-size:16px; color:#5c5c5c; padding-bottom:3px; }
.capabilities { padding-block:72px 0; }
.capability-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; }
.feature-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; position:relative; border-radius:0 0 24px 0; border:1px solid transparent; }
.feature-copy { padding:30px 30px 0; position:relative; z-index:2; }
.feature-copy h3 { font-size:clamp(24px,2.3vw,32px); font-weight:500; letter-spacing:-.035em; line-height:1.18; }
.feature-copy p { font-size:15px; line-height:1.55; margin-top:13px; max-width:440px; color:#7F9F9F; }
.feature-copy .link { margin-top:15px; font-size:14px; }
.widget-stage { display:flex; justify-content:center; align-items:center; flex:1; padding:28px 24px; position:relative; min-width:0; }
.card-connect { grid-column:span 7; background:#7F9F9F; }
.card-workflow { grid-column:span 5; background:#efefef; }
.card-standards { grid-column:span 4; background:#efefef; }
.card-models { grid-column:span 4; background:#7F9F9F; }
.card-library { grid-column:span 4; background:#2b2b2b; }
.card-library h3 { color:white; }
.card-library .feature-copy p { color:#7F9F9F; }
.card-library .link { color:#7F9F9F; }
.hub-stage { min-height:245px; padding-bottom:0; padding-top:36px; }
.hub-stage .ec-mcphub { transform:scale(1.35); transform-origin:center; flex-shrink:0; height:200px; }
.prompt-stage { padding:4px 32px 28px; }
.prompt-stage .ec-inputbar { margin:auto; width:100%; max-width:540px; padding:12px; }
.prompt-stage .ec-type { font-size:13px; }
.workflow-stage { padding:28px 40px 20px; }
.ec-wfnode-head { font-size:13px; height:34px; }
.ec-wfnode-io { font-size:11px; }
.ec-addhead { font-size:13px; }
.ec-rowtxt b { font-size:12px; }
.ec-rowtxt small { font-size:10px; }
.standards-stage { padding:30px 25px 38px; min-height:270px; }
.standards-stage .ec-io-chip { font-size:12px; padding:4px 12px; }
.models-stage { padding:28px 24px 30px; margin-top:auto; }
.models-stage .ec-hostlabel { font-size:10px; letter-spacing:.07em; }
.models-stage .ec-hostgroup { margin-bottom:20px; }
.models-stage .ec-hostgroup:last-child { margin-bottom:0; }
.models-stage .ec-models { gap:6px; }
.models-stage .ec-models span { font-size:11px; padding:6px 9px; }
.models-stage .ec-models-grid { gap:6px; }
.models-stage .ec-models-grid span { font-size:12px; }
.library-stage { margin-top:auto; padding-top:24px; }
.view-switch { display:flex; gap:4px; margin:0 24px 18px; width:fit-content; border:1px solid #7F9F9F; padding:3px; border-radius:0 0 10px 0; }
.view-switch button { padding:7px 10px; font-size:12px; color:#7F9F9F; border-radius:0 0 7px 0; }
.view-switch button[aria-pressed="true"] { background:#7F9F9F; color:#7F9F9F; }
.library-window { height:244px; margin-left:24px; border:1px solid #7F9F9F; border-right:0; overflow:hidden; background:#2b2b2b; }
.library-image { max-width:none; width:660px; height:auto; }
.library-caption { min-height:61px; padding:15px 24px 22px; font-size:11px; line-height:1.4; color:#7F9F9F; }
.expertise { padding-top:74px; }
.product-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.product-card { min-width:0; background:#efefef; border-radius:0 0 24px 0; overflow:hidden; }
.product-copy { padding:30px 32px 26px; }
.product-copy h3 { font-size:32px; letter-spacing:-.035em; font-weight:500; }
.product-copy p { font-size:15px; line-height:1.55; margin-top:12px; color:#7F9F9F; }
.product-copy .link { margin-top:14px; font-size:14px; }
.product-grouper { background:#7F9F9F; }
.product-image { margin:0 0 0 32px; border-top:1px solid #ccd1d1; border-left:1px solid #ccd1d1; height:246px; overflow:hidden; }
.product-image > img { width:100%; height:auto; }
.product-image .hs-slides { width:100%; margin-top:0; }
.clinic-section { display:grid; grid-template-columns:5fr 7fr; background:#2b2b2b; margin-top:72px; margin-bottom:64px; border-radius:0 0 32px 0; overflow:hidden; }
.clinic-image { overflow:hidden; min-height:430px; }
.clinic-image img { width:100%; height:100%; object-fit:cover; object-position:50% 36%; }
.clinic-copy { padding:42px 48px; }
.clinic-copy h2 { font-size:clamp(32px,3.5vw,46px); color:white; letter-spacing:-.035em; font-weight:500; }
.clinic-copy > p { margin-top:20px; color:#d0d0d0; font-size:16px; line-height:1.6; max-width:530px; }
.clinic-copy .link { color:#7F9F9F; margin-top:18px; font-size:14px; }
.clinic-next { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-top:30px; border-top:1px solid #7F9F9F; padding-top:24px; }
.clinic-next p { color:#7F9F9F; font-size:13px; }
.clinic-next .btn { white-space:nowrap; padding:11px 15px; font-size:13px; background:#7F9F9F; color:#212121; border-color:#7F9F9F; }
.design-footer { padding:0; background:white; color:#212121; }
.footer-top { display:flex; gap:40px; align-items:center; padding-block:0 36px; }
.footer-mark svg { width:113px; height:auto; color:#212121; }
.footer-top > p { color:#5c5c5c; font-size:13px; line-height:1.6; }
.footer-top nav { display:flex; gap:28px; margin-left:auto; flex-wrap:wrap; }
.design-footer a { color:#7F9F9F; font-size:13px; }
.footer-bottom { display:flex; justify-content:space-between; gap:24px; padding-block:20px; border-top:1px solid #d5d5d5; color:#5c5c5c; font-size:11px; }
.footer-bottom nav { display:flex; gap:24px; }
.footer-bottom a { font-size:11px; }
/* Keep content visible throughout the page; motion belongs to the widgets. */
body[class^="design-"] .reveal { opacity:1; transform:none; transition:none; }

/* B: split opening, broad editorial panels and a horizontal operating-model strip. */
.design-b { background:#efefef; }
.design-b .design-hero { padding:72px 0; }
.design-b .hero-layout { display:grid; grid-template-columns:5fr 7fr; gap:42px; align-items:center; }
.design-b .hero-copy { text-align:left; }
.design-b .hero-brand { font-size:clamp(76px,8vw,112px); }
.design-b .hero-subheadline { font-size:clamp(28px,3vw,42px); line-height:1.2; margin-top:28px; }
.design-b .hero-actions { justify-content:flex-start; gap:22px; }
.design-b .hero-product { width:100%; margin:0; }
.design-b .hero-product .hs-screen { aspect-ratio:16/8.5; }
.design-b .hero-product .hs-window { border-radius:0 0 52px 0; }
.design-b .hero-description { margin-top:24px; }
.design-b .capabilities { padding-top:64px; }
.design-b .section-heading { padding-bottom:24px; border-bottom:1px solid #7F9F9F; margin-bottom:24px; }
.design-b .capability-grid { gap:20px; }
.design-b .feature-card { border-radius:0 0 32px 0; }
.design-b .card-connect { grid-column:span 6; order:1; background:white; }
.design-b .card-standards { grid-column:span 6; order:2; background:#e0e0e0; }
.design-b .card-workflow { grid-column:span 5; order:3; background:#7F9F9F; }
.design-b .card-library { grid-column:span 7; order:4; }
.design-b .card-models { grid-column:span 12; order:5; display:grid; grid-template-columns:4fr 8fr; align-items:center; background:white; }
.design-b .card-models .feature-copy { padding:32px; }
.design-b .models-stage { padding:30px 32px; margin:0; }
.design-b .models-stage > div { display:grid; grid-template-columns:1fr 2fr; align-items:center; gap:24px; }
.design-b .ec-models-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; }
.design-b .card-models .ec-hostgroup { margin:0; }
.design-b .card-models .ec-hostgroup:first-child .ec-models { flex-direction:column; width:100%; }
.design-b .card-models .ec-models span { justify-content:center; }
.design-b .hub-stage { padding-block:35px 0; }
.design-b .card-standards .standards-stage { padding-top:30px; padding-bottom:42px; }
.design-b .card-standards .ec-io4 { transform:scale(1.08); }
.design-b .library-window { margin-left:32px; height:260px; }
.design-b .library-image { width:760px; }
.design-b .library-caption { padding-left:32px; }
.design-b .view-switch { margin-left:32px; }
.design-b .product-card { background:white; }
.design-b .product-grouper { background:#e0e0e0; }
.design-b .clinic-section { grid-template-columns:4fr 8fr; }
.design-b .clinic-copy { padding:40px 48px; }
.design-b .clinic-copy h2 br { display:none; }
.design-b .clinic-image { min-height:360px; }
.design-b .design-footer { background:#efefef; }

@media(min-width:1600px) { .design-a .hero-layout { max-width:1360px; } }
@media(max-width:1100px) {
  .page-width { width:calc(100% - 56px); }
  .feature-copy { padding:26px 24px 0; }
  .feature-copy h3 { font-size:27px; }
  .hub-stage .ec-mcphub { transform:scale(1.1); }
  .models-stage { padding-inline:18px; }
  .models-stage .ec-models span { padding:6px; font-size:10px; }
  .clinic-copy { padding:36px; }
  .clinic-next { align-items:flex-start; flex-direction:column; }
  .design-b .hero-layout { grid-template-columns:1fr 1fr; gap:28px; }
  .design-b .hero-subheadline { font-size:32px; }
  .design-b .hero-actions { gap:18px; }
  .design-b .hero-actions .btn { padding:12px 16px; }
  .design-b .card-models { grid-template-columns:5fr 7fr; }
  .design-b .models-stage > div { gap:14px; grid-template-columns:1fr 1.5fr; }
  .design-b .models-stage { padding:24px 24px 24px 0; }
  .design-b .models-stage .ec-models span { font-size:11px; }
}
@media(max-width:820px) {
  .page-width { width:calc(100% - 40px); }
  .design-hero { padding-top:42px; }
  .hero-subheadline { font-size:34px; }
  .hero-product { margin-top:32px; }
  .section-heading { gap:20px; align-items:flex-start; }
  .section-heading > p { font-size:14px; }
  .feature-card { grid-column:span 6; }
  .card-connect { grid-column:span 12; }
  .hub-stage .ec-mcphub { transform:scale(1.35); }
  .card-connect .feature-copy { text-align:center; }
  .card-connect .feature-copy p { margin-inline:auto; }
  .card-connect .feature-copy h3 br { display:none; }
  .feature-copy h3 { font-size:26px; }
  .card-standards .ec-io4 { max-width:320px; }
  .clinic-section { grid-template-columns:2fr 3fr; }
  .clinic-copy { padding:28px; }
  .clinic-copy > p { font-size:14px; }
  .footer-top { gap:24px; flex-wrap:wrap; }
  .footer-top nav { width:100%; margin-left:0; }
  .product-copy { padding:26px 24px; }
  .product-copy h3 { font-size:28px; }
  .product-image { margin-left:24px; height:190px; }
  .design-b .design-hero { padding:42px 0 24px; }
  .design-b .hero-layout { grid-template-columns:1fr; }
  .design-b .hero-copy { text-align:left; max-width:620px; }
  .design-b .hero-brand { font-size:84px; }
  .design-b .hero-subheadline { font-size:38px; }
  .design-b .hero-subheadline br { display:block; }
  .design-b .hero-product { max-width:700px; margin-top:6px; }
  .design-b .hero-product .hs-screen { aspect-ratio:16/9; }
  .design-b .card-connect .feature-copy { text-align:left; }
  .design-b .card-connect .feature-copy h3 br { display:block; }
  .design-b .hub-stage .ec-mcphub { transform:scale(.97); }
  .design-b .prompt-stage { padding-inline:20px; }
  .design-b .card-standards .ec-io4 { transform:none; }
  .design-b .card-workflow, .design-b .card-library { grid-column:span 6; }
  .design-b .card-models { grid-template-columns:1fr 1.5fr; }
  .design-b .models-stage > div { grid-template-columns:1fr; }
  .design-b .card-models .ec-hostgroup:first-child .ec-models { flex-direction:row; }
  .design-b .clinic-copy { padding:30px; }
  .design-b .clinic-copy h2 br { display:block; }
}
@media(max-width:560px) {
  :root { --nav-h:56px; }
  .page-width { width:calc(100% - 32px); }
  .preview-switch { padding:6px 10px; font-size:11px; }
  .preview-switch a { padding:4px 7px; }
  .hero-brand { font-size:80px; }
  .hero-subheadline { font-size:clamp(25px,7vw,34px); margin-top:20px; }
  .hero-description { font-size:15px; margin-top:20px; }
  .hero-actions { gap:20px; margin-top:24px; }
  .hero-actions .btn-primary { padding:12px 16px; font-size:14px; }
  .hero-actions .btn span { margin-left:12px; }
  .hero-actions .link { font-size:13px; }
  .product-caption { font-size:10px; }
  .motion-toggle { font-size:10px; }
  .hero-product { margin-top:32px; }
  .hero-product .hs-window.hs-live .hs-screen { aspect-ratio:4/4.3; }
  .hero-product .hs-window { border-radius:0 0 24px 0; }
  .capabilities, .design-b .capabilities { padding-top:42px; }
  .section-heading { display:block; margin-bottom:24px; }
  .section-heading h2 { font-size:34px; }
  .section-heading > p { margin-top:18px; }
  .capability-grid, .design-b .capability-grid { display:flex; flex-direction:column; gap:14px; }
  .feature-copy { padding:26px 24px 0; }
  .feature-copy h3 { font-size:28px; }
  .feature-copy p { font-size:14px; }
  .card-connect .feature-copy { text-align:left; }
  .card-connect .feature-copy h3 br { display:block; }
  .hub-stage, .design-b .hub-stage { min-height:228px; padding:25px 0 0; }
  .hub-stage .ec-mcphub, .design-b .hub-stage .ec-mcphub { transform:scale(.98); height:200px; }
  .prompt-stage { padding:0 20px 24px; }
  .prompt-stage .ec-type { font-size:12px; }
  .prompt-stage .ec-inputbar { padding:10px; }
  .workflow-stage { padding:28px 28px 14px; }
  .standards-stage { padding:30px 28px; }
  .models-stage { padding:26px 24px; }
  .models-stage .ec-models span { padding:7px 10px; font-size:12px; }
  .library-stage { padding-top:28px; }
  .library-window { height:240px; }
  .product-grid { grid-template-columns:1fr; gap:14px; }
  .expertise { padding-top:44px; }
  .product-copy { padding:26px 24px; }
  .product-image { height:190px; }
  .clinic-section, .design-b .clinic-section { display:flex; flex-direction:column; margin-top:44px; margin-bottom:38px; }
  .clinic-image, .design-b .clinic-image { min-height:0; height:230px; }
  .clinic-image img { object-position:50% 31%; }
  .clinic-copy, .design-b .clinic-copy { padding:28px 24px; }
  .clinic-copy h2 { font-size:34px; }
  .clinic-next { margin-top:24px; padding-top:20px; gap:18px; }
  .footer-top { gap:22px; padding-bottom:28px; }
  .footer-mark svg { width:95px; }
  .footer-top > p { font-size:11px; }
  .footer-top nav { gap:20px; }
  .footer-top nav a { font-size:12px; }
  .footer-bottom { gap:12px; flex-wrap:wrap; font-size:10px; }
  .footer-bottom a { font-size:10px; }
  .design-b .hero-brand { font-size:80px; }
  .design-b .hero-subheadline { font-size:clamp(29px,8vw,38px); max-width:400px; }
  .design-b .hero-subheadline br { display:block; }
  .design-b .hero-product .hs-window { border-radius:0 0 28px 0; }
  .design-b .card-models { display:block; }
  .design-b .card-models .feature-copy { padding:26px 24px 0; }
  .design-b .models-stage { padding:28px 24px; }
  .design-b .models-stage > div { gap:20px; }
  .design-b .models-stage .ec-models span { font-size:12px; }
  .design-b .library-window { margin-left:24px; height:240px; }
  .design-b .view-switch { margin-left:24px; }
  .design-b .library-image { width:660px; }
  .design-b .library-caption { padding-left:24px; }
}
@media(max-width:360px) {
  .feature-copy { padding-inline:20px; }
  .hub-stage .ec-mcphub, .design-b .hub-stage .ec-mcphub { transform:scale(.84); }
  .hero-actions { gap:16px; }
  .hero-actions .btn-primary { font-size:13px; padding:12px; }
  .hero-actions .link { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .hero-product .hs-frame { display:none; }
  .hero-product .hs-app.demo-active .hs-poster { opacity:1; }
}