/* Systems anatomy: shared composition adapter. All color and type owners live in site.css. */
.ui-arrow { display: inline-block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.button .ui-arrow { width: 17px; height: 17px; }
.card-arrow .ui-arrow { width: 22px; height: 22px; }
.text-link { gap: 12px; }
.site-header { height: 80px; backdrop-filter: none; }
.header-inner nav { gap: 24px; }
.header-inner nav a { font-weight: 600; }
.button { border-radius: .5rem; font-weight: 650; }
.section { padding-block: 80px; }
.eyebrow { letter-spacing: .1em; font-weight: 650; }
h1, h2, h3 { letter-spacing: -.045em; }
h2 { font-weight: 600; }
.hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; gap: 0; padding-block: 58px 0; }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: 80px; align-items: start; padding-bottom: 42px; }
.hero-copy > .eyebrow { grid-column: 1 / -1; margin-bottom: 24px; }
.hero h1 { grid-column: 1; grid-row: 2 / 5; max-width: 760px; margin: 0; font-size: clamp(44px, 5.1vw, 72px); line-height: 1.06; font-weight: 600; }
.hero-tagline { grid-column: 2; margin: 2px 0 0; max-width: 370px; font-weight: 500; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.4; color: var(--ink); }
.hero-copy .actions { grid-column: 2; margin-top: 25px; gap: 15px 24px; }
.hero-note { grid-column: 2; align-items: start; margin-top: 24px; font-size: 13px; max-width: 400px; line-height: 1.5; }
.hero-note .note-line { margin-top: 9px; width: 22px; background: var(--brand-orange); }
.hero-context { display: block; padding-block: 28px; border-bottom: 1px solid var(--border); }
.hero-context .lead { max-width: 1000px; margin: 0; font-size: 16px; line-height: 1.6; }
.home-integrations { padding-top: 16px; }
/* Original partner badges keep their colours and aspect ratio. */
.logo-partner-marks { display: flex; align-items: center; gap: 12px; }
.logo-partner-marks img { display: block; width: 94px; height: auto; object-fit: contain; }
.footer-grid .logo-partner-marks { margin-top: 20px; }
.footer-grid .logo-partner-marks img { width: 86px; }

