/* Opt-in product presentation. Accent belongs to ECMI; source screenshots stay intact. */
.project-showcase { --sc-blue:var(--c, #2886DE); --sc-ink:#17202d; --sc-muted:#596675; --sc-line:#e2e8ef; --sc-soft:#f5f8fc; color:var(--sc-ink); padding-top:0; }
.sc-wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.project-showcase h1,.project-showcase h2,.project-showcase h3,.project-showcase p { margin:0; overflow-wrap:anywhere; }
.sc-hero-grid > *, .sc-context > *, .sc-tech-grid > *, .sc-faq-grid > *, .sc-documentation > *, .sc-product-area > * { min-width:0; }
.project-showcase h2 { font-size:clamp(28px,3.1vw,43px); line-height:1.15; letter-spacing:-.045em; font-weight:650; text-wrap:balance; }
.project-showcase h3 { font-size:19px; letter-spacing:-.02em; line-height:1.3; font-weight:650; }
.project-showcase p { color:var(--sc-muted); line-height:1.75; font-size:15px; }
.project-showcase a:focus-visible,.project-showcase button:focus-visible,.project-showcase summary:focus-visible { outline:3px solid var(--sc-blue); outline-offset:5px; }
.project-showcase section[id] { scroll-margin-top:110px; }
.sc-hero { background:radial-gradient(ellipse at 87% 36%,#e8f1fd,transparent 65%),linear-gradient(180deg,#fbfcff,#fff); padding-top:22px; }
.sc-hero .crumbs { font-size:12px; }
.sc-hero-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:50px; align-items:center; padding-block:55px 75px; }
.sc-kicker { display:inline-flex; align-items:center; gap:12px; text-transform:uppercase; letter-spacing:.13em; font-weight:650; font-size:10px; color:var(--sc-muted); margin-bottom:22px; line-height:1.5; }
.sc-kicker::before { content:""; width:23px; height:2px; flex-shrink:0; background:var(--sc-blue); }
.sc-hero-copy { container-type:inline-size; --sc-title-max:66px; --sc-title-preferred:clamp(42px,4.9vw,66px); }
/* Size domain names against their own column, including long names on tablets. */
.sc-hero h1 { font-size:clamp(20px,calc(100cqi / var(--sc-title-units, 11)),var(--sc-title-max)); white-space:nowrap; overflow-wrap:normal; word-break:normal; font-weight:750; line-height:1.05; letter-spacing:-.06em; margin-bottom:19px; }
.sc-hero h2 { font-size:clamp(24px,2.6vw,34px); margin-bottom:21px; color:#4b5868; font-weight:500; }
.sc-hero-copy > p { max-width:45ch; }
.sc-progress { margin-top:28px; max-width:320px; }
.sc-progress > div { display:flex; justify-content:space-between; font-size:12px; margin-bottom:9px; }
.sc-progress span { display:flex; gap:7px; align-items:center; color:var(--sc-muted); }
.sc-progress i { width:6px; height:6px; border-radius:50%; background:var(--sc-blue); }
.sc-progress strong { color:var(--sc-blue); }
.sc-progress progress { appearance:none; display:block; height:3px; width:100%; border:none; background:#e4eaf2; border-radius:6px; }
.sc-progress progress::-webkit-progress-bar { background:#e4eaf2; border-radius:6px; }
.sc-progress progress::-webkit-progress-value { background:var(--sc-blue); border-radius:6px; }
.sc-progress progress::-moz-progress-bar { background:var(--sc-blue); border-radius:6px; }
.sc-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.sc-button { display:inline-flex; gap:20px; align-items:center; justify-content:center; min-height:48px; border-radius:9px; padding:12px 20px; font-size:13px; font-weight:650; background:white; border:1px solid var(--sc-line); transition:background .2s,transform .2s; }
.sc-button:hover { background:#f0f5fb; transform:translateY(-2px); }
.sc-primary { background:#216fc1; color:white; border-color:#216fc1; box-shadow:0 5px 14px #216fc120; }
.sc-primary:hover { background:#195ca3; }
.sc-hero-note { display:block; font-size:11px; color:var(--sc-muted); margin-top:20px; }
.sc-stage { position:relative; padding:30px 28px 55px 0; min-width:0; }
.sc-stage-orbit { position:absolute; width:90%; aspect-ratio:1; background:linear-gradient(135deg,#ddeafb50,#e0ebf180); border:1px solid #dbe7f6; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); }
.sc-browser { position:relative; overflow:hidden; border:1px solid #dce4ee; border-radius:13px; background:#fff; box-shadow:0 24px 70px -22px #193b6f40,0 4px 10px #193b6f12; transform:rotate(-2deg); }
.sc-browser-bar { display:flex; gap:18px; justify-content:space-between; padding:12px; font-size:9px; color:#7c8a9c; border-bottom:1px solid var(--sc-line); background:#fbfcfe; }
.sc-browser-bar > span:first-child { letter-spacing:2px; color:#c4cedc; }
.sc-browser > a { display:block; aspect-ratio:16/10; overflow:hidden; }
.sc-browser img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.sc-phone { position:absolute; width:25%; bottom:20px; right:0; padding:5px; background:#17202d; border:1px solid #435064; border-radius:23px; overflow:hidden; box-shadow:0 18px 40px -12px #17202d60; transform:rotate(3deg); }
.sc-phone { aspect-ratio:9/19; }
.sc-phone > a { display:block; height:100%; }
.sc-phone img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:17px; }
.sc-stage-caption { position:relative; display:flex; align-items:center; gap:7px; font-size:9px; margin-top:23px; color:#66788d; }
.sc-dot { height:5px; width:5px; border-radius:50%; background:var(--sc-blue); }
.sc-section-nav { border-block:1px solid var(--sc-line); background:#fff; }
.sc-section-nav .sc-wrap { display:flex; gap:32px; align-items:center; padding-block:17px; flex-wrap:wrap; font-size:12px; font-weight:550; }
.sc-section-nav a:last-child { margin-left:auto; color:#216fc1; }
.sc-section-nav a:hover { color:#216fc1; }
.sc-section { padding-block:clamp(50px,7vw,86px); }
.sc-soft { background:var(--sc-soft); }
.sc-context { display:grid; grid-template-columns:1fr 1fr; gap:35px; align-items:stretch; }
.sc-context article { padding:30px 0; }
.sc-context h2 { font-size:clamp(25px,2.6vw,34px); margin-bottom:20px; }
.sc-context .sc-solution { padding:30px 34px; border:1px solid #e6edf5; background:linear-gradient(140deg,#f6f9fd,#f0f5fb); border-radius:17px; }
.sc-section-head { display:flex; justify-content:space-between; align-items:end; gap:35px; margin-bottom:35px; }
.sc-section-head > p { max-width:38ch; font-size:14px; }
.sc-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.sc-feature { border:1px solid var(--sc-line); background:#fff; border-radius:12px; padding:28px; }
.sc-index { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; color:#216fc1; }
.sc-feature h3 { margin:19px 0 12px; font-size:17px; }
.sc-feature p { font-size:13px; }
.sc-gallery-filters { display:flex; flex-wrap:wrap; gap:8px; padding-block:8px 28px; }
.sc-gallery-filters[hidden] { display:none; }
.sc-gallery-filters button { border:1px solid var(--sc-line); background:#fff; padding:11px 17px; min-height:44px; border-radius:8px; color:var(--sc-muted); font-size:12px; }
.sc-gallery-filters button[aria-pressed=true] { background:var(--sc-ink); color:#fff; border-color:var(--sc-ink); }
[data-gallery-group][hidden] { display:none; }
.sc-gallery-intro { display:flex; align-items:start; gap:22px; margin:20px 0 25px; }
.sc-gallery-intro .sc-index { margin-top:4px; }
.sc-gallery-intro p { margin-top:10px; max-width:75ch; font-size:13px; }
.sc-screen-grid { display:grid; grid-template-columns:minmax(0,2.8fr) minmax(0,1fr); gap:28px; align-items:start; }
.sc-screen { margin:0 0 26px; min-width:0; }
.sc-screen a { display:flex; justify-content:center; align-items:center; min-width:0; min-height:180px; background:#f4f7fb; padding:14px; border:1px solid var(--sc-line); border-radius:13px; transition:border-color .2s; }
.sc-screen a:hover { border-color:#216fc1; }
.sc-screen img { display:block; max-width:100%; width:100%; height:auto; border-radius:6px; }
.sc-screen.is-mobile a { padding:12px; }
.sc-screen.is-mobile img { max-height:550px; width:auto; max-width:100%; object-fit:contain; }
.sc-screen figcaption { font-size:10px; line-height:1.6; color:var(--sc-muted); margin-top:12px; }
.sc-screen figcaption > span { display:block; font-size:11px; font-weight:650; color:var(--sc-ink); margin-bottom:4px; }
.sc-evidence { border-top:1px solid var(--sc-line); margin-top:16px; color:var(--sc-muted); }
.project-showcase summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; align-items:center; font-weight:550; font-size:14px; padding:20px 0; }
.project-showcase summary::-webkit-details-marker { display:none; }
.project-showcase summary > span { color:#216fc1; font-weight:400; font-size:22px; transition:transform .2s; }
.project-showcase details[open] summary > span { transform:rotate(45deg); }
.project-showcase details > p,.project-showcase details > div { padding:0 0 20px; }
.sc-dark { background:#192330; color:white; }
.sc-dark .sc-kicker { color:#a0b0c4; }
.sc-dark p { color:#adbacb; }
.sc-tech-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:80px; }
.sc-tech-grid h2 { margin-bottom:20px; }
.sc-stack { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.sc-stack span { padding:9px 15px; border:1px solid #3b4d62; border-radius:7px; font-size:12px; background:#ffffff04; }
.sc-audience { list-style:none; padding:0; margin:0 0 22px; }
.sc-audience li { display:flex; gap:15px; align-items:center; padding:16px 0; border-bottom:1px solid #ffffff1a; font-size:15px; }
.sc-audience li::before { content:"↗"; color:#6eb3ff; }
.sc-tech-grid .sc-tech-note { font-size:12px; }
.sc-workflow { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding:0; margin:38px 0 0; }
.sc-step { display:inline-flex; width:43px; height:43px; align-items:center; justify-content:center; border-radius:50%; background:#eff5fd; color:#216fc1; font-size:12px; font-weight:700; margin-bottom:18px; }
.sc-workflow h3 { margin-bottom:12px; font-size:17px; }
.sc-workflow p { font-size:13px; }
.sc-faq-grid { display:grid; grid-template-columns:.85fr 1.5fr; gap:70px; }
.sc-faq-grid h2 { margin-bottom:16px; }
.sc-faq details { border-bottom:1px solid var(--sc-line); }
.sc-faq details:first-child { border-top:1px solid var(--sc-line); }
.sc-faq p { font-size:13px; }
.sc-documentation { display:grid; grid-template-columns:1fr 1fr; gap:0 35px; align-items:start; }
.sc-documentation details { border-bottom:1px solid var(--sc-line); }
.sc-documentation p { font-size:13px; margin-bottom:10px; }
.sc-documentation ul { padding-left:20px; color:var(--sc-muted); font-size:13px; line-height:1.7; }
.sc-cta-panel { display:flex; align-items:center; justify-content:space-between; gap:35px; background:linear-gradient(115deg,#eff5fd,#f7faff); border:1px solid #deebfa; border-radius:18px; padding:40px; }
.sc-cta-panel h2 { font-size:32px; }
.sc-cta-panel p { margin-top:18px; font-size:13px; }
.sc-cta-panel .sc-actions { margin:0; }
.sc-text-link { color:#216fc1; font-size:12px; white-space:nowrap; }
.sc-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.sc-feature-group + .sc-feature-group { margin-top:48px; }
.sc-feature-group-head { display:flex; gap:19px; align-items:flex-start; margin-bottom:23px; }
.sc-group-number { font-size:34px; line-height:1; letter-spacing:-.05em; color:#b2cae5; font-weight:700; }
.sc-feature-group-head h3 { font-size:23px; margin-bottom:8px; }
.sc-feature-group-head p { font-size:13px; }
.sc-feature-full { display:flex; flex-direction:column; }
.sc-feature-top { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.sc-feature-stage { font-size:9px; font-weight:650; padding:5px 8px; border-radius:5px; background:#eaf3fe; color:#245a92; }
.sc-feature-stage.is-experimental { background:#fff2dc; color:#80550e; }
.sc-feature-stage.is-partial,.sc-feature-stage.is-prepared,.sc-feature-stage.is-planned { background:#eeeafb; color:#625087; }
.sc-feature-stage.is-historical { background:#edf0f3; color:#596675; }
.sc-capabilities { list-style:none; padding:0; margin:18px 0; font-size:12px; line-height:1.65; color:#445466; }
.sc-capabilities li { position:relative; padding-left:17px; margin-bottom:9px; }
.sc-capabilities li::before { content:""; position:absolute; left:0; top:.65em; height:4px; width:4px; border-radius:50%; background:#2886de; }
.sc-feature .sc-scope-note { margin-top:auto; padding-top:15px; border-top:1px solid var(--sc-line); font-size:11px; line-height:1.65; }
.sc-related { display:flex; flex-direction:column; min-width:0; border:1px solid var(--sc-line); border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 5px 18px #193b6f08; transition:transform .2s,box-shadow .2s; }
.sc-related:hover { transform:translateY(-4px); box-shadow:0 12px 28px #193b6f14; }
.sc-related-preview { position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; background:#eef3fa; border-bottom:1px solid var(--sc-line); }
.sc-related-preview img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .3s; }
.sc-related:hover img { transform:scale(1.025); }
.sc-related-open { position:absolute; bottom:12px; right:12px; background:#fff; color:#216fc1; border:1px solid #e2e8ef; border-radius:50%; width:33px; height:33px; display:grid; place-items:center; }
.sc-related-body { display:flex; flex-direction:column; flex:1; padding:22px; width:100%; }
.sc-related-category { color:#66778c; font-size:9px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.sc-related h3 { font-size:20px; margin-bottom:10px; }
.sc-related p { font-size:12px; margin-bottom:20px; }
.sc-related-link { margin-top:auto; display:flex; justify-content:space-between; font-size:12px; font-weight:650; color:#216fc1; }
.sc-related-fallback { display:grid; place-items:center; height:100%; font-size:27px; font-weight:700; color:var(--project-color); }
@media(max-width:1000px) {
 .sc-hero-grid { gap:25px; grid-template-columns:1fr 1fr; }
 .sc-stage { padding-right:15px; }
 .sc-hero-copy { --sc-title-max:46px; --sc-title-preferred:46px; }
 .sc-features { grid-template-columns:1fr 1fr; }
 .sc-tech-grid,.sc-faq-grid { gap:35px; }
 .sc-related-grid { grid-template-columns:1fr; }
}
@media(max-width:720px) {
 .project-showcase { padding-top:0; }
 .sc-hero-grid { grid-template-columns:1fr; padding-block:35px 35px; gap:30px; }
 .sc-hero-copy { --sc-title-max:48px; --sc-title-preferred:clamp(34px,8vw,48px); }
 .sc-hero h2 { font-size:28px; }
 .sc-stage { max-width:580px; padding-bottom:45px; }
 .sc-stage-caption { font-size:8px; }
 .sc-phone { width:23%; border-radius:16px; padding:4px; }
 .sc-phone img { border-radius:11px; }
 .sc-section-nav .sc-wrap { gap:14px 22px; }
 .sc-section-nav a:last-child { margin-left:0; }
 .sc-context,.sc-tech-grid,.sc-faq-grid,.sc-documentation { grid-template-columns:1fr; }
 .sc-context { gap:10px; }
 .sc-context .sc-solution { padding:25px; }
 .sc-section-head { flex-direction:column; align-items:start; gap:20px; }
 .sc-section-head > p { max-width:none; }
 .sc-features { grid-template-columns:1fr; }
 .sc-screen-grid { grid-template-columns:1fr; gap:0; }
 .sc-screen.is-mobile img { max-height:520px; }
 .sc-screen.is-mobile a { background:linear-gradient(140deg,#f4f7fb,#eef3fa); }
 .sc-workflow { grid-template-columns:1fr; gap:28px; }
 .sc-cta-panel { padding:27px; flex-direction:column; align-items:start; }
 .sc-cta-panel h2 { font-size:28px; }
 .sc-related-body { padding:20px; }
}
@media(prefers-reduced-motion:reduce) { .project-showcase *, .project-showcase *::before { transition:none !important; scroll-behavior:auto !important; } }

.sc-resources { margin-top:35px; padding-top:28px; border-top:1px solid var(--sc-line); }
.sc-resources h3 { margin-bottom:12px; }
.sc-resources p { font-size:13px; }

/* Product interfaces: real source previews, explicit pending when unavailable. */
.sc-product-area { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr); gap:40px; align-items:center; padding-block:44px; border-bottom:1px solid #e2e7ef; }
.sc-product-area.is-text-only { grid-template-columns:minmax(0,1fr); }
.sc-product-area h3 { font-size:clamp(23px, 3vw, 34px); line-height:1.2; margin:14px 0; }
.sc-area-media { display:grid; gap:16px; min-width:0; }
.sc-area-preview { margin:0; }
.sc-area-preview img { display:block; width:100%; height:auto; border:1px solid #e2e7ef; border-radius:12px; }
.sc-area-preview.is-mobile { max-width:260px; margin-inline:auto; }
.sc-area-preview figcaption { font-size:10px; line-height:1.6; color:var(--sc-muted); margin-top:10px; }
.sc-area-preview figcaption > span { display:block; font-size:11px; font-weight:650; color:var(--sc-ink); margin-bottom:4px; }
.sc-area-pending { padding:40px; border:1px dashed #bccbda; border-radius:16px; background:#f5f8fc; }
.sc-screen-grid.is-desktop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sc-screen-grid.is-mobile-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:720px) { .sc-product-area { grid-template-columns:minmax(0,1fr); gap:24px; } .sc-screen-grid.is-desktop-grid, .sc-screen-grid.is-mobile-grid { grid-template-columns:minmax(0,1fr); } }

/* Hide only the supplied window chrome; original PNGs remain intact. */
.sc-image-crop { display:block; width:100%; overflow:hidden; border-radius:10px; }
.sc-image-crop > img { display:block; max-width:none; height:auto; border:0; border-radius:0; }
.sc-area-media.is-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
[data-lightbox-id] { cursor:zoom-in; }
.sc-lightbox { width:min(1160px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); border:0; border-radius:16px; padding:20px; background:#fff; color:#242424; box-shadow:0 20px 80px #15365433; }
.sc-lightbox::backdrop { background:#182c47a6; }
.sc-lightbox-open { overflow:hidden; }
.sc-lightbox-toolbar, .sc-lightbox-navigation { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.sc-lightbox-toolbar { margin-bottom:16px; }
.sc-lightbox button { padding:10px 14px; border:1px solid #dce4ee; border-radius:10px; color:#216fc1; background:#f5f8fc; }
.sc-lightbox button:hover { background:#e9f2fc; }
.sc-lightbox button:focus-visible { outline:3px solid #2886de; outline-offset:3px; }
.sc-lightbox-media { max-width:100%; margin-inline:auto; }
.sc-lightbox-media > .sc-image-crop { max-width:min(100%,calc(65dvh * var(--sc-crop-width) / var(--sc-crop-height))); margin-inline:auto; }
.sc-lightbox-media > img { display:block; max-width:100%; max-height:65dvh; width:auto; height:auto; margin:auto; }
.sc-lightbox-navigation { margin-top:16px; }
.sc-lightbox-caption { margin:14px 0 0; font-size:12px; line-height:1.5; color:#596579; }
@media(max-width:720px) { .sc-lightbox { padding:12px; } .sc-area-media.is-gallery { gap:10px; } }

/* Portrait product artwork stays fully visible in the mobile application hero. */
.sc-stage-mobile { padding:20px 0; }
.sc-app-previews { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:20px; max-width:470px; margin:auto; }
.sc-app-previews figure { min-width:0; margin:0; border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 18px 45px -18px #193b6f45; }
.sc-app-previews figure:nth-child(2) { margin-top:55px; }
.sc-app-previews a, .sc-app-previews img { display:block; width:100%; }
.sc-app-previews img { height:auto; }
.sc-stage-mobile .sc-stage-caption { justify-content:center; text-align:center; font-size:11px; }
@media(max-width:600px) { .sc-app-previews { gap:12px; max-width:340px; } .sc-app-previews figure:nth-child(2) { margin-top:30px; } }