.site-header{position:relative;z-index:20;flex-wrap:nowrap;justify-content:space-between}
.menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;gap:9px;min-width:86px;height:40px;margin-left:auto;padding:0 10px;border:1px solid #a10bc525;border-radius:12px;background:#f8eafa;color:#a10bc5;cursor:pointer;font:inherit}
.menu-toggle:hover{background:#f2ddf7}.menu-text{font-size:12px;font-weight:650;line-height:1}
.menu-lines{display:flex;flex-direction:column;gap:5px}.menu-lines i{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .22s,opacity .22s}
.menu-toggle[aria-expanded=true] .menu-lines i:first-child{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded=true] .menu-lines i:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] .menu-lines i:last-child{transform:translateY(-7px) rotate(-45deg)}
.header-menu[hidden]{display:none!important}.header-menu{position:absolute;top:calc(100% - 4px);right:0;width:min(300px,calc(100vw - 32px));padding:10px;display:flex;flex-direction:column;background:#fff;border:1px solid #ecd8f0;border-radius:20px;box-shadow:0 18px 46px #6b177426;animation:menu-in .2s ease-out}
.header-menu a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 14px;border-radius:12px;color:#28112e;font-size:16px;font-weight:650;text-decoration:none;line-height:1.35}
.header-menu a span{color:#a10bc5}.header-menu a:hover,.header-menu a:focus-visible{background:#fbf0fd}
.demo-notice{padding-block:12px 20px;margin-block:0;color:#60738d;font-size:12px;line-height:1.5}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.header-menu,.menu-lines i{animation:none!important;transition:none!important}}
@media(max-width:760px){.site-header.wrap{width:calc(100% - 36px);min-height:68px;padding-block:14px;gap:8px;box-sizing:border-box}.site-header .logo{display:inline-flex;align-items:center;font-size:21px;line-height:1.2;gap:6px}.site-header .logo img{width:34px;height:34px}.site-header .menu-toggle{width:86px;height:40px;margin:0 0 0 auto}}
/* Mobile composition: stronger brand header, broad hero, aligned content. */
@media (max-width: 760px) {
  .site-header.wrap {
    width:calc(100% - 40px);
    min-height:80px;
    padding-block:18px;
    gap:12px;
  }
  .site-header .logo { font-size:23px; line-height:1.15; gap:8px; letter-spacing:-.035em; }
  .site-header .logo img { width:40px; height:40px; border-radius:11px; }
  .site-header .menu-toggle { height:40px; width:86px; }
  .hero.wrap { width:calc(100% - 16px); margin-top:0; border-radius:24px; padding-inline:24px; padding-top:32px; }
  .header-menu { right:0; top:calc(100% - 6px); }
}
@media (max-width:350px) {
  .site-header.wrap { width:calc(100% - 32px); gap:8px; }
  .site-header .logo { font-size:21px; gap:6px; }
  .site-header .logo img { width:36px; height:36px; }
}

/* Align header contents with the hero's rounded shoulders. */
@media (max-width: 760px) {
  .site-header.wrap { width:calc(100% - 36px); }
}
@media (max-width: 350px) {
  .site-header.wrap { width:calc(100% - 36px); }
}