/* V4: single-product campaign and opaque category navigation. Card styles stay in demo.css. */
.demo-banner{display:none!important}
.header{position:sticky;top:8px;z-index:30;isolation:auto;background:#071526}
[data-theme=light] .header{background:#fff}
.mega-panel{max-height:calc(100dvh - 110px);overflow-y:auto}
.v4-nav .mega-trigger{font:inherit;color:inherit;cursor:pointer}
.v4-nav .mega-trigger[aria-expanded=true]{color:var(--cyan)}
.mega-panel[hidden]{display:none}
.mega-panel{position:absolute;top:100%;left:0;right:0;background:#071526;color:#f5f8ff;border:1px solid var(--line);border-radius:0 0 22px 22px;box-shadow:0 24px 40px #00112630;z-index:50;text-align:left}
[data-theme=light] .mega-panel{background:#f8faff;color:#10263d}
.mega-panel-inner{position:relative;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;max-width:1120px;margin:auto;padding:34px 42px 40px}
.mega-column h2{font-size:13px;font-weight:400;color:var(--muted);margin:0 0 17px;letter-spacing:0}
.mega-column a{display:block;font-size:15px;padding:6px 0;line-height:1.4;color:inherit}
.mega-primary a{font-size:23px;font-weight:650;letter-spacing:-.6px}
.mega-column a:hover{color:var(--cyan)}
.mega-close{position:absolute;right:12px;top:8px;font-size:27px;color:var(--muted);width:36px;height:36px;cursor:pointer}
.mega-trigger:focus-visible,.mega-panel a:focus-visible,.mega-close:focus-visible,.mobile-mega summary:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:4px}
.campaign-hero{position:relative;text-align:center;overflow:hidden;background:#071526;padding:24px 20px 18px;margin-bottom:18px;color:var(--white)}
[data-theme=light] .campaign-hero{background:#f4f6f9;color:#10263d}
.campaign-hero h1{font-size:clamp(32px,3.2vw,48px);letter-spacing:-1.8px;line-height:1.12;margin:0 0 8px;font-weight:750}
.campaign-hero p{font-size:clamp(17px,1.6vw,22px);margin:0 0 15px;color:var(--muted)}
.campaign-actions{display:flex;justify-content:center;gap:12px;margin-bottom:12px}
.campaign-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 22px;border-radius:24px;font-size:14px;border:1px solid var(--cyan);color:var(--cyan)}
.campaign-actions a:first-child{background:#008ee8;border-color:#008ee8;color:white}
.campaign-visual{display:block;width:min(100%,340px);height:170px;object-fit:contain;margin:0 auto;animation:campaign-reveal 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes campaign-reveal{from{opacity:0;transform:translateY(34px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
.mobile-mega{margin-top:18px}
.mobile-mega details{border-bottom:1px solid var(--line);padding:13px 0}
.mobile-mega summary{font-size:22px;cursor:pointer;font-weight:600}
.mobile-mega .mega-column{padding:15px 4px 4px}
.mobile-mega .mega-column h2{margin-bottom:5px}
.mobile-mega .mega-column a{font-size:16px;padding:8px 0}
.mobile-mega-services{display:grid;gap:14px;margin-top:22px}
@media(max-width:760px){.campaign-hero{padding:20px 16px 14px;margin-bottom:14px}.campaign-visual{height:145px;width:280px}.campaign-actions a{padding:9px 17px}.campaign-hero h1{font-size:34px}.campaign-hero p{font-size:17px}.mega-panel{display:none}}
@media(prefers-reduced-motion:reduce){.campaign-visual{animation:none}}

/* Preserve the approved text-only service navigation on the homepage. */
body[data-page=home]>.service-nav{background:transparent;border:0;box-shadow:none;backdrop-filter:none;min-height:44px}
body[data-page=home]>.service-nav a{padding:10px 0}
/* One header, compact closed search; input reveals to the right of the magnifier. */
.header{gap:12px;padding-inline:22px}.v4-nav{gap:0}.v4-nav .nav-link{padding:12px 10px;white-space:nowrap;font-size:14px}.header-actions{gap:12px}
.header-search{position:relative;display:flex;min-width:36px;width:36px;flex:0 0 36px;padding:0;border:0;gap:0;overflow:visible}.search-toggle{display:grid;place-items:center;width:36px;height:42px;flex:0 0 36px;color:inherit}.header-search input{position:absolute;left:36px;top:0;height:42px;width:0;padding:0;opacity:0;pointer-events:none;transition:width .2s,opacity .15s;background:#071526;color:#f5f8ff;border-radius:0 12px 12px 0;z-index:55}.header-search.expanded input{width:160px;opacity:1;pointer-events:auto;padding:8px 12px;border:1px solid var(--line)}[data-theme=light] .header-search input{background:#fff;color:#10263d}

@media(max-width:760px){.header{padding:0 9px;gap:3px}.header .brand{font-size:clamp(20px,5vw,27px)}.header .header-actions{gap:3px}.header-actions .icon-button{width:32px;height:40px}.header-search{min-width:28px;width:28px;flex-basis:28px}.search-toggle{width:28px;flex-basis:28px}.header-search.expanded input{left:28px;width:112px}.header .account-button{display:grid}.header .theme-toggle svg,.header .account-button svg,.header .cart-button svg,.header .menu-button svg{width:21px;height:21px}}
@media(prefers-reduced-motion:reduce){.header-search input{transition:none}}

/* Desktop navigation occupies and centers in the actual logo-to-search space. */
html:not([data-nav-mode=mobile]) .header{display:grid;grid-template-columns:auto minmax(0,1fr) 36px auto;gap:12px;height:auto;min-height:68px;padding:10px 22px}
html:not([data-nav-mode=mobile]) .header .desktop-nav{display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:0;margin:0;min-width:0}
html:not([data-nav-mode=mobile]) .header .menu-button{display:none}
html:not([data-nav-mode=mobile]) .header .header-actions{margin:0;gap:12px}
html:not([data-nav-mode=mobile]) .header-search{display:flex;margin:0}
html:not([data-nav-mode=mobile]) .mega-panel:not([hidden]){display:block}
@media(min-width:834px) and (max-width:1250px){html:not([data-nav-mode=mobile]) .header{padding-inline:16px;gap:8px}html:not([data-nav-mode=mobile]) .header .brand{font-size:25px}html:not([data-nav-mode=mobile]) .v4-nav .nav-link{font-size:13px;padding:10px 7px}html:not([data-nav-mode=mobile]) .header .header-actions{gap:7px}}
@media(min-width:834px) and (max-width:1000px){html:not([data-nav-mode=mobile]) .header{gap:6px;padding-inline:12px}html:not([data-nav-mode=mobile]) .header .brand{font-size:23px}html:not([data-nav-mode=mobile]) .v4-nav .nav-link{font-size:12px;padding:10px 6px}html:not([data-nav-mode=mobile]) .header .header-actions{gap:4px}html:not([data-nav-mode=mobile]) .header .icon-button{width:32px}}
/* Same compact-menu boundary as Apple's global navigation. */
html[data-nav-mode=mobile] .header .desktop-nav{display:none}
html[data-nav-mode=mobile] .header .menu-button{display:grid}
html[data-nav-mode=mobile] .header-search{margin-left:auto}
html[data-nav-mode=mobile] .header .header-actions{margin-left:0}

/* Reserve bold label width so selection never moves neighboring categories. */
.header .v4-nav .nav-link{display:inline-grid;grid-template-areas:"label";border-color:transparent!important;border-radius:0;background:none!important;box-shadow:none!important;font-weight:400}
.header .v4-nav .nav-link::after{content:attr(data-label);grid-area:label;font-weight:700;visibility:hidden;pointer-events:none}
.header .v4-nav .nav-label{grid-area:label;background:linear-gradient(100deg,#00d1e9 5%,#039fff 43%,#a348f5 95%);background-clip:text;-webkit-background-clip:text;color:transparent}
.header .v4-nav .nav-link[aria-current=page]{font-weight:700}
.mobile-mega summary{background:linear-gradient(100deg,#00d1e9 5%,#039fff 43%,#a348f5 95%);background-clip:text;-webkit-background-clip:text;color:transparent;font-weight:400}
.mobile-mega details[data-current=true]>summary{font-weight:700}

/* Mobile navigation lives in the header; reclaim the former bottom-bar space. */
.mobile-nav{display:none!important}
@media(max-width:760px){.footer{padding-bottom:max(22px,env(safe-area-inset-bottom))}#toast{bottom:20px}}
@media(max-width:380px){.header{padding-inline:6px;gap:2px}.header .brand{font-size:18px}.header .header-actions{gap:2px}.header .icon-button{width:28px}.header-search{min-width:24px;width:24px;flex-basis:24px}.search-toggle{width:24px;flex-basis:24px}.header-search.expanded input{left:24px}}

/* Homepage-only device ticker: same wrap edges as the unchanged header. */
.device-ticker{display:block;height:40px;overflow:hidden;position:relative;border:0;background:none;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.device-ticker-track{display:flex;width:max-content;height:100%;animation:device-ticker-scroll 110s linear infinite;will-change:transform}
.device-ticker-group{display:flex;flex:none;align-items:center}
.device-ticker-item{display:flex;align-items:center;flex:none;gap:9px;padding-right:48px;white-space:nowrap;font-size:14px;font-weight:500;line-height:1.3}
.device-ticker-item img{width:32px;height:28px;object-fit:contain;flex:none}
.device-ticker-item>span{background:linear-gradient(100deg,#00d1e9 5%,#039fff 43%,#a348f5 95%);background-clip:text;-webkit-background-clip:text;color:transparent}
.device-ticker-item strong{font-weight:700;margin-left:9px}
.device-ticker:hover .device-ticker-track,.device-ticker:focus .device-ticker-track,.device-ticker:active .device-ticker-track{animation-play-state:paused}
.device-ticker:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@keyframes device-ticker-scroll{to{transform:translateX(-50%)}}
@media(max-width:760px){.device-ticker-item{padding-right:32px}.device-ticker{mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)}}
@media(prefers-reduced-motion:reduce){.device-ticker{overflow-x:auto}.device-ticker-track{animation:none}.device-ticker-group[aria-hidden=true]{display:none}}

/* One continuous hero surface; equal natural spacing above and below the ticker. */
.campaign-stage{background:#071526;padding-top:6px}
[data-theme=light] .campaign-stage{background:#f4f6f9}
.campaign-stage .campaign-hero{padding-top:6px}
.device-ticker{z-index:3}
@media(min-width:834px){.device-ticker-item img{width:40px;height:34px}}