/* The presentation phone mirrors the current BOF page. */
.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:#fff3dc url('/assets/groovy/cream-paper-v2.webp') center/320px;box-shadow:inset 0 0 0 1px #716957,3px 4px 0 #887965,8px 14px 18px #321b1038;z-index:2;text-decoration:none}
.groovy-home .groovy-nfc-preview .groovy-phone-notch{height:11px;width:42%;left:29%;z-index:3}
.groovy-home .groovy-nfc-preview .demo-real-header{display:flex;justify-content:center;width:100%;padding:3px 0 11px}
.groovy-home .groovy-nfc-preview .demo-real-header img{display:block;width:64px;height:auto;mix-blend-mode:multiply}
.groovy-home .groovy-nfc-preview .demo-real-reveal{display:flex;flex-direction:column;align-items:center;gap:10px;width:calc(100% - 16px);margin:0 8px;padding:12px 10px 11px;border:1px solid #cfb58d99;border-radius:17px;background:linear-gradient(120deg,#fffaf0dd,#f6e8cfb8);box-shadow:0 3px 0 #b7996417}
.groovy-home .groovy-nfc-preview .demo-real-edition{font:600 8px/1.4 'Barlow Condensed',Arial,sans-serif;letter-spacing:.16em;color:#896747}
.groovy-home .groovy-nfc-preview .demo-real-card{display:block;position:relative;width:84%;aspect-ratio:2/3;border:1px solid #bda47f;border-radius:12px;transform:rotate(1.4deg);overflow:hidden;box-shadow:3px 7px 9px #69452524}
.groovy-home .groovy-nfc-preview .demo-real-card img{display:block;width:100%;height:100%;object-fit:contain}
.groovy-home .groovy-nfc-preview .demo-real-turn{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;background:#ffcd62;color:#382215;border:1px solid #563821;border-radius:999px;padding:6px 10px;box-shadow:0 2px 0 #563821;font:700 10px/1.2 'Barlow Condensed',Arial,sans-serif}
.groovy-home .groovy-nfc-preview .demo-real-turn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.groovy-home .groovy-nfc-preview .demo-real-caption{font:500 8px/1.4 'Barlow Condensed',Arial,sans-serif;color:#896c4b;text-align:center}
.groovy-home .groovy-nfc-preview .demo-real-content{display:flex;flex-direction:column;gap:7px;width:100%;padding:17px 12px 0}
.groovy-home .groovy-nfc-preview .demo-real-eyebrow{font:600 8px/1.4 'Barlow Condensed',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#896449;text-align:left}
.groovy-home .groovy-nfc-preview .demo-real-question{font:900 15px/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;gap:8px;padding:11px 10px;border:1px solid #cfb58d;border-radius:15px;background:linear-gradient(130deg,#fffaf1ef,#fff5e3cd);box-shadow:0 3px 0 #b7996417}
.groovy-home .groovy-nfc-preview .demo-real-field-label{display:flex;justify-content:space-between;gap:8px;font:600 10px/1.4 'Barlow Condensed',Arial,sans-serif;color:#795735}
.groovy-home .groovy-nfc-preview .demo-real-field-label>span{font-weight:500;color:#896747}
.groovy-home .groovy-nfc-preview .groovy-phone-input{display:block;position:relative;padding:3px 0 10px;min-height:49px;background:transparent;border:0;border-radius:0;box-shadow:none;font:italic 500 12px/1.4 'Barlow Condensed',Arial,sans-serif;color:#9b8062;text-align:left}
.groovy-home .groovy-nfc-preview .groovy-phone-submit{display:block;width:100%;padding:7px 10px;min-height:29px;border:1px solid #cfb996;border-radius:999px;background:#eddfc6;color:#987b59;font:700 12px/1.2 'Barlow Condensed',Arial,sans-serif;box-shadow:none;text-align:center}
.groovy-home .groovy-nfc-preview .demo-real-privacy{display:block;font:500 8px/1.4 'Barlow Condensed',Arial,sans-serif;color:#816446;text-align:center}
.groovy-home .groovy-nfc-preview .demo-open-page{display:block;margin:12px 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%}
@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:15px 10px 0}.groovy-home .groovy-nfc-preview .demo-real-question{font-size:14px}}