*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-tap-highlight-color:transparent}
body{background:#060f1e;color:#fff;overflow-x:hidden}

/* iOS Safari click fix - force all interactive elements to be tappable */
.fc,.gallery-item,.potw-card,.upload-card,.brand-pill,.cs-feat-pill,
.mobile-nav-link,.nav-link,.dot,.demo-step,.gi-hearts,.potw-hearts,
.cs-close,.demo-close,.modal-close,.drop-zone,.upload-btn,.submit-btn,
.btn-main,.btn-ghost,.nav-cta,.mobile-cta,.hamburger{
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(255,224,102,0.2);
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
}

/* iOS click fix */
a,button,.fc,.nav-link,.mobile-nav-link,.gallery-item,.potw-card,.upload-card,.brand-pill,.cs-feat-pill,.dot,.demo-step,.gi-hearts,.potw-hearts{cursor:pointer;-webkit-tap-highlight-color:rgba(255,224,102,0.15);touch-action:manipulation}

/* HERO */
.hero{width:100%;height:100vh;min-height:560px;position:relative;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 2.2s ease-in-out;background-size:cover;background-position:center center}
.slide.active{opacity:1}
.overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0.38) 0%,rgba(0,0,0,0.08) 40%,rgba(0,0,0,0.72) 100%)}

