/* Mobatec Modeller: software, workflow and applications in one product page. */
.modeller-page { min-width: 0; background: #fff; color: #142a40; font-family: 'IBM Plex Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.modeller-page *, .modeller-page *::before, .modeller-page *::after { box-sizing: border-box; }
.modeller-page :is(h1, h2, h3, p, li, a, summary) { overflow-wrap: anywhere; }
.modeller-page :is(a, button, summary):focus-visible { outline: 3px solid #254e76; outline-offset: 5px; }
.modeller-page [id] { scroll-margin-top: 150px; }
.modeller-page h2 { margin: 0; color: #142a40; font-size: clamp(31px, 3vw, 44px); font-weight: 500; line-height: 1.16; letter-spacing: -.035em; }
.modeller-page h3 { margin: 0; color: #142a40; font-size: 23px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; }
.modeller-page p { margin: 0; }
.modeller-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 19px !important; color: #41576a; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .095em; text-transform: uppercase; }
.modeller-eyebrow::before { content: ''; flex: 0 0 23px; height: 2px; background: #b94f00; }
.modeller-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 23px; min-height: 49px; max-width: 100%; padding: 13px 18px; border: 1px solid #254e76; border-radius: 6px; background: linear-gradient(135deg, #254e76, #142a40); color: #fff; box-shadow: 0 5px 15px #142a401a; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.5; text-decoration: none; transition: background 160ms, border-color 160ms, color 160ms; }
.modeller-button:is(:hover, :focus-visible) { border-color: #ff8a3d; background: linear-gradient(135deg, #ff9b57, #ff8a3d); color: #142a40; }
.modeller-button .nav-icon { flex: 0 0 18px; width: 18px; height: 18px; }
.modeller-button--primary { border-color: transparent; background: #ff8a3d; color: #142a40; }
.modeller-button--primary:hover { background: #f37b2b; }
.modeller-button--secondary { border-color: #254e76; background: linear-gradient(135deg, #254e76, #142a40); color: #fff; box-shadow: 0 5px 15px #142a401a; }
.modeller-button--secondary:is(:hover, :focus-visible) { border-color: #ff8a3d; background: linear-gradient(135deg, #ff9b57, #ff8a3d); color: #142a40; }
.modeller-button--outline, .modeller-button--light { border-color: #9bb5c9; background: transparent; color: #254e76; box-shadow: none; }
.modeller-button--outline:is(:hover, :focus-visible), .modeller-button--light:is(:hover, :focus-visible) { border-color: #b94f00; background: #fff3e9; color: #984500; }
.modeller-button--link { padding-inline: 0; border-color: transparent; background: transparent; color: #254e76; box-shadow: none; text-decoration: underline; text-decoration-color: #9eb6c8; text-underline-offset: 5px; }
.modeller-button--link:hover { color: #b94f00; text-decoration-color: currentColor; }
.modeller-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.modeller-section { padding-block: 85px; }
.modeller-section--methodology { position: relative; isolation: isolate; }
.modeller-section__logo-layer { position: absolute; z-index: -1; inset: 0; pointer-events: none; user-select: none; }
.modeller-section__logo { position: sticky; top: 150px; display: block; width: min(900px, 50%); height: auto; margin-left: auto; opacity: .1; pointer-events: none; user-select: none; }
.modeller-section__intro { max-width: 730px; }
.modeller-section__intro > p:not(.modeller-eyebrow) { margin-top: 21px; color: #41576a; font-size: 16px; line-height: 1.8; }
.modeller-media { min-width: 0; margin: 0; }
.modeller-media img { display: block; width: 100%; height: auto; min-width: 0; object-fit: contain; }
.modeller-media figcaption { margin-top: 13px; color: #5d7182; font-size: 12px; line-height: 1.65; }

.modeller-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 32px 64px; background: radial-gradient(ellipse at 90% 30%, #7dd3e819, transparent 60%), linear-gradient(125deg, #142a40, #1c3b5a 55%, #254e76); color: #fff; }
.modeller-hero__art { position: absolute; z-index: -1; top: 50%; right: -10%; width: min(75%, 1100px); height: auto; transform: translateY(-50%); color: #b9e8f3; opacity: .08; pointer-events: none; }
.modeller-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 43px; color: #c7dceb; font-size: 12px; line-height: 1.6; }
.modeller-breadcrumb a { color: #e4f1f9; text-decoration: underline; text-decoration-color: #789bb6; text-underline-offset: 3px; transition: color 160ms, text-decoration-color 160ms; }
.modeller-breadcrumb a:is(:hover, :focus-visible) { color: #ff8a3d; text-decoration-color: currentColor; }
.modeller-hero__layout { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr); align-items: center; gap: 64px; min-height: 460px; }
.modeller-hero__copy { min-width: 0; }
.modeller-hero .modeller-eyebrow { color: #c9e0ed; }
.modeller-hero .modeller-eyebrow::before { background: #ff8a3d; }
.modeller-hero h1 { margin: 0; color: #fff; font-size: clamp(40px, 4.2vw, 60px); font-weight: 500; line-height: 1.1; letter-spacing: -.04em; }
.modeller-hero h1 > span { display: block; margin-top: 7px; color: #d1e6f3; }
.modeller-hero__intro { margin-top: 24px !important; color: #d4e5f0; font-size: 17px; line-height: 1.8; }
.modeller-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 25px 0 28px; padding: 0; list-style: none; }
.modeller-hero__tags li { padding: 6px 9px; border: 1px solid #bdd3e338; border-radius: 4px; color: #d5e7f2; font-size: 10px; line-height: 1.5; list-style: none; }
.modeller-hero__note { max-width: 580px; margin-top: 17px !important; color: #c0d6e5; font-size: 11px; line-height: 1.7; }
.modeller-hero .modeller-button--outline { border-color: #9bb5c9; background: #ffffff05; color: #fff; }
.modeller-hero .modeller-button--outline:is(:hover, :focus-visible) { border-color: #ff8a3d; background: #ffffff0d; color: #ff8a3d; }
.modeller-hero :is(a, button):focus-visible, .modeller-section--blue :is(a, button, summary):focus-visible { outline-color: #fff; }

.modeller-section-nav { padding-block: 12px; border-bottom: 1px solid #d6e2eb; background: #f4f8fb; }
.modeller-section-nav > div { display: flex; flex-wrap: wrap; gap: 3px 18px; }
.modeller-section-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; color: #254e76; font-size: 12px; font-weight: 500; line-height: 1.5; text-decoration: underline; text-decoration-color: #afc4d3; text-underline-offset: 4px; transition: color 160ms; }
.modeller-section-nav a:hover { color: #b94f00; text-decoration-color: currentColor; }
.modeller-section--pale { background: #f5f9fc; }
.modeller-section__header { max-width: 840px; margin-bottom: 38px; }
.modeller-section__header > p:not(.modeller-eyebrow) { max-width: 780px; margin-top: 21px; color: #41576a; font-size: 16px; line-height: 1.8; }
.modeller-methodology { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 70px; }
.modeller-methodology__copy p { color: #41576a; font-size: 16px; line-height: 1.85; }
.modeller-methodology__copy p + p { margin-top: 18px; }
.modeller-principles { display: grid; gap: 17px; margin: 0; }
.modeller-principles > div { position: relative; padding: 0 0 0 20px; border-left: 2px solid #b6d1e3; }
.modeller-principles dt { margin-bottom: 7px; color: #254e76; font-size: 17px; font-weight: 500; line-height: 1.5; }
.modeller-principles dd { margin: 0; color: #41576a; font-size: 14px; line-height: 1.75; }

/* Native horizontal scrolling keeps all screenshots available without JavaScript. */
.modeller-screenshots { min-width: 0; margin-top: 48px; padding: 32px; border: 1px solid #416887; border-radius: 12px; background: radial-gradient(ellipse at 92% 0%, #7dd3e81c, transparent 65%), linear-gradient(125deg, #142a40, #1c3b5a 55%, #254e76); color: #fff; box-shadow: 0 12px 32px #142a4010; }
.modeller-screenshots [hidden] { display: none !important; }
.modeller-screenshots__header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 21px; }
.modeller-screenshots__header h3 { color: #fff; font-size: 25px; }
.modeller-screenshots__header p { max-width: 560px; color: #d1e3ef; font-size: 13px; line-height: 1.7; }
.modeller-screenshots__header .modeller-eyebrow { color: #c9e0ed; font-size: 11px; }
.modeller-screenshots .modeller-eyebrow::before { background: #ff8a3d; }
.modeller-screenshots__rail { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: start; gap: 12px; min-width: 0; }
.modeller-screenshots__track { grid-column: 2; grid-row: 1; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 56px) / 5); align-items: start; gap: 14px; min-width: 0; padding: 2px 2px 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scrollbar-width: thin; scrollbar-color: #9bb5c9 #142a40; }
.modeller-screenshots :is(.modeller-screenshots__arrow, .modeller-screenshots__track):focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.modeller-screenshots__slide { min-width: 0; margin: 0; scroll-snap-align: start; scroll-snap-stop: normal; }
.modeller-screenshots__viewport { position: relative; isolation: isolate; aspect-ratio: 16 / 10; min-width: 0; overflow: hidden; border: 1px solid #bacfdf; border-radius: 7px; background: radial-gradient(ellipse at 15% 0%, #ffffff, transparent 75%), linear-gradient(140deg, #e7f0f7, #dce9f2); box-shadow: 0 3px 9px #142a400a; }
.modeller-screenshots__viewport::after { position: absolute; z-index: 2; top: 0; left: 13px; width: 28px; height: 2px; content: ''; background: #ff8a3d; pointer-events: none; }
.modeller-screenshots__viewport > img { display: block; width: 100%; height: 100%; min-width: 0; object-fit: contain; }
.modeller-screenshots__placeholder { display: flex; width: 100%; height: 100%; min-width: 0; align-items: center; justify-content: center; flex-direction: column; gap: 7px; padding: 13px; color: #7892a8; text-align: center; }
.modeller-screenshots__placeholder > svg { display: block; flex: 0 0 auto; width: 36px; height: 36px; }
.modeller-screenshots__placeholder > strong { color: #41576a; font-size: 11px; font-weight: 500; line-height: 1.4; }
.modeller-screenshots__placeholder > span { color: #5d7182; font-size: 10px; line-height: 1.5; }
.modeller-screenshots__open { position: absolute; z-index: 1; inset: 0; display: flex; width: 100%; height: 100%; align-items: flex-end; justify-content: flex-end; margin: 0; padding: 6px; border: 0; border-radius: inherit; background: transparent; color: #fff; cursor: zoom-in; }
.modeller-screenshots__open > svg { display: block; width: 30px; height: 30px; padding: 6px; border: 1px solid #ffffff59; border-radius: 5px; background: linear-gradient(135deg, #254e76, #142a40); color: #fff; box-shadow: 0 3px 8px #08152259; transition: color 160ms, border-color 160ms; }
.modeller-screenshots__open:is(:hover, :focus-visible) > svg { border-color: #ff8a3d; color: #ff8a3d; }
.modeller-screenshots .modeller-screenshots__open:focus-visible { outline: 3px solid #254e76; outline-offset: -5px; box-shadow: inset 0 0 0 2px #fff; }
.modeller-screenshots__slide figcaption { min-height: 67px; margin-top: 11px; padding-inline: 2px; overflow-wrap: anywhere; }
.modeller-screenshots__slide h4 { display: -webkit-box; max-height: 3em; margin: 0; overflow: hidden; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.modeller-screenshots__slide figcaption p { display: -webkit-box; max-height: 3.2em; margin-top: 5px; overflow: hidden; color: #c9deec; font-size: 11px; line-height: 1.6; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.modeller-screenshots__arrow { display: grid; grid-row: 1; width: 44px; height: 44px; place-items: center; margin: 2px 0 0; padding: 0; border: 1px solid #b4cedf; border-radius: 6px; background: #ffffff0a; color: #fff; box-shadow: 0 3px 9px #08152224; cursor: pointer; transition: background 160ms, border-color 160ms, color 160ms; }
.modeller-screenshots__arrow--previous { grid-column: 1; }
.modeller-screenshots__arrow--next { grid-column: 3; }
.modeller-screenshots__arrow > svg { display: block; width: 19px; height: 19px; }
.modeller-screenshots__arrow--previous > svg { transform: rotate(180deg); }
.modeller-screenshots__arrow:is(:hover, :focus-visible) { border-color: #ff8a3d; background: #ff8a3d; color: #142a40; }
.modeller-screenshots__arrow:disabled { border-color: #7fa1b852; background: #142a4059; color: #aac3d4; box-shadow: none; cursor: default; }

.modeller-workflow { margin-top: 62px; padding-top: 45px; border-top: 1px solid #d6e2eb; }
.modeller-workflow__header { max-width: 800px; }
.modeller-workflow__header > p:not(.modeller-eyebrow) { margin-top: 17px; color: #41576a; font-size: 16px; line-height: 1.8; }
.modeller-workflow__header h3 { font-size: 30px; }
.modeller-workflow__layout { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr); align-items: start; gap: 56px; margin-top: 33px; }
.modeller-steps { margin: 0; padding: 0; list-style: none; }
.modeller-steps > li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 20px; min-width: 0; padding: 0 0 31px; list-style: none; }
.modeller-steps > li::before { position: absolute; top: 40px; bottom: 0; left: 19px; width: 2px; content: ''; background: #c4d9e7; }
.modeller-steps > li:last-child { padding-bottom: 0; }
.modeller-steps > li:last-child::before { display: none; }
.modeller-steps > li > span { position: relative; z-index: 1; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #a9c5d8; border-radius: 50%; background: #eef5fa; color: #254e76; font: 500 11px/1.5 'IBM Plex Mono', monospace; }
.modeller-steps > li:first-child > span { border-color: #ff8a3d; background: #ff8a3d; color: #142a40; }
.modeller-steps > li:last-child > span { border-color: #254e76; background: linear-gradient(135deg, #254e76, #142a40); color: #fff; }
.modeller-steps__copy { min-width: 0; max-width: 740px; padding-top: 5px; }
.modeller-steps h4 { margin: 0 0 11px; color: #142a40; font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: -.02em; }
.modeller-steps p { color: #41576a; font-size: 14px; line-height: 1.85; }
.modeller-steps__copy > p:first-of-type { color: #254e76; font-size: 15px; }
.modeller-steps p + p { margin-top: 12px; }
.modeller-workflow__note { position: relative; isolation: isolate; overflow: hidden; margin-top: 33px; padding: 30px 32px; border: 1px solid #416887; border-left: 3px solid #ff8a3d; border-radius: 0 9px 9px 0; background: radial-gradient(ellipse at 93% 18%, #7dd3e812, transparent 60%), linear-gradient(125deg, #142a40, #1c3b5a 55%, #254e76); color: #fff; }
.modeller-workflow__note-art { position: absolute; z-index: -1; top: 50%; right: -28px; display: block; width: min(100%, 1000px); height: auto; max-width: none; transform: translateY(-50%); color: #b9e8f3; opacity: .13; pointer-events: none; user-select: none; }
.modeller-workflow__note-copy { position: relative; max-width: 980px; }
.modeller-workflow__note h4 { margin: 0 0 13px; color: #fff; font-size: 23px; font-weight: 500; line-height: 1.35; letter-spacing: -.02em; }
.modeller-workflow__note p { max-width: 980px; color: #d1e3ef; font-size: 14px; line-height: 1.85; }
.modeller-workflow__note p + p { margin-top: 12px; }
.modeller-workflow__note .modeller-actions { position: relative; margin-top: 24px; }
.modeller-workflow__note .modeller-button--outline { border-color: #b4cedf; background: #ffffff05; color: #fff; box-shadow: none; }
.modeller-workflow__note .modeller-button--outline:is(:hover, :focus-visible) { border-color: #ff8a3d; background: #ffffff0d; color: #ff8a3d; }
.modeller-workflow__note :is(a, button):focus-visible { outline-color: #fff; }
.modeller-workflow__note .modeller-workflow__note-help { max-width: 850px; margin-top: 15px; color: #bfd6e6; font-size: 11px; line-height: 1.75; }

.modeller-media__frame { position: relative; isolation: isolate; min-width: 0; padding: 16px; border: 1px solid #cddde8; border-radius: 11px; background: radial-gradient(ellipse at 10% 5%, #ffffffd9, transparent 62%), linear-gradient(140deg, #e5eff6, #d9e8f2); }
.modeller-media__frame::before { position: absolute; z-index: -1; inset: 10px; content: ''; border: 1px solid #a7c6da69; border-radius: 6px; pointer-events: none; }
.modeller-media__frame::after { position: absolute; top: -1px; left: 28px; width: 43px; height: 3px; content: ''; background: #ff8a3d; }
.modeller-media__frame img { border-radius: 5px; background: #edf4f8; }
.modeller-media__concept { display: flex; min-width: 0; min-height: 230px; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid #c3d8e6; border-radius: 5px; background: linear-gradient(135deg, #f3f8fb, #e7f0f6); color: #254e76; }
.modeller-media__art { display: block; width: 100%; height: auto; max-height: 215px; color: #254e76; }
.modeller-media__concept-label { color: #41576a; font: 400 9px/1.6 'IBM Plex Mono', monospace; letter-spacing: .075em; text-transform: uppercase; }
.modeller-media--hero .modeller-media__concept { min-height: 300px; }
.modeller-media--hero .modeller-media__art { max-height: 320px; }
.modeller-media--hero figcaption { color: #c6ddea; }
.modeller-workflow__layout > .modeller-media { position: sticky; top: 150px; width: 100%; min-width: 0; margin: 0; }
.modeller-workflow .modeller-media__concept { min-height: 210px; }
.modeller-workflow .modeller-media__art { width: min(100%, 510px); max-height: 420px; }
.modeller-media__video { position: relative; display: block; color: #142a40; text-decoration: none; }
.modeller-media__video:focus-visible { outline-offset: 5px; }
.modeller-media__play { position: absolute; top: 50%; left: 50%; display: grid; width: 58px; height: 58px; place-items: center; transform: translate(-50%, -50%); border: 1px solid #fff; border-radius: 50%; background: #fffffff2; color: #142a40; box-shadow: 0 5px 22px #07172740; pointer-events: none; transition: background 160ms, border-color 160ms; }
.modeller-media__play svg { display: block; width: 25px; height: 25px; margin-left: 3px; }
.modeller-media__video:is(:hover, :focus-visible) .modeller-media__play { border-color: #ff8a3d; background: #ff8a3d; }
.modeller-media__watch { position: absolute; bottom: 12px; left: 12px; padding: 6px 9px; border: 1px solid #ffffff40; border-radius: 4px; background: #142a40ed; color: #fff; font-size: 11px; line-height: 1.5; pointer-events: none; }

.modeller-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.modeller-benefits > article { min-width: 0; padding: 26px 22px; border: 1px solid #d4e1ea; border-radius: 8px; background: #fff; }
.modeller-benefits__number { display: block; margin-bottom: 23px; color: #b94f00; font: 400 11px/1.5 'IBM Plex Mono', monospace; }
.modeller-benefits h3 { margin-bottom: 14px; font-size: 21px; }
.modeller-benefits p { color: #41576a; font-size: 14px; line-height: 1.8; }
.modeller-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 24px 72px; padding-top: 35px; border-top: 1px solid #d6e2eb; }
.modeller-workspace + .modeller-workspace { margin-top: 52px; }
.modeller-workspace__copy { grid-column: 1; grid-row: 1; min-width: 0; }
.modeller-workspace__copy > p:not(.modeller-eyebrow) { margin-top: 18px; color: #41576a; font-size: 16px; line-height: 1.8; }
.modeller-workspace .modeller-media { grid-column: 2; grid-row: 1; align-self: start; }
.modeller-workspace__capabilities { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.modeller-workspace__capabilities .modeller-capabilities { margin-top: 0; }
.modeller-capabilities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 25px 0 0; padding: 0; list-style: none; }
.modeller-capability { position: relative; isolation: isolate; min-width: 0; overflow: hidden; margin: 0; padding: 20px 18px 22px; border: 1px solid #d2e1eb; border-top: 3px solid #abc9dd; border-radius: 7px; background: linear-gradient(140deg, #f8fbfd, #edf5fa); list-style: none; transition: border-top-color 300ms ease; }
.modeller-capability::before { position: absolute; z-index: -1; inset: 0; content: ''; border-radius: inherit; background: linear-gradient(135deg, #254e76, #142a40); opacity: 0; pointer-events: none; transition: opacity 300ms ease; }
.modeller-capability:is(:hover, :focus-within) { border-top-color: #ff8a3d; }
.modeller-capability:is(:hover, :focus-within)::before { opacity: 1; }
.modeller-capability__number { display: block; margin-bottom: 13px; color: #47677f; font: 400 10px/1.5 'IBM Plex Mono', monospace; }
.modeller-capability h4 { margin: 0 0 10px; color: #142a40; font-size: 16px; font-weight: 500; line-height: 1.45; letter-spacing: -.01em; }
.modeller-capability p { color: #41576a; font-size: 13px; line-height: 1.8; }
.modeller-capability :is(h4, p, .modeller-capability__number) { transition: color 300ms ease; }
.modeller-capability:is(:hover, :focus-within) :is(h4, p, .modeller-capability__number) { color: #fff; }
.modeller-capabilities__toggle { appearance: none; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 46px; max-width: 100%; margin-top: 20px; padding: 12px 16px; border: 1px solid #254e76; border-radius: 5px; background: linear-gradient(135deg, #254e76, #142a40); color: #fff; box-shadow: 0 3px 10px #142a4014; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.5; text-align: left; cursor: pointer; transition: background 160ms, border-color 160ms, color 160ms; }
.modeller-capabilities__toggle:is(:hover, :focus-visible) { border-color: #ff8a3d; background: #ff8a3d; color: #142a40; }
.modeller-capabilities__toggle > svg { display: block; flex: 0 0 16px; width: 16px; height: 16px; transition: transform 160ms; }
.modeller-capabilities__toggle[aria-expanded='true'] > svg { transform: rotate(180deg); }
.modeller-capabilities .modeller-capability[hidden], .modeller-capabilities__toggle[hidden] { display: none !important; }
.modeller-details { margin-top: 24px; border-block: 1px solid #cbdbe6; }
.modeller-details > summary { position: relative; min-height: 51px; padding: 15px 27px 15px 0; color: #254e76; font-size: 14px; font-weight: 500; line-height: 1.6; cursor: pointer; }
.modeller-details > summary::marker { color: #254e76; }
.modeller-details > summary > span { position: absolute; right: 4px; top: 12px; font-size: 21px; line-height: 1.3; transition: transform 160ms; }
.modeller-details[open] > summary > span { transform: rotate(45deg); }
.modeller-details > summary:hover { color: #b94f00; }
.modeller-feature-list { margin: 0; padding: 0; list-style: none; }
.modeller-feature-list > li { min-width: 0; padding-block: 19px; border-top: 1px solid #dae5ed; list-style: none; }
.modeller-feature-list h4, .modeller-feature-list h3 { margin: 0 0 8px; font-size: 17px; font-weight: 500; line-height: 1.45; letter-spacing: -.01em; }
.modeller-feature-list p { color: #41576a; font-size: 14px; line-height: 1.8; }
.modeller-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 72px; }
.modeller-split > div { min-width: 0; }
.modeller-lead { margin-top: 22px !important; color: #41576a; font-size: 16px; line-height: 1.8; }
.modeller-split > div > p:not([class]) { margin-top: 20px; color: #41576a; font-size: 15px; line-height: 1.8; }


.modeller-thermo{padding-bottom:15px;}
.modeller-section--blue { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 90% 15%, #7dd3e815, transparent 58%), linear-gradient(125deg, #142a40, #254e76); color: #fff; }
.modeller-section--blue::before { position: absolute; z-index: -1; inset: 0; content: ''; background-image: linear-gradient(#cce8ff06 1px, transparent 1px), linear-gradient(90deg, #cce8ff06 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, transparent 20%, #000); pointer-events: none; }
.modeller-section--blue :is(h2, h3, h4) { color: #fff; }
.modeller-section--blue :is(.modeller-lead, .modeller-feature-list p, .modeller-section__header > p:not(.modeller-eyebrow)) { color: #d1e3ef; }
.modeller-section--blue .modeller-eyebrow { color: #c9e0ed; }
.modeller-section--blue .modeller-eyebrow::before { background: #ff8a3d; }
.modeller-section--blue .modeller-feature-list { margin-top: 23px; }
.modeller-section--blue .modeller-feature-list > li { border-color: #bed4e33b; }
.modeller-section--blue .modeller-media figcaption { color: #c6ddea; }

/* Share the simulation while keeping the model-development know-how private. */
.modeller-runtime__layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 64px; }
.modeller-runtime__copy, .modeller-runtime__benefits { min-width: 0; }
.modeller-runtime__copy { max-width: 560px; }
.modeller-runtime__copy h2 { max-width: 19ch; }
.modeller-runtime__copy .modeller-lead { max-width: 52ch; line-height: 1.85; }
.modeller-runtime__copy .modeller-actions { margin-top: 28px; }
.modeller-runtime .modeller-button--outline { border-color: #b4cedf; background: #ffffff05; color: #fff; box-shadow: none; }
.modeller-runtime .modeller-button--outline:is(:hover, :focus-visible) { border-color: #ff8a3d; background: #ffffff0d; color: #ff8a3d; }
.modeller-runtime__benefits { display: grid; margin: 0; padding: 0; border-top: 1px solid #bed4e33b; list-style: none; }
.modeller-runtime__benefits > li { position: relative; min-width: 0; padding: 20px 0 21px 23px; border-bottom: 1px solid #bed4e33b; list-style: none; }
.modeller-runtime__benefits > li::before { position: absolute; top: 25px; left: 0; width: 2px; height: 15px; content: ''; background: #ff8a3d; }
.modeller-runtime__benefits h3 { margin: 0 0 8px; font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: -.015em; }
.modeller-runtime__benefits p { max-width: 66ch; color: #d1e3ef; font-size: 14px; line-height: 1.8; }

.modeller-section__art { position: absolute; z-index: -1; top: 50%; right: -8%; width: min(75%, 1050px); height: auto; transform: translateY(-50%); color: #b9e8f3; opacity: .08; pointer-events: none; }
.modeller-species { display: flex; align-items: center; gap: 20px; margin-top: 27px !important; padding-block: 20px; border-block: 1px solid #d7e3ec; }
.modeller-species > strong { flex: 0 0 auto; color: #254e76; font-size: 43px; font-weight: 500; line-height: 1.1; letter-spacing: -.04em; }
.modeller-species > span { max-width: 320px; color: #41576a; font-size: 14px; line-height: 1.7; }
.modeller-property-methods { margin-top: 10px; /*padding-top: 27px; border-top: 1px solid #d6e2eb;*/ }
.modeller-property-methods > h3 { margin-bottom: 18px; font-size: 18px; }
.modeller-property-methods__controls > ul { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.modeller-property-methods li { padding: 8px 12px; border: 1px solid #cddde8; border-radius: 5px; background: #f5f9fc; color: #254e76; font-size: 12px; line-height: 1.5; list-style: none; }

/* Property methods and their equations share a quiet molecular backdrop. */
.modeller-property-methods__options { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; padding-block: 24px; }
.modeller-property-methods__controls, .modeller-thermo__display { min-width: 0; }
.modeller-thermo__molecules { position: absolute; z-index: -1; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; color: #254e76; opacity: .065; pointer-events: none; user-select: none; }
.modeller-thermo__molecule { animation: modeller-molecule-drift var(--molecule-duration, 14s) ease-in-out infinite; animation-delay: var(--molecule-delay, 0s); animation-play-state: paused; }
.modeller-thermo__molecule :is(path, circle) { vector-effect: non-scaling-stroke; }
[data-thermo-in-view] .modeller-thermo__molecule { animation-play-state: running; }
@keyframes modeller-molecule-drift { 0%, 100% { translate: 0 0; } 35% { translate: var(--molecule-drift-x, 28px) var(--molecule-drift-y, -20px); } 70% { translate: calc(var(--molecule-drift-x, 28px) * -.6) calc(var(--molecule-drift-y, -20px) * .5); } }
.modeller-thermo__art { position: relative; display: grid; align-items: start; width: 100%; max-width: 700px; min-height: 190px; color: #254e76; }
.modeller-thermo__equation { position: relative; grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 0; color: #254e76; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 300ms ease, visibility 0s linear 300ms; }
.modeller-thermo__equation.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 300ms ease, visibility 0s; }
.modeller-thermo__equation-name { min-height: 2.8em; margin: 0; color: #254e76; font-family: 'IBM Plex Sans', Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.modeller-thermo__formula { display: grid; gap: 12px; width: 100%; min-width: 0; color: #254e76; font-family: 'Cambria Math', Cambria, 'STIX Two Math', serif; font-size: clamp(17px, 1.55vw, 22px); font-style: italic; line-height: 1.65; overflow-wrap: anywhere; white-space: normal; }
.modeller-thermo__formula > p { min-width: 0; margin: 0; color: inherit; font: inherit; overflow-wrap: anywhere; }
.modeller-thermo__formula sub { font-size: .7em; line-height: 0; }
.modeller-thermo .modeller-property-methods li { max-width: 100%; padding: 0; border: 0; background: transparent; }
.modeller-thermo :is([data-thermo-label], [data-thermo-method]) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; margin: 0; padding: 10px 13px; border: 1px solid #cddde8; border-radius: 5px; background: #f5f9fc; color: #254e76; font: inherit; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.modeller-thermo [data-thermo-method] { cursor: pointer; transition: background 300ms ease, border-color 300ms ease, color 300ms ease, box-shadow 300ms ease; }
.modeller-thermo [data-thermo-method]:is(:hover, :focus-visible, [aria-pressed='true']) { border-color: #254e76; border-top-color: #ff8a3d; background: linear-gradient(135deg, #254e76, #142a40); color: #fff; box-shadow: 0 3px 9px #142a4014; }
.modeller-thermo [data-thermo-method]:focus-visible { outline: 3px solid #254e76; outline-offset: 4px; }

.modeller-extensions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.modeller-extension { min-width: 0; padding: 30px; border: 1px solid #d2e0ea; border-radius: 10px; background: #fff; }
.modeller-extension__icon { display: grid; width: 42px; height: 42px; margin-bottom: 25px; place-items: center; border-radius: 7px; background: linear-gradient(135deg, #254e76, #142a40); color: #fff; }
.modeller-extension__icon .nav-icon { width: 25px; height: 25px; }
.modeller-extension > p:not(.modeller-eyebrow) { margin-top: 18px; color: #41576a; font-size: 15px; line-height: 1.8; }
.modeller-text-link { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; max-width: 100%; margin-top: 22px; color: #254e76; font-size: 14px; font-weight: 500; line-height: 1.5; text-decoration: underline; text-decoration-color: #9eb6c8; text-underline-offset: 4px; }
.modeller-text-link .nav-icon { flex: 0 0 18px; width: 18px; height: 18px; }
.modeller-text-link:hover { color: #b94f00; text-decoration-color: currentColor; }
.modeller-applications { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.modeller-applications > article { min-width: 0; padding: 26px; border: 1px solid #bdd3e340; border-radius: 8px; background: #ffffff04; }
.modeller-applications h3 { margin-bottom: 15px; font-size: 23px; }
.modeller-applications p { color: #d1e3ef; font-size: 14px; line-height: 1.8; }
.modeller-application-note { max-width: 970px; margin-top: 29px !important; color: #c6dce9; font-size: 13px; line-height: 1.8; }

/* Compare licence editions first, then choose a duration or usage allowance. */
.modeller-licence-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.modeller-licence-card { display: flex; flex-direction: column; min-width: 0; padding: 32px; border: 1px solid #c8dbe8; border-top: 3px solid #254e76; border-radius: 12px; background: #fff; color: #142a40; box-shadow: 0 6px 20px #142a4009; list-style: none; }
.modeller-licence-card__header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 12px; }
.modeller-licence-card__icon { grid-column: 1; grid-row: 1; display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 23px; border: 1px solid #d4e3ed; border-radius: 8px; background: #edf5fa; color: #254e76; }
.modeller-licence-card__icon > .nav-icon { display: block; width: 25px; height: 25px; }
.modeller-licence-card .modeller-licence-card__badge { grid-column: 2; grid-row: 1; max-width: 100%; margin: 0; padding: 6px 9px; border: 1px solid #9dbdd166; border-radius: 5px; color: #d7eaf5; background: #ffffff0a; font-size: 11px; font-weight: 500; line-height: 1.5; text-align: center; }
.modeller-licence-card .modeller-licence-card__eyebrow { grid-column: 1 / -1; grid-row: 2; margin: 0 0 8px; color: #41576a; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .075em; text-transform: uppercase; }
.modeller-licence-card .modeller-licence-card__title { grid-column: 1 / -1; grid-row: 3; margin: 0; color: #142a40; font-size: clamp(27px, 2.5vw, 34px); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; }
.modeller-licence-card .modeller-licence-card__intro { grid-column: 1 / -1; grid-row: 4; max-width: 55ch; margin-top: 17px; color: #41576a; font-size: 14px; line-height: 1.8; }
.modeller-licence-card .modeller-licence-card__price { margin-block: 24px; padding-bottom: 22px; border-bottom: 1px solid #d6e3ec; color: #254e76; font-size: 27px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.modeller-licence-card__features { display: grid; gap: 13px; margin: 0 0 30px; padding: 0; list-style: none; }
.modeller-licence-card__features > li { display: flex; align-items: flex-start; gap: 11px; min-width: 0; color: #41576a; font-size: 14px; line-height: 1.75; list-style: none; }
.modeller-licence-card__features > li > svg { display: block; flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; color: #254e76; }
.modeller-licence-card__features > li > span { min-width: 0; }
.modeller-licence-card > .modeller-button { width: 100%; margin-top: auto; transition: background 300ms ease, border-color 300ms ease, color 300ms ease, box-shadow 300ms ease; }
.modeller-licence-card--featured { border-color: #416887; border-top-color: #ff8a3d; background: radial-gradient(ellipse at 95% 0%, #7dd3e81c, transparent 65%), linear-gradient(125deg, #142a40, #1c3b5a 55%, #254e76); color: #fff; }
.modeller-licence-card--featured .modeller-licence-card__icon { border-color: #bdd3e340; background: #ffffff0a; color: #fff; }
.modeller-licence-card--featured .modeller-licence-card__eyebrow { color: #c9e0ed; }
.modeller-licence-card--featured :is(.modeller-licence-card__title, .modeller-licence-card__price) { color: #fff; }
.modeller-licence-card--featured .modeller-licence-card__price { border-color: #bed4e33b; }
.modeller-licence-card--featured :is(.modeller-licence-card__intro, .modeller-licence-card__features > li) { color: #d1e3ef; }
.modeller-licence-card--featured .modeller-licence-card__features > li > svg { color: #7dd3e8; }
.modeller-licence-card--featured > .modeller-button--primary { border-color: #ff8a3d; background: #ff8a3d; color: #142a40; }
.modeller-licence-card--featured > .modeller-button--primary:is(:hover, :focus-visible) { border-color: #ffb37f; background: #ff9b57; color: #142a40; }
.modeller-licence-card--featured :is(a, button):focus-visible { outline-color: #fff; }
.modeller-academic { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 25px; margin-block: 28px 25px; padding: 24px 27px; border: 1px solid #bfd3e3; border-radius: 8px; background: linear-gradient(135deg, #edf5fa, #f7fafc); }
.modeller-academic > span { display: grid; width: 46px; height: 46px; place-items: center; color: #254e76; }
.modeller-academic > span .nav-icon { width: 37px; height: 37px; }
.modeller-academic h3 { margin-bottom: 8px; font-size: 21px; }
.modeller-academic p { color: #41576a; font-size: 14px; line-height: 1.75; }
.modeller-academic .modeller-button { font-size: 13px; }
.modeller-downloads { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.modeller-download { min-width: 0; padding: 30px; border: 1px solid #cddde8; border-radius: 10px; background: #fff; }
.modeller-download__channel { display: inline-block; margin-bottom: 20px; padding: 6px 9px; border: 1px solid #b8ccdc; border-radius: 4px; background: #edf4f9; color: #254e76; font: 400 10px/1.5 'IBM Plex Mono', monospace; letter-spacing: .04em; }
.modeller-download > p:not([class]) { margin-top: 18px; color: #41576a; font-size: 15px; line-height: 1.8; }
.modeller-download > .modeller-button { margin-top: 24px; }
.modeller-download__meta { display: flex; flex-wrap: wrap; gap: 7px 17px; margin-top: 18px !important; color: #41576a; font-size: 12px; line-height: 1.7; }
.modeller-download__requirements { margin-top: 11px !important; color: #5d7182; font-size: 12px; line-height: 1.7; }
.modeller-release-notes { margin-top: 28px; }
.modeller-release-notes > p { padding-block: 5px 18px; color: #41576a; font-size: 14px; line-height: 1.8; }
.modeller-release-notes__body { padding-block: 5px 19px; }
.modeller-release-notes__body > section + section { margin-top: 21px; padding-top: 19px; border-top: 1px solid #dce6ed; }
.modeller-release-notes h4 { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5; }
.modeller-release-notes time { display: block; margin-top: 5px; color: #5d7182; font-size: 11px; line-height: 1.6; }
.modeller-release-notes ul { margin: 13px 0 0; padding-left: 19px; }
.modeller-release-notes li { padding-left: 3px; color: #41576a; font-size: 13px; line-height: 1.8; }
.modeller-release-notes li + li { margin-top: 8px; }
.modeller-downloads__note { max-width: 960px; margin-top: 25px !important; color: #5d7182; font-size: 13px; line-height: 1.8; }
.modeller-trial__layout { display: flex; align-items: center; justify-content: space-between; gap: 58px; }
.modeller-trial__layout > div { max-width: 790px; min-width: 0; }
.modeller-trial__layout p:not(.modeller-eyebrow) { margin-top: 23px; color: #d1e3ef; font-size: 16px; line-height: 1.8; }
.modeller-trial__layout > .modeller-button { flex: 0 0 auto; }

@media (max-width: 1099px) {
  .modeller-section__logo { top: 134px; }
  .modeller-page [id] { scroll-margin-top: 134px; }
  body:has(.modeller-page) .site-header:not([data-nav-ready]) { position: relative; }
  .modeller-hero { padding-block: 29px 54px; }
  .modeller-hero__layout { gap: 39px; }
  .modeller-hero h1 { font-size: 43px; }
  .modeller-hero__intro { font-size: 16px; }
  .modeller-hero__tags { gap: 6px; }
  .modeller-section { padding-block: 70px; }
  .modeller-methodology, .modeller-workspace, .modeller-split { gap: 43px; }
  .modeller-screenshots { margin-top: 39px; padding: 28px; }
  .modeller-screenshots__track { grid-auto-columns: calc((100% - 28px) / 3); }
  .modeller-workspace { gap: 24px 43px; }
  .modeller-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modeller-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modeller-media__frame { padding: 13px; }
  .modeller-media--hero .modeller-media__concept { min-height: 260px; }
  .modeller-media--hero .modeller-media__art { max-height: 250px; }
  .modeller-academic { grid-template-columns: auto minmax(0, 1fr); gap: 19px; }
  .modeller-academic > .modeller-button { grid-column: 2; justify-self: start; }
  .modeller-trial__layout { gap: 34px; }
  .modeller-workflow__layout { grid-template-columns: minmax(0, 1fr); gap: 31px; }
  .modeller-workflow__layout > .modeller-media { position: static; width: min(100%, 780px); }
}

@media (max-width: 900px) {
  .modeller-licence-card { padding: 26px; }
  .modeller-runtime__layout { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .modeller-runtime__copy { max-width: 700px; }
  .modeller-property-methods__options { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .modeller-hero__layout { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 37px; }
  .modeller-hero__copy { max-width: 730px; }
  .modeller-hero h1 { font-size: clamp(42px, 6vw, 55px); }
  .modeller-hero .modeller-media { width: min(100%, 720px); margin-inline: auto; }
  .modeller-hero__art { right: -35%; width: 1000px; }
  .modeller-section-nav > div { gap: 0 16px; }
  .modeller-section-nav a { font-size: 11px; }
  .modeller-section__header { margin-bottom: 30px; }
  .modeller-methodology { gap: 34px; }
  .modeller-workspace, .modeller-split { grid-template-columns: minmax(0, 1fr); gap: 29px; }
  .modeller-workspace__copy, .modeller-workspace__capabilities, .modeller-workspace .modeller-media { grid-column: 1; grid-row: auto; }
  .modeller-workspace .modeller-media, .modeller-split > .modeller-media { width: min(100%, 740px); }
  .modeller-extensions { gap: 21px; }
  .modeller-extension, .modeller-download { padding: 25px; }
  .modeller-applications { gap: 18px; }
  .modeller-applications > article { padding: 23px 20px; }
  .modeller-applications h3 { font-size: 21px; }
  .modeller-trial__layout { align-items: flex-start; flex-direction: column; gap: 28px; }
}

@media (max-width: 700px) {
  .modeller-licence-plans { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 640px) {
  .modeller-licence-card { padding: 25px 22px; }
  .modeller-runtime__layout { gap: 30px; }
  .modeller-runtime__copy .modeller-actions { margin-top: 23px; }
  .modeller-runtime__copy .modeller-button { width: 100%; }
  .modeller-runtime__benefits > li { padding: 18px 0 19px 20px; }
  .modeller-runtime__benefits > li::before { top: 23px; height: 14px; }
  .modeller-section__logo { top: 126px; }
  .modeller-page [id] { scroll-margin-top: 126px; }
  .modeller-page h2 { font-size: 31px; }
  .modeller-page h3 { font-size: 22px; }
  .modeller-eyebrow { margin-bottom: 16px !important; font-size: 10px; }
  .modeller-button { gap: 18px; padding-inline: 16px; }
  .modeller-section { padding-block: 50px; }
  .modeller-hero { padding-block: 25px 39px; }
  .modeller-breadcrumb { gap: 7px; margin-bottom: 31px; font-size: 11px; }
  .modeller-hero h1 { font-size: clamp(35px, 8.8vw, 48px); }
  .modeller-hero__intro { margin-top: 21px !important; font-size: 15px; }
  .modeller-hero__tags { margin-block: 23px; }
  .modeller-hero__tags li { font-size: 9px; }
  .modeller-hero__layout { gap: 28px; }
  .modeller-hero__note { font-size: 10px; }
  .modeller-media__frame { padding: 11px; border-radius: 8px; }
  .modeller-media__frame::before { inset: 7px; }
  .modeller-media__frame::after { left: 23px; width: 36px; }
  .modeller-media__concept { min-height: 185px; padding: 13px; gap: 9px; }
  .modeller-media__art { max-height: 190px; }
  .modeller-media--hero .modeller-media__concept { min-height: 220px; }
  .modeller-media--hero .modeller-media__art { max-height: 220px; }
  .modeller-media figcaption { margin-top: 11px; font-size: 11px; }
  .modeller-media__play { width: 49px; height: 49px; }
  .modeller-media__play svg { width: 22px; height: 22px; }
  .modeller-media__watch { bottom: 9px; left: 9px; padding: 5px 7px; font-size: 10px; }
  .modeller-section-nav { padding-block: 9px; }
  .modeller-section-nav > div { gap: 0 14px; }
  .modeller-section__header > p:not(.modeller-eyebrow), .modeller-lead { font-size: 15px; }
  .modeller-section__header { margin-bottom: 27px; }
  .modeller-methodology { grid-template-columns: minmax(0, 1fr); gap: 29px; }
  .modeller-methodology__copy p { font-size: 15px; }
  .modeller-screenshots { margin-top: 31px; padding: 25px 16px 20px; border-radius: 9px; }
  .modeller-screenshots__header { gap: 9px; margin-bottom: 18px; }
  .modeller-screenshots__header h3 { font-size: 22px; }
  .modeller-screenshots__header p { font-size: 12px; }
  .modeller-screenshots__rail { gap: 10px; }
  .modeller-screenshots__track { grid-column: 1 / -1; grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; padding-bottom: 10px; }
  .modeller-screenshots__arrow { grid-row: 2; margin-top: 0; }
  .modeller-screenshots__viewport { border-radius: 5px; }
  .modeller-screenshots__placeholder { gap: 5px; padding: 10px; }
  .modeller-screenshots__placeholder > svg { width: 28px; height: 28px; }
  .modeller-screenshots__placeholder > strong { font-size: 10px; }
  .modeller-screenshots__placeholder > span { display: none; }
  .modeller-screenshots__slide figcaption { margin-top: 9px; }
  .modeller-workflow { margin-top: 38px; padding-top: 30px; }
  .modeller-workflow__header h3 { font-size: 26px; }
  .modeller-workflow__header > p:not(.modeller-eyebrow) { font-size: 15px; }
  .modeller-workflow__layout { gap: 26px; margin-top: 26px; }
  .modeller-steps > li { grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding-bottom: 27px; }
  .modeller-steps > li::before { top: 34px; left: 16px; }
  .modeller-steps > li > span { width: 34px; height: 34px; font-size: 10px; }
  .modeller-steps__copy { padding-top: 3px; }
  .modeller-steps h4 { margin-bottom: 10px; font-size: 19px; }
  .modeller-steps p, .modeller-steps__copy > p:first-of-type { font-size: 14px; }
  .modeller-steps p + p { margin-top: 10px; }
  .modeller-workflow__note { margin-top: 27px; padding: 25px 22px; }
  .modeller-workflow__note h4 { font-size: 21px; }
  .modeller-workflow__note p { font-size: 13px; }
  .modeller-workflow__note-art { right: -130px; width: 620px; opacity: .11; }
  .modeller-workflow__note .modeller-actions { align-items: stretch; flex-direction: column; gap: 11px; margin-top: 22px; }
  .modeller-workflow__note .modeller-button { width: fit-content; }
  .modeller-workflow__note .modeller-workflow__note-help { margin-top: 14px; font-size: 10px; }
  .modeller-workflow .modeller-media__concept { min-height: 180px; }
  .modeller-benefits { gap: 13px; }
  .modeller-benefits > article { padding: 21px 17px; }
  .modeller-benefits h3 { font-size: 19px; }
  .modeller-benefits__number { margin-bottom: 16px; }
  .modeller-workspace { padding-top: 27px; gap: 25px; }
  .modeller-workspace + .modeller-workspace { margin-top: 36px; }
  .modeller-workspace__copy > p:not(.modeller-eyebrow) { font-size: 15px; }
  .modeller-capabilities { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 22px; }
  .modeller-capability { padding: 19px; }
  .modeller-capability h4 { font-size: 17px; }
  .modeller-capability p { font-size: 14px; }
  .modeller-capabilities__toggle { margin-top: 18px; }
  .modeller-details { margin-top: 21px; }
  .modeller-details > summary { font-size: 13px; }
  .modeller-feature-list > li { padding-block: 17px; }
  .modeller-feature-list h3, .modeller-feature-list h4 { font-size: 16px; }
  .modeller-split { gap: 26px; }
  .modeller-species { gap: 16px; margin-top: 23px !important; padding-block: 18px; }
  .modeller-species > strong { font-size: 38px; }
  .modeller-species > span { font-size: 13px; }
  .modeller-property-methods { margin-top: 29px; padding-top: 23px; }
  .modeller-property-methods__controls > ul { gap: 7px; }
  .modeller-property-methods li { padding: 7px 9px; font-size: 11px; }
  .modeller-extensions, .modeller-applications, .modeller-downloads { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .modeller-extension, .modeller-download { padding: 24px 21px; }
  .modeller-extension__icon { margin-bottom: 21px; }
  .modeller-section__art { right: -300px; width: 850px; }
  .modeller-applications > article { padding: 23px; }
  .modeller-applications h3 { font-size: 23px; }
  .modeller-application-note { margin-top: 23px !important; font-size: 12px; }
  .modeller-academic { grid-template-columns: minmax(0, 1fr); gap: 17px; margin-block: 23px; padding: 23px; }
  .modeller-academic > span { width: 36px; height: 36px; }
  .modeller-academic > span .nav-icon { width: 33px; height: 33px; }
  .modeller-academic > .modeller-button { grid-column: 1; }
  .modeller-download__channel { margin-bottom: 17px; }
  .modeller-download > p:not([class]) { font-size: 14px; }
  .modeller-downloads__note { margin-top: 21px !important; font-size: 12px; }
  .modeller-trial__layout p:not(.modeller-eyebrow) { margin-top: 20px; font-size: 15px; }
}

@media (max-width: 380px) {
  .modeller-benefits { grid-template-columns: minmax(0, 1fr); }
  .modeller-hero h1 { font-size: 34px; }
  .modeller-hero .modeller-actions { align-items: stretch; flex-direction: column; }
  .modeller-hero .modeller-button { width: 100%; }
  .modeller-academic { padding-inline: 18px; }
  .modeller-trial__layout > .modeller-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .modeller-thermo__molecule { animation: none; translate: none; }
  html:has(.modeller-page), body:has(.modeller-page) { scroll-behavior: auto !important; }
  .modeller-page *, .modeller-page *::before, .modeller-page *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media print {
  .modeller-licence-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .modeller-licence-card, .modeller-licence-card--featured { break-inside: avoid; padding: 20px; border-color: #cbdbe6; background: #fff; color: #142a40; box-shadow: none; }
  .modeller-licence-card .modeller-licence-card__icon { border-color: #cbdbe6; background: #fff; color: #254e76; }
  .modeller-licence-card :is(.modeller-licence-card__badge, .modeller-licence-card__eyebrow, .modeller-licence-card__title, .modeller-licence-card__intro, .modeller-licence-card__price, .modeller-licence-card__features > li) { color: #142a40; }
  .modeller-licence-card .modeller-licence-card__badge { border-color: #cbdbe6; background: #fff; }
  .modeller-licence-card .modeller-licence-card__price { border-color: #cbdbe6; }
  .modeller-licence-card .modeller-licence-card__features > li > svg { color: #254e76; }
  .modeller-licence-card > .modeller-button, .modeller-licence-card > .modeller-button:is(:hover, :focus-visible) { border-color: #9bb5c9; background: transparent; color: #254e76; box-shadow: none; }
  .modeller-runtime__layout { display: block; }
  .modeller-runtime__copy { max-width: none; }
  .modeller-runtime__copy h2 { max-width: none; }
  .modeller-runtime__copy .modeller-actions { display: none; }
  .modeller-runtime__benefits { margin-top: 22px; border-color: #cbdbe6; }
  .modeller-runtime__benefits > li { break-inside: avoid; border-color: #cbdbe6; }
  .modeller-runtime__benefits > li::before { background: #254e76; }
  .modeller-runtime__benefits :is(h3, p) { color: #142a40; }
  .modeller-property-methods__options { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding-block: 0; break-inside: avoid; }
  .modeller-thermo__molecules { display: none !important; }
  .modeller-thermo__art { min-height: 0; }
  .modeller-thermo__equation { position: static; display: none; opacity: 1; visibility: visible; transition: none; }
  .modeller-thermo__equation.is-active { display: flex; }
  .modeller-thermo__equation-name { min-height: 0; }
  .modeller-thermo [data-thermo-method], .modeller-thermo [data-thermo-method]:is(:hover, :focus-visible, [aria-pressed='true']) { min-height: 0; border-color: #cddde8; background: #fff; color: #254e76; box-shadow: none; cursor: auto; transition: none; }
  .modeller-screenshots { margin-top: 28px; padding: 22px 0 0; border: 0; border-top: 1px solid #d6e2eb; border-radius: 0; background: #fff; color: #142a40; box-shadow: none; }
  .modeller-screenshots__header :is(h3, p), .modeller-screenshots__header .modeller-eyebrow, .modeller-screenshots__slide h4, .modeller-screenshots__slide figcaption p { color: #142a40; }
  .modeller-screenshots .modeller-eyebrow::before { background: #b94f00; }
  .modeller-screenshots__rail { display: block; }
  .modeller-screenshots__track { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; padding: 0; overflow: visible; scroll-snap-type: none; }
  .modeller-screenshots__slide { break-inside: avoid; }
  .modeller-screenshots__arrow, .modeller-screenshots__open { display: none !important; }
  .modeller-screenshots__slide h4, .modeller-screenshots__slide figcaption p { display: block; max-height: none; overflow: visible; -webkit-line-clamp: unset; }
  .modeller-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modeller-capabilities .modeller-capability[hidden] { display: block !important; }
  .modeller-capability, .modeller-capability:is(:hover, :focus-within) { break-inside: avoid; border-top-color: #a8c3d6; background: #fff; transition: none; }
  .modeller-capability::before { display: none; }
  .modeller-capability :is(h4, p, .modeller-capability__number), .modeller-capability:is(:hover, :focus-within) :is(h4, p, .modeller-capability__number) { color: #142a40; transition: none; }
  .modeller-capabilities__toggle { display: none !important; }
  .modeller-hero, .modeller-section { padding-block: 28px; background: #fff; color: #142a40; }
  .modeller-hero__art, .modeller-section__art, .modeller-section__logo-layer, .modeller-section__logo, .modeller-workflow__note-art, .modeller-section--blue::before, .modeller-media__play, .modeller-media__watch, .modeller-trial, .modeller-section-nav { display: none !important; }
  .modeller-hero__layout, .modeller-methodology, .modeller-workspace, .modeller-split { display: block; min-height: 0; }
  .modeller-workspace__copy, .modeller-workspace__capabilities, .modeller-workspace .modeller-media { grid-column: auto; grid-row: auto; }
  .modeller-workspace__capabilities { margin-top: 24px; }
  .modeller-hero :is(h1, .modeller-eyebrow, .modeller-hero__intro, .modeller-hero__note, .modeller-breadcrumb, .modeller-breadcrumb a), .modeller-hero h1 > span, .modeller-section--blue :is(h2, h3, h4, p), .modeller-hero .modeller-media figcaption, .modeller-section--blue .modeller-media figcaption { color: #142a40; }
  .modeller-hero .modeller-actions { display: none; }
  .modeller-hero__tags li { border-color: #a8bdce; color: #254e76; }
  .modeller-media { margin-top: 22px; break-inside: avoid; }
  .modeller-workflow__layout { display: block; }
  .modeller-workflow__layout > .modeller-media { position: static; width: 100%; margin-top: 22px; }
  .modeller-steps > li { break-inside: avoid; }
  .modeller-workflow__note { break-inside: avoid; border-color: #c7dce9; background: #fff; color: #142a40; }
  .modeller-workflow__note h4, .modeller-workflow__note p, .modeller-workflow__note .modeller-workflow__note-help { color: #142a40; }
  .modeller-workflow__note .modeller-button, .modeller-workflow__note .modeller-button:is(:hover, :focus-visible) { border-color: #9bb5c9; background: transparent; color: #254e76; box-shadow: none; }
  .modeller-media__frame { background: #f5f8fb; }
  .modeller-benefits > article, .modeller-extension, .modeller-download { break-inside: avoid; }
  .modeller-applications > article { border-color: #cbdbe6; background: transparent; }
  .modeller-button { border-color: #9bb5c9; background: transparent; color: #254e76; box-shadow: none; }
}