/* One expressive surface: a cross-section of the selected workflow. */
.system-explorer { padding: 28px 36px 24px; border: 0; border-radius: 16px; background: var(--brand-blue-dark); background-image: none; box-shadow: none; color: var(--white); overflow: hidden; }
.explorer-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin: 0 0 24px; }
.explorer-eyebrow { color: color-mix(in srgb, var(--white) 75%, transparent); font-size: 11px; margin: 0; font-weight: 500; }
.explorer-heading > strong { font-size: clamp(20px, 2.2vw, 28px); font-weight: 500; letter-spacing: -.025em; }
.explorer-controls-slot { position: static; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin: 0 0 24px; min-height: 44px; width: 100%; }
.explorer-controls { gap: 4px; }
.explorer-choice { flex: none; min-height: 34px; padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--white) 28%, transparent); border-radius: 5px; background: transparent; color: var(--white); font-size: 12px; font-weight: 500; }
.explorer-choice-check { display: none; }
.explorer-choice[aria-pressed="true"], .explorer-choice[aria-pressed="true"]:not(:disabled):hover { background: var(--white); border-color: var(--white); color: var(--brand-blue-dark); }
.explorer-choice:not(:disabled):hover { background: color-mix(in srgb, var(--white) 12%, transparent); border-color: var(--white); color: var(--white); }
.explorer-choice:focus-visible { outline-color: var(--white); }
.explorer-autoplay { position: static; flex: none; min-height: 44px; margin: 0; padding: 4px 8px; border-color: color-mix(in srgb,var(--white) 25%,transparent); border-radius: 4px; background: transparent; color: var(--white); font-weight: 400; font-size: 11px; }
.explorer-autoplay:hover { border-color: var(--white); color: var(--white); }
.explorer-diagram { grid-template-columns: minmax(0,1fr) 100px minmax(0,1fr) 100px minmax(0,1fr); gap: 0; align-items: center; padding: 16px 12px 28px; }
.explorer-node { min-height: 0; border: 0; border-radius: 0; padding: 0; background: transparent; }
.explorer-source, .explorer-result { min-height: 0; }
.explorer-node-icon { display: none; }
.explorer-stage { min-height: 0; margin-bottom: 9px; color: color-mix(in srgb,var(--white) 72%,transparent); font-size: 12px; font-weight: 400; }
.explorer-node strong { min-height: 0; font-size: clamp(25px,3vw,37px); font-weight: 500; letter-spacing: -.04em; }
.explorer-node small { min-height: 0; margin-top: 10px; color: color-mix(in srgb,var(--white) 78%,transparent); font-size: 13px; }
.explorer-source .explorer-node-copy, .explorer-result .explorer-node-copy { position: relative; padding: 20px 0 20px 18px; border-left: 1px solid color-mix(in srgb,var(--white) 35%,transparent); }
.explorer-source .explorer-node-copy::before, .explorer-result .explorer-node-copy::before { content: ""; position: absolute; left: -3px; top: 0; width: 5px; height: 5px; background: var(--brand-orange); }
.explorer-hub { display: flex; align-items: center; gap: 22px; padding: 22px; border: 1px solid color-mix(in srgb,var(--white) 34%,transparent); border-radius: 12px; box-shadow: none; }
.explorer-hub-mark { flex: none; min-height: 0; width: 75px; margin: 0; padding: 12px 8px; border-radius: 7px; background: var(--white); }
.explorer-hub-mark img { width: 59px; }
.explorer-hub .explorer-stage { color: color-mix(in srgb,var(--white) 75%,transparent); font-size: 11px; }
.explorer-hub strong { font-size: 20px; }
.explorer-hub small { font-size: 12px; }
.explorer-hub-ports { display: none; }
.explorer-connector { width: auto; color: color-mix(in srgb,var(--white) 65%,transparent); }
.explorer-connector svg { width: 100%; height: 16px; }
.explorer-connector path { stroke-width: 1; }
.explorer-summary { padding-top: 18px; border-color: color-mix(in srgb,var(--white) 25%,transparent); }
.explorer-summary-panel { display: grid; grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr); gap: 24px; align-items: baseline; }
.explorer-summary strong { font-size: 15px; font-weight: 500; margin: 0; }
.explorer-summary p { color: color-mix(in srgb,var(--white) 80%,transparent); font-size: 14px; }
.explorer-footnote { margin: 16px 0 0; font-size: 11px; color: color-mix(in srgb,var(--white) 68%,transparent); }
.system-explorer.is-touring .explorer-hub { animation: none; }
.explorer-static-label { color: var(--white); font-size: 12px; }

/* Real, CMS-owned stories give the site its evidence and its visual rhythm. */
.home-projects { padding-top: 64px; }
.home-projects .section-heading { margin-bottom: 32px; }
.home-projects h2 { max-width: 700px; }
 .case-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }
