#websites{padding-top:28px;padding-bottom:36px}.website-showcase{display:block;margin-top:24px}.website-demo{position:sticky;top:110px;min-height:calc(100svh - 130px);background:#fff;padding:18px 0 24px;border-top:1px solid #e1e3e7;box-shadow:0 -20px 40px #fff;opacity:1!important;transform:none!important}.website-demo:nth-child(1){z-index:1}.website-demo:nth-child(2){z-index:2}.website-demo:nth-child(3){z-index:3}.website-demo:nth-child(4){z-index:4}.website-demo .website-window{width:min(100%,850px);margin:auto;max-height:calc(100svh - 310px);aspect-ratio:4/3;border-radius:10px}.website-demo .website-window img{animation:none!important;transform:none!important}.website-demo .website-meta{max-width:850px;margin:auto;grid-template-columns:1fr auto}.website-demo .creative-button{grid-column:1/-1;justify-self:start;margin-top:10px;min-height:44px;padding:12px 18px;background:#111;color:#fff;border:0;border-radius:7px;font-size:15px;cursor:pointer}.creative-button:focus-visible,.creative-dialog button:focus-visible{outline:3px solid #7565ff;outline-offset:3px}.creative-dialog{width:min(1160px,calc(100vw - 24px));max-height:calc(100svh - 24px);padding:0;border:1px solid #ddd;border-radius:16px;background:#fff;color:#111;overscroll-behavior:contain}.creative-dialog::backdrop{background:#101017bf}.creative-dialog header{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 24px;background:#fff;border-bottom:1px solid #ddd}.creative-dialog h2{font-size:26px;margin:0}.creative-dialog header button{padding:12px 16px;border:1px solid #bbb;border-radius:6px;background:#fff;color:#111;font-size:14px;cursor:pointer}.creative-dialog .ad-note{padding:0 24px;color:#646974;font-size:14px}.creative-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:8px 24px 26px}.creative-grid figure{margin:0;min-width:0}.creative-grid img{display:block;width:100%;height:auto;background:#e8f2f8;border-radius:8px}.creative-grid figcaption{font-size:14px;padding:12px 0;color:#444}.creative-dialog[open]{animation:creativeEnter .3s ease-out}@keyframes creativeEnter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@media(max-width:760px){.website-demo{top:108px;padding-top:14px;min-height:calc(100svh - 112px)}.website-demo .website-window{max-height:calc(100svh - 335px);min-height:150px;aspect-ratio:1/1}.website-demo .website-meta{grid-template-columns:1fr;padding:14px 0}.website-meta h3{margin:2px 0!important}.website-meta p{font-size:16px!important;margin:3px 0}.creative-grid{grid-template-columns:1fr;padding:8px 16px 24px;gap:22px}.creative-dialog header{padding:16px}.creative-dialog h2{font-size:22px}.creative-dialog .ad-note{padding:0 16px}}
@media(max-height:580px),(prefers-reduced-motion:reduce){.website-demo{position:relative;top:auto;min-height:0;margin-bottom:40px}.website-demo .website-window{max-height:none}.creative-dialog[open]{animation:none}}

/* Keep the complete website visible and reserve a separate area for actions. */
.website-demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.45fr);align-items:center;gap:28px;min-height:calc(100svh - 130px)}
.website-demo .website-window{width:100%;height:calc(100svh - 170px);max-height:760px;min-height:220px;aspect-ratio:auto;box-shadow:none;background:#f6f7f9}
.website-demo .website-window img{width:100%;height:100%;object-fit:contain;object-position:center;will-change:auto}
.website-demo .website-meta{width:100%;grid-template-columns:1fr;padding:12px 0}
.website-demo .creative-button{white-space:normal}
@media(max-width:760px){
 .website-demo{display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:10px 0 16px;min-height:calc(100svh - 108px)}
 .website-demo .website-window{height:calc(100svh - 300px);max-height:620px;min-height:180px;flex:none;aspect-ratio:auto}
 .website-demo .website-meta{padding:10px 0;gap:3px}
 .website-meta h3{font-size:22px!important;line-height:1.15!important}
 .website-meta p{font-size:14px!important;line-height:1.3!important}
 .website-demo .creative-button{margin-top:7px;padding:10px 16px}
}
@media(max-height:620px){.website-demo{position:relative;top:auto;min-height:0}.website-demo .website-window{height:65svh;min-height:220px}}

.website-demo{column-gap:28px;row-gap:12px;grid-template-rows:auto 1fr;align-content:start}.website-demo>.creative-button{grid-column:1/-1;justify-self:start;align-self:flex-start;margin:0;flex:none}.website-demo .website-window{height:calc(100svh - 232px)}
@media(max-width:760px){.website-demo{gap:10px}.website-demo>.creative-button{margin:0}.website-demo .website-window{height:calc(100svh - 315px)}.website-demo .website-meta{padding:0 0 10px}}
@media(max-height:620px){.website-demo .website-window{height:65svh}}

/* A single contextual plan action, attached to its explanation. */
.next-page.plans-invite{display:flex;align-items:center;justify-content:space-between;gap:28px;width:min(1120px,calc(100% - 40px));margin:28px auto 48px;padding:32px!important;background:#111!important;color:#fff!important;border-radius:16px}
.plans-invite-copy{max-width:650px}.plans-invite h2{margin:0 0 10px;font-size:clamp(26px,3.5vw,40px);line-height:1.12;letter-spacing:-.035em;color:#fff!important}.plans-invite p{margin:0!important;font-size:17px!important;line-height:1.5;color:#ddd!important;max-width:540px}
.plans-invite .plans-button{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;flex-shrink:0;min-height:54px;margin:0!important;padding:16px 24px;background:#fff!important;color:#111!important;border:2px solid #fff;border-radius:8px;font-size:17px!important;font-weight:700;text-decoration:none;transition:background .2s,box-shadow .2s}
.plans-invite .plans-button span{color:#111!important}.plans-invite .plans-button:hover{background:#eae6ff!important;box-shadow:0 5px 20px #0003}.plans-invite .plans-button:focus-visible{outline:3px solid #b7a9ff;outline-offset:5px}
@media(max-width:760px){.next-page.plans-invite{flex-direction:column;align-items:stretch;gap:20px;padding:24px!important;margin:20px auto 32px}.plans-invite .plans-button{width:100%;box-sizing:border-box}.plans-invite p{font-size:16px!important}}
/* Mobile uses native sticky stacking, including short browser viewports. */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
 #websites .website-demo{position:sticky!important;top:58px!important;min-height:calc(100svh - 58px);margin-bottom:0;box-sizing:border-box;padding:8px 0 12px;gap:8px;background:#fff;box-shadow:0 -12px 30px #2222220a;overflow:visible}
 #websites .website-window{height:calc(100svh - 260px)!important;min-height:100px;max-height:none;flex-shrink:0}
 #websites .website-meta{padding:0;gap:2px}
 #websites .creative-button{margin:0;min-height:44px}
}