/* Serus-inspired capsule silhouette; BrightDesk OS dark glass-chrome treatment. */
@media screen {
 .header {
  width:89%;max-width:1440px;margin:16px auto;top:16px;
  height:auto;min-height:76px;padding:10px 14px 10px 24px;
  flex-wrap:nowrap;gap:24px;border-radius:999px;
  background:color-mix(in oklab,#1a1a1c 50%,transparent);
  border:1px solid rgb(255 255 255 / 12%);
  box-shadow:0 1px 2px rgb(15 23 42 / 5%),0 12px 32px rgb(15 23 42 / 11%),inset 0 1px 0 rgb(255 255 255 / 15%);
  outline:1px solid rgb(0 0 0 / 54%);outline-offset:-1px;
  -webkit-backdrop-filter:blur(28px) saturate(112%);
  backdrop-filter:blur(28px) saturate(112%);
 }
 .header nav{flex-wrap:nowrap;gap:22px;margin-left:auto}
 .header .contact-cta{border-radius:999px;padding:12px 22px}
 @media(max-width:1100px){
  .header{width:calc(100% - 40px);gap:16px}
  .header nav{gap:16px;font-size:13px}
  .header .brightdesk-logo{width:130px}
  .header .brand-divider{margin-inline:12px}
  .header .contact-cta{padding:12px 18px;font-size:13px}
 }
 @media(max-width:760px){
  .header{width:calc(100% - 24px);margin:12px auto;top:12px;padding:12px 18px;gap:8px 12px;flex-wrap:wrap;border-radius:32px}
  .header nav{order:3;width:100%;margin:0;justify-content:space-between;gap:8px;padding:0;font-size:12px}
  .header .brightdesk-logo{width:112px}
  .header .brand-divider{margin-inline:8px}
  .header .magic-logo{width:32px;height:32px}
  .header .contact-cta{padding:10px 14px;font-size:12px;min-height:40px}
 }
 @media(max-width:380px){
  .header{padding:10px 12px;column-gap:6px}
  .header .brightdesk-logo{width:96px}
  .header .brand-divider{margin-inline:6px}
  .header .magic-logo{width:28px;height:28px}
  .header .contact-cta{padding:10px 12px;font-size:11px}
 }
}

/* Shared capsule corners for page actions and demo controls. */
#main button,#main .button,#main .text-button,footer button,.mascot-stage button{border-radius:999px}

.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero-actions .hero-proposal{background:#ffffff;border:1px solid #ffffff;color:var(--ink)}
.hero-actions .hero-proposal:hover{background:#ffffff;border-color:#ffffff}
@media(max-width:620px){.hero-actions{gap:10px}.hero-actions .button{padding-inline:18px}}

/* Small spring-like feedback shared by actions and demo controls. */
@media(prefers-reduced-motion:no-preference){
 button,a.button,a.text-button{
  transition:translate 280ms cubic-bezier(.2,.85,.3,1.35),scale 280ms cubic-bezier(.2,.85,.3,1.35),background-color 180ms ease,border-color 180ms ease,color 180ms ease;
 }
 @media(hover:hover) and (pointer:fine){
  button:not(:disabled):hover,a.button:hover,a.text-button:hover{translate:0 -2px;scale:1.025}
 }
 button:not(:disabled):active,a.button:active,a.text-button:active{translate:0 1px;scale:.97;transition-duration:100ms}
 /* Replace the older lift so the two effects do not stack. */
 a.button:hover,button.button:hover{transform:none}
}

/* Request selectors are content cards, not pill-shaped actions. */
#main .manager-inbox button{border-radius:12px}
@media(prefers-reduced-motion:no-preference){
 #main .manager-inbox button:hover,#main .manager-inbox button:active{translate:none;scale:1}
}