/* NAV */
.nav{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:14px;background:rgba(0,0,0,0.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.logo{display:flex;align-items:center;gap:6px;flex-shrink:0;cursor:pointer;text-decoration:none}
.logo-text{font-size:17px;font-weight:700;color:#fff;letter-spacing:-0.3px;text-shadow:0 2px 10px rgba(0,0,0,0.4);white-space:nowrap}
.logo-text .ai{color:#ffe066}
.nav-links{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;flex-wrap:wrap}
.nav-link{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px;border-radius:10px;cursor:pointer;transition:all 0.2s;border:1px solid transparent;text-decoration:none;background:rgba(255,255,255,0.07);backdrop-filter:blur(8px)}
.nav-link:hover,.nav-link:active{background:rgba(255,255,255,0.17);border-color:rgba(255,255,255,0.2)}
.nav-link .ni{font-size:13px;line-height:1}
.nav-link .nl{font-size:9px;font-weight:500;color:rgba(255,255,255,0.88);letter-spacing:0.02em;white-space:nowrap}
.nav-cta{font-size:12px;font-weight:700;color:#1a2a00;background:#ffe066;border:none;padding:9px 16px;border-radius:9px;cursor:pointer;white-space:nowrap;flex-shrink:0;box-shadow:0 3px 14px rgba(255,224,102,0.35)}

/* HAMBURGER */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:rgba(255,255,255,0.1);border-radius:8px;border:none;flex-shrink:0}
.hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:all 0.3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* MOBILE MENU */
.mobile-menu{display:none;position:fixed;inset:0;z-index:50;background:rgba(4,10,22,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-direction:column;padding:90px 20px 32px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobile-menu.open{display:flex}
.mobile-nav-link{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;cursor:pointer;transition:all 0.2s;text-decoration:none;border:1px solid rgba(255,255,255,0.06);margin-bottom:7px;background:rgba(255,255,255,0.04)}
.mobile-nav-link:active{background:rgba(255,224,102,0.1);border-color:rgba(255,224,102,0.3)}
.mobile-nav-link .mni{font-size:22px;width:34px;text-align:center}
.mobile-nav-link .mtext{flex:1}
.mobile-nav-link .mtext strong{display:block;font-size:14px;font-weight:600;color:#fff;margin-bottom:1px}
.mobile-nav-link .mtext span{font-size:11px;color:rgba(255,255,255,0.42)}
.mobile-nav-link .marrow{font-size:14px;color:rgba(255,255,255,0.25)}
.mobile-cs-badge{display:inline-block;background:rgba(255,224,102,0.15);color:#ffe066;font-size:9px;font-weight:700;padding:2px 6px;border-radius:7px;margin-left:5px;letter-spacing:0.04em}
.mobile-cta{background:#ffe066;color:#1a2a00;font-size:15px;font-weight:700;padding:15px;border-radius:12px;border:none;cursor:pointer;margin-top:10px;width:100%}

/* HERO CONTENT */
.hero-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);text-align:center;z-index:20;width:92%;max-width:640px}
.dest-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.15);color:#fff;font-size:11px;padding:5px 16px;border-radius:24px;border:1px solid rgba(255,255,255,0.3);margin-bottom:18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);letter-spacing:0.04em}
.dest-dot{width:6px;height:6px;border-radius:50%;background:#ffe066;display:inline-block;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.75)}}
.hero-h1{font-size:48px;font-weight:700;color:#fff;line-height:1.05;margin-bottom:14px;text-shadow:0 3px 22px rgba(0,0,0,0.45)}
.hero-h1 em{font-style:normal;color:#ffe066}
.hero-sub{font-size:16px;color:rgba(255,255,255,0.85);line-height:1.7;margin-bottom:28px;text-shadow:0 1px 8px rgba(0,0,0,0.3)}
.hero-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-main{background:#ffe066;color:#1a2a00;font-size:14px;font-weight:700;padding:13px 30px;border-radius:10px;border:none;cursor:pointer;box-shadow:0 4px 22px rgba(255,224,102,0.35)}
.btn-ghost{background:rgba(255,255,255,0.12);color:#fff;font-size:14px;padding:13px 26px;border-radius:10px;border:1px solid rgba(255,255,255,0.35);cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* DOTS - NO PROGRESS BAR */
.dots{position:absolute;bottom:72px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:20}
.dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.32);cursor:pointer;transition:all 0.35s;border:none;padding:0}
.dot.on{background:#ffe066;width:22px;border-radius:4px}

/* STATS */
.stats-bar{position:absolute;bottom:0;left:0;right:0;z-index:20;display:flex;background:rgba(0,0,0,0.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,0.08)}
.stat-item{flex:1;padding:12px 6px;text-align:center;border-right:1px solid rgba(255,255,255,0.07)}
.stat-item:last-child{border-right:none}
/* SCOPED TO THE HOMEPAGE'S OWN STAT MARKUP, WHICH IS WHERE THE LEAK ACTUALLY WAS. These two
   rules are the homepage's, but main.css stays resident in the document after a swap, and
   /registry, /ducks and /hatch all use a .stat-lbl of their own inside .stat rather than
   .stat-item. Unscoped, these reached those surfaces on arrival and moved their labels 2px.
   Home's four labels all sit inside .stat-item, so a direct load matches exactly the same
   four elements it always did and computes exactly the same values. Fixing it here rather
   than on each destination also keeps registry/index.html byte-identical to HEAD, which the
   lock set in workers/blingy-turn requires and which a per-destination fix had violated. */
.stat-item .stat-num{font-size:18px;font-weight:700;color:#ffe066;line-height:normal;margin-bottom:0}
.stat-item .stat-lbl{font-size:9px;color:rgba(255,255,255,0.45);margin-top:2px;letter-spacing:0.02em;font-weight:400}

/* BRANDS */
.brands{padding:18px 20px 14px;background:#070e1c}
.brands-lbl{font-size:10px;color:rgba(255,255,255,0.28);text-align:center;letter-spacing:0.12em;margin-bottom:11px}
.brands-row{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
.brand-pill{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);border-radius:24px;padding:6px 13px;font-size:11px;font-weight:500;color:rgba(255,255,255,0.52);cursor:pointer;transition:all 0.2s}
.brand-pill:active{background:rgba(255,224,102,0.1);border-color:rgba(255,224,102,0.32);color:#ffe066}

/* SECTIONS */
.section{padding:36px 20px;background:#060d18}
.section.alt{background:#070e1c}
.section-label{font-size:11px;font-weight:600;letter-spacing:0.12em;color:#ffe066;margin-bottom:8px}
.section-h2{font-size:22px;font-weight:700;color:#fff;margin-bottom:7px}
.section-sub{font-size:13px;color:rgba(255,255,255,0.42);margin-bottom:22px;line-height:1.6}

/* FEATURES */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px}
.fc{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:13px;padding:16px 13px;cursor:pointer;transition:all 0.2s}
.fc:active{background:rgba(255,224,102,0.08);border-color:rgba(255,224,102,0.25);transform:scale(0.98)}
.fc-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:9px}
.fc h3{font-size:12px;font-weight:600;color:#fff;margin-bottom:3px}
.fc p{font-size:10px;color:rgba(255,255,255,0.38);line-height:1.5}
.cs-badge{display:inline-block;background:rgba(255,224,102,0.15);color:#ffe066;font-size:8px;font-weight:700;padding:2px 6px;border-radius:7px;margin-left:4px;letter-spacing:0.04em;vertical-align:middle}

/* POTW */
.potw-card{border-radius:14px;overflow:hidden;position:relative;height:460px;cursor:pointer;background:linear-gradient(135deg,#0a1628,#132540)}
.potw-img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 0.4s}
.potw-badge{position:absolute;top:14px;left:14px;background:#ffe066;color:#1a2a00;font-size:10px;font-weight:700;padding:5px 11px;border-radius:18px;letter-spacing:0.04em}
.potw-info{position:absolute;bottom:0;left:0;right:0;padding:18px;background:linear-gradient(to top,rgba(0,0,0,0.88),transparent)}
.potw-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:3px}
.potw-meta{font-size:11px;color:rgba(255,255,255,0.65)}
.potw-hearts{position:absolute;top:14px;right:14px;display:flex;align-items:center;gap:5px;background:rgba(0,0,0,0.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:5px 11px;border-radius:18px;font-size:12px;color:#fff;cursor:pointer;border:none}

/* GALLERY */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}
.gallery-item{border-radius:11px;overflow:hidden;position:relative;height:160px;cursor:pointer}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s}
.gallery-item:active img{transform:scale(1.04)}
.gi-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,transparent 55%);opacity:0;transition:opacity 0.3s}
.gallery-item:hover .gi-overlay{opacity:1}
.gi-info{position:absolute;bottom:8px;left:10px;right:10px;opacity:0;transition:opacity 0.3s}
.gallery-item:hover .gi-info{opacity:1}
.gi-info p{font-size:11px;font-weight:600;color:#fff}
.gi-info span{font-size:10px;color:rgba(255,255,255,0.65)}
.gi-hearts{position:absolute;top:7px;right:7px;background:rgba(0,0,0,0.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:12px;padding:4px 8px;font-size:10px;color:#fff;cursor:pointer;border:none}
.gi-hearts:active{background:rgba(255,80,80,0.6)}

/* UPLOAD */
.upload-card{background:rgba(255,255,255,0.04);border:2px dashed rgba(255,224,102,0.3);border-radius:14px;padding:28px 18px;text-align:center;cursor:pointer;transition:all 0.2s}
.upload-card:active{background:rgba(255,224,102,0.06);border-color:rgba(255,224,102,0.6)}
.upload-card h3{font-size:15px;font-weight:700;color:#fff;margin-bottom:7px;margin-top:9px}
.upload-card p{font-size:12px;color:rgba(255,255,255,0.45);margin-bottom:14px;line-height:1.6}
.upload-btn{background:#ffe066;color:#1a2a00;font-size:13px;font-weight:700;padding:10px 22px;border-radius:9px;border:none;cursor:pointer}
.upload-prize{display:inline-flex;align-items:center;gap:6px;background:rgba(255,224,102,0.1);border:1px solid rgba(255,224,102,0.25);border-radius:9px;padding:7px 13px;margin-top:10px;font-size:11px;color:rgba(255,255,255,0.7)}

/* MODALS */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.78);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:16px}
.modal-bg.open{display:flex}
.modal-bg .modal{background:#0d1d30;border:1px solid rgba(255,255,255,0.12);border-radius:18px;padding:26px 20px;width:100%;max-width:460px;position:relative;max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0;box-shadow:none}
.modal-bg .modal h3{font-size:17px;font-weight:700;color:#fff;margin-bottom:5px}
.modal-bg .modal p{font-size:12px;color:rgba(255,255,255,0.5);margin-bottom:18px}
.modal-bg .modal-close{position:absolute;top:13px;right:15px;background:rgba(255,255,255,0.08);border:none;color:#fff;font-size:12px;padding:6px 11px;border-radius:7px;cursor:pointer;display:block}
.form-group{margin-bottom:12px}
.form-label{font-size:10px;font-weight:600;color:rgba(255,255,255,0.55);margin-bottom:5px;display:block;letter-spacing:0.04em}
.form-input{width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:9px;padding:11px 13px;font-size:15px;color:#fff;outline:none;-webkit-appearance:none;transition:border-color 0.2s}
.form-input:focus{border-color:rgba(255,224,102,0.5)}
.form-input::placeholder{color:rgba(255,255,255,0.22)}
.drop-zone{border:2px dashed rgba(255,224,102,0.3);border-radius:11px;padding:22px;text-align:center;cursor:pointer;margin-bottom:12px}
.drop-zone:active{border-color:rgba(255,224,102,0.6);background:rgba(255,224,102,0.04)}
.modal-bg .drop-zone p{font-size:12px;color:rgba(255,255,255,0.4);margin-top:6px}
.submit-btn{width:100%;background:#ffe066;color:#1a2a00;font-size:14px;font-weight:700;padding:13px;border-radius:10px;border:none;cursor:pointer;margin-top:4px}
.submit-btn:active{background:#ffd700}

/* COMING SOON */
/* COMING SOON SURFACES ARE IN FLOW. They were position:fixed;inset:0;z-index:150 - a full
   viewport overlay - and csOpen locked the body behind it. That made the canonical footer
   structurally unreachable on every one of these surfaces, on desktop and mobile alike, and put
   the waitlist CTA below the fold with no way to scroll to it on 58% of a desktop window. The
   footer is product and internal-link architecture (030a133); this overlay predates it
   (0b31082) and the two were never reconciled. In flow the page simply scrolls, and the footer
   arrives because it is already the last element in the body.
   position:relative REPLACES position:fixed rather than simply going away: .cs-dark and
   .cs-close are position:absolute and were resolving against the fixed panel. Without a
   containing block here the scrim would size itself to the whole document. */
.cs-page{display:none;position:relative;background-size:cover;background-position:center}
/* min-height keeps the full-bleed identity when the content is short, and lets the section grow
   when it is not - which is what removes the clipping rather than hiding it. The explicit top
   and bottom padding is the breathing room: justify-content:center only yields space while the
   content is shorter than its box, so on every surface whose content had grown past that the
   space had already collapsed to exactly 0. Padding does not collapse. */
.cs-page.open{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:56px 20px 72px;box-sizing:border-box}
/* WHILE A SURFACE IS OPEN, HOME STANDS DOWN. The overlay used to cover Home; in flow the
   surface would otherwise be wedged between Home's sections. These are the region's own
   content children - the surface itself, the modals and the other panels are untouched, and
   the footer is outside the region entirely, so it is never hidden by this. */
/* THE HEADER ANCHORS, ON THIS SCREEN ONLY. The shared chrome centres its contents in a 1100px
   column, so its outer anchors drift inward as the screen grows: the branding sits 90px from the
   left at 1280, 250px at 1600 and 410px at 1920, and the token pill and account control mirror it
   on the right. Every ordinary page anchors at a constant 24px from each edge at every width, so
   on a wide screen the Coming Soon header reads as pulled in and squeezed against its own centre
   links while the ordinary pages do not.
   SCOPED TO THE OPEN SURFACE AND NOTHING ELSE. body.cs-surface-open exists only while a Coming
   Soon surface is open on Home, so this cannot reach another page, or Home itself when closed.
   The shared chrome keeps its own rule and its approved bytes; nothing here changes what the
   header DOES - only how far out its two ends sit, which is the whole repair. */
/* AND THE SAME TWO ANCHORS ON HOME ITSELF. The rule above fixed the Coming Soon open state; the
   ordinary Home landing screen still centred its header in the 1100px column, so the branding sat
   90px in at 1280 and 410px in at 1920 while every other page anchors at a constant 24px. Home now
   matches the reference the owner locked.
   KEYED ON #homeTop, WHICH ONLY HOME HAS, and that choice is doing real work. styles/main.css is
   also served to /privacy and /terms, which carry the same shared header and must not move - a
   bare .cwa-chrome-inner rule would have taken all three. A structural hook also behaves the same
   on a direct load and on a persistent arrival, because the region carries #homeTop either way; a
   class written into Home's markup would not travel through a swap, and the header would then
   differ between the two.
   NOTHING CHANGES ON A PHONE. max-width:1100px never binds below about 1140px, so at every Android
   and iOS width the inner is already full-width and this rule has no effect - which is also why
   :has() support on older iOS cannot break the mobile layout: there is nothing there to break. */
body:has(#homeTop) .cwa-chrome-inner{max-width:none}

body.cs-surface-open .cwa-chrome-inner{max-width:none}

body.cs-surface-open #blingy-swap-region > .hero,
body.cs-surface-open #blingy-swap-region > .brands,
body.cs-surface-open #blingy-swap-region > .section,
body.cs-surface-open #blingy-swap-region > .share-section{display:none}
.cs-dark{position:absolute;inset:0;background:rgba(0,0,0,0.65)}
/* NO LONGER A SCROLL CONTAINER, and that is the desktop half of the repair. It was
   max-height:100vh with overflow-y:auto and scrollbar-width:none - a 540px column holding the
   only scrollable region on the surface, with its scrollbar hidden. On a 1280px window that is
   42% of the width: a wheel anywhere else hit .cs-dark and moved nothing, with no scrollbar to
   suggest otherwise. The page scrolls now, so the column does not need to. */
.cs-content{position:relative;z-index:10;text-align:center;max-width:540px;padding:18px;width:100%}
/* the .cs-content scrollbar rule is retired with the scroll container it hid */
.cs-tag{display:inline-block;background:rgba(255,224,102,0.2);color:#ffe066;font-size:10px;font-weight:700;letter-spacing:0.1em;padding:5px 14px;border-radius:18px;border:1px solid rgba(255,224,102,0.4);margin-bottom:10px}
.cs-icon{font-size:36px;margin-bottom:6px;display:block}
.cs-h1{font-size:30px;font-weight:700;color:#fff;line-height:1.1;margin-bottom:8px;text-shadow:0 3px 20px rgba(0,0,0,0.5)}
.cs-h1 em{font-style:normal;color:#ffe066}
.cs-desc{font-size:13px;color:rgba(255,255,255,0.82);line-height:1.6;margin-bottom:14px}
.cs-form{background:rgba(0,0,0,0.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.12);border-radius:14px;padding:16px 16px 14px;text-align:left}
.cs-form h4{font-size:13px;font-weight:700;color:#fff;margin-bottom:2px}
.cs-form p{font-size:11px;color:rgba(255,255,255,0.45);margin-bottom:11px}
.cs-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:7px}
.cs-features{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.cs-feat-pill{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:18px;padding:5px 11px;font-size:10px;color:rgba(255,255,255,0.6);cursor:pointer;transition:all 0.2s;user-select:none;-webkit-user-select:none}
.cs-feat-pill.selected{background:rgba(255,224,102,0.15);border-color:rgba(255,224,102,0.45);color:#ffe066}
.cs-close{position:absolute;top:16px;right:16px;z-index:20;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:#fff;font-size:13px;padding:8px 14px;border-radius:8px;cursor:pointer}

/* DEMO */
.demo-overlay{display:none;position:fixed;inset:0;z-index:100;background:#000}
.demo-overlay.open{display:flex;flex-direction:column}
.demo-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease-in-out;background-size:cover;background-position:center}
.demo-slide.active{opacity:1}
.demo-dark{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0.35),rgba(0,0,0,0.72))}
.demo-wrap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 20px}
.demo-content{position:relative;z-index:10;text-align:center;max-width:600px;width:100%}
.demo-tag{display:inline-block;background:rgba(255,224,102,0.2);color:#ffe066;font-size:10px;font-weight:700;letter-spacing:0.12em;padding:5px 14px;border-radius:18px;border:1px solid rgba(255,224,102,0.4);margin-bottom:16px}
.demo-h2{font-size:36px;font-weight:700;color:#fff;line-height:1.1;margin-bottom:12px;text-shadow:0 3px 20px rgba(0,0,0,0.5)}
.demo-h2 em{font-style:normal;color:#ffe066}
.demo-desc{font-size:15px;color:rgba(255,255,255,0.85);line-height:1.7;text-shadow:0 1px 8px rgba(0,0,0,0.4)}
.demo-nav-row{position:absolute;bottom:36px;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:center;gap:14px;padding:0 20px}
.demo-btn{background:rgba(255,255,255,0.12);color:#fff;font-size:13px;font-weight:600;padding:11px 22px;border-radius:10px;border:1px solid rgba(255,255,255,0.3);cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.demo-btn:active{background:rgba(255,255,255,0.22)}
.demo-btn-next{background:#ffe066;color:#1a2a00;border:none}
.demo-btn-next:active{background:#ffd700}
.demo-close{position:absolute;top:18px;right:18px;z-index:30;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:#fff;font-size:13px;padding:7px 13px;border-radius:8px;cursor:pointer}
.demo-steps{display:flex;gap:6px;align-items:center}
.demo-step{width:22px;height:4px;border-radius:3px;background:rgba(255,255,255,0.25);transition:all 0.3s;cursor:pointer;border:none;padding:0}
.demo-step.on{background:#ffe066;width:34px}

/* MOBILE RESPONSIVE */
@media (max-width:768px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .hamburger{display:flex}
  .nav{padding:12px 16px}
  .logo-text{font-size:15px}
  .hero-h1{font-size:28px}
  .hero-sub{font-size:13px;margin-bottom:22px}
  .hero-content{top:46%;width:94%}
  .dest-badge{font-size:10px;padding:5px 13px;margin-bottom:14px}
  .btn-main,.btn-ghost{font-size:13px;padding:12px 20px}
  .dots{bottom:76px}
  .stats-bar{flex-wrap:wrap}
  .stat-item{flex:50%;padding:9px 6px;border-right:none;border-bottom:1px solid rgba(255,255,255,0.07)}
  .stat-item:nth-child(1),.stat-item:nth-child(2){border-right:1px solid rgba(255,255,255,0.07)}
  .stat-item:nth-child(3),.stat-item:nth-child(4){border-bottom:none}
  /* SCOPED TO MATCH THE RULE IT OVERRIDES. Raising the base rule to .stat-item .stat-num
     would have left this one a specificity below it, so the narrow-viewport size silently stopped
     applying and Home kept 18px stat numbers on a phone. Same scope, same cascade as before. */
  .stat-item .stat-num{font-size:15px}
  .section{padding:28px 16px}
  .section-h2{font-size:20px}
  .brands{padding:16px 16px 12px}
  .feat-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .fc{padding:14px 11px}
  .fc-icon{width:32px;height:32px;font-size:15px}
  .fc h3{font-size:11px}
  .fc p{font-size:10px}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:7px}
  .gallery-item{height:140px}
  .potw-card{height:340px}
  .potw-title{font-size:14px}
  .upload-card{padding:22px 16px}
  .cs-h1{font-size:26px}
  .cs-desc{font-size:13px}
  .cs-form-grid{grid-template-columns:1fr}
  .demo-h2{font-size:26px}
  .demo-desc{font-size:13px}
  .demo-btn{font-size:12px;padding:10px 16px}
  .modal-bg .modal{padding:22px 16px}
}
@media (max-width:380px){
  .hero-h1{font-size:24px}
  .cs-h1{font-size:22px}
  .demo-h2{font-size:22px}
}

/* ==================================================
   INCLUSIVE TRAVEL DROPDOWN (Added in v11 split)
   ================================================== */
.nav-dropdown{position:relative;display:inline-block}
.nav-dropdown-trigger{background:none;border:none;color:rgba(255,255,255,0.85);font-size:13px;font-weight:500;padding:8px 12px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-family:inherit;transition:background 0.2s,color 0.2s}
.nav-dropdown-trigger:hover,.nav-dropdown.open .nav-dropdown-trigger{background:rgba(255,255,255,0.08);color:#fff}
.nav-dropdown-trigger .caret{font-size:9px;transition:transform 0.2s}
.nav-dropdown.open .nav-dropdown-trigger .caret{transform:rotate(180deg)}
.nav-dropdown-menu{display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:rgba(10,22,40,0.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:8px;min-width:260px;box-shadow:0 12px 40px rgba(0,0,0,0.5);z-index:50}
.nav-dropdown.open .nav-dropdown-menu{display:block}
.nav-dd-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;text-decoration:none;color:rgba(255,255,255,0.85);font-size:13px;transition:background 0.15s;cursor:pointer}
.nav-dd-link:hover{background:rgba(255,224,102,0.08);color:#fff}
.nav-dd-icon{font-size:18px;flex-shrink:0}
.nav-dd-text{display:flex;flex-direction:column;line-height:1.3}
.nav-dd-text strong{font-size:13px;font-weight:600;color:#fff}
.nav-dd-text span{font-size:10px;color:rgba(255,255,255,0.5);margin-top:2px}
.nav-dd-badge{background:rgba(255,224,102,0.15);color:#ffe066;font-size:8px;font-weight:700;padding:2px 6px;border-radius:6px;margin-left:auto;letter-spacing:0.05em;flex-shrink:0}

/* Mobile section divider in hamburger menu */
.mobile-section-label{font-size:10px;font-weight:700;color:rgba(255,224,102,0.7);letter-spacing:0.14em;padding:14px 18px 6px;text-transform:uppercase;border-top:1px solid rgba(255,255,255,0.06);margin-top:8px}
.mobile-section-label:first-of-type{border-top:none;margin-top:0}

/* Inclusive filter pills (on Matchmaker CS page) */
.incl-filters{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 12px;justify-content:center}
.incl-pill{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);border-radius:20px;padding:7px 13px;font-size:11px;color:rgba(255,255,255,0.75);cursor:pointer;transition:all 0.2s;display:inline-flex;align-items:center;gap:5px;user-select:none;-webkit-user-select:none}
.incl-pill:hover{border-color:rgba(255,224,102,0.4)}
.incl-pill.selected{background:rgba(255,224,102,0.18);border-color:rgba(255,224,102,0.55);color:#ffe066}
.incl-pill .ipi{font-size:13px}

/* ==================================================
   LIGHTBOX (Photo viewer with swipe, captions, keyboard)
   ================================================== */
.lightbox{display:none;position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);align-items:center;justify-content:center;padding:20px;user-select:none;-webkit-user-select:none}
.lightbox.open{display:flex}
.lightbox-img-wrap{position:relative;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:16px}
.lightbox-img{max-width:100%;max-height:78vh;border-radius:14px;box-shadow:0 20px 80px rgba(0,0,0,0.6);object-fit:contain;animation:lbFadeIn 0.25s ease-out}
@keyframes lbFadeIn{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
.lightbox-caption{background:rgba(0,0,0,0.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:12px 20px;text-align:center;max-width:620px}
.lightbox-caption h4{font-size:15px;font-weight:700;color:#fff;margin-bottom:4px}
.lightbox-caption p{font-size:12px;color:rgba(255,255,255,0.65)}
.lightbox-close{position:absolute;top:18px;right:18px;z-index:320;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);color:#fff;font-size:14px;padding:10px 16px;border-radius:10px;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-weight:600}
.lightbox-close:hover{background:rgba(255,255,255,0.25)}
.lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:315;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.22);color:#fff;font-size:20px;width:48px;height:48px;border-radius:50%;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.lightbox-arrow:hover{background:rgba(255,255,255,0.25);transform:translateY(-50%) scale(1.08)}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
.lightbox-counter{position:absolute;top:20px;left:20px;background:rgba(0,0,0,0.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:rgba(255,255,255,0.85);font-size:12px;padding:7px 14px;border-radius:20px;border:1px solid rgba(255,255,255,0.12);font-weight:600;letter-spacing:0.04em}

/* Click hint on photos */
.potw-card,.gallery-item{position:relative}
.potw-card::after{content:'🔍 Click to expand';position:absolute;bottom:14px;right:14px;background:rgba(0,0,0,0.55);color:#fff;font-size:10px;padding:5px 10px;border-radius:14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity 0.2s;pointer-events:none;font-weight:600;letter-spacing:0.03em}
.potw-card:hover::after{opacity:1}

@media (max-width:640px){
  .lightbox-arrow{width:42px;height:42px;font-size:17px}
  .lightbox-prev{left:10px}
  .lightbox-next{right:10px}
  .lightbox-close{top:12px;right:12px;padding:8px 13px;font-size:12px}
  .lightbox-counter{top:14px;left:14px;font-size:11px;padding:6px 11px}
  .lightbox-img{max-height:70vh}
  .lightbox-caption{padding:10px 16px;max-width:92%}
  .lightbox-caption h4{font-size:14px}
  .lightbox-caption p{font-size:11px}
  .potw-card::after{opacity:1;font-size:9px;bottom:10px;right:10px}
}

/* ==================================================
   PROFILE NAV LINK (v15 - distinct account styling)
   ================================================== */
.nav-link-account{background:rgba(255,224,102,0.08);border:1px solid rgba(255,224,102,0.2)}
.nav-link-account:hover,.nav-link-account:focus{background:rgba(255,224,102,0.15);border-color:rgba(255,224,102,0.35)}

/* ==================================================
   MASTER WAITLIST FINALE (v16 - tour slide with form)
   ================================================== */
.demo-slide-form .demo-wrap{padding:24px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch;align-items:flex-start;padding-top:min(12vh,80px)}
.demo-content-form{max-width:560px;width:100%}
.master-waitlist{background:rgba(0,0,0,0.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.14);border-radius:16px;padding:22px 20px;margin-top:20px;text-align:left}
.submit-btn-large{width:100%;font-size:15px;padding:15px;margin-top:8px;box-shadow:0 6px 22px rgba(255,224,102,0.35)}

/* Thank-you screen */
.ty-check{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#52b788,#88e0a8);display:flex;align-items:center;justify-content:center;font-size:36px;color:#fff;font-weight:700;margin:0 auto 20px;box-shadow:0 8px 32px rgba(82,183,136,0.4);animation:tyPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both}
@keyframes tyPop{0%{transform:scale(0) rotate(-30deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.ty-share{margin-top:28px;background:rgba(0,0,0,0.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.12);border-radius:14px;padding:18px 16px}
.ty-share-label{font-size:13px;color:rgba(255,255,255,0.8);margin-bottom:12px;font-weight:600}
.ty-share-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ty-btn{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:12px;font-weight:600;padding:9px 14px;border-radius:10px;cursor:pointer;transition:all 0.2s}
.ty-btn:hover{background:rgba(255,224,102,0.15);border-color:rgba(255,224,102,0.35);color:#ffe066}
.ty-btn:active{transform:scale(0.95)}

/* Pill highlight when tour preselects a feature */
.cs-feat-pill.tour-highlight{background:rgba(255,224,102,0.25);border-color:rgba(255,224,102,0.6);color:#ffe066;animation:tourPulse 1.6s ease-in-out}
@keyframes tourPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,224,102,0)}50%{box-shadow:0 0 0 5px rgba(255,224,102,0.2)}}

@media (max-width:640px){
  .master-waitlist{padding:18px 16px}
  .ty-share-btns{gap:6px}
  .ty-btn{font-size:11px;padding:8px 11px}
  .ty-check{width:60px;height:60px;font-size:30px}
  .demo-slide-form .demo-wrap{padding-top:60px}
}

/* ==================================================
   HOMEPAGE SHARE SECTION (v17)
   ================================================== */
.share-section{padding:44px 20px;background:linear-gradient(135deg,#0a1628 0%,#0c1e38 50%,#0a1628 100%);border-top:1px solid rgba(255,224,102,0.08);border-bottom:1px solid rgba(255,224,102,0.08);text-align:center;position:relative;overflow:hidden}
.share-section::before{content:'';position:absolute;top:-40%;left:-10%;right:-10%;bottom:-40%;background:radial-gradient(ellipse at center,rgba(255,224,102,0.06),transparent 60%);pointer-events:none}
.share-inner{position:relative;z-index:2;max-width:620px;margin:0 auto}
.share-emoji{font-size:36px;display:block;margin-bottom:12px;animation:shipFloat 4s ease-in-out infinite}
@keyframes shipFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.share-title{font-size:22px;font-weight:700;color:#fff;margin-bottom:8px;line-height:1.25}
.share-title em{font-style:normal;color:#ffe066}
.share-sub{font-size:13px;color:rgba(255,255,255,0.55);margin-bottom:22px;line-height:1.6}
.share-btns{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.share-btn{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);color:rgba(255,255,255,0.9);font-size:13px;font-weight:600;padding:11px 18px;border-radius:11px;cursor:pointer;transition:all 0.2s;-webkit-tap-highlight-color:transparent;line-height:normal}
.share-btn:hover{background:rgba(255,224,102,0.15);border-color:rgba(255,224,102,0.4);color:#ffe066;transform:translateY(-1px)}
.share-btn:active{transform:scale(0.96)}
.share-btn span{font-size:15px}

@media (max-width:640px){
  .share-section{padding:32px 16px}
  .share-title{font-size:19px}
  .share-sub{font-size:12px}
  .share-btn{font-size:12px;padding:10px 14px;gap:5px}
  .share-btn span{font-size:14px}
}

/* ==================================================
   CONSENT CHECKBOX (v18 - legal compliance)
   ================================================== */
.consent-wrap{margin:8px 0 12px}
.consent-label{display:flex;align-items:flex-start;gap:9px;cursor:pointer;padding:4px 2px;user-select:none;-webkit-user-select:none}
.consent-check{flex-shrink:0;width:16px;height:16px;margin-top:2px;accent-color:#ffe066;cursor:pointer}
.consent-label span{font-size:11px;color:rgba(255,255,255,0.6);line-height:1.5}
.consent-label:hover span{color:rgba(255,255,255,0.8)}

/* ==================================================
   HIDE SCROLLBARS (v19 - polish pass)
   Keep scroll functional, hide the ugly bar
   ================================================== */
.cs-content,.modal-bg .modal,.mobile-menu,.demo-slide-form .demo-wrap{scrollbar-width:none;-ms-overflow-style:none}
.cs-content::-webkit-scrollbar,
.modal-bg .modal::-webkit-scrollbar,
.mobile-menu::-webkit-scrollbar,
.demo-slide-form .demo-wrap::-webkit-scrollbar{display:none;width:0;height:0}