/* The original showcase canvas, with text links in place of the copy. */
* { box-sizing: border-box; }
html, body {
    margin: 0;
    min-height: 100%;
    background: #e8e9e7;
    color: #202124;
    font-family: Inter, Arial, sans-serif;
}
a { color: inherit; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 3px solid #8366bc; outline-offset: 6px; }
.presentation { min-height: 100dvh; }

/* Keep the original showcase's width, grid, gutters and phone placement. */
.showcase-layout {
    min-height: 100dvh;
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: center;
    padding: 70px 80px 35px;
}

/* This replaces the old copy block; it is not a separate sidebar. */
.showcase-links {
    max-width: 470px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
.view-link {
    max-width: 100%;
    font-size: 21px;
    line-height: 1.5;
    text-decoration: none;
    padding-bottom: 6px;
    border-bottom: 1px solid transparent;
    overflow-wrap: anywhere;
}
.view-link.active { border-bottom-color: #1e211e; }
.view-link:hover { color: #725292; }
.view-area { min-width: 0; }
.view-panel { display: none; }
.view-panel.active { display: block; }
.view-panel[hidden] { display: none; }

/* Original phone sizing and finish, without resizing the app inside it. */
.phone-column {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}
.phone-frame {
    width: min(400px, 100%);
    height: min(820px, calc(100dvh - 145px));
    min-height: 540px;
    padding: 7px;
    background: #fafaf7;
    border: 1px solid #a3a8a1;
    border-radius: 42px;
    box-shadow: 0 24px 60px #20282015, 0 0 0 1px #ffffffa0 inset;
    overflow: hidden;
}
.phone-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 35px;
    background: #eef0f2;
}
.phone-caption {
    font-size: 10px;
    letter-spacing: 1.8px;
    color: #777e72;
    text-align: center;
}

@media (max-width: 850px) {
    .showcase-layout { padding: 95px 35px 35px; gap: 35px; }
    .phone-frame { min-height: 560px; }
}
@media (max-width: 650px) {
    .showcase-layout {
        grid-template-columns: minmax(0, 1fr);
        padding: 95px 22px 35px;
        gap: 28px;
    }
    .showcase-links { width: 100%; max-width: 440px; margin: auto; gap: 16px; }
    .phone-frame {
        height: 780px;
        max-height: 90dvh;
        min-height: 540px;
        width: min(400px, 100%);
    }
}


/* 2026 editorial splash: full-bleed photo over simulated logged-in app, no white modal card. */
.phone-frame { position: relative; }
.splash-layer {
 position:absolute; z-index:10; inset:7px; border-radius:35px; overflow:hidden;
 display:flex; align-items:stretch; justify-content:stretch; isolation:isolate;
}
.splash-layer[hidden] {display:none;}
.splash-backdrop {position:absolute; inset:0; background:rgba(0,0,0,.35); cursor:pointer;}
.splash-creative {position:relative; z-index:1; width:100%; height:100%; overflow:hidden;}
.splash-image {display:block; width:100%; height:100%; object-fit:cover; object-position:center center; user-select:none;}
/* The accepted creative includes a white close glyph; hit area aligned to it. */
.splash-close {position:absolute; top:5%; right:4.5%; width:15%; height:9%; border:0; background:transparent; cursor:pointer; border-radius:100%;}
.splash-close:hover {background:rgba(255,255,255,.10);}
.splash-close:focus-visible {outline:3px solid white;outline-offset:2px;}
@media(prefers-reduced-motion:no-preference){.splash-creative{animation:splash-appear .25s ease-out both;}@keyframes splash-appear{from{opacity:.2}to{opacity:1}}}

/* Each splash has its own creative treatment; both overlay the signed-in app. */
.splash-original { align-items: center; justify-content: center; }
.splash-original .splash-backdrop { background:rgba(16,17,20,.50); backdrop-filter:blur(2px); }
.splash-original .splash-creative {
 width:100%; height:auto; max-height:100%; aspect-ratio:1122/1402;
 overflow:visible; pointer-events:none;
}
.splash-original .splash-image { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 14px rgba(22,16,26,.15)); }
.splash-original .splash-close { pointer-events:auto; top:7.5%; right:5%; width:15.5%; height:auto; aspect-ratio:1; }
.splash-premium .splash-creative { width:100%; height:100%; }

/* v1.6.0: Show the entire premium artwork without cropping its CTA or header.
   The image is centered at its native portrait ratio inside the phone viewport. */
.splash-premium { background:#10120d; }
.splash-premium .splash-creative {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:#10120d; overflow:hidden;
}
.splash-premium .splash-image {
  width:100%; height:100%; object-fit:contain; object-position:center;
}
/* Independent close control rather than relying on the image's glyph positioning. */
.splash-premium .splash-close {
  position:absolute; z-index:2; top:10px; right:10px;
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; padding:0;
  border:1px solid rgba(255,255,255,.5); border-radius:50%;
  background:rgba(12,14,13,.65); color:#fff;
  font:400 35px/1 Arial,sans-serif; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.splash-premium .splash-close:hover { background:rgba(12,14,13,.9); }

/* v1.7.0 repair: responsive full-screen in-app modal. The app iframe never gets hidden. */
.phone-frame { position:relative; }
.splash-layer { position:absolute; inset:7px; border-radius:35px; z-index:20; overflow:hidden; }
.splash-premium { background:transparent; }
.splash-premium .splash-backdrop { background:rgba(0,0,0,.55); }
.splash-premium .splash-creative {
  position:absolute; inset:0; z-index:1; height:100%; width:100%;
  background:#171610; overflow:hidden; display:block;
}
.splash-premium .splash-image { width:100%;height:100%;object-fit:fill;display:block; }
/* Close matches the circular internal app-page close controls, but has contrast on imagery. */
.splash-premium .splash-close {
  position:absolute; top:15px; right:15px; width:42px; height:42px;
  z-index:5; border:1px solid rgba(255,255,255,.8); border-radius:50%;
  background:rgba(24,25,25,.72); color:white; font:400 30px/1 Arial,sans-serif;
  display:grid; place-items:center; padding:0; box-shadow:0 2px 12px #0006;
  cursor:pointer; pointer-events:auto;
}
.splash-premium .splash-close:hover { background:#1c1c1c; }

/* Venue view links share the former copy area; no extra left sidebar. */
.venue-links-label{font-size:10px;letter-spacing:2.1px;color:#788078;margin-top:12px;margin-bottom:-8px}
.showcase-links{gap:13px}
.view-link.venue-link{font-size:18px;line-height:1.4;padding-bottom:4px}
@media(max-height:740px) and (min-width:651px){.showcase-layout{padding-top:24px;padding-bottom:24px}.showcase-links{gap:7px}.view-link{font-size:18px}.view-link.venue-link{font-size:16px}}

/* v1.9: Keep all five venue links accessible on shorter desktop screens. */
.showcase-links { max-height:calc(100dvh - 70px); overflow-y:auto; overscroll-behavior:contain; padding:6px 16px 8px 0; scrollbar-width:thin; }
.presenter-version { color:#89908b; font-size:10px; letter-spacing:.09em; margin-top:8px; }
@media(max-width:650px){ .showcase-links {max-height:none;overflow:visible;} }

/* 2.4.1 aspect/navigation correction: retain the two-column placement; scale the complete phone canvas. */
.showcase-layout{padding-top:36px;padding-bottom:30px}
.phone-frame{box-sizing:border-box;width:min(411px,calc(47.24dvh - 52.91px),100%);height:auto;min-height:0;aspect-ratio:411/870;padding:8px;border:1px solid #8d9b95;border-radius:47px;background:linear-gradient(115deg,#adb7ae,#56625c 18%,#c3c8c0 49%,#67736b 85%,#b7c1b8);box-shadow:0 22px 55px #243d291a,0 0 0 1px #ffffffb0 inset,0 0 0 2px #9da89b66}
.phone-frame iframe{width:100%;height:100%;border-radius:39px;background:#062e35;box-shadow:0 0 0 2px #071511}
.phone-column{gap:18px}.view-link:visited{color:inherit}.view-link.active{color:#202124}
@media(max-width:650px){.showcase-layout{padding:25px 22px 30px}.phone-frame{width:min(411px,100%);height:auto;max-height:none;min-height:0}.showcase-links{gap:10px}.phone-caption{font-size:8px}}

/* iPhone 14 Pro: 393 x 852 CSS-pixel app viewport inside an 8px + 1px bezel. */

/* v2.4.3 — no visible desktop scrollbars; navigation remains scrollable. */
html,body,.showcase-links,.showcase-layout{
  scrollbar-width:none!important;-ms-overflow-style:none!important;
}
html::-webkit-scrollbar,body::-webkit-scrollbar,
.showcase-links::-webkit-scrollbar,.showcase-layout::-webkit-scrollbar{
  display:none!important;width:0!important;height:0!important;
}
.showcase-links{-webkit-overflow-scrolling:touch;}

/* v2.4.4: Static, original five-venue design deck. No regenerated artwork. */
.showcase-layout.deck-layout{
 max-width:1850px;grid-template-columns:minmax(190px,230px) minmax(0,1fr);
 gap:28px;padding:28px clamp(22px,3vw,58px);align-items:center;
}
.deck-panel{width:100%;min-width:0;}
.deck-image{display:block;width:100%;height:auto;max-height:calc(100dvh - 56px);object-fit:contain;object-position:center;border-radius:7px;box-shadow:0 12px 35px #252e2812;}
@media(max-width:850px){.showcase-layout.deck-layout{grid-template-columns:minmax(170px,210px) minmax(0,1fr);gap:16px;padding:22px;}}
@media(max-width:650px){.showcase-layout.deck-layout{grid-template-columns:minmax(0,1fr);gap:14px}.deck-image{max-height:none;}}

/* v2.4.5: The ORIGINAL user-provided design deck becomes the interactive
   master view. Transparent hit targets are precisely aligned to its phones.
   A second working app iframe grows out of the chosen position. */
.showcase-layout.deck-layout{
 grid-template-columns:minmax(180px,230px) minmax(0,1fr);
 max-width:1880px;gap:24px;padding:24px clamp(18px,2.5vw,48px);
}
.deck-panel{display:none;min-width:0;width:100%;}
.deck-panel.active{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;}
.deck-stage{
 width:min(100%,calc((100dvh - 110px)*1930/1284));
 aspect-ratio:1930/1284;position:relative;flex:none;isolation:isolate;
 overflow:visible;
}
.deck-stage .deck-image{
 display:block;width:100%;height:100%;max-height:none;
 object-fit:fill;object-position:center;border-radius:8px;
 box-shadow:0 15px 45px #1d282015;
}
.deck-hit-area{position:absolute;inset:0;z-index:1;}
.deck-hit{
 position:absolute;left:var(--x);top:21.7%;width:var(--w);height:66.7%;
 padding:0;border:2px solid transparent;border-radius:9% / 4%;
 background:transparent;color:#fff;cursor:zoom-in;outline-offset:3px;
 transition:border-color .18s,box-shadow .18s,background .18s;
 -webkit-tap-highlight-color:transparent;
}
.deck-hit:focus-visible,.deck-hit:hover{
 border-color:#fff9;box-shadow:0 0 0 3px #17232966,0 14px 32px #04182230;
 background:linear-gradient(180deg,#0000 75%,#071e3033 100%);
}
.deck-hit>span{
 position:absolute;bottom:4.5%;left:50%;transform:translateX(-50%) translateY(9px);
 white-space:nowrap;border-radius:24px;padding:9px 12px;
 background:#152f39ed;color:#fff;font:600 clamp(9px,.72vw,12px)/1.2 Arial,sans-serif;
 box-shadow:0 8px 19px #0006;opacity:0;pointer-events:none;
 transition:opacity .18s,transform .18s;
}
.deck-hit:hover>span,.deck-hit:focus-visible>span{opacity:1;transform:translateX(-50%) translateY(0)}
.deck-dim{
 position:absolute;inset:0;z-index:2;border-radius:8px;
 background:#e8eae79c;backdrop-filter:blur(2px) saturate(.84);
 cursor:zoom-out;animation:deck-dim-in .2s ease both;
}
.deck-dim[hidden],.deck-live[hidden],.deck-loading[hidden]{display:none!important;}
.deck-live{
 position:absolute;z-index:3;box-sizing:border-box;overflow:visible;
 aspect-ratio:411/870;filter:drop-shadow(0 19px 25px #121d2055);
 transition:left .52s cubic-bezier(.2,.75,.18,1),top .52s cubic-bezier(.2,.75,.18,1),width .52s cubic-bezier(.2,.75,.18,1),height .52s cubic-bezier(.2,.75,.18,1),filter .52s;
}
.deck-live.is-seeding{transition:none;filter:drop-shadow(0 3px 6px #0005)}
.deck-device{
 position:absolute;inset:0;box-sizing:border-box;
 padding:8px;border:1px solid #899b94;border-radius:11.4% / 5.4%;
 background:linear-gradient(115deg,#afb8b1 0%,#576760 18%,#d2d5ca 52%,#65796b 88%,#b9c3b7 100%);
 box-shadow:inset 0 0 0 1px #f2f6f1b0,0 0 0 1px #26342b88,0 12px 35px #1d282820;
}
.deck-device-screen{
 position:relative;overflow:hidden;width:100%;height:100%;border-radius:10.5% / 4.7%;
 background:#081b1c;box-shadow:0 0 0 2px #091c18;
}
.deck-device-screen iframe{display:block;width:100%;height:100%;border:0;background:transparent;}
.deck-loading{
 position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;background:#062e35;
}
.deck-loading span{width:36px;height:36px;border:3px solid #ffffff30;border-top-color:#ffffffeb;border-radius:50%;animation:deck-spin .8s linear infinite}
.deck-return{
 position:absolute;right:-18px;top:-16px;z-index:5;
 display:grid;place-items:center;width:46px;height:46px;
 border-radius:50%;border:1px solid #d5dfda;background:#fff;color:#152d33;
 font:400 32px/1 Arial,sans-serif;cursor:pointer;
 box-shadow:0 8px 22px #17242044;transition:transform .15s,background .15s;
}
.deck-return:hover{background:#ebf2ee;transform:scale(1.05)}
.deck-return:focus-visible{outline:3px solid #6b9dce;outline-offset:4px}
.deck-venue-name{
 position:absolute;left:50%;bottom:-31px;transform:translateX(-50%);
 color:#26383a;background:#ffffffea;border:1px solid #d8dfd9;
 border-radius:15px;padding:4px 12px;white-space:nowrap;
 font:600 12px/1.35 Arial,sans-serif;box-shadow:0 3px 14px #0001;
}
.deck-hint{font:400 12px/1.6 Arial,sans-serif;letter-spacing:.015em;color:#616d67;text-align:center;margin:0;}
@keyframes deck-dim-in{from{opacity:0}to{opacity:1}}
@keyframes deck-spin{to{transform:rotate(360deg)}}
@media(max-width:1000px){.showcase-layout.deck-layout{grid-template-columns:minmax(155px,185px) minmax(0,1fr);gap:16px;padding:18px}}
@media(max-width:650px){
 .showcase-layout.deck-layout{grid-template-columns:minmax(0,1fr);padding:20px 12px;gap:16px;}
 .deck-stage{width:100%}
 .deck-panel.active{gap:11px}
 .deck-hit>span{display:none}
 .deck-hint{font-size:11px;max-width:450px}
 .deck-return{width:39px;height:39px;right:-5px;top:-12px}
}
@media(prefers-reduced-motion:reduce){.deck-live,.deck-hit,.deck-hit>span,.deck-return{transition:none!important}.deck-dim{animation:none!important}}

/* v2.5.0 — shared-element motion and restrained dimensionality. */
.deck-live{
 transform-origin:top left;
 will-change:transform;
 filter:drop-shadow(0 12px 16px rgba(22,37,35,.20));
 transition:transform .56s cubic-bezier(.19,.77,.21,1),filter .56s ease;
}
.deck-live.is-seeding{transition:none!important;filter:drop-shadow(0 2px 4px rgba(17,30,25,.10))}
.deck-live.is-returning{filter:drop-shadow(0 2px 4px rgba(17,30,25,.10));pointer-events:none}
.deck-device{
 box-shadow:inset 0 0 0 1px #f2f6f1b0,0 0 0 1px #26342b77,0 5px 15px rgba(23,41,32,.10);
}
.deck-dim{background:rgba(234,237,231,.24);backdrop-filter:blur(.65px) saturate(.96);transition:opacity .4s ease;animation:none}
.deck-dim.is-fading{opacity:0;pointer-events:none}
.deck-return{box-shadow:0 5px 14px rgba(22,36,33,.16)}
@media(prefers-reduced-motion:reduce){.deck-live{transition:none!important}.deck-dim{transition:none!important}}

/* v2.5.1: one permanently anchored navigation rail for ALL presentation
   modes. Only the right display changes between the phone and Design Deck.
   The original v2.5.0 deck-layout overrides caused a 200+ px menu jump. */
@media (min-width:651px) {
  .showcase-layout,
  .showcase-layout.deck-layout {
    box-sizing:border-box;
    width:100%;
    max-width:1880px;
    min-height:100dvh;
    margin:0 auto;
    display:grid;
    grid-template-columns:clamp(205px,16vw,245px) minmax(0,1fr);
    gap:clamp(20px,2.6vw,44px);
    padding:28px clamp(28px,3vw,56px);
    align-items:center;
  }
  .showcase-links,
  .showcase-layout.deck-layout .showcase-links {
    box-sizing:border-box;
    align-self:center;
    justify-self:start;
    width:100%;
    max-width:245px;
    max-height:calc(100dvh - 56px);
    overflow-y:auto;
    overflow-x:hidden;
    margin:0;
    padding:6px 6px 7px 0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:clamp(7px,.95dvh,12px);
  }
  .view-link,
  .view-link.venue-link {
    font-size:clamp(15px,1.06vw,19px);
    line-height:1.24;
    padding-bottom:3px;
  }
  .venue-links-label{margin-top:12px;margin-bottom:0;}
  .view-area{min-width:0;width:100%;}
}
@media (max-width:650px){
 .showcase-layout,
 .showcase-layout.deck-layout{
    display:grid;grid-template-columns:minmax(0,1fr);
    width:100%;max-width:100%;margin:0;
    padding:20px 15px 30px;gap:20px;align-items:start;
 }
 .showcase-links,.showcase-layout.deck-layout .showcase-links{
    margin:0 auto;width:100%;max-width:440px;gap:9px;
 }
 .view-link,.view-link.venue-link{font-size:17px;line-height:1.3;padding-bottom:3px;}
}


/* v2.5.2 — Hooks message deliberately overlaps the OUTSIDE edge of the phone. */
.phone-column{position:relative;isolation:isolate}
.hooks-message{position:absolute;top:20%;left:calc(50% + min(190px,19vw));width:min(288px,31vw);z-index:10;
 color:#1e332c;background:#f5fbf7;border:1px solid #d7e8da;border-radius:18px;overflow:visible;
 box-shadow:0 18px 40px rgba(9,40,31,.16),0 3px 12px rgba(9,40,31,.06);
 animation:hooksPop .42s cubic-bezier(.17,.72,.18,1) both}
.hooks-message[hidden]{display:none!important}
.hooks-message-header{padding:12px;display:flex;align-items:center;gap:9px;border-bottom:1px solid #e0eae4}
.hooks-whatsapp-mark{width:31px;height:31px;border-radius:50%;background:#20ba73;display:grid;place-items:center;color:#fff;font-size:24px;font-weight:700}
.hooks-message-header strong{display:block;font:700 13px/1.3 Arial,sans-serif}
.hooks-message-header small{display:block;color:#6b8277;font:10px/1.4 Arial,sans-serif}
.hooks-time{font:10px Arial,sans-serif;margin-left:auto;color:#809186}
.hooks-bubble{background:#e4f6e9;border-radius:13px;margin:12px;padding:13px;box-shadow:0 2px 3px #0000000c}
.hooks-sender{display:block;font:700 9px/1.5 Arial,sans-serif;letter-spacing:1px;color:#487965}
.hooks-bubble strong{display:block;font:700 15px/1.35 Arial,sans-serif;margin-top:5px}
.hooks-bubble p{font:12px/1.55 Arial,sans-serif;margin:8px 0 11px;color:#3b5a4c}
.hooks-bubble button{border:0;background:#147957;color:#fff;width:100%;border-radius:9px;padding:11px 12px;display:flex;justify-content:space-between;font:700 12px Arial,sans-serif;cursor:pointer}
.hooks-bubble button:hover{background:#0d6348}
.hooks-pointer{position:absolute;right:calc(100% + 10px);top:62%;width:125px;text-align:center;font:700 9px Arial,sans-serif;letter-spacing:.8px;color:#426959}
.hooks-pointer span{display:block;width:100%;height:2px;background:#60af84;position:relative;margin-bottom:9px;transform:rotate(12deg)}
.hooks-pointer span:before{content:'‹';position:absolute;left:-2px;top:-11px;font-size:25px;color:#60af84}
.hooks-disclaimer{font:10px/1.45 Arial,sans-serif;color:#78867e;margin:0 14px 12px}
@keyframes hooksPop{from{opacity:0;transform:translate3d(-16px,8px,0) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:1000px){.hooks-message{left:auto;right:-12px;top:19%;width:min(248px,43vw)}.hooks-pointer{display:none}}
@media(max-width:650px){.hooks-message{right:4px;top:16%;width:min(236px,67vw)}.hooks-message-header{padding:9px}}
@media(prefers-reduced-motion:reduce){.hooks-message{animation:none}}



/* v2.5.5: Presenter deck return X matches the app's bold close controls. */
.deck-return{font-size:0!important;isolation:isolate;}
.deck-return>span{display:none!important}
.deck-return::before,.deck-return::after{
 content:"";position:absolute;left:50%;top:50%;width:22px;height:3.5px;
 background:currentColor;border-radius:5px;pointer-events:none;
 transform:translate(-50%,-50%) rotate(45deg);
}
.deck-return::after{transform:translate(-50%,-50%) rotate(-45deg)}
.deck-return:focus-visible{outline:2px solid #315d75;outline-offset:3px;}