.case-study { display: grid; grid-template-columns: minmax(100px,.3fr) minmax(0,1.3fr) auto; gap: 24px 40px; align-items: baseline; padding: 30px 0; border-top: 1px solid var(--control-border); }
.case-study:last-child { border-bottom: 1px solid var(--border); }
.case-sector { margin: 0; color: var(--muted); font-size: 14px; }
.case-copy h3 { max-width: 660px; margin: 0 0 14px; font-size: clamp(23px,2.2vw,30px); font-weight: 550; line-height: 1.25; }
.case-copy h3 a { text-decoration: none; }
.case-copy h3 a:hover { color: var(--brand-blue-dark); text-decoration: underline; text-underline-offset: 5px; }
.case-copy p { max-width: 620px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.case-study > .text-link { white-space: nowrap; min-height: 44px; }

/* Services form a deliberate index; products are horizontal application plates. */
.home-solutions { display: grid; grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr); gap: 70px; border-top: 1px solid var(--border); }
.home-solutions .section-heading { display: block; margin: 0; }
.home-solutions .section-heading h2 { font-size: clamp(28px,3.2vw,43px); }
.home-solutions .section-heading > p { margin-top: 28px; font-size: 16px; }
.home-solutions .solution-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
.home-solutions .home-solution { display: block; column-gap: 24px; min-height: 0; padding: 26px 40px 26px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; }
.home-solutions .home-solution:first-child { border-top-color: var(--control-border); }
.home-solution .solution-drawing { grid-row: 1 / 4; min-height: 0; margin: 0; align-self: start; padding-top: 8px; }
.home-solution .solution-drawing svg { width: 104px; }
.home-solution h3 { margin: 0 0 10px; font-size: 23px; font-weight: 550; max-width: none; }
.home-solution p { font-size: 16px; margin: 0 0 12px; max-width: 530px; }
.home-solution .card-bottom { min-height: 24px; padding: 0; border: 0; justify-content: start; gap: 12px; font-size: 12px; }
.home-solution .card-arrow { top: 28px; right: 0; }
.home-products { border: 0; }
.home-products .section { padding-block: 70px; }
.home-products .product-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
.home-products .home-product { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; min-height: 0; padding: 30px 0; border: 0; border-top: 1px solid var(--control-border); border-radius: 0; background: transparent; }
.home-product-copy, .home-products-single .home-product-copy { display: grid; grid-template-columns: 68px minmax(0,1fr); column-gap: 25px; padding: 0 60px 0 0; }
.app-mark { display: block; width: 68px; height: 68px; object-fit: contain; grid-row: 1 / 4; }
.home-product-copy h3 { margin: 0 0 12px; font-size: 28px; font-weight: 550; }
.home-product-copy p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; }
.home-product-copy .text-link { min-height: 32px; font-size: 12px; }
.home-products .product-workflow { padding: 18px 0 18px 32px; background: transparent; border: 0; border-left: 1px solid var(--border); }
.product-workflow figcaption { margin-bottom: 22px; font-size: 11px; }
.product-workflow-track { gap: 6px; grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr); }
.product-stage { display: flex; flex-direction: column; align-items: center; text-align: center; }
.product-stage-symbol { grid-row: auto; width: 44px; height: 48px; margin-bottom: 12px; border-radius: 6px; }
.product-stage-symbol svg { width: 25px; height: 25px; }
.product-stage strong { font-size: 13px; }
.product-stage small { margin-top: 4px; font-size: 12px; }
.product-stage-connector { width: auto; margin-top: 10px; transform: none; }
.product-support { margin-top: 18px; padding-top: 12px; font-size: 12px; }
.home-process .process-step-copy h3 { font-weight: 550; font-size: 22px; }

