/* Compact preview of the actual connected page, framed inside its section. */
.groovy-home .groovy-nfc-preview{width:100%;max-width:550px;min-width:0;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);padding:24px 20px 35px;isolation:isolate}
.groovy-home .groovy-nfc-preview .groovy-connected-card{position:absolute;left:5%;top:28%;width:38%;max-width:185px;transform:rotate(-7deg);z-index:0}
.groovy-home .groovy-nfc-preview .groovy-phone{justify-self:end;position:relative;width:clamp(210px,25vw,250px);max-width:calc(100% - 65px);min-height:0;margin:0 5% 0 0;padding:18px 0 12px;gap:0;border:7px solid #241c17;border-radius:32px;overflow:hidden;transform:rotate(3deg);animation:none;background:#fff1d3;box-shadow:inset 0 0 0 1px #716957,3px 4px 0 #887965,8px 14px 18px #321b1038;z-index:2}
.groovy-home .groovy-nfc-preview .groovy-phone-notch{height:11px;width:42%;left:29%;z-index:3}
.groovy-home .groovy-nfc-preview .demo-real-hero{display:block;width:100%;height:auto;border:0}
.groovy-home .groovy-nfc-preview .demo-real-content{display:flex;flex-direction:column;gap:8px;width:100%;padding:8px 12px 0}
.groovy-home .groovy-nfc-preview .demo-real-question{font:900 16px/1.2 'Fraunces',Georgia,serif;letter-spacing:-.025em;text-align:left;color:#381c0e}
.groovy-home .groovy-nfc-preview .demo-real-compose{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding:10px 9px;border:1px solid #d9b37d;border-radius:14px;background:#fff5dd;box-shadow:0 3px 0 #d8bb8b}
.groovy-home .groovy-nfc-preview .groovy-phone-input{display:block;position:relative;padding:0;min-height:31px;background:transparent;border:0;border-radius:0;box-shadow:none;font:500 13px/1.25 'Barlow Condensed',Arial,sans-serif;color:#8a684f;font-style:italic;text-align:left}
.groovy-home .groovy-nfc-preview .demo-typed{position:static;inset:auto;white-space:normal;font:inherit;color:#381c0e}
.groovy-home .groovy-nfc-preview .groovy-phone-submit{width:auto;max-width:100%;padding:6px 11px;min-height:29px;border:1.5px solid #381c0e;border-radius:25px;background:linear-gradient(100deg,#ffe29a,#ffb931);font:700 12px/1.2 'Barlow Condensed',Arial,sans-serif;box-shadow:0 2px 0 #54331b}
.groovy-home .groovy-nfc-preview .demo-real-limit{font:500 10px/1.2 'Barlow Condensed',Arial,sans-serif;text-align:right;color:#805c42}
.groovy-home .groovy-nfc-preview .demo-feedback{min-height:26px;font:500 11px/1.25 'Barlow Condensed',Arial,sans-serif;text-align:center;color:#73482c}
.groovy-home .groovy-nfc-preview .demo-real-bonus{display:block;border-top:1px solid #d9b583;padding:9px 1px 4px;font:900 13px/1.25 'Fraunces',Georgia,serif;text-align:center;color:#381c0e}
.groovy-home .groovy-nfc-preview .demo-open-page{display:block;margin:8px 0 0;font:700 12px/1.3 'Barlow Condensed',Arial,sans-serif;color:#381c0e;text-decoration:underline;text-underline-offset:3px}
.groovy-home .groovy-nfc-preview .groovy-nfc-waves{display:block;left:65%;top:-44px;width:38px;height:38px;z-index:1;opacity:1;transform:rotate(5deg);background:none;color:#cc7d16;animation:none}
.groovy-home .groovy-nfc-preview .groovy-nfc-waves svg{display:block;width:100%;height:100%}
.groovy-home .groovy-nfc-preview .demo-awaiting .demo-feedback{color:#426b3b;font-weight:700}
@media(max-width:1100px){.groovy-home .groovy-nfc-preview .groovy-nfc-waves{left:30%;top:-38px;width:32px;height:32px}}
@media(max-width:650px){.groovy-home .groovy-nfc-preview{max-width:390px;padding:20px 8px 30px}.groovy-home .groovy-nfc-preview .groovy-phone{width:225px;max-width:calc(100% - 64px);margin-right:2%;transform:rotate(2deg)}.groovy-home .groovy-nfc-preview .groovy-connected-card{left:2%;width:39%;top:30%}.groovy-home .groovy-nfc-preview .demo-real-content{padding:8px 10px 0}.groovy-home .groovy-nfc-preview .demo-real-question{font-size:15px}.groovy-home .groovy-nfc-preview .demo-real-bonus{font-size:12px}}