/* Codee Site live examples: scoped to homepage product showcase */
#codee-site-demo-showcase{width:100%;grid-column:1/-1;margin:28px 0;padding:clamp(15px,3.6vw,32px);border:1px solid #427ca0;border-radius:23px;background:linear-gradient(155deg,#071725,#0e3048);color:#edf8ff!important;box-sizing:border-box}
#codee-site-demo-showcase *{box-sizing:border-box}
#codee-site-demo-showcase h2,#codee-site-demo-showcase h3,#codee-site-demo-showcase h4,#codee-site-demo-showcase strong{color:#fff!important;opacity:1!important;text-shadow:none!important}
#codee-site-demo-showcase p,#codee-site-demo-showcase small{color:#dcebf4!important;opacity:1!important}
#codee-site-demo-showcase .codee-demo-eyebrow{display:block;color:#a3e6ff!important;font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;font-weight:900;margin:0 0 8px}
#codee-site-demo-showcase .codee-site-demo-intro{max-width:850px;padding-bottom:9px}
#codee-site-demo-showcase .codee-site-demo-intro h2{font-size:clamp(1.7rem,3.5vw,2.65rem)!important;line-height:1.12;margin:0 0 13px}
#codee-site-demo-showcase .codee-site-demo-intro p{font-size:clamp(.93rem,1.7vw,1.03rem);line-height:1.65;margin:0}
#codee-site-demo-showcase .codee-demo-category-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:30px 0 14px}
#codee-site-demo-showcase .codee-demo-category-heading h3{font-size:clamp(1.4rem,2.6vw,1.85rem)!important;line-height:1.15;margin:4px 0 8px}
#codee-site-demo-showcase .codee-demo-category-heading p{font-size:.9rem;max-width:760px;line-height:1.55;margin:0}
#codee-site-demo-showcase .codee-demo-advanced-heading{padding-top:22px;border-top:1px solid rgba(125,193,225,.3)}
#codee-site-demo-showcase .codee-example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#codee-site-demo-showcase .codee-example-card{min-width:0;padding:13px;display:flex;flex-direction:column;background:#0c2638;border:1px solid #497a96;border-radius:17px;box-shadow:0 7px 18px #0002;color:#ecf8ff}
#codee-site-demo-showcase .codee-example-cardtop{display:flex;gap:6px;justify-content:space-between;align-items:center;min-height:39px;flex-wrap:wrap}
#codee-site-demo-showcase .codee-example-tag{font-size:.66rem;text-transform:uppercase;letter-spacing:.055em;font-weight:900;color:#b8ecff}
#codee-site-demo-showcase .codee-device-choices{display:inline-flex;padding:3px;gap:3px;border:1px solid #4b7e9f;background:#092036;border-radius:9px}
#codee-site-demo-showcase button{cursor:pointer}
#codee-site-demo-showcase .codee-device-choices button{font:800 .73rem/1.2 system-ui,sans-serif;border:0;border-radius:6px;background:transparent;color:#d7ecfb!important;padding:7px 9px}
#codee-site-demo-showcase .codee-device-choices button[aria-pressed=true]{background:#b5e7ff;color:#073047!important}
#codee-site-demo-showcase .codee-example-display{display:flex;align-items:center;justify-content:center;min-height:347px;padding:13px 5px;margin:9px 0 6px;overflow:hidden;background:radial-gradient(circle at 50% 70%,#1b5368,#071b2b 80%);border:1px solid rgba(132,200,226,.18);border-radius:14px}
#codee-site-demo-showcase .codee-example-device{width:min(195px,82%);padding:7px 6px;background:linear-gradient(140deg,#c1ccd4,#27394b 26%,#101926 74%,#8fa7b2);border:1px solid #6b8494;border-radius:26px;box-shadow:0 12px 30px #0009;position:relative;transition:width .25s ease}
#codee-site-demo-showcase .codee-example-device:before{content:"";position:absolute;top:10px;left:calc(50% - 23px);width:46px;height:7px;border-radius:8px;background:#080e16;z-index:4}
#codee-site-demo-showcase .codee-example-screen{position:relative;width:100%;aspect-ratio:390/655;border-radius:19px;background:#e5e4dd;overflow:hidden}
#codee-site-demo-showcase .codee-example-poster{position:absolute;inset:0;background:#dfebe9}
#codee-site-demo-showcase .codee-example-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#codee-site-demo-showcase .codee-example-poster:after{content:"";position:absolute;inset:15% 0 0;background:linear-gradient(180deg,transparent 20%,rgba(5,15,24,.82))}
#codee-site-demo-showcase .codee-example-poster-caption{position:absolute;left:9px;bottom:13px;right:9px;z-index:2;display:flex;flex-direction:column;gap:4px}
#codee-site-demo-showcase .codee-example-poster-caption span{font-weight:900;font-size:.85rem;color:#bdeeff}
#codee-site-demo-showcase .codee-example-poster-caption strong{font-size:.9rem!important;line-height:1.24}
#codee-site-demo-showcase .codee-example-screen iframe{display:block;position:absolute;top:0;left:0;width:390px;height:700px;border:0;background:#fff;transform-origin:top left;transform:scale(var(--codee-device-scale,.5));pointer-events:none}
#codee-site-demo-showcase .codee-example-screen iframe[hidden]{display:none}
#codee-site-demo-showcase .codee-example-card[data-device=desktop] .codee-example-display{min-height:240px}
#codee-site-demo-showcase .codee-example-card[data-device=desktop] .codee-example-device{width:100%;padding:6px 6px 9px;border-radius:12px}
#codee-site-demo-showcase .codee-example-card[data-device=desktop] .codee-example-device:before{width:4px;height:4px;left:calc(50% - 2px);top:2px}
#codee-site-demo-showcase .codee-example-card[data-device=desktop] .codee-example-screen{aspect-ratio:16/9;border-radius:5px}
#codee-site-demo-showcase .codee-example-card[data-device=desktop] .codee-example-screen iframe{width:1280px;height:720px}
#codee-site-demo-showcase .codee-example-cardinfo{display:flex;flex-direction:column;gap:5px;flex:1;padding:4px 2px}
#codee-site-demo-showcase .codee-example-cardinfo h4{font-size:1.03rem!important;line-height:1.3;margin:0}
#codee-site-demo-showcase .codee-example-cardinfo p{font-size:.84rem;line-height:1.48;margin:0 0 8px;flex:1}
#codee-site-demo-showcase .codee-example-actions{display:flex;flex-wrap:wrap;gap:7px}
#codee-site-demo-showcase .codee-example-actions>*{font:800 .79rem/1.25 system-ui,sans-serif;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:10px 11px;border-radius:8px;min-height:38px;text-decoration:none!important}
#codee-site-demo-showcase .codee-example-actions button{border:1px solid #5d96b8;background:#123f5d;color:#eefaff!important}
#codee-site-demo-showcase .codee-example-actions a{border:1px solid #c2e8fa;background:#beeaff;color:#071d2b!important}
#codee-site-demo-showcase .codee-example-cardinfo small{font-size:.69rem;line-height:1.43;margin-top:8px}
#codee-site-demo-showcase .codee-demo-end{display:flex;gap:17px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 18px;margin:26px 0 0;border:1px solid rgba(151,209,238,.26);border-radius:12px;background:#0a2437}
#codee-site-demo-showcase .codee-demo-end p{margin:0;max-width:630px;font-size:.9rem}
#codee-site-demo-showcase .codee-demo-end a{font-weight:850;color:#b7e9ff!important}
#codee-site-demo-showcase button:focus-visible,#codee-site-demo-showcase a:focus-visible{outline:3px solid #c9f1ff;outline-offset:3px}
@media(max-width:1120px){#codee-site-demo-showcase .codee-example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){#codee-site-demo-showcase .codee-example-grid{grid-template-columns:1fr}#codee-site-demo-showcase .codee-example-card{padding:14px}#codee-site-demo-showcase .codee-example-display{min-height:340px}#codee-site-demo-showcase .codee-example-device{width:min(204px,72%)}#codee-site-demo-showcase .codee-example-card[data-device=desktop] .codee-example-display{min-height:240px}#codee-site-demo-showcase .codee-example-actions>*{flex:1}#codee-site-demo-showcase .codee-demo-end{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){#codee-site-demo-showcase .codee-example-device{transition:none}}