/* Catalogue: compact, comparable rows; navigation and filtering keep their owners. */
.listing .solution-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 48px; }
.listing .solution-card { display: grid; position: relative; grid-template-columns: 52px minmax(0,1fr); column-gap: 20px; min-height: 0; padding: 26px 30px 26px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; }
.listing .solution-card > .app-mark { width: 50px; height: 50px; grid-row: 1 / 4; padding: 8px; border-radius: 10px; background: var(--white); border: 1px solid var(--border); }
.listing .solution-card h2, .listing .solution-card h3 { grid-column: 2; margin: 0 0 10px; padding: 0; max-width: none; font-size: 21px; font-weight: 550; line-height: 1.25; letter-spacing: -.025em; }
.listing .solution-card p { grid-column: 2; margin: 0 0 12px; font-size: 15px; }
.listing .solution-card .card-bottom { grid-column: 2; display: flex; justify-content: space-between; min-height: 24px; margin-top: 0; padding: 0; border: 0; font-size: 12px; }
.listing .solution-card .card-arrow { display: none; }
/* Product names carry vendor identity; repeated master wordmarks add no information. */
.listing .solution-card.text-product { grid-template-columns: minmax(0,1fr); }
.listing .solution-card.text-product > :is(h2,h3,p,.card-bottom) { grid-column: 1; }
.listing-group + .listing-group { margin-top: 48px; }
.listing-group > h2 { font-weight: 550; }
.page-hero { padding-block: 38px 46px; }
.page-hero h1 { max-width: 960px; font-size: clamp(34px,4.1vw,60px); font-weight: 550; line-height: 1.14; }
.page-hero .lead { font-size: 19px; }
.page-app-mark { display: block; width: 72px; height: 72px; margin: 18px 0; padding: 8px; object-fit: contain; border: 1px solid var(--border); border-radius: 14px; background: var(--white); }
.about-portrait { display: grid; grid-template-columns: minmax(0,1fr) 1fr minmax(0,1fr) 1fr minmax(0,1.5fr); align-items: center; min-height: 240px; margin-bottom: 55px; padding: 35px 55px; border-radius: 12px; background: var(--surface); }
.about-portrait-source, .about-portrait-vibe { position: relative; z-index: 1; }
.about-portrait-vibe { padding: 20px; border: 1px solid var(--border); border-radius: 9px; background: var(--white); }
.about-portrait-line { height: 1px; background: var(--control-border); }
.about-portrait-apps { display: flex; gap: 12px; }
.about-portrait-apps img { min-width: 0; width: calc((100% - 24px)/3); height: auto; }
.content-block h2, .content-block h3 { font-weight: 550; letter-spacing: -.025em; }
.cta-section { position: relative; margin-top: 0; margin-bottom: 65px; padding: 45px 0; border: 0; border-block: 1px solid var(--control-border); border-radius: 0; background: transparent; color: var(--ink); }
.cta-section h2 { max-width: 700px; font-size: clamp(32px,4.1vw,54px); font-weight: 500; }
.cta-description { color: var(--muted); max-width: 630px; font-size: 16px; }
.cta-section .button.white { color: var(--white); background: var(--brand-blue); border-color: var(--brand-blue); }
.cta-section .button.white:hover { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); }
.cta-section .button:focus-visible { outline-color: var(--focus-orange); }
footer .ui-arrow { width: 12px; height: 12px; margin-left: 6px; }

