/* Shared connection guides and the home compatibility strip. */
.connections-inner { width: min(1140px, calc(100% - 48px)); margin-inline: auto; }
.works-with-strip { padding: 48px 0 54px; background: var(--surface); border-bottom: 1px solid var(--line); }
.works-with-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
.works-with-heading h2 { margin:0; font-size:clamp(1.3rem,3vw,1.8rem); letter-spacing:.04em; text-transform:uppercase; }
.works-with-heading a,.connections-text-link { display:inline-flex; gap:10px; align-items:center; color:var(--text); font-size:.9rem; text-decoration:none; font-weight:600; }
.works-with-strip svg,.connection-card-link svg,.connections-main .site-button svg,.connections-text-link svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; flex:none; }
.works-with-logos { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.works-with-logos > a { min-width:0; display:flex; align-items:center; gap:15px; padding:20px; border:1px solid var(--line); background:var(--panel); border-radius:18px; color:var(--text); text-decoration:none; transition:transform .15s,border-color .15s; }
.works-with-logos > a > svg { margin-left:auto; width:18px; }
.works-with-logos > a:hover,.connection-card:hover { transform:translateY(-3px); border-color:var(--accent); }
.works-with-logos a:focus-visible,.connection-card:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.connection-logo { display:inline-flex; width:64px; height:64px; flex:none; align-items:center; justify-content:center; border-radius:16px; background:#fff; }
.connection-logo img { width:75%; height:75%; object-fit:contain; }
.connection-logo-bambu { background:#129659; }
.connection-logo-prusalink { background:#ec6c29; }
.connection-logo-octoprint img { width:88%; height:88%; }
.works-with-logos .connection-logo { width:48px; height:48px; border-radius:12px; }
.home-compatibility { display:grid; grid-template-columns:repeat(6,max-content); justify-content:center; gap:24px; }
.home-compatibility > span { justify-content:center; }
.home-compatibility > span + span::before { display:none; }
.connections-hero { display:grid; grid-template-columns:1.03fr 1fr; gap:46px; align-items:center; padding-block:46px 80px; }
.connections-kicker { display:inline-block; margin-bottom:20px; color:var(--muted); font-size:.76rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; }
.connections-back::before { content:'←'; margin-right:12px; }
.connections-hero h1 { margin:18px 0 26px; font-size:clamp(2.35rem,4.8vw,4.1rem); line-height:1.12; letter-spacing:-.045em; font-weight:400; }
.connections-hero h1 strong { font-weight:600; }
.connections-hero-copy > p { max-width:590px; margin:0 0 30px; font-size:1.02rem; line-height:1.85; color:var(--muted); }
.connections-brand-heading { display:flex; align-items:center; gap:14px; font-size:1.1rem; font-weight:600; }
.connections-brand-heading .connection-logo { width:44px; height:44px; border-radius:11px; }
.connections-hero-art { position:relative; margin:0; isolation:isolate; padding:28px 0 40px; }
.connections-product { display:block; width:100%; height:auto; filter:drop-shadow(0 28px 18px #0002); }
.connections-flow { padding:35px 0; background:var(--signal-background); text-align:center; }
.connections-flow h2 { margin:0 0 26px; text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; font-weight:600; }
.connections-flow-path { display:flex; max-width:780px; align-items:center; justify-content:center; gap:24px; margin:auto; color:#161818; }
.connections-flow-path > span:not(.connections-flow-line) { white-space:nowrap; }
.connections-flow-brand { display:flex; gap:10px; align-items:center; font-weight:600; }
.connections-flow-brand .connection-logo { width:40px; height:40px; border-radius:10px; }
.connections-flow-line { flex:1; height:1px; background:#8c9995; min-width:20px; position:relative; }
.connections-flow-line::after { content:''; width:7px; height:7px; position:absolute; right:0; top:-3px; border-top:1px solid #8c9995; border-right:1px solid #8c9995; transform:rotate(45deg); }
.connections-flow p { margin:24px 0 0; color:var(--muted); font-size:.8rem; }
:root[data-appearance="dark"] .connections-flow-path { color:var(--text); }
:root[data-appearance="dark"] .connections-flow-path > img { filter:invert(1); }
.connections-section { padding-block:76px; }
.connections-section-heading { max-width:720px; margin-bottom:32px; }
.connections-section-heading h2,.connections-setup h2,.connections-bottom h2,.connections-related h2 { margin:0 0 18px; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.2; letter-spacing:-.03em; font-weight:600; }
.connections-section-heading p,.connections-bottom p,.connections-setup-heading > p { color:var(--muted); line-height:1.9; max-width:760px; }
.connection-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.connection-card { display:flex; flex-direction:column; align-items:flex-start; padding:28px 24px; min-width:0; border:1px solid var(--line); border-radius:22px; background:var(--panel); text-decoration:none; color:var(--text); transition:transform .15s,border-color .15s; }
.connection-card h3 { margin:22px 0 12px; font-size:1.16rem; }
.connection-card p { margin:0 0 26px; font-size:.88rem; color:var(--muted); line-height:1.8; }
.connection-card-link { display:flex; width:100%; gap:12px; align-items:center; margin-top:auto; font-weight:600; font-size:.75rem; }
.connection-card-link svg { margin-left:auto; }
.connections-benefits { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.connections-benefits article { padding:8px 0 10px 24px; border-left:3px solid var(--accent); }
.connections-main h3 { font-size:1.12rem; line-height:1.5; }
.connections-benefits h3 { margin-top:0; }
.connections-benefits p,.connections-steps p,.connections-faq p { line-height:1.85; color:var(--muted); margin-bottom:0; }
.connections-setup { padding:65px 0; background:var(--surface); scroll-margin-top:24px; }
.connections-steps { list-style:none; padding:0; margin:34px 0; display:grid; gap:0; }
.connections-steps li { display:grid; grid-template-columns:52px 1fr; gap:24px; padding:24px 0; border-top:1px solid var(--line); }
.connections-step-number { font-size:1.4rem; color:var(--subtle); padding-top:5px; }
.connections-steps h3 { margin:0 0 8px; }
.connections-steps p { max-width:890px; margin-top:0; }
.connections-faq { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.connections-faq article { padding:26px; background:var(--panel); border:1px solid var(--line); border-radius:20px; }
.connections-faq h3 { margin:0 0 15px; }
.connections-related { margin-top:75px; }
.connections-related .connection-cards { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:30px; }
.connections-bottom { padding-bottom:70px; }
@media (max-width:1000px) {
 .works-with-logos { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .connection-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .connections-hero { gap:24px; }
 .home-compatibility { grid-template-columns:repeat(3,minmax(0,max-content)); justify-content:center; gap:18px 30px; overflow:visible; }
}
@media (max-width:700px) {
 .connections-inner { width:calc(100% - 40px); }
 .connections-hero { grid-template-columns:1fr; padding-block:28px 38px; gap:8px; }
 .connections-hero h1 { font-size:clamp(2.25rem,9vw,3rem); }
 .connections-hero-art { width:min(420px,94%); margin:auto; padding-block:16px; }
 .connections-hero-copy > p { font-size:.96rem; }
 .connections-flow-path { gap:10px; }
 .connections-flow-path > img { width:105px; height:auto; }
 .connections-flow-path > span { font-size:.65rem; }
 .connections-flow-brand { flex-direction:column; gap:5px; }
 .connections-flow-line { min-width:10px; }
 .connections-flow p { font-size:.68rem; }
 .connections-benefits,.connections-faq { grid-template-columns:1fr; gap:25px; }
 .connections-section { padding-block:50px; }
 .connections-related .connection-cards { grid-template-columns:1fr; }
 .works-with-heading { align-items:flex-start; flex-direction:column; gap:12px; }
 .works-with-logos { gap:10px; }
 .works-with-logos > a { flex-direction:column; align-items:flex-start; gap:12px; padding:18px; position:relative; }
 .works-with-logos > a > svg { position:absolute; top:26px; right:14px; }
 .works-with-logos strong { font-size:.85rem; }
 .connection-cards { grid-template-columns:1fr; }
 .connection-card { padding:24px; }
 .connections-steps li { grid-template-columns:30px 1fr; gap:15px; }
 .connections-main .site-actions { align-items:flex-start; }
 .connections-text-link { margin-top:8px; }
 .home-compatibility { grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 10px; font-size:.88rem; padding:24px 20px; }
}
.connection-logo-elegoo { background:#ff003d; }
.works-with-logos { grid-template-columns:repeat(5,minmax(0,1fr)); }
.works-with-logos > a { padding:18px 14px; gap:10px; }
.works-with-logos .connection-logo { width:40px; height:40px; }
.works-with-logos strong { font-size:.85rem; }
#connections .connection-cards { grid-template-columns:repeat(6,minmax(0,1fr)); }
#connections .connection-card { grid-column:span 2; }
#connections .connection-card:nth-child(n+4) { grid-column:span 3; }
.connections-elegoo { margin-bottom:65px; padding:32px; background:var(--panel); border:1px solid var(--line); border-radius:22px; scroll-margin-top:24px; }
.connections-elegoo h2 { font-size:1.35rem; margin:0; }
.connections-elegoo p { color:var(--muted); line-height:1.85; }
@media(max-width:1000px){.works-with-logos{grid-template-columns:repeat(2,minmax(0,1fr))}.works-with-logos > a:last-child{grid-column:span 2;flex-direction:row;justify-content:center}.works-with-logos > a:last-child > svg{margin-left:0;position:static}}
@media(max-width:700px){#connections .connection-cards{grid-template-columns:1fr}#connections .connection-card,#connections .connection-card:nth-child(n+4){grid-column:auto}.connections-elegoo{padding:24px}.connections-elegoo .connections-brand-heading{align-items:flex-start}.connections-elegoo h2{font-size:1.15rem}}
.connections-main .site-button { max-width:100%; white-space:normal; text-align:center; justify-content:center; }
/* Keep connection heroes at the same visual scale as the other product pages. */
.connections-main { border-top:1px solid var(--line); }
.connections-hero { gap:50px; padding-block:30px 38px; min-height:440px; }
.connections-hero h1 { font-size:clamp(2.2rem,3.6vw,3.15rem); line-height:1.12; margin-block:15px 20px; }
.connections-hero .connections-kicker { margin-bottom:12px; }
.connections-hero-copy > p { font-size:.96rem; line-height:1.75; margin-bottom:22px; }
.connections-brand-heading { gap:12px; font-size:.95rem; }
.connections-brand-heading .connection-logo { width:36px; height:36px; border-radius:9px; }
.connections-hero-art { width:100%; padding:12px 0; }
.connections-product { width:min(100%,360px); margin-inline:auto; }
.connections-signal { justify-content:center; }
@media(min-width:1000px) { .connections-hero { grid-template-columns:1.15fr 1fr; } }
@media(max-width:700px) {
 .connections-hero { min-height:0; gap:2px; padding-block:26px 20px; }
 .connections-hero h1 { font-size:2.35rem; }
 .connections-hero-art { width:100%; }
 .connections-product { width:min(76%,290px); }
 .connections-signal { display:flex; flex-wrap:wrap; gap:12px 22px; padding:22px 20px; min-height:90px; font-size:.85rem; }
 .connections-signal > span + span::before { display:none; }
}
.connections-product-stage { position:relative; width:min(100%,360px); margin-inline:auto; }
.connections-product-stage .connections-product { width:100%; margin:0; }
.connections-screen-mark { position:absolute; left:50.5%; top:47.5%; width:29%; height:31%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; }
.connections-screen-mark .connection-logo { width:100%; height:100%; border-radius:0; background:transparent; }
.connections-screen-mark .connection-logo img { width:100%; height:100%; }
.connections-screen-mark-klipper .connection-logo { padding:10%; border-radius:16%; background:#f8f8f8; }
.connections-screen-mark-printdeck { width:43%; height:auto; flex-direction:column; }
.connections-screen-mark-printdeck > img { width:86%; height:auto; }
.connections-hero h1 { font-weight:600; letter-spacing:-.055em; }
.connections-hero { min-height:440px; }
@media(max-width:700px){.connections-product-stage{width:min(76%,290px)}.connections-hero{min-height:0}}

.connections-screen-marks-row { width:100%; margin-top:9%; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6%; }
.connections-screen-marks-row .connection-logo { width:100%; height:auto; aspect-ratio:1; border-radius:18%; background:#fff; }
.connections-screen-marks-row .connection-logo img { width:78%; height:78%; }
.connections-screen-marks-row .connection-logo-bambu { background:#129659; }
.connections-screen-marks-row .connection-logo-prusalink { background:#ec6c29; }
.connections-screen-marks-row .connection-logo-elegoo { background:#ff003d; }
.connections-screen-marks-row .connection-logo-octoprint img { width:90%; height:90%; }