/* A crisp, animated bridge from the club badge into the actual product. */
.app-entry{isolation:isolate;padding:38px 0 52px;background:radial-gradient(ellipse at 84% 48%,#236b7199 0%,#1b475c66 34%,transparent 65%),linear-gradient(155deg,#152634 20%,#122e3b 100%)}
.app-entry:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#dbba70aa 48%,#74bdb5aa 80%,transparent)}
.entry-inner{grid-template-columns:.92fr 1.08fr;gap:48px;padding-top:48px;position:relative;z-index:1}
.entry-copy .eyebrow{display:flex;align-items:center;gap:11px;letter-spacing:2px;color:#c6dbdf;margin-bottom:24px;font-size:9px}
.entry-copy .eyebrow>span{height:6px;width:6px;background:#e7c680;border-radius:50%;box-shadow:0 0 0 5px #e7c68010}
.entry-copy h2{font-family:Gobold,Impact,sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(48px,5.1vw,74px);letter-spacing:-1.4px;line-height:1.19}
.app-section .entry-copy h2 em{display:inline-block;background:linear-gradient(105deg,#fff0bd,#e4bf6d 70%,#d1aa58);background-clip:text;-webkit-background-clip:text;color:transparent}
.entry-copy>p.entry-punchline{font-size:17px;line-height:1.65;color:#c2d5df;margin-top:24px}
.entry-punchline br{display:none}
.entry-tour-link{display:inline-flex;gap:26px;align-items:center;padding:7px 0 10px;margin-top:18px;border-bottom:1px solid #dbba7070;font-size:12px;color:#f9e7bc}
.entry-tour-link>span{font-size:24px;line-height:1;transition:transform .2s}
.entry-tour-link:hover>span{transform:translate(3px,3px)}
.entry-visual{position:relative;grid-template-columns:122px minmax(56px,1fr) 226px;gap:18px;max-width:580px;padding-top:10px}
.entry-visual:before{content:'';position:absolute;width:365px;aspect-ratio:1;border-radius:50%;border:1px solid #dfc17c27;right:-47px;top:-8px;box-shadow:0 0 0 29px #94c4c906,0 0 0 30px #94c4c911;z-index:-1}
.entry-launch{padding-top:22px}
.entry-app-icon{width:105px;height:105px;border-radius:26px;position:relative;background:#080a0b;border:1px solid #bba16c;box-shadow:0 20px 36px #04192366,0 0 0 7px #dbba7010;transition:box-shadow .25s}
.entry-app-icon:after{content:'';position:absolute;inset:-9px;border:1px solid #e9c98280;border-radius:34px;animation:entry-ring 3.6s ease-out infinite;pointer-events:none}
.entry-app-icon img{width:86px;height:86px}
.entry-app-icon:hover{box-shadow:0 20px 36px #04192366,0 0 0 8px #dbba7025}
.entry-launch>span{font-size:12px;margin-top:17px;font-weight:700;white-space:nowrap}
.entry-launch small{font-size:9px;color:#c0d2dc;margin-top:5px}
.entry-connection{align-self:center;margin-bottom:46px;color:#edcf86;min-width:0}
.entry-connection>span{display:block;font-size:8px;font-weight:700;letter-spacing:2px;text-align:center;margin-bottom:0;white-space:nowrap}
.entry-connector{margin:0;display:block;overflow:visible}
.entry-connector circle{animation:entry-signal 3.6s ease-in-out infinite}
.entry-open{position:relative;animation:entry-float 4.8s ease-in-out infinite}
.entry-app-window{height:302px;border:1px solid #f0dba6;border-radius:15px;box-shadow:0 25px 45px #03172466,0 0 0 6px #a7d6d914,0 0 0 7px #d0e5df17}
.entry-app-window>.entry-window-bar{height:27px;background:#13303e;border-bottom:1px solid #d4b87644;gap:4px;padding:0 11px}
.entry-app-window>.entry-window-bar span{width:3px;height:3px;background:#e6d09d}
.entry-app-window>.entry-window-bar small{margin-left:auto;font-size:6px;letter-spacing:1.1px;color:#d3e2e5;font-weight:700}
.entry-open>span{display:flex;align-items:center;justify-content:center;gap:8px;position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);white-space:nowrap;margin:0;padding:9px 17px;background:linear-gradient(110deg,#fff0bc,#dcb968);border:1px solid #fff0bc;color:#142b37;font-size:12px;font-weight:700;border-radius:30px;box-shadow:0 7px 25px #03172444}
.entry-open>span i{width:6px;height:6px;background:#244c43;border-radius:50%}
.entry-visual figcaption{margin-top:24px;text-align:center;font-size:10px;color:#c2d4dc;line-height:1.8}
.entry-visual figcaption span{margin:0 4px 0 0;color:#f2d89b;font-weight:700}
.entry-visual figcaption small{display:block;font-size:8px;color:#96b6c4;margin-top:4px;letter-spacing:.2px}
@keyframes entry-float{0%,100%{transform:translateY(3px)}50%{transform:translateY(-5px)}}
@keyframes entry-ring{0%{opacity:.65;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.24)}}
@keyframes entry-signal{0%,10%{transform:translateX(0);opacity:0}25%{opacity:1}80%{opacity:1}95%,100%{transform:translateX(115px);opacity:0}}
@media(min-width:1500px){.entry-copy h2{font-size:78px}.entry-inner{gap:60px}.entry-visual{grid-template-columns:130px minmax(65px,1fr) 248px}.entry-app-window{height:330px}}
@media(max-width:1050px) and (min-width:761px){.entry-inner{gap:30px;grid-template-columns:.95fr 1.05fr}.entry-copy h2{font-size:55px}.entry-visual{grid-template-columns:94px minmax(35px,1fr) 176px;gap:11px}.entry-app-window{height:250px}.entry-app-icon{width:82px;height:82px;border-radius:21px}.entry-app-icon img{width:69px;height:69px}.entry-app-icon:after{border-radius:29px}.entry-launch>span{font-size:10px}.entry-launch small{font-size:8px}.entry-visual:before{width:290px;right:-36px}.entry-connection>span{font-size:6px;letter-spacing:1px}.entry-copy>p.entry-punchline{font-size:14px}.entry-punchline br{display:block}}
@media(max-width:760px){.app-entry{padding:18px 0 39px;margin-bottom:30px;background:radial-gradient(ellipse at 80% 69%,#236b7188,transparent 62%),linear-gradient(155deg,#152634,#142f3d)}.entry-inner{grid-template-columns:1fr;padding-top:35px;gap:35px}.entry-copy .eyebrow{font-size:8px;letter-spacing:1.8px;margin-bottom:21px}.entry-copy h2{font-size:clamp(45px,11.2vw,69px);line-height:1.19;letter-spacing:-1px}.entry-copy>p.entry-punchline{font-size:14px;max-width:330px;margin-top:20px}.entry-tour-link{margin-top:12px;font-size:11px;padding-bottom:8px}.entry-tour-link>span{font-size:21px}.entry-visual{max-width:420px;grid-template-columns:95px minmax(30px,1fr) 166px;gap:13px;padding:6px 3px 0;margin-top:3px}.entry-app-icon{width:82px;height:82px;border-radius:21px}.entry-app-icon img{width:69px;height:69px}.entry-app-icon:after{border-radius:29px}.entry-launch{padding-top:0}.entry-launch>span{font-size:10px;margin-top:15px}.entry-launch small{font-size:8px}.entry-app-window{height:239px;border-radius:12px}.entry-app-window>.entry-window-bar{height:23px;padding-inline:8px;gap:3px}.entry-app-window>.entry-window-bar small{font-size:4.8px;letter-spacing:.7px}.entry-open>span{font-size:10px;padding:8px 13px;bottom:-15px}.entry-connection{margin-bottom:33px}.entry-connection>span{font-size:6px;letter-spacing:1px}.entry-visual:before{width:278px;right:-24px;top:1px;box-shadow:0 0 0 19px #94c4c906,0 0 0 20px #94c4c911}.entry-visual figcaption{font-size:9px;margin-top:22px}.entry-visual figcaption small{font-size:7px}}
@media(max-width:359px){.entry-visual{grid-template-columns:81px minmax(20px,1fr) 144px;gap:9px}.entry-app-icon{width:70px;height:70px;border-radius:18px}.entry-app-icon img{width:59px;height:59px}.entry-app-icon:after{border-radius:26px}.entry-launch>span{font-size:9px}.entry-launch small{font-size:7px}.entry-app-window{height:216px}.entry-app-window>.entry-window-bar small{font-size:4px;letter-spacing:.4px}.entry-visual:before{width:240px}.entry-copy h2{font-size:44px}}
@media(prefers-reduced-motion:reduce){.entry-open,.entry-app-icon:after,.entry-connector circle{animation:none}.entry-app-icon:after{opacity:.3}.entry-connector circle{opacity:1}.entry-tour-link>span{transition:none}}

/* The app opens into a moving dashboard. The tap label belongs to its icon. */
.entry-app-window{--entry-bar-height:27px}
.entry-app-window>.entry-scroll-viewport{display:block;position:relative;height:calc(100% - var(--entry-bar-height));padding:0;border:0;background:#fffaf4;overflow:hidden}
.entry-scroll-viewport img{width:100%;max-width:none;height:auto;display:block;animation:entry-dashboard-scroll 12s ease-in-out infinite;animation-play-state:paused;will-change:transform}
.entry-motion-active .entry-scroll-viewport img{animation-play-state:running}
.entry-open{animation-play-state:paused}
.entry-motion-active .entry-open{animation-play-state:running}
.entry-launch>.entry-tap-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;margin-top:16px;padding:7px 11px;border:1px solid #f6dfaa;border-radius:30px;background:linear-gradient(110deg,#fff0bc,#dcb968);color:#142b37;font-size:10px;font-weight:700;box-shadow:0 6px 18px #03172433}
.entry-tap-pill i{height:5px;width:5px;background:#244c43;border-radius:50%}
.entry-connection{margin-bottom:18px}
.entry-visual figcaption{margin-top:8px}
@keyframes entry-dashboard-scroll{0%,12%{transform:translateY(0)}46%,64%{transform:translateY(calc(-1 * var(--entry-scroll-distance,0px)))}94%,100%{transform:translateY(0)}}
@media(max-width:1050px) and (min-width:761px){.entry-launch>.entry-tap-pill{font-size:8px;padding:6px 8px;gap:4px}}
@media(max-width:760px){.entry-app-window{--entry-bar-height:23px}.entry-launch>.entry-tap-pill{font-size:8px;padding:6px 8px;gap:4px;margin-top:13px}.entry-connection{margin-bottom:14px}.entry-visual figcaption{margin-top:8px}}
@media(max-width:359px){.entry-launch>.entry-tap-pill{font-size:7px;padding:6px 7px}.entry-tap-pill i{width:4px;height:4px}}
@media(prefers-reduced-motion:reduce){.entry-scroll-viewport img{animation:none;transform:none;will-change:auto}}

/* Three separately outlined tabs, clearly detached from the club masthead. */
.showcase-tabs{gap:9px;padding:12px;background:#0a1d2a;border-top:1px solid #597a8f;border-bottom:1px solid #597a8f}
.showcase-tabs button{min-width:0;border:1px solid #648498;border-radius:6px;background:#122a3a;padding:19px 23px;min-height:91px;overflow:hidden;box-shadow:inset 0 1px 0 #c4dbe608;transition:background .2s,border-color .2s,color .2s}
.showcase-tabs button:last-child{border-right:1px solid #648498}
.showcase-tabs button[aria-selected=true]{border-color:#e6c77e;background:linear-gradient(125deg,#2a4e5c,#1b3647);color:#ffe2a0;box-shadow:inset 0 0 0 1px #e6c77e26}
.showcase-tabs button[aria-selected=true]:last-child{border-right-color:#e6c77e}
.showcase-tabs button:hover{border-color:#a6c4d3;background:#213e50}
.showcase-tabs button[aria-selected=true]:hover{border-color:#f1d693}
.showcase-tabs i{left:1px;right:1px;bottom:1px;border-radius:0 0 5px 5px;overflow:hidden;height:3px}
@media(max-width:900px){.showcase-tabs button{padding:17px 16px}}
@media(max-width:640px){.showcase-tabs{gap:6px;padding:9px}.showcase-tabs button{padding:11px 8px 14px;min-height:76px;border-radius:5px}.showcase-tabs button>div{font-size:10px;line-height:1.45}.showcase-tabs button>span{font-size:7px}.showcase-tabs i{border-radius:0 0 4px 4px}}

/* A short drag demonstration uses before/after captures of the working builder. */
.curation-drag-demo{position:absolute;inset:0;z-index:2;pointer-events:none}
.curation-drag-demo[hidden]{display:none}
.curation-empty{position:absolute;inset:0;opacity:1}
.curation-drag-demo.is-dropped .curation-empty{opacity:0}
.curation-drag-card{position:absolute;left:calc(4.2% + 31% * var(--drag-progress,0));top:calc(53.7% - 24% * var(--drag-progress,0));width:17.4%;padding:12px 9px;border:2px solid #d7b767;border-radius:10px;display:flex;gap:9px;background:#fffdf6;color:#242424;box-shadow:0 12px 35px #152c3944;opacity:0;font-family:Arial,sans-serif}
.is-dragging .curation-drag-card{opacity:1}
.curation-drag-card>span{color:#896c31}.curation-drag-card strong{font-size:clamp(8px,1vw,13px);line-height:1.4;display:block}.curation-drag-card small{display:block;font-size:clamp(6px,.7vw,10px);margin-top:7px;color:#58675e}.curation-drag-card svg{position:absolute;bottom:-17px;right:-15px;width:26px;height:26px;fill:#203b49;stroke:#fff;stroke-width:1.3}
.curation-drag-caption{position:absolute;right:3%;top:3%;border:1px solid #e5c57c;border-radius:30px;padding:9px 14px;background:#142d3ef2;color:#ffe4a4;font-size:11px;box-shadow:0 5px 20px #0002}
.is-dropped .curation-drag-caption{background:#dfc17b;color:#142d3e}
.showcase-beats{gap:12px;flex-wrap:wrap}.showcase-beats button{min-height:33px}.showcase-beats small{font-size:7px;margin-left:4px}
@media(max-width:640px){.curation-drag-card{left:9%;top:calc(56% + 24% * var(--drag-progress,0));width:80%;padding:10px 13px}.curation-drag-card strong{font-size:11px}.curation-drag-card small{font-size:9px;margin-top:4px}.curation-drag-caption{top:12%;right:5%;font-size:8px;padding:7px 10px}.showcase-beats{gap:7px;padding:9px 12px}.showcase-beats button{font-size:8px}.showcase-beats small{display:none}}

/* The example fills three activities in the order of the reviewed past plan. */
.curation-drag-card{left:calc(var(--drag-x-start) + (var(--drag-x-end) - var(--drag-x-start)) * var(--drag-progress,0));top:calc(var(--drag-y-start) + (var(--drag-y-end) - var(--drag-y-start)) * var(--drag-progress,0));width:16.5%;}
.curation-drag-caption{top:.6%;right:1%;padding:5px 10px;font-size:10px;box-shadow:none}
@media(max-width:640px){.curation-drag-card{width:28%;padding:7px 6px;gap:4px}.curation-drag-card strong{font-size:9px}.curation-drag-card small{font-size:7px}.curation-drag-card svg{width:20px;height:20px}.curation-drag-caption{top:auto;bottom:2%;right:4%;font-size:8px;padding:6px 9px}}

/* The caption and footer bar are removed; playback stays in the masthead. */
.showcase-top-controls{display:flex;align-items:center;justify-content:flex-end;gap:18px;margin-top:9px}
.showcase-top-controls button{background:transparent;border:0;padding:4px 0;color:#d9bc75;font-size:10px;min-height:28px}
.curation-live-demo{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;pointer-events:none;background:#fbf8f4}
.curation-live-demo[hidden]{display:none}
@media(max-width:640px){.showcase-top-controls{justify-content:flex-start;margin-top:7px;gap:16px}.showcase-top-controls button{font-size:9px}}

/* Tighten the mobile transition into the club app introduction. */
@media(max-width:760px){
 body[data-preview-page=home] .app-entry{padding-top:12px}
 body[data-preview-page=home] .app-entry>.entry-inner{padding-top:12px}
}