@media (hover:hover) and (pointer:fine) {
  .home-solutions .home-solution:hover, .home-products .home-product:hover, .listing .solution-card:hover { transform: none; box-shadow: none; }
  .home-solutions .home-solution:hover h3, .home-products .home-product:hover h3, .listing .solution-card:hover :is(h2,h3) { color: var(--brand-blue); }
}
@media (max-width:1100px) {
 .hero-copy { column-gap: 45px; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); }
 .explorer-diagram { grid-template-columns: minmax(0,1fr) 45px minmax(0,1.1fr) 45px minmax(0,1fr); padding-inline: 0; }
 .explorer-hub { gap: 12px; padding: 18px 12px; }
 .explorer-hub-mark { width: 59px; padding: 9px 6px; }
 .explorer-hub-mark img { width: 47px; }
 .explorer-hub strong { font-size: 17px; }
 .home-solutions { gap: 40px; }
 .home-product-copy { padding-right: 30px; column-gap: 18px; }
 .case-grid { gap: 36px; }
}
@media (max-width:760px) {
 .site-header { height: 72px; }
 .hero { padding-top: 34px; }
 .hero-copy { display: block; padding-bottom: 30px; }
 .hero-copy > .eyebrow { margin-bottom: 17px; font-size: 11px; }
 .hero h1 { max-width: 620px; font-size: clamp(38px,8.5vw,58px); line-height: 1.08; }
 .hero-tagline { max-width: 550px; margin-top: 20px; font-size: 20px; }
 .hero-copy .actions { margin-top: 22px; gap: 16px; }
 .hero-note { margin-top: 20px; max-width: none; font-size: 12px; }
 .hero-context { display: block; padding-block: 22px; }
 .hero-context .lead { font-size: 15px; }
 .system-explorer { padding: 22px; border-radius: 12px; }
 .explorer-heading { display: block; margin-bottom: 18px; }
 .explorer-eyebrow { margin-bottom: 10px; }
 .explorer-heading > strong { font-size: 23px; }
 .explorer-controls-slot { position: static; width: 100%; min-height: 34px; margin-bottom: 20px; }
 .explorer-controls { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
 .explorer-choice { width: 100%; min-height: 36px; padding: 7px 4px; font-size: 11px; }
 .explorer-diagram { display: grid; grid-template-columns: minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr); justify-items: stretch; padding: 3px 0 20px; }
 .explorer-source, .explorer-result { display: block; padding: 0; }
 .explorer-source .explorer-node-copy, .explorer-result .explorer-node-copy { display: block; padding: 10px 0; border: 0; }
 .explorer-source .explorer-node-copy::before, .explorer-result .explorer-node-copy::before { display: none; }
 .explorer-stage { display: block; margin-bottom: 6px; font-size: 11px; }
 .explorer-node strong { font-size: clamp(17px,3.7vw,25px); }
 .explorer-node small { display: block; max-width: none; margin: 8px 0 0; font-size: 11px; line-height: 1.4; text-align: left; }
 .explorer-hub { display: block; min-height: 0; padding: 12px 8px; border-radius: 7px; }
 .explorer-hub-mark { width: 59px; margin: 0 0 9px; padding: 6px; }
 .explorer-hub .explorer-stage { display: none; }
 .explorer-hub .explorer-node-copy { display: block; }
 .explorer-hub strong { font-size: 12px; letter-spacing: -.02em; }
 .explorer-hub small { font-size: 11px; }
 .explorer-connector { width: auto; height: auto; margin: 0; }
 .explorer-connector svg { width: 100%; height: 16px; transform: none; }
 .explorer-summary-panel { display: block; }
 .explorer-summary strong { margin-bottom: 7px; font-size: 14px; }
 .explorer-summary p { font-size: 12px; line-height: 1.5; }
 .explorer-footnote { margin: 14px 0 0; font-size: 11px; }
 .explorer-autoplay { position: static; display: inline-flex; margin-top: 12px; font-size: 11px; }
 .section { padding-block: 52px; }
 .section-heading { display: block; margin-bottom: 28px; }
 .section-heading > .text-link { margin-top: 20px; }
 .section-heading h2 { font-size: 32px; }
 .case-grid { grid-template-columns: minmax(0,1fr); gap: 34px; }
 .case-route { min-height: 100px; margin-bottom: 22px; padding: 24px; gap: 10px; }
 .case-system { min-width: 0; font-size: 18px; }
 .case-route-line { min-width: 12px; }
 .case-copy h3 { font-size: 23px; }
 .case-copy p { font-size: 15px; }
 .home-solutions { display: block; }
 .home-solutions .section-heading { margin-bottom: 30px; }
 .home-solutions .section-heading > p { margin-top: 20px; }
 .home-solutions .home-solution { padding-block: 23px; padding-right: 25px; }
 .home-solution .solution-drawing svg { width: 68px; }
 .home-solution h3 { font-size: 20px; }
 .home-solution p { font-size: 15px; }
 .home-solution .card-arrow { top: 24px; }
 .home-products .section { padding-block: 50px; }
 .home-products .home-product { display: block; padding-block: 28px; }
 .home-products .home-product-copy { grid-template-columns: 50px minmax(0,1fr); padding: 0; column-gap: 18px; }
 .home-product-copy .app-mark { width: 50px; height: 50px; }
 .home-product-copy h3 { font-size: 24px; }
 .home-products .product-workflow { padding: 23px 0 0; border: 0; }
 .product-workflow-track { grid-template-columns: minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr); gap: 5px; }
 .product-stage { display: flex; flex-direction: column; align-items: center; text-align: center; }
 .product-stage-symbol { grid-row: auto; width: 42px; height: 44px; margin: 0 0 10px; }
 .product-stage strong { align-self: auto; font-size: 12px; overflow-wrap: anywhere; }
 .product-stage small { align-self: auto; margin-top: 4px; font-size: 11px; }
 .product-stage-connector { justify-self: auto; width: auto; margin-top: 8px; transform: none; }
 .product-support { margin-top: 16px; font-size: 11px; }
 .home-process { display: block; }
 .home-process ol { margin-top: 34px; }
 .home-process .process-step-copy h3 { font-size: 21px; }
 .listing .solution-grid { grid-template-columns: minmax(0,1fr); }
 .listing .solution-card { grid-template-columns: 40px minmax(0,1fr); column-gap: 16px; padding: 22px 0; }
 .listing .solution-card > .app-mark { width: 40px; height: 40px; padding: 6px; border-radius: 8px; grid-row: 1; }
 .listing .solution-card :is(h2,h3) { font-size: 20px; min-height: 40px; align-self: center; }
 .listing .solution-card p { grid-column: 1 / -1; font-size: 15px; line-height: 1.5; }
 .listing .solution-card .card-bottom { grid-column: 1 / -1; }
 .page-hero { padding-block: 26px 36px; }
 .page-hero h1 { font-size: 36px; }
 .page-hero .lead { font-size: 17px; }
 .about-portrait { min-height: 150px; margin-bottom: 34px; padding: 22px 18px; grid-template-columns: 1fr 15px 1.1fr 15px 1.2fr; }
 .about-portrait-vibe { padding: 12px 8px; }
 .about-portrait-source img { width: 67px; }
 .about-portrait-apps { gap: 4px; }
 .about-portrait-apps img { width: calc((100% - 8px)/3); }
 .cta-section { display: block; padding: 32px 0; margin-bottom: 38px; }
 .cta-section h2 { font-size: 36px; }
 .cta-section .button { margin-top: 24px; }
}
@media (max-width:359px) {
 .hero h1 { font-size: 36px; }
 .hero-copy .actions { display: grid; justify-items: start; }
 .system-explorer { padding: 18px 14px; }
 .explorer-diagram { grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr); }
 .explorer-hub { padding: 10px 6px; }
 .explorer-hub-mark { width: 51px; padding: 5px; }
 .explorer-hub-mark img { width: 41px; }
 .explorer-hub strong { font-size: 11px; }
 .explorer-hub small { font-size: 11px; }
}
@media (prefers-reduced-motion:reduce) {
 .system-explorer *, .home-projects *, .home-products * { animation: none !important; transition: none !important; }
}
@media (forced-colors:active) {
 .system-explorer { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
 .system-explorer :is(.explorer-eyebrow,.explorer-stage,.explorer-node small,.explorer-summary p,.explorer-footnote,.explorer-choice) { color: CanvasText; }
 .explorer-hub, .explorer-choice { border-color: CanvasText; }
 .explorer-choice[aria-pressed="true"] { color: HighlightText; background: Highlight; }
}

@media (pointer: coarse) { .explorer-choice, .explorer-autoplay { min-height: 44px; } }

/* Refinement: all controls participate in layout, including the normal-motion tour. */
.explorer-controls-slot .explorer-autoplay { margin: 0; }
.explorer-choice { min-height: 44px; }
.explorer-controls-slot noscript { flex-basis: 100%; }
@media (max-width: 900px) {
  .case-study { grid-template-columns: minmax(80px,.3fr) minmax(0,1.4fr); gap: 12px 28px; }
  .case-study > .text-link { grid-column: 2; }
}
@media (max-width: 760px) {
  .explorer-controls-slot { display: flex; min-height: 44px; }
  .explorer-controls { flex: 1 1 100%; width: 100%; }
  .case-study { display: block; padding-block: 26px; }
  .case-sector { margin-bottom: 12px; }
  .case-study > .text-link { margin-top: 16px; }
  .case-copy p { font-size: 16px; }
}

/* Real product artwork: original brand proportions and uncropped application screens. */
.vendor-product-logo { display: block; width: auto; max-width: min(220px,100%); height: 48px; object-fit: contain; object-position: left center; margin: 20px 0; }
.listing .solution-card > .vendor-product-logo { grid-column: 1 / -1; width: 180px; height: 38px; margin: 0 0 20px; padding: 0; border: 0; background: transparent; }
.product-screen-detail { margin: 40px 0 0; }
.product-screen-link { display: block; padding: clamp(10px,2.5vw,32px); border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.product-screen-detail .page-image { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; margin: 0; border-radius: 3px; border: 1px solid var(--border); }
.product-screen-detail figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 14px; color: var(--muted); font-size: 15px; }
.product-screen-detail figcaption a { white-space: nowrap; color: var(--brand-blue); text-decoration: underline; text-underline-offset: 4px; }
.product-screens .section-heading { align-items: end; }
.product-screens .section-heading h2 { max-width: 640px; }
.product-screens-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px 32px; }
.product-screen-preview { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: clamp(12px,2.5vw,28px); border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.product-screen-preview img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; border: 1px solid var(--border); border-radius: 3px; }
.product-screen-copy { padding-top: 18px; }
.product-screen-copy h3 { margin: 0 0 8px; font-size: 23px; }
.product-screen-copy h3 a { display: flex; justify-content: space-between; gap: 20px; }
.product-screen-copy p { margin: 0; max-width: 54ch; color: var(--muted); font-size: 16px; }
.product-screen-card:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1.8fr) minmax(0,1fr); gap: 36px; align-items: center; }
@media (max-width: 760px) {
 .product-screens-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
 .product-screen-card:only-child { display: block; }
 .product-screen-detail { margin-top: 28px; }
 .vendor-product-logo { max-width: 200px; height: 42px; }
}

