/* Shared by the static pages (homepage, /google-offer), CHANGES-dapperdev.md §111:
   the blog's header (white pill, logo, logo strip, colour-mode switch, menu), the sticky
   "Map my first 10 polls" button from the start, and dark mode. */

/* ── header: the blog's, value for value (app/components/light/common/HeaderLanding.vue, ThemeSwitcher.vue,
   MobileMenu.vue, MenuToggleButton.vue; Tailwind sizes written out, primary #FF4D17) ── */
.nav{top:16px;left:12px;right:12px;height:64px;gap:8px;padding:0 8px 0 16px;background:#fff;color:#000;border:1px solid rgba(0,0,0,.2);border-radius:9999px;box-shadow:0 25px 50px -12px rgba(0,0,0,.15);backdrop-filter:none;-webkit-backdrop-filter:none;transition:transform .5s cubic-bezier(.4,0,.2,1)}
@media(min-width:640px){.nav{gap:12px}}
@media(min-width:768px){.nav{left:24px;right:24px;padding:0 8px 0 24px}}
/* smart sticky: slid up out of view while scrolling down (sp-site.js) */
.nav.sph-hide{transform:translateY(-140%)}
.nav .lg{width:44px;height:44px;flex:0 0 44px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.7);border-radius:50%;padding:0;background:transparent} /* round, as on the app header (§120) */
.nav .lg img{height:28px;width:auto;display:block}
.nav .tick{display:block;flex:1;min-width:0}
.nav .tick img{height:calc(var(--h)*1.05px)} /* the blog bar's logo size on every width */
.nav .tickn,.tickm{display:none!important}
/* round icon buttons: w-9 h-9, sm:w-10 sm:h-10, border black/20 */
.sph-b,.nav .mnb{display:flex!important;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 36px;padding:0;margin:0;border-radius:9999px;border:1px solid rgba(0,0,0,.2);background:transparent;color:#000;cursor:pointer;transition:transform .15s}
@media(min-width:640px){.sph-b,.nav .mnb{width:40px;height:40px;flex-basis:40px}}
.sph-b:active,.nav .mnb:active{transform:scale(.95)}
.sph-b svg{width:16px;height:16px;display:block}
.sph-th{flex:0 0 auto;display:flex}
/* hamburger that turns into an X */
.sph-bars{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:20px;height:20px}
.sph-bars i{display:block;width:20px;height:2px;border-radius:9999px;background:currentColor;transition:transform .3s ease-out,opacity .3s ease-out}
.nav .mnb.open .sph-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav .mnb.open .sph-bars i:nth-child(2){opacity:0;transform:translateX(8px)}
.nav .mnb.open .sph-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* "Book Your Call": desktop only (hidden md:flex) */
.nav .btn.sm{display:none!important}
@media(min-width:768px){.nav .btn.sm{display:inline-flex!important;align-items:center;gap:8px;opacity:1!important;pointer-events:auto!important;margin:0;height:auto;padding:12px 20px;border:2px solid #ff4d17;background:#ff4d17;color:#fff;border-radius:9999px;font-size:14px;line-height:20px;font-weight:700;letter-spacing:.05em;flex:0 0 auto;box-shadow:0 10px 15px -3px rgba(255,77,23,.25),0 4px 6px -4px rgba(255,77,23,.25);transition:transform .3s}
.nav .btn.sm:hover{transform:scale(1.05);background:rgba(255,77,23,.9)}}

/* menu card (MobileMenu.vue): fixed under the bar, 280px, icon rows, black "Book Your Call" bar */
.sph-menu{position:fixed;top:88px;right:12px;z-index:99999;width:280px;overflow:hidden;background:rgba(255,255,255,.95);color:#18181b;border:1px solid rgba(0,0,0,.1);border-radius:24px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);transform-origin:top right;animation:sph-in .25s cubic-bezier(.25,.46,.45,.94)}
.sph-menu[hidden]{display:none}
@media(min-width:640px){.sph-menu{right:24px}}
@media(min-width:768px){.sph-menu{right:32px}}
@keyframes sph-in{from{opacity:0;transform:translateY(-8px) scale(.92)}to{opacity:1;transform:none}}
.sph-mn{display:flex;flex-direction:column;gap:4px;padding:8px;font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.025em}
.sph-mn a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;color:#27272a;text-decoration:none;transition:background-color .15s,color .15s}
.sph-mn a svg{width:20px;height:20px;flex:0 0 20px;color:#71717a;transition:color .15s}
.sph-mn a:hover,.sph-mn a:focus-visible{background:rgba(255,77,23,.1);color:#ff4d17}
.sph-mn a:hover svg,.sph-mn a:focus-visible svg{color:#ff4d17}
.sph-mf{background:#000;color:rgba(255,255,255,.8);font-weight:700}
.sph-mf:hover{color:#fff}
.sph-mf button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:12px;border:0;border-radius:16px;background:transparent;color:inherit;font:inherit;font-size:16px;line-height:24px;cursor:pointer}
.sph-mf svg{width:20px;height:20px}

/* colour-mode dropdown (ThemeSwitcher.vue): placed under its button by sp-site.js */
.sph-dd{position:fixed;z-index:99999;width:144px;padding:6px;display:flex;flex-direction:column;background:rgba(255,255,255,.95);color:#000;border:1px solid rgba(0,0,0,.1);border-radius:16px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);transform-origin:top right;animation:sph-in .15s ease-out}
.sph-dd[hidden]{display:none}
@media(min-width:640px){.sph-dd{width:160px}}
.sph-dd button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;border:0;border-radius:12px;background:transparent;color:#374151;font:inherit;font-size:12px;line-height:16px;font-weight:500;cursor:pointer;text-align:left;transition:background-color .15s}
@media(min-width:640px){.sph-dd button{font-size:14px;line-height:20px}}
.sph-dd button:hover{background:rgba(0,0,0,.05)}
.sph-dd button[aria-checked="true"]{background:rgba(255,77,23,.1);color:#ff4d17;font-weight:600}
.sph-dd-l{display:flex;align-items:center;gap:10px}
.sph-dd svg{width:16px;height:16px;flex:0 0 16px}
.sph-dd .sph-ck{width:14px;height:14px;flex-basis:14px;color:#ff4d17;display:none}
.sph-dd button[aria-checked="true"] .sph-ck{display:block}

/* ── sticky "Map my first 10 polls": no override here (3 Nov, owner: hidden until scroll; CHANGES §172).
   v7.js shows it once the hero's button has scrolled away and hides it back at the top; v7.css hides it
   from 900px, where "Book Your Call" is in the bar. ── */

/* ── dark mode (html.dark, set from the blog's "app-theme" choice before paint) ──
   The header pill stays white in both modes, as on the blog. */
html.dark{color-scheme:dark;--bg:#0b0b0a;--ink:#f3f1ec;--mut:#a59e95;--line:#2b2825;--card:#171615;--or2:#2a1810;--dk:#000}
html.dark body{background:var(--bg);color:var(--ink)}
html.dark .sph-menu{background:rgba(24,24,27,.95);color:#fff;border-color:rgba(255,255,255,.1)}
html.dark .sph-mn a{color:#e4e4e7}
html.dark .sph-mn a svg{color:#a1a1aa}
html.dark .sph-mn a:hover,html.dark .sph-mn a:focus-visible{background:rgba(255,77,23,.15);color:#ff4d17}
html.dark .sph-mn a:hover svg{color:#ff4d17}
html.dark .sph-dd{background:rgba(24,24,27,.95);color:#fff;border-color:rgba(255,255,255,.1)}
html.dark .sph-dd button{color:#d1d5db}
html.dark .sph-dd button:hover{background:rgba(255,255,255,.1)}
html.dark .sph-dd button[aria-checked="true"]{color:#ff4d17;background:rgba(255,77,23,.1)}
/* cards and light buttons that hard-code white in v7.css / the pages */
html.dark :is(.btn.g,.faq details,.fc,.fd,.fin,.hw,.rcd,.fda,.feedph,.hkb .bb,.igp,.incl,.inv,.incl2,.pp,.svc>.sv){background:var(--card)}
/* press logos are black artwork: white in dark mode */
html.dark .fpc img{filter:brightness(0) invert(1);opacity:.85}