.stackhousePreviewGroup{min-width:0;position:relative;width:100%}.stackhouseConnection{margin:22px auto 0;max-width:470px;position:relative;background:var(--paper,#fff);border:1px solid #e4cec9;border-radius:14px;box-shadow:0 12px 38px #57231b0a;color:var(--ink,#171717)}.stackhouseConnection>.connectionTrigger{display:flex;align-items:center;gap:11px;cursor:pointer;padding:15px 18px;list-style:none;font-family:Manrope,Arial,sans-serif;font-size:8px;font-weight:800;letter-spacing:.11em}.stackhouseConnection>.connectionTrigger::-webkit-details-marker{display:none}.connectionIcon{display:grid;place-items:center;width:37px;height:37px;flex:0 0 37px;border-radius:11px;background:#fbeeed;color:#e50914;border:1px solid #f2d9d5}.connectionIcon svg{width:27px;height:27px}.stackhouseConnection .connectionTrigger small{display:block;font-family:'DM Sans',Arial,sans-serif;font-size:9px;color:var(--muted,#776965);font-weight:400;letter-spacing:0;margin-top:4px}.connectionToggle{margin-left:auto;font-size:20px;font-weight:400;letter-spacing:0;color:#e50914}.stackhouseConnection[data-open="true"] .connectionToggle{font-size:0}.stackhouseConnection[data-open="true"] .connectionToggle:after{content:'−';font-size:20px}.stackhouseConnection[data-open="true"]>.connectionTrigger{border-bottom:1px solid #eee1db}.connectionContent{position:relative;padding:21px 25px 23px}.connectionDismiss{position:absolute;right:10px;top:7px;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#8b7770;font-size:21px;line-height:1}.connectionDismiss:hover{background:#faeeea;color:#e50914}.connectionContent h3{font-family:Manrope,Arial,sans-serif!important;font-size:19px;line-height:1.3;letter-spacing:-.04em;font-weight:700;margin:0 20px 10px 0;color:var(--ink,#171717)}.connectionContent p{font-family:'DM Sans',Arial,sans-serif;font-size:11px!important;line-height:1.8!important;margin:0!important;max-width:340px!important;color:var(--muted,#776965)}.connectionAsk{display:inline-flex;align-items:center;gap:25px;font-family:'DM Sans',Arial,sans-serif;font-size:10px;font-weight:700;color:#e50914;border-bottom:1px solid #e5091440;padding-bottom:5px;margin-top:18px}.connectionAsk span{font-size:16px;line-height:1}.stackhouseConnection .connectionTrigger:focus-visible,.stackhouseConnection button:focus-visible,.stackhouseConnection a:focus-visible{outline:2px solid #e50914;outline-offset:3px}
@media(max-width:650px){.stackhousePreviewGroup{width:100%}.stackhousePreviewGroup>.visual{margin-left:auto;margin-right:auto}.stackhouseConnection{margin-top:18px;border-radius:12px;width:100%;max-width:470px}.stackhouseConnection>.connectionTrigger{padding:13px 15px;gap:10px;font-size:7px;letter-spacing:.08em}.stackhouseConnection .connectionTrigger small{font-size:8px;line-height:1.6}.connectionIcon{width:34px;height:34px;flex-basis:34px;border-radius:10px}.connectionIcon svg{width:25px;height:25px}.connectionContent{padding:20px 20px 21px}.connectionContent h3{font-size:18px;line-height:1.35;letter-spacing:-.04em;margin-right:14px}.connectionContent p{font-size:11px!important;line-height:1.8!important}.connectionAsk{font-size:10px;margin-top:15px}.connectionDismiss{right:7px;top:5px}.fullsample .stackhouseConnection{margin-top:20px}}

.samplehero .stackhousePreviewGroup>.sampleart{background:var(--sample-panel);border-radius:24px;padding:35px}@media(max-width:650px){.samplehero .stackhousePreviewGroup>.sampleart{padding:25px}}

/* The expanded panel floats above the page; the trigger keeps its exact size. */
.stackhouseConnection>.connectionTrigger,.stackhouseConnection[data-open="true"]>.connectionTrigger{border-bottom:1px solid transparent}
.stackhouseConnection[data-open="true"]{z-index:1000}
.connectionContent{position:fixed;z-index:1001;box-sizing:border-box;margin:0;padding:24px;background:var(--paper,#fff);border:1px solid #e4cec9;border-radius:14px;box-shadow:0 8px 22px #35211a10,0 24px 64px #35211a20;overflow:auto;overscroll-behavior:contain}
.connectionContent h3{font-size:18px;margin-right:22px}
.connectionContent p{font-size:12px!important;line-height:1.65!important}
.connectionContent .connectionDismiss{min-width:32px;min-height:32px;right:8px;top:8px}
.connectionContent .connectionAsk{font-size:12px;margin-top:16px}
@media(max-width:650px){.connectionContent{padding:20px;border-radius:12px}.connectionContent h3{font-size:17px;line-height:1.3}}

/* Top-layer positioning is unaffected by animated or transformed ancestors. */
.connectionContent[popover]{inset:auto;margin:0;color:var(--ink,#171717)}
.connectionContent::backdrop{background:transparent;pointer-events:none}

/* A fixed-size button owns the panel; opening never changes document flow. */
.stackhouseConnection>.connectionTrigger{box-sizing:border-box;width:100%;text-align:left;border:0;border-bottom:1px solid transparent;border-radius:inherit;background:transparent;color:inherit;appearance:none}
.connectionContent[hidden]{display:none!important}
.connectionContent{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}

/* Keep the icon box identical in both states and the floating panel out of flow. */
.connectionToggle,.stackhouseConnection[data-open="true"] .connectionToggle{display:grid;place-items:center;flex:0 0 22px;width:22px;height:24px;font-size:20px;line-height:24px}
.stackhouseConnection[data-open="true"] .connectionToggle:after{content:none}
.connectionContent{color:var(--ink,#171717);isolation:isolate}
.connectionContent :focus-visible{outline:2px solid #e50914;outline-offset:3px}