/* Package identities from the manufacturer's original PDF, kept at native proportions. */
.product-package-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; list-style: none; margin: 28px 0; padding: 0; }
.product-package-marks li { margin: 0; padding: 0; max-width: 100%; }
.product-package-marks img { display: block; width: auto; height: 40px; max-width: 100%; object-fit: contain; }
@media (max-width: 480px) {
 .product-package-marks { gap: 14px 24px; margin-block: 24px; }
 .product-package-marks img { height: 34px; }
}

/* Portrait app screens keep their native shape, beside one another on wide screens. */
.product-screen-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; margin-top: 40px; }
.product-screen-gallery .product-screen-detail { margin: 0; min-width: 0; }
.product-screen-portrait .product-screen-link { display: flex; justify-content: center; }
.product-screen-portrait .page-image { width: auto; max-width: 100%; max-height: 640px; }
.product-screen-card-mobile:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; align-items: center; }
@media (max-width: 760px) {
 .product-screen-gallery { grid-template-columns: minmax(0,1fr); gap: 32px; margin-top: 28px; }
 .product-screen-card-mobile:last-child:nth-child(odd) { display: block; }
}

/* Wide mapping panels remain large enough to read; portrait app screens keep their columns. */

/* Application-derived explanations: artwork has a separate phone composition. */
.connector-project-visuals { max-width: 1040px; }
.connector-project-intro { max-width: 700px; margin-bottom: 32px; }
.connector-project-intro h2 { margin: 0 0 16px; }
.connector-project-intro p { margin: 0; color: var(--muted); }
.connector-project-visual { margin: 0 0 48px; }
.connector-project-visual:last-child { margin-bottom: 0; }
.connector-project-visual > a { display: block; border-radius: 8px; cursor: pointer; }
.connector-project-visual > a:hover { outline: 1px solid var(--control-border); outline-offset: 5px; }
.connector-project-visual > a:focus-visible { outline: 3px solid var(--focus-orange); outline-offset: 5px; }
.connector-project-visual > a:active { outline: 2px solid var(--brand-blue); }
.connector-project-visual picture, .connector-project-visual img { display: block; width: 100%; height: auto; }
.connector-project-visual figcaption { margin-top: 16px; color: var(--muted); font-size: 16px; }
@media (max-width: 759px) {
 .connector-project-intro { margin-bottom: 24px; }
 .connector-project-visual { margin-bottom: 